sharepoint fest chicago dev 201 - beyond responsive design
TRANSCRIPT
© 2014 PSC Group, LLC
DEV 201 - Beyond Responsive DesignTURNING SHAREPOINT INTO A MOBILE AND MODERN WEB APPLICATION PLATFORM
© 2014 PSC Group, LLC
Agenda
About Us?Mobile State of the
Union
Mobile & Web
StrategyMobile Web in Action
© 2014 PSC Group, LLC
4
John Head
1051 Perimeter Drive
Suite 500
Schaumburg, 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
© 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 [email protected]
© 2014 PSC Group, LLC
Please interact with us@johnhead @chrisjohnson
#spfest#letsmakespmobileawesome
© 2014 PSC Group, LLC
Polling the Audience
Let’s find out a few things about all of you
This is interactive! #spfest#letsmakespmobileawesome
© 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)
© 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You have multiple mobile devices with you at SP Fest Chicago 2014?
© 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
© 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using Sharepoint?
© 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using Sharepoint Online?
© 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using .Net?
© 2014 PSC Group, LLC
Survey Says … Please raise your hand if
You / Your company has built a mobile application for your company using Azure?
© 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
© 2014 PSC Group, LLC
Survey Says … Please raise your hand if
Your company has a BYOD (Bring Your Own Device) program.
© 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
© 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/
© 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/
© 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.
© 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/
© 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
© 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/
© 2014 PSC Group, LLC
80% of time on mobile is spent inside appsSource: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean-water/
© 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/
© 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/
© 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/
© 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/
© 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.
© 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/
© 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/
© 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/
© 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/
© 2014 PSC Group, LLC
WHAT DOES IT MEAN TO BE A “MOBILE AND MODERN WEB APPLICATION PLATFORM”
Mobile & Web Strategy
© 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
© 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
© 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…
© 2014 PSC Group, LLC
Another poll of the audience
What defines a Mobile and Modern Web
Application Platform to you?
© 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
© 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.
© 2014 PSC Group, LLC
OOB SharePoint 2013 Design: Tradeoffs
Fun
ctio
nalit
y
Usa
bili
ty
Funct
ionali
ty Usa
bili
ty
FUNCTIONALITY
USABILITY
© 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”
Funct
ionalit
y
Usa
bili
ty
© 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.
© 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
© 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
© 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
© 2014 PSC Group, LLC
SharePoint Page
Content
Navigation
Site Actions
User Presence
Suite Links
Site Settings
Global Navigation
Footer
Quick Launch
SearchPage Status
Ribbon
Site Icon
Brand
Page Layouts
Web+App Parts
• Key components of a SharePoint page:
© 2014 PSC Group, LLC
Blueprint: Seattle.master
A blueprint for a responsive design should account for all SharePoint components
© 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 Tablet Portrait
Extra-Small Mobile
?
© 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
© 2014 PSC Group, LLC
Medium+: Creation + Consumption
• Medium Tablet Productivity• Keep as many features as possible, including Ribbon
© 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
© 2014 PSC Group, LLC
Responsive Framework: Bootstrap
• Predictable response to 4 viewports
• Customizable breakpoints
• Complete toolset
• Well-documented
• Microsoft uses it in new ASP.Net MVC
projects as of VS 2013
• Theme-able: Built on LESS
getbootstrap.com
© 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:
© 2014 PSC Group, LLC
• Bootstrap LESS variables SharePoint CSS + Bootstrap CSS
• Result: download a Bootswatch theme and apply it to SharePoint
Combine Powers
© 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 360o View of
the process.
Application Modernization, Not Migration
© 2014 PSC Group, LLC
Application Modernization Roadmap
InventoryExisting
Application Portfolio
Categorize and Prioritize
Estimate Modernization
Costs
Determine Landing Platform
Network Impact Analysis
Data Center Impact Analysis
Define Security Model on
Landing Platform
EstablishTools &
Standards
Application Transformation
Data Transformation
SunsetLegacy
Environment
Develop Support and Staffing Plan
Application Modernized!
Reduce Licensing of Legacy
Environment
Define Governance
Model
Modify Infrastructure
Establish Development Environment
Specify and Procure
Production Hardware and
Software
Analysis & Design
Prepare for a more data driven, mobile, social and dynamic future
Identify opportunities to enhance processes, workflow and security
Technical Analysis
Business Value Analysis
Cultural Change Analysis
Develop Training Plan and Materials
Train End Users on Modernized
Application
ANALYZE
MODERNIZE
© 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 SharePoint Monday 12/8 Half Day Workshop 8:30 am - 12:00 PMMichael Blumenthal & Jack Fruh
ECM 104 - Case Study: Building a Public Facing Website on SharePoint 2013Tuesday – 12/93 PM – Breakout 1Michael Blumenthal & Rick Parham
SPT 105 - Governance for the Rest of UsTuesday – 12/94:20 PM – Breakout 3Mark Wroblewski & Jeff Crowell
DEV 201 - Beyond Responsive Design – Turning SharePoint into a mobile and modern web application platformWednesday – 12/108:30 AM – Breakout 7John Head & Chris Johnson