dev 201 - beyond responsive design: turning sharepoint into a mobile and modern web application...
DESCRIPTION
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.TRANSCRIPT
© 2014 PSC Group, LLC
DEV 201 - Beyond Responsive Design
TURNING SHAREPOINT INTO A MOBILE AND MODERN WEB APPLICATION PLATFORM
© 2014 PSC Group, LLC
Agenda
About Us?Mobile State of the Union
Mobile & Web
Strategy
Mobile Web in Action
© 2014 PSC Group, LLC
About Us
© 2014 PSC Group, LLC
4
John Head
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
© 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
6
© 2014 PSC Group, LLC
Our Partners
© 2014 PSC Group, LLC
Sue Christoph
© 2014 PSC Group, LLC
Please interact with us@johnhead @chrisjohnson
#spfest#letsmakespmobileawesome
© 2014 PSC Group, LLC
LET’S ALL GET ON THE SAME PAGE
Mobile State of the Union
© 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
Mobile Experience Done Right
© 2014 PSC Group, LLC
Mobile Experience Done Wrong
© 2014 PSC Group, LLC
Mobile Experience Done Wrong
© 2014 PSC Group, LLC
Mobile Experience Done Really Wrong
© 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 Infographichttp://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
Other Modern and Mobile Web Application Platforms
© 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
Responsive is becoming the Standard
© 2014 PSC Group, LLC
SHAREPOINT RESPONSIVE DESIGN
Mobile Web in Action
© 2014 PSC Group, LLC
OOB SharePoint 2013 Design: Tradeoffs
Fu
nct
ion
ality
Usa
bilit
y
Fu
nct
ion
ality
Usa
bilit
y
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”
Fu
nct
ion
ality
Usa
bilit
y
© 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
Seattle.master
600+lines
80+components
© 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
Done!
© 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
How do we respond?
© 2014 PSC Group, LLC
Everything has a place
© 2014 PSC Group, LLC
Everything has a place
© 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
© 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
Demo
© 2014 PSC Group, LLC
Wrap-Up
© 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
AN
ALY
ZE
MODERNIZE
© 2014 PSC Group, LLC
Final Thoughts
© 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 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
© 2014 PSC Group, LLC
Thank You
@johnhead @chrisjohns0n#spfest
#letsmakespmobileawesome