SlideShare a Scribd company logo
DEV 201 - Beyond Responsive Design 
TURNING SHAREPOINT INTO A MOBILE AND MODERN WEB APPLICATION PLATFORM 
© 2014 PSC Group, LLC
© 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 
jhead@psclistens.com 
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 Johnson 
Senior 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
© 2014 PSC Group, LLC 
6
© 2014 PSC Group, LLC 
Our Partners
Sue Christoph 
© 2014 PSC Group, LLC
Please interact with us 
@johnhead @chrisjohnson 
#spfest 
#letsmakespmobileawesome 
© 2014 PSC Group, LLC
Mobile State of the Union 
© 2014 PSC Group, LLC 
LET’S ALL GET ON THE SAME PAGE
© 2014 PSC Group, LLC 
Polling the Audience 
Let’s find out a few things about all of you 
This is interactive! 
#spfest 
#letsmakespmobileawesome
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
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)
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
You have multiple mobile devices 
with you at SP Fest Chicago 2014?
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
You have left your laptop in your 
room for most of SP Fest Chicago 
2014
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
You / Your company has built a 
mobile application for your 
company using Sharepoint?
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 
© 2014 PSC Group, LLC 
You / Your company has built a 
mobile application for your 
company using .Net?
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
You / Your company has built a 
mobile application for your 
company using Azure?
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
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
Survey Says … Please raise your hand if 
© 2014 PSC Group, LLC 
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 
© 2014 PSC Group, LLC
7 billion mobile phones on 
the planet, with 1.5 billion of 
them smartphones 
© 2014 PSC Group, LLC 
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/
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. 
© 2014 PSC Group, LLC 
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/
80% of time on mobile is spent inside apps 
© 2014 PSC Group, LLC 
Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean-water/
81% of employed adults use at 
least one personally owned 
electronic device for business 
© 2014 PSC Group, LLC 
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/
Smartphones are forcing OS 
upgrades faster than ever – 
nearly 56% of iOS devices 
upgraded to iOS 8 in 7 weeks 
© 2014 PSC Group, LLC 
As measured by 
the App Store on 
November 10, 
2014. 
Source: https://developer.apple.com/support/appstore//
By 2018, 70% of the 
workforce will use a tablet or 
tablet hybrid 
© 2014 PSC Group, LLC 
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/
By 2015, 2/3 of the workforce 
will own a smartphone and 
40% of the workforce will be 
mobile. 
© 2014 PSC Group, LLC 
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/
Mobile & Web Strategy 
WHAT DOES IT MEAN TO BE A “MOBILE AND MODERN WEB 
APPLICATION PLATFORM” 
© 2014 PSC Group, LLC
© 2014 PSC Group, LLC 
Mobile Experience Done Right
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 
© 2014 PSC Group, LLC 
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
These Trends Bring Business and IT Challenges 
 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 
 Protection of privacy and confidential information 
 Policies for client-owned smartphones and tablets 
 Visibility, security and management of mobile platform requirements 
 Developing apps that integrate with information across the enterprise 
 Infrastructure complexity from multiple device platforms 
 Unique mobile requirements for employees/workers 
