When you think about building modern and mobile applications with SharePoint, most people think about responsive design. But that is just the tip of the iceberg. In a word of MEAN and Twitter Bootstrap, mobile and modern web development means something much more. This session will cover the larger strategy around a mobile and modern web application platform and how to achieve that with SharePoint as the platform. We will then show you how we implemented this strategy on top of SharePoint 2013 and the outcome. From the high level executive strategy to the implementation details, you will walk away from this session with the knowledge and excitement on how to not just make SharePoint responsive, but how to put it into the center of your modern web development and mobile application strategy.

1. © 2014 PSC Group, LLC
DEV 201 -Beyond Responsive Design
TURNING SHAREPOINT INTO A MOBILE AND MODERN WEB APPLICATION PLATFORM

2. © 2014 PSC Group, LLC
Agenda
About Us?
Mobile State of the Union
Mobile & Web Strategy
Mobile Web in Action

3. © 2014 PSC Group, LLC
About Us

4. © 2014 PSC Group, LLC
4
John Head
jhead@psclistens.com
1051 Perimeter DriveSuite 500Schaumburg, IL 60173
(847) 517-7200
(847) 517-7600 fax
Facebook.com/johndhead
Twitter.com/johnhead
LinkedIN.com/in/johndhead
Slideshare.com/johnhead
Youtube.com/johnhead
www.johndavidhead.com
www.pscgroup.com
Facebook.com/PSCGroup
Twitter.com/PSCGroup
Linkedin.com/company/psc-group-llc
Slideshare.com/PSCGroup
Youtube.com/PSCGroup

5. © 2014 PSC Group, LLC
Chris JohnsonSenior Consultant | PSC Group
•Developer/Architect
•6 Years Building Solutions with SharePoint
•Expertise:
•Document Management
•Governance, Site Templates & Automation
•Responsive Design
•Managed Metadata
@chrisjohns0n
cnjohnson@psclistens.com

6. © 2014 PSC Group, LLC
6

7. © 2014 PSC Group, LLC
Our Partners

8. © 2014 PSC Group, LLC
Sue Christoph

9. © 2014 PSC Group, LLC
Please interact with us
@johnhead @chrisjohnson
#spfest
#letsmakespmobileawesome

10. © 2014 PSC Group, LLC
LET’S ALL GET ON THE SAME PAGE
Mobile State of the Union

11. © 2014 PSC Group, LLC
Polling the Audience
Let’s find out a few things about all of you
This is interactive!
#spfest
#letsmakespmobileawesome

12. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You have a Smartphone* with you at SP Fest Chicago 2014
*Smartphone is a phone with a web browser capable of displaying modern web pages (i.e. full fidelity ESPN)

13. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You have multiple mobile devices with you at SP Fest Chicago 2014?

14. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You have left your laptop in your room for most of SP Fest Chicago 2014

15. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using Sharepoint?

16. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using SharepointOnline?

17. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using .Net?

18. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using Azure?

19. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a native (iOS / Android / Windows Phone) application?
This is not using HTML … needs to be native downloadable from the native device app store

20. © 2014 PSC Group, LLC
Survey Says … Please raise your hand if
Your company has a BYOD (Bring Your Own Device) program.

21. © 2014 PSC Group, LLC
The polling highlighted a few trends
How mobile devices and applications are becoming standard
Mobile applications are the future
Mobile is a key strategy item for vendors
You –be it if you are a developer / admin / executive / user –are using mobile

22. © 2014 PSC Group, LLC
7 billion mobile phones on the planet, with 1.5 billion of them smartphones
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

23. © 2014 PSC Group, LLC
91% of all people on earth have a mobile phone
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

24. © 2014 PSC Group, LLC
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/
Image: Image courtesy of adamr/ FreeDigitalPhotos.net
More people have cell phones than running water.

25. © 2014 PSC Group, LLC
56% of people own a smart phone
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

