DEV 201 - Beyond Responsive Design: Turning SharePoint into a mobile and modern web application platform

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

Agenda
About Us?
Mobile State of the Union
Mobile & Web Strategy
Mobile Web in Action

About Us

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

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

Our Partners

Sue Christoph

Please interact with us
@johnhead @chrisjohnson
#spfest
#letsmakespmobileawesome

LET’S ALL GET ON THE SAME PAGE
Mobile State of the Union

Polling the Audience
Let’s find out a few things about all of you
This is interactive!
#spfest

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)

You have multiple mobile devices with you at SP Fest Chicago 2014?

You have left your laptop in your room for most of SP Fest Chicago 2014

You / Your company has built a mobile application for your company using Sharepoint?

You / Your company has built a mobile application for your company using SharepointOnline?

You / Your company has built a mobile application for your company using .Net?

You / Your company has built a mobile application for your company using Azure?

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

Your company has a BYOD (Bring Your Own Device) program.

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

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/

91% of all people on earth have a mobile phone

Image: Image courtesy of adamr/ FreeDigitalPhotos.net
More people have cell phones than running water.

56% of people own a smart phone

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

75% of all email is seen on a mobile device first –the #1 email client in the world is the iOS Mail app

80% of time on mobile is spent inside apps

81% of employed adults use at least one personally owned electronic device for business

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/

Smartphone sales edged out feature phones sales for the first time in 3Q 2013

Smartphones are forcing a 2 to 3 year upgrade cycle

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.

By 2018, 70% of the workforce will use a tablet or tablet hybrid

By 2017, 90% of the enterprise apps will be both desktop and mobile, up from 20% in 2013

By 2015, 2/3 of the workforce will own a smartphone and 40% of the workforce will be mobile.

The average CIO expects to support more than three smartphone platforms and many will have more.

WHAT DOES IT MEAN TO BE A “MOBILE AND MODERN WEB APPLICATION PLATFORM”
Mobile & Web Strategy

Mobile Experience Done Right

Mobile Experience Done Wrong

Mobile Experience Done Really Wrong

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

 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

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…

Another poll of the audience
What defines a Mobile and Modern Web Application Platform to you?

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

Other Modern and Mobile Web Application Platforms

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.

Responsive is becoming the Standard

SHAREPOINT RESPONSIVE DESIGN
Mobile Web in Action

OOB SharePoint 2013 Design: Tradeoffs
Functionality
Usability
Functionality
Usability
FUNCTIONALITY
USABILITY

“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

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.

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

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
•Sharepointfest

SharePoint != Most Web Pages
Navigation
Content
Footer
Brand
•Key components of most web pages:
•Sharepointfest

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:

Seattle.master
600+ lines
80+ components

Blueprint: Seattle.master
A blueprint for a responsive design should account for all SharePoint components

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
?

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

Medium+: Creation + Consumption
•Medium Tablet Productivity
•Keep as many features as possible, including Ribbon

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

How do we respond?

Everything has a place

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

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:

•Bootstrap LESS variables  SharePoint CSS + Bootstrap CSS
•Result: download a Bootswatchtheme and apply it to SharePoint
Combine Powers

Wrap-Up

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

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

Final Thoughts

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

Thank You
@johnhead @chrisjohns0n
#spfest

DEV 201 - Beyond Responsive Design: Turning SharePoint into a mobile and modern web application platform

More Related Content

What's hot (20)

Similar to DEV 201 - Beyond Responsive Design: Turning SharePoint into a mobile and modern web application platform (20)

More from John Head (20)

Recently uploaded (20)

DEV 201 - Beyond Responsive Design: Turning SharePoint into a mobile and modern web application platform