© 2014 PSC Group, LLC 
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
Other Modern and Mobile Web Application Platforms 
© 2014 PSC Group, LLC
© 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.
Responsive is becoming the Standard 
© 2014 PSC Group, LLC
Mobile Web in Action 
© 2014 PSC Group, LLC 
SHAREPOINT RESPONSIVE DESIGN
OOB SharePoint 2013 Design: Tradeoffs 
© 2014 PSC Group, LLC 
Functionality 
Usability 
Functionality 
Usability 
USABILITY 
FUNCTIONALITY
© 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
© 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 
HTML5 + 
JavaScript + CSS 
Page Layouts 
Custom SharePoint Master 
Page 
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
• Key components of most web pages: 
© 2014 PSC Group, LLC 
SharePoint != Most Web Pages 
Navigation Content 
Footer Brand 
• 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 
Page Status Search 
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
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
© 2014 PSC Group, LLC 
How do we respond?
© 2014 PSC Group, LLC 
Everything has a place
© 2014 PSC Group, LLC 
Everything has a place
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 
© 2014 PSC Group, LLC 
getbootstrap.com
Standard CSS: LESS: 
background-color: #0094ff; @blue: #0094ff; 
background-color: @blue; 
Theme Variables 
(user-defined or 
Bootswatch.com) 
Bootstrap Stylesheet Bootstrap.css 
Theme Variables 
(user-defined) 
© 2014 PSC Group, LLC 
LESS: Variables for CSS 
SharePoint Stylesheet SharePoint.css
© 2014 PSC Group, LLC 
• Bootstrap LESS variables  
SharePoint CSS + Bootstrap 
CSS 
• Result: download a 
Bootswatch theme and 
apply it to SharePoint 
Combine Powers
Demo 
© 2014 PSC Group, LLC
© 2014 PSC Group, LLC 
Wrap-Up
Application Modernization, Not Migration 
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 360 
© 2014 PSC Group, LLC 
o 
View of the 
process.
Application Modernization Roadmap 
Data Center 
Impact Analysis 
© 2014 PSC Group, LLC 
Inventory 
Existing 
Application 
Portfolio 
Business Value 
Categorize and 
Prioritize 
Analysis 
Estimate 
Modernization 
Costs 
Determine 
Technical 
Analysis 
Landing Platform 
Network Impact 
Analysis 
Define Security 
Model on 
Landing Platform 
Establish 
Tools & 
Standards 
Application 
Transformation 
Data 
Transformation 
Specify and 
Procure 
Production 
Hardware and 
Software 
Sunset 
Legacy 
Environment 
Develop Support 
and Staffing Plan 
Application 
Modernized! 
Reduce Licensing 
of Legacy 
Environment 
Define 
Governance 
Model 
Modify 
Infrastructure 
Establish 
Development 
Environment 
Analysis & Design 
Prepare for a more data driven, 
mobile, social and dynamic future 
Identify opportunities to enhance 
processes, workflow and security 
Cultural Change 
Analysis 
Develop Training 
Plan and 
Materials 
Train End Users 
on Modernized 
Application 
ANALYZE 
MODERNIZE
© 2014 PSC Group, LLC 
Final Thoughts
Come visit PSC at booth #3 
PSC sessions at SPFest14 Chicago 
© 2014 PSC Group, LLC 
WS 203 - Half Day Workshop: An Advanced 
Introduction to PowerShell Scripting for SharePoint 
Monday 12/8 
Half Day Workshop 8: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:30 AM – Breakout 7 
John Head & Chris Johnson
Thank You 
@johnhead @chrisjohns0n 
#spfest 
#letsmakespmobileawesome 
© 2014 PSC Group, LLC

More Related Content

What's hot (20)

Ibm ibm exceptional digital experiences
Ibm ibm exceptional digital experiencesIbm ibm exceptional digital experiences
Ibm ibm exceptional digital experiences
Ana Alves Sequeira
 
IBM Experience One: Exceptional Digital Experiences
IBM Experience One: Exceptional Digital ExperiencesIBM Experience One: Exceptional Digital Experiences
IBM Experience One: Exceptional Digital Experiences
IBM Digital Experience
 
Mobile-izing Your Organization with Drupal
Mobile-izing Your Organization with DrupalMobile-izing Your Organization with Drupal
Mobile-izing Your Organization with Drupal
Acquia
 
Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?
Omobono
 
Glaster Yolanda Mobile Presentation
Glaster Yolanda Mobile Presentation Glaster Yolanda Mobile Presentation
Glaster Yolanda Mobile Presentation
YolandaGlaster
 
Investing_in_mobile_first_dev_01
Investing_in_mobile_first_dev_01Investing_in_mobile_first_dev_01
Investing_in_mobile_first_dev_01
Janice Pui Yun Tong
 
Mobile application development
Mobile application developmentMobile application development
Mobile application development
Eric Cattoir
 
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
Responsive Web Design vs. Mobile Web App:  What is best for Enterprise - Whit...Responsive Web Design vs. Mobile Web App:  What is best for Enterprise - Whit...
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
RapidValue
 
How Much Does it Cost to Build a Mobile App for iPhone & Android?
How Much Does it Cost to Build a Mobile App for iPhone & Android?How Much Does it Cost to Build a Mobile App for iPhone & Android?
How Much Does it Cost to Build a Mobile App for iPhone & Android?
Alex Sam
 
Mobile APP Development Proposal - V1.4
Mobile APP Development Proposal - V1.4Mobile APP Development Proposal - V1.4
Mobile APP Development Proposal - V1.4
Muhammad Rashed
 
Responsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web AppResponsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web App
Pamela Ireri
 