26. © 2014 PSC Group, LLC
The average mobile phone user checks their phone 150 times a day.
That is an average of 158 minutes each and every day on our smartphones and tablets.
Two hours and seven minutes of that is in an app, and only 31 minutes is in a browser.
Source: http://www.kpcb.com/insights/2013-internet-trends
Image: Image courtesy of adamr/ FreeDigitalPhotos.net

27. © 2014 PSC Group, LLC
75% of all email is seen on a mobile device first –the #1 email client in the world is the iOS Mail app
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

28. © 2014 PSC Group, LLC
80% of time on mobile is spent inside apps
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

29. © 2014 PSC Group, LLC
81% of employed adults use at least one personally owned electronic device for business
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

30. © 2014 PSC Group, LLC
Tablet Sales in Fourth Quarter Could Surpass PCs, With Annual Tablet Sales Set to Eclipse Computers by 2015
Source: http://allthingsd.com/20130912/tablet-sales-in-fourth-quarter-could-surpass-pcs-with-annual-tablet-sales-set-to-eclipse-computers-by-2015/

31. © 2014 PSC Group, LLC
Smartphone sales edged out feature phones sales for the first time in 3Q 2013
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

32. © 2014 PSC Group, LLC
Smartphones are forcing a 2 to 3 year upgrade cycle
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

33. © 2014 PSC Group, LLC
Smartphones are forcing OS upgrades faster than ever – nearly 56% of iOS devices upgraded to iOS 8 in 7 weeks
Source: https://developer.apple.com/support/appstore//
As measured by the App Store on November 10, 2014.

34. © 2014 PSC Group, LLC
By 2018, 70% of the workforce will use a tablet or tablet hybrid
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

35. © 2014 PSC Group, LLC
By 2017, 90% of the enterprise apps will be both desktop and mobile, up from 20% in 2013
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

36. © 2014 PSC Group, LLC
By 2015, 2/3 of the workforce will own a smartphone and 40% of the workforce will be mobile.
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

37. © 2014 PSC Group, LLC
The average CIO expects to support more than three smartphone platforms and many will have more.
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean- water/

38. © 2014 PSC Group, LLC
WHAT DOES IT MEAN TO BE A “MOBILE AND MODERN WEB APPLICATION PLATFORM”
Mobile & Web Strategy

39. © 2014 PSC Group, LLC
Mobile Experience Done Right

40. © 2014 PSC Group, LLC
Mobile Experience Done Wrong

41. © 2014 PSC Group, LLC
Mobile Experience Done Wrong

42. © 2014 PSC Group, LLC
Mobile Experience Done Really Wrong

43. © 2014 PSC Group, LLC
The “upwardly mobile” Enterprise
•The mobile device is now the #1 used tool for accessing corporate applications
•Mobile access is seen as a cost savings
•Native vs. HTML5
Source: Symantec 2012 Global State of Mobility Survey Infographic
http://www.symantec.com/content/en/us/about/media/pdfs/b-state_of_mobility_survey_2012_infographic.en- us.pdf

44. © 2014 PSC Group, LLC
 Developing apps that integrate with information across the enterprise
 Infrastructure complexity from multiple device platforms
 Unique mobile requirements for employees/workers
 New process and business designs required for transformation opportunities
 Rapid and disruptive innovation shortening time to value requirements
 Clients operate in a “4 screen” world
These Trends Bring Business and IT Challenges
 Protection of privacy and confidential information
 Policies for client-owned smartphones and tablets
 Visibility, security and management of mobile platform requirements
Business & IT Changes
Privacy & Security
Integration

45. © 2014 PSC Group, LLC
Mobile strategy is aligned with the overall business strategy
Organization has clear funding mechanism for mobile initiatives
There is executive- level oversight for mobile initiatives
Organization has a well-defined, enterprise-wise mobile strategy
There is an established governance structure for mobile initiatives
50%
49
47%
45
44
Mobile strategy leaders have similarities…

46. © 2014 PSC Group, LLC
Another poll of the audience
What defines a Mobile and Modern Web Application Platform to you?

