sharepoint fest chicago dev 201 - beyond responsive design

© 2014 PSC Group, LLC

DEV 201 - Beyond Responsive DesignTURNING SHAREPOINT INTO A MOBILE AND MODERN WEB APPLICATION PLATFORM


Agenda

About Us?Mobile State of the

Union

Mobile & Web

StrategyMobile Web in Action


About Us


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


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]


6


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#letsmakespmobileawesome


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 Sharepoint Online?



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 appsSource: 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



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

Fun

ctio

nalit

y

Usa

bili

ty

Funct

ionali

ty Usa

bili

ty

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”

Funct

ionalit

y

Usa

bili

ty


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•Bit.ly/PSCSPResponsive


•Sharepointfest



SharePoint != Most Web Pages

Navigation Content

Footer Brand

• Key components of most web pages:

•Bit.ly/PSCSPResponsive


•Sharepointfest



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:


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 Tablet Portrait

Extra-Small Mobile

?


Done!


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.Net MVC

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 Bootswatch theme and apply it to SharePoint

Combine Powers


Demo


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 360o View of

the process.

Application Modernization, Not Migration


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


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


Thank You

@johnhead

@chrisjohns0n

#spfest#letsmakespmobileawes

ome

sharepoint fest chicago dev 201 - beyond responsive design

Mobile

amobile application

hand ifyou

mobile stateof

llcyour company

multiple mobile deviceswith

trendshow mobile devices

mobile phones onthe

spfest chicago