Diesel Customer Success with Salesforce Mobile & MobileCaddy
Diesel Customer Success with Salesforce Mobile & MobileCaddyDiesel Customer Success with Salesforce Mobile & MobileCaddy
Diesel Customer Success with Salesforce Mobile & MobileCaddy
MobileCaddy
 
Tablet Friendly Web Design - Best Practices for Financial Services
Tablet Friendly Web Design - Best Practices for Financial ServicesTablet Friendly Web Design - Best Practices for Financial Services
Tablet Friendly Web Design - Best Practices for Financial Services
Corporate Insight
 
Interview with parkopedia
Interview with parkopediaInterview with parkopedia
Interview with parkopedia
Maria Willamowius
 
Don't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent ItDon't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent It
DMI
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
RZasadzinski
 
Top 10 steps how to create an app for your business
Top 10 steps how to create an app for your business  Top 10 steps how to create an app for your business
Top 10 steps how to create an app for your business
FugenX
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
Katy Slemon
 
Strategies to improve the ROI on your enterprise application
Strategies to improve the ROI on your enterprise applicationStrategies to improve the ROI on your enterprise application
Strategies to improve the ROI on your enterprise application
PixelCrayons
 
Creating a mobile enterprise application business case.
Creating a mobile enterprise application business case.Creating a mobile enterprise application business case.
Creating a mobile enterprise application business case.
DMI
 
Ibm ibm exceptional digital experiences
Ibm ibm exceptional digital experiencesIbm ibm exceptional digital experiences
Ibm ibm exceptional digital experiences
Ana Alves Sequeira
 
IBM Experience One: Exceptional Digital Experiences
IBM Experience One: Exceptional Digital ExperiencesIBM Experience One: Exceptional Digital Experiences
IBM Experience One: Exceptional Digital Experiences
IBM Digital Experience
 
Mobile-izing Your Organization with Drupal
Mobile-izing Your Organization with DrupalMobile-izing Your Organization with Drupal
Mobile-izing Your Organization with Drupal
Acquia
 
Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?Mobile for B2B: Native or Web?
Mobile for B2B: Native or Web?
Omobono
 
Glaster Yolanda Mobile Presentation
Glaster Yolanda Mobile Presentation Glaster Yolanda Mobile Presentation
Glaster Yolanda Mobile Presentation
YolandaGlaster
 
Investing_in_mobile_first_dev_01
Investing_in_mobile_first_dev_01Investing_in_mobile_first_dev_01
Investing_in_mobile_first_dev_01
Janice Pui Yun Tong
 
Mobile application development
Mobile application developmentMobile application development
Mobile application development
Eric Cattoir
 
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
Responsive Web Design vs. Mobile Web App:  What is best for Enterprise - Whit...Responsive Web Design vs. Mobile Web App:  What is best for Enterprise - Whit...
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
RapidValue
 
How Much Does it Cost to Build a Mobile App for iPhone & Android?
How Much Does it Cost to Build a Mobile App for iPhone & Android?How Much Does it Cost to Build a Mobile App for iPhone & Android?
How Much Does it Cost to Build a Mobile App for iPhone & Android?
Alex Sam
 
Mobile APP Development Proposal - V1.4
Mobile APP Development Proposal - V1.4Mobile APP Development Proposal - V1.4
Mobile APP Development Proposal - V1.4
Muhammad Rashed
 
Responsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web AppResponsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web App
Pamela Ireri
 
Diesel Customer Success with Salesforce Mobile & MobileCaddy
Diesel Customer Success with Salesforce Mobile & MobileCaddyDiesel Customer Success with Salesforce Mobile & MobileCaddy
Diesel Customer Success with Salesforce Mobile & MobileCaddy
MobileCaddy
 
Tablet Friendly Web Design - Best Practices for Financial Services
Tablet Friendly Web Design - Best Practices for Financial ServicesTablet Friendly Web Design - Best Practices for Financial Services
Tablet Friendly Web Design - Best Practices for Financial Services
Corporate Insight
 
Don't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent ItDon't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent It
DMI
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
RZasadzinski
 
Top 10 steps how to create an app for your business
Top 10 steps how to create an app for your business  Top 10 steps how to create an app for your business
Top 10 steps how to create an app for your business
FugenX
 
Everything about flutter web development
Everything about flutter web developmentEverything about flutter web development
Everything about flutter web development
Katy Slemon
 
Strategies to improve the ROI on your enterprise application
Strategies to improve the ROI on your enterprise applicationStrategies to improve the ROI on your enterprise application
Strategies to improve the ROI on your enterprise application
PixelCrayons
 
Creating a mobile enterprise application business case.
Creating a mobile enterprise application business case.Creating a mobile enterprise application business case.
Creating a mobile enterprise application business case.
DMI
 

Similar to SharePoint Fest Chicago DEV 201 - Beyond Responsive Design (20)

Creating Stunning Enterprise Apps for Both Web and Mobile
Creating Stunning Enterprise Apps for Both Web and MobileCreating Stunning Enterprise Apps for Both Web and Mobile
Creating Stunning Enterprise Apps for Both Web and Mobile
Progress
 
Bringing Your Web Apps to IBM Digital Experience
Bringing Your Web Apps to IBM Digital ExperienceBringing Your Web Apps to IBM Digital Experience
Bringing Your Web Apps to IBM Digital Experience
John Head
 
Creating the Borderless Workplace
Creating the Borderless WorkplaceCreating the Borderless Workplace
Creating the Borderless Workplace
CA Technologies
 
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
John Head
 
Trends and directions in IBM i modernisation, development and mobilisation
Trends and directions in IBM i modernisation, development and mobilisationTrends and directions in IBM i modernisation, development and mobilisation
Trends and directions in IBM i modernisation, development and mobilisation
Proximity Group
 
Case Study: Worry Free Application Deployments...Really!
Case Study: Worry Free Application Deployments...Really!Case Study: Worry Free Application Deployments...Really!
Case Study: Worry Free Application Deployments...Really!
CA Technologies
 
Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...
Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...
Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...
CA API Management
 
DevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile Users
DevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile UsersDevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile Users
DevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile Users
CA Technologies
 
How to Realize the Benefits of Mobile Apps in a Marina or Boatyard
How to Realize the Benefits of Mobile  Apps in a  Marina or BoatyardHow to Realize the Benefits of Mobile  Apps in a  Marina or Boatyard
How to Realize the Benefits of Mobile Apps in a Marina or Boatyard
Exuma Technologies (DockMaster/RVMaster)
 
Una moderna visión del manifiesto Ágil
Una moderna visión del manifiesto Ágil Una moderna visión del manifiesto Ágil
Una moderna visión del manifiesto Ágil
✔Alejandro J. Román
 
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in StockholmEnterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Joel Oleson
 
A Modern Take on the Agile Manifesto
A Modern Take on the Agile ManifestoA Modern Take on the Agile Manifesto
A Modern Take on the Agile Manifesto
Jama Software
 
Eye for travel - Mobile
Eye for travel - MobileEye for travel - Mobile
Eye for travel - Mobile
Mohammad Gaber
 
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile FirstAD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
John Head
 
The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...
The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...
The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...
thinkingphones
 
Beyond the App: What makes a good mobile experience?
Beyond the App: What makes a good mobile experience? Beyond the App: What makes a good mobile experience?
Beyond the App: What makes a good mobile experience?
Digiday
 
IBM ExperienceOne for E -Commerce
IBM ExperienceOne for E -CommerceIBM ExperienceOne for E -Commerce
IBM ExperienceOne for E -Commerce
Virginia Fernandez
 
Engaging your customers through Mobile platforms
Engaging your customers through Mobile platformsEngaging your customers through Mobile platforms
Engaging your customers through Mobile platforms
Tony Phukan
 
For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...
For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...
For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...
Astek Consulting
 
Five Ways to Improve Your Mobile Testing
Five Ways to Improve Your Mobile TestingFive Ways to Improve Your Mobile Testing
Five Ways to Improve Your Mobile Testing
TechWell
 
Creating Stunning Enterprise Apps for Both Web and Mobile
Creating Stunning Enterprise Apps for Both Web and MobileCreating Stunning Enterprise Apps for Both Web and Mobile
Creating Stunning Enterprise Apps for Both Web and Mobile
Progress
 
Bringing Your Web Apps to IBM Digital Experience
Bringing Your Web Apps to IBM Digital ExperienceBringing Your Web Apps to IBM Digital Experience
Bringing Your Web Apps to IBM Digital Experience
John Head
 