47. © 2014 PSC Group, LLC
Mobile Strategy for SharePoint
•Mobile and Modern Web Application Platform requirements:
•Responsive
•Modern User Interface
•User Experience (UX) Design
•Device Input (touch, pen, gesture, etc.)
•Integration with native device actions/applications
•REST APIs for extensibility

48. © 2014 PSC Group, LLC
Other Modern and Mobile Web Application Platforms

49. © 2014 PSC Group, LLC
Where do we start?
•The biggest impact on the end user is the interface and usability
•Modern theming and responsive design is our focus today.

50. © 2014 PSC Group, LLC
Responsive is becoming the Standard

51. © 2014 PSC Group, LLC
SHAREPOINT RESPONSIVE DESIGN
Mobile Web in Action

52. © 2014 PSC Group, LLC
OOB SharePoint 2013 Design: Tradeoffs
Functionality
Usability
Functionality
Usability
FUNCTIONALITY
USABILITY

53. © 2014 PSC Group, LLC
“Responsive” fills the gap
•Responsive design RESPONDS to the user’s viewport
•Viewport: width of the browser window
•Reconfigures the screen to show what’s important
•For users: functionality meets usability
•For developers: one design to rule them all
Responsive design fills the gap between “Full” and “Mobile”
Functionality
Usability

54. © 2014 PSC Group, LLC
Early demo!
Bit.ly/PSCSPResponsive
1. Select FORMS Authentication
2. Username:
sharepointfest
3. Password (case-sensitive): SPFest@Chicago2014
This is a responsive SharePoint site built on Bootstrap.

55. © 2014 PSC Group, LLC
Custom SharePoint Master Page
Page Layouts
HTML5 + JavaScript + CSS
Piece of cake!
Responsive Framework
Start with a recipe.
•Bit.ly/PSCSPResponsive
•FORMS Authentication
•Sharepointfest
•SPFest@Chicago2014

56. © 2014 PSC Group, LLC
Plan for simplicity
•Functional
•No code-behind
•No deprecation of SharePoint functionality on desktops
•Intuitive interface on smaller devices
•Technical
•Sandbox solution
•Office 365 Ready
•Use familiar web technologies
•CSS3 + LESS
•HTML5
•JavaScript + jQuery
•Bootstrap 3
•Just apply master page and go
•Bit.ly/PSCSPResponsive
•FORMS Authentication
•Sharepointfest
•SPFest@Chicago2014

57. © 2014 PSC Group, LLC
SharePoint != Most Web Pages
Navigation
Content
Footer
Brand
•Key components of most web pages:
•Bit.ly/PSCSPResponsive
•FORMS Authentication
•Sharepointfest
•SPFest@Chicago2014

58. © 2014 PSC Group, LLC
SharePoint Page
Content
Navigation
Site Actions
User Presence
Suite Links
Site Settings
Global Navigation
Footer
Quick Launch
Search
Page Status
Ribbon
Site Icon
Brand
Page Layouts
Web+AppParts
•Key components of a SharePoint page:

59. © 2014 PSC Group, LLC
Seattle.master
600+ lines
80+ components

60. © 2014 PSC Group, LLC
Blueprint: Seattle.master
A blueprint for a responsive design should account for all SharePoint components

61. © 2014 PSC Group, LLC
Plan for 4 major viewports:
A great responsive design answers this question:
How should page components respond to different viewports?
Viewport
Devices
Large +
PC / Desktop
Medium
Tablet Landscape
Small
TabletPortrait
Extra-Small
Mobile
?

62. © 2014 PSC Group, LLC
Done!

63. © 2014 PSC Group, LLC
Creation vs. Consumption
Viewport
Action
Large +
Creation + Consumption
Medium
Creation + Consumption
Small
Consumption
Extra-Small
Consumption
We found that users interact with Small and Extra-Small devices in the same way.
•The purpose of responsive design is to facilitate user actions in a simple, meaningful way
•Map actions to each viewport
•Increases simplicity
•Develop for 2 viewports
•Clear delineation between creation and consumption

64. © 2014 PSC Group, LLC
Medium+: Creation + Consumption
•Medium Tablet Productivity
•Keep as many features as possible, including Ribbon

65. © 2014 PSC Group, LLC
Small, extra-small: Consumption
• OOB layout is too cluttered
• Challenges:
• Lack of horizontal space
• Menus are hard to find + tap
• Result: content gets buried

66. © 2014 PSC Group, LLC
How do we respond?

67. © 2014 PSC Group, LLC
Everything has a place

68. © 2014 PSC Group, LLC
Everything has a place

69. © 2014 PSC Group, LLC
Responsive Framework: Bootstrap
•Predictable response to 4 viewports
•Customizable breakpoints
•Complete toolset
•Well-documented
•Microsoft uses it in new ASP.NetMVC projects as of VS 2013
•Theme-able: Built on LESS
getbootstrap.com

70. © 2014 PSC Group, LLC
Bootstrap Stylesheet
Bootstrap.css
LESS: Variables for CSS
SharePoint Stylesheet
SharePoint.css
Theme Variables
(user-defined or Bootswatch.com)
Theme Variables
(user-defined)
background-color:#0094ff;
@blue: #0094ff;
background-color: @blue;
Standard CSS:
LESS:

71. © 2014 PSC Group, LLC
•Bootstrap LESS variables  SharePoint CSS + Bootstrap CSS
•Result: download a Bootswatchtheme and apply it to SharePoint
Combine Powers

72. © 2014 PSC Group, LLC
Demo

73. © 2014 PSC Group, LLC
Wrap-Up

74. © 2014 PSC Group, LLC
Application Modernization with PSC
PSC views the process of modernizing application platforms from a holistic, enterprise perspective. Building from our Hub Services, our AMC provides extensive services in each of three critical areas –providing our clients with a 360oView of the process.
Application Modernization, Not Migration

75. © 2014 PSC Group, LLC
Application Modernization Roadmap
InventoryExisting Application PortfolioCategorize and PrioritizeEstimate Modernization CostsDetermine Landing PlatformNetwork Impact AnalysisData Center Impact AnalysisDefine Security Model on Landing PlatformEstablishTools & StandardsApplication TransformationData Transformation SunsetLegacy EnvironmentDevelop Support and Staffing Plan Application Modernized! Reduce Licensing of Legacy EnvironmentDefine Governance ModelModify InfrastructureEstablish Development EnvironmentSpecify and Procure Production Hardware and SoftwareAnalysis & DesignPrepare for a more data driven, mobile, social and dynamic futureIdentify opportunities to enhance processes, workflow and securityTechnical AnalysisBusiness Value AnalysisCultural Change AnalysisDevelop Training Plan and MaterialsTrain End Users on Modernized Application ANALYZE MODERNIZE

76. © 2014 PSC Group, LLC
Final Thoughts

77. © 2014 PSC Group, LLC
Come visit PSC at booth #3
PSC sessions at SPFest14 Chicago
WS 203 -Half Day Workshop: An Advanced Introduction to PowerShell Scripting for SharePointMonday 12/8
Half Day Workshop8:30 am -12:00 PM
Michael Blumenthal&Jack Fruh
ECM 104 -Case Study: Building a Public Facing Website on SharePoint 2013
Tuesday–12/9
3 PM –Breakout 1
Michael Blumenthal & Rick Parham
SPT 105 -Governance for the Rest of Us
Tuesday –12/9
4:20 PM –Breakout 3
Mark Wroblewski & Jeff Crowell
DEV 201 -Beyond Responsive Design –Turning SharePoint into a mobile and modern web application platform
Wednesday –12/10
8:30AM –Breakout 7
John Head & Chris Johnson

78. © 2014 PSC Group, LLC
Thank You
@johnhead @chrisjohns0n
#spfest
#letsmakespmobileawesome