Creating the Borderless Workplace
Creating the Borderless WorkplaceCreating the Borderless Workplace
Creating the Borderless Workplace
CA Technologies
 
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
IBM Digital Experience 2015 - APPLICATION MODERNIZATION IN THE DIGITAL EXPERI...
John Head
 
Trends and directions in IBM i modernisation, development and mobilisation
Trends and directions in IBM i modernisation, development and mobilisationTrends and directions in IBM i modernisation, development and mobilisation
Trends and directions in IBM i modernisation, development and mobilisation
Proximity Group
 
Case Study: Worry Free Application Deployments...Really!
Case Study: Worry Free Application Deployments...Really!Case Study: Worry Free Application Deployments...Really!
Case Study: Worry Free Application Deployments...Really!
CA Technologies
 
Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...
Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...
Truth, Lies & APIs - Ross Garrett, Director Product Marketing, CA Layer 7 @ G...
CA API Management
 
DevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile Users
DevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile UsersDevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile Users
DevOps for Mobile: Delivering a 5-Star App Experience to Your Mobile Users
CA Technologies
 
Una moderna visión del manifiesto Ágil
Una moderna visión del manifiesto Ágil Una moderna visión del manifiesto Ágil
Una moderna visión del manifiesto Ágil
✔Alejandro J. Román
 
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in StockholmEnterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Joel Oleson
 
A Modern Take on the Agile Manifesto
A Modern Take on the Agile ManifestoA Modern Take on the Agile Manifesto
A Modern Take on the Agile Manifesto
Jama Software
 
Eye for travel - Mobile
Eye for travel - MobileEye for travel - Mobile
Eye for travel - Mobile
Mohammad Gaber
 
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile FirstAD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
AD502: The Mobile Disruption: Why XPages Development is Targeting Mobile First
John Head
 
The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...
The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...
The IT Decision Maker’s Guide to Going Mobile: Save Money, Find Time, and Bri...
thinkingphones
 
Beyond the App: What makes a good mobile experience?
Beyond the App: What makes a good mobile experience? Beyond the App: What makes a good mobile experience?
Beyond the App: What makes a good mobile experience?
Digiday
 
IBM ExperienceOne for E -Commerce
IBM ExperienceOne for E -CommerceIBM ExperienceOne for E -Commerce
IBM ExperienceOne for E -Commerce
Virginia Fernandez
 
Engaging your customers through Mobile platforms
Engaging your customers through Mobile platformsEngaging your customers through Mobile platforms
Engaging your customers through Mobile platforms
Tony Phukan
 
For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...
For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...
For Publishers: Case Studies and Market Research for Mobile B2B Digital Marke...
Astek Consulting
 
Five Ways to Improve Your Mobile Testing
Five Ways to Improve Your Mobile TestingFive Ways to Improve Your Mobile Testing
Five Ways to Improve Your Mobile Testing
TechWell
 

SharePoint Fest Chicago DEV 201 - Beyond Responsive Design

  • 1. DEV 201 - Beyond Responsive Design TURNING SHAREPOINT INTO A MOBILE AND MODERN WEB APPLICATION PLATFORM © 2014 PSC Group, LLC
  • 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 [email protected] 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
  • 5. © 2014 PSC Group, LLC Chris Johnson Senior 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]
  • 6. © 2014 PSC Group, LLC 6
  • 7. © 2014 PSC Group, LLC Our Partners
  • 8. Sue Christoph © 2014 PSC Group, LLC
  • 9. Please interact with us @johnhead @chrisjohnson #spfest #letsmakespmobileawesome © 2014 PSC Group, LLC
  • 10. Mobile State of the Union © 2014 PSC Group, LLC LET’S ALL GET ON THE SAME PAGE
  • 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. Survey Says … Please raise your hand if © 2014 PSC Group, LLC 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. Survey Says … Please raise your hand if © 2014 PSC Group, LLC You have multiple mobile devices with you at SP Fest Chicago 2014?
  • 14. Survey Says … Please raise your hand if © 2014 PSC Group, LLC You have left your laptop in your room for most of SP Fest Chicago 2014
  • 15. Survey Says … Please raise your hand if © 2014 PSC Group, LLC You / Your company has built a mobile application for your company using Sharepoint?
  • 16. 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
  • 17. Survey Says … Please raise your hand if © 2014 PSC Group, LLC You / Your company has built a mobile application for your company using .Net?
  • 18. Survey Says … Please raise your hand if © 2014 PSC Group, LLC You / Your company has built a mobile application for your company using Azure?
  • 19. Survey Says … Please raise your hand if © 2014 PSC Group, LLC 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. Survey Says … Please raise your hand if © 2014 PSC Group, LLC Your company has a BYOD (Bring Your Own Device) program.
  • 21. 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
  • 22. 7 billion mobile phones on the planet, with 1.5 billion of them smartphones © 2014 PSC Group, LLC 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. 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. © 2014 PSC Group, LLC 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. 80% of time on mobile is spent inside apps © 2014 PSC Group, LLC Source: http://www.corvallisadvocate.com/2013/0523-more-people-have-cell-phones-than-clean-water/
  • 29. 81% of employed adults use at least one personally owned electronic device for business © 2014 PSC Group, LLC 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. Smartphones are forcing OS upgrades faster than ever – nearly 56% of iOS devices upgraded to iOS 8 in 7 weeks © 2014 PSC Group, LLC As measured by the App Store on November 10, 2014. Source: https://developer.apple.com/support/appstore//
  • 34. By 2018, 70% of the workforce will use a tablet or tablet hybrid © 2014 PSC Group, LLC 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. By 2015, 2/3 of the workforce will own a smartphone and 40% of the workforce will be mobile. © 2014 PSC Group, LLC 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. Mobile & Web Strategy WHAT DOES IT MEAN TO BE A “MOBILE AND MODERN WEB APPLICATION PLATFORM” © 2014 PSC Group, LLC
  • 39. © 2014 PSC Group, LLC Mobile Experience Done Right
  • 40. Mobile Experience Done Wrong © 2014 PSC Group, LLC
  • 41. Mobile Experience Done Wrong © 2014 PSC Group, LLC
  • 42. Mobile Experience Done Really Wrong © 2014 PSC Group, LLC
  • 43. The “upwardly mobile” Enterprise • The mobile device is now the #1 used © 2014 PSC Group, LLC 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. These Trends Bring Business and IT Challenges  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  Protection of privacy and confidential information  Policies for client-owned smartphones and tablets  Visibility, security and management of mobile platform requirements  Developing apps that integrate with information across the enterprise  Infrastructure complexity from multiple device platforms  Unique mobile requirements for employees/workers © 2014 PSC Group, LLC 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. Other Modern and Mobile Web Application Platforms © 2014 PSC Group, LLC
  • 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. Responsive is becoming the Standard © 2014 PSC Group, LLC
  • 51. Mobile Web in Action © 2014 PSC Group, LLC SHAREPOINT RESPONSIVE DESIGN
  • 52. OOB SharePoint 2013 Design: Tradeoffs © 2014 PSC Group, LLC Functionality Usability Functionality Usability USABILITY FUNCTIONALITY
  • 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 HTML5 + JavaScript + CSS Page Layouts Custom SharePoint Master Page 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. • Key components of most web pages: © 2014 PSC Group, LLC SharePoint != Most Web Pages Navigation Content Footer Brand • 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 Page Status Search Ribbon Site Icon Brand Page Layouts Web+App Parts • 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 Tablet Portrait 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. Medium+: Creation + Consumption • Medium  Tablet  Productivity • Keep as many features as possible, including Ribbon © 2014 PSC Group, LLC
  • 65. 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
  • 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. 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 © 2014 PSC Group, LLC getbootstrap.com
  • 70. Standard CSS: LESS: background-color: #0094ff; @blue: #0094ff; background-color: @blue; Theme Variables (user-defined or Bootswatch.com) Bootstrap Stylesheet Bootstrap.css Theme Variables (user-defined) © 2014 PSC Group, LLC LESS: Variables for CSS SharePoint Stylesheet SharePoint.css
  • 71. © 2014 PSC Group, LLC • Bootstrap LESS variables  SharePoint CSS + Bootstrap CSS • Result: download a Bootswatch theme and apply it to SharePoint Combine Powers
  • 72. Demo © 2014 PSC Group, LLC
  • 73. © 2014 PSC Group, LLC Wrap-Up
  • 74. Application Modernization, Not Migration 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 360 © 2014 PSC Group, LLC o View of the process.
  • 75. Application Modernization Roadmap Data Center Impact Analysis © 2014 PSC Group, LLC Inventory Existing Application Portfolio Business Value Categorize and Prioritize Analysis Estimate Modernization Costs Determine Technical Analysis Landing Platform Network Impact Analysis Define Security Model on Landing Platform Establish Tools & Standards Application Transformation Data Transformation Specify and Procure Production Hardware and Software Sunset Legacy Environment Develop Support and Staffing Plan Application Modernized! Reduce Licensing of Legacy Environment Define Governance Model Modify Infrastructure Establish Development Environment Analysis & Design Prepare for a more data driven, mobile, social and dynamic future Identify opportunities to enhance processes, workflow and security Cultural Change Analysis Develop Training Plan and Materials Train End Users on Modernized Application ANALYZE MODERNIZE
  • 76. © 2014 PSC Group, LLC Final Thoughts
  • 77. Come visit PSC at booth #3 PSC sessions at SPFest14 Chicago © 2014 PSC Group, LLC WS 203 - Half Day Workshop: An Advanced Introduction to PowerShell Scripting for SharePoint Monday 12/8 Half Day Workshop 8: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:30 AM – Breakout 7 John Head & Chris Johnson
  • 78. Thank You @johnhead @chrisjohns0n #spfest #letsmakespmobileawesome © 2014 PSC Group, LLC

Editor's Notes

  • #45: The Situation: Trends like BYOD, organizational demands for mobile applications, smarter commerce, and the emergence of new CMO and CISO agendas present an opportunity for IT leaders to drive mobile initiatives that lead to new sources of business value. These trends also present challenges for the IT organization as mobile environments are becoming more complex, difficult and costly to manage, and present new security challenges for the IT network, data, and applications.  The proliferation of mobile devices and platforms – including multiple devices per employee, M2M technologies, lack of standardization, ever-increasing demands on the IT infrastructure as data traffic explodes, and the need to securely mobile-enable existing and future business processes while keeping mobile and wireless expenses under control and ensuring positive end user experience – are themes that are continuing to rise to the top of the IT organization’s agenda. While the opportunities mobile presents are significant and mobile has become an enterprise requirement, there are a number of challenges clients face: First, at a business level, the basic models are changing in the way the business interacts and transacts with customers, employees and partners. Full business transactions need to be enabled with low latency request/response characteristics 24x7 from anywhere in the world at anytime. Knowledge of location can be important and utilized as part of the interaction. Social business interactions add opportunities and complexity to the space. Second, as we mentioned earlier the app development lifecycle is more complicated. In addition to being faster and more iterative, you have to deal with multiple device platforms and development styles. You have to securely integrate into back-end enterprise services and cloud and be ready to scale appropriately – even when demand occurs in less predictable patterns. On top of all that you have unique mobile requirements like a user interface that has significant restrictions in terms of real-estate. Third, you need to figure out how to protect your confidential information and the privacy of the participants – all while you are enabling connection through devices owned privately by the participants themselves and not controlled by the enterprise. You also have to figure out how to manage all the elements effectively from the device to the back-end platform. These are real challenges. Our recent Tech Report indicated the top three mobile adoption concerns: security/privacy, cost of development, integrating with cloud.
  • #46: Survey question: To what extent do you agree or disagree with the following statements about your organization’s mobile strategy and mobile practices? (percentages above indicating agree or strongly agree) Additional analysis was conducted with a set of “mobile leaders” – companies that met two standards for mobile strategy development. One standard was they agreed or strongly agreed with at least three of these five statements: My organization has a well-defined enterprise mobile strategy The mobile strategy is aligned with the overall business strategy for the organization There is executive-level oversight for mobile initiatives My organization has a clear funding mechanism for mobile initiatives There is an established governance structure for mobile initiatives. The second standard was: when asked to compare themselves with their industry peers today, these mobile leaders indicated that they had a superior or leading mobile strategy (4 or 5 on a 1-5 scale). Overall, 14 percent of companies fell into this category. Further, mobile leaders were more likely to indicate that they outperformed their industry peers in both revenue growth (47 percent versus 31 percent) and profitability (54 percent versus 35 percent).
  • #53: Raise your hand if you’ve ever browsed to a SharePoint device on your phone What happens? If you have device channels enabled, you’ll see right image If not, left What we end up with in OOB SharePoint is a distinct tradeoff between usability and functionality Not unique to SharePoint– web developer all over the world saw this problem Their answer: Responsive design
  • #54: For users: functionality meets usability For developers: only managing one design
  • #56: The SharePoint Experience is more than just a page User is really taking a bite of the whole cake– Master + Page Layout + Parts
  • #75: 74