TH22 - Enhance SharePoint 2013 With Responsive Design

Eric OverfieldPixelMill – USA@ericoverfield

About Me

“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)

Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)

Founder/SharePoint Branding/UI Lead, PixelMill

Speaker, Teacher, Advocate

Author, SharePoint Community Organizer

You will learn…• What is Responsive Web Design and Why We Need

It

• Fundamentals of Responsive Web Design

• Responsive Design Process

• Join Responsive Web Design and SharePoint

What is Responsive Web Design

Responsive Web Design• A web design methodology– Addresses growing number of Internet devices

• Tailored experience to any device– Limits resizing, panning and scrolling

• The Key: All devices load the same page*

Why we need it

So many different devices• Screen size (viewport, proportions, resolution)

• Functionality (clicks, hover, touch, swipe…)

• Usability (can your site be used on any device?)

Responsive Web Design in Action

Demo

Fundamentals of RWD

The 3 pillars of RWD

Fluid Grid – Flexible Media – CSS3 Media Queries

A fluid grid

Flexible media

Flexible Images Flexible Video Proportional Text

Media queriesIn-Line Media Query:

<link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" /><link rel="stylesheet" media="screen and (max-width: 599px)" href=“small.css" />

Media Query in style sheets:

@media screen and (min-width: 786px) { body { font-size: 1.3em; }}@media screen and (min-width: 992px) { body { font-size: 1.6em; }}

Device ability to handle orientation

@media screen and (orientation: landscape) { .landscape { width: 30%; float: right; }}

Beyond the Pillars

ProgressiveEnhancement

GracefulDegradation

Adaptive Web Design

Responsive Web Design Desktop FirstMobile First

Related terms

Mobile first• Build and code mobile interface first

• Mobile friendly – progressively enhance

• Forces us to concentrate on content

• *Caveats for IE8

Mobile First – An Introduction Demo

Demo

Navigation• How will your navigation adapt to different viewports

• Responsive navigation may require thought

• Only basic SharePoint OOTB navigation is RWD friendly

• Multi-level SP OOTB navigation relies on hover

Example RWD Navigation - Collapsing

Demo

Strategy for a RWD Site

Begin with site planning• This should be familiar

– Start with content / site purpose– Sitemap– Information Architecture

• What’s different– Wireframing – including for mobile devices– High fidelity mockups – including for mobile devices

• Design to the extremes, then fill in the gaps

Always remember SharePoint

• What will be a part of the Master Page

• How you will you handle navigation?

• Current navigation on all pages?

• How will Page Layout content be defined?

Code a RWD SiteA HTML Prototype

Custom grid vs existing framework

• Pre-built responsive and fluid grids

• Saves time and resources

• Many include extras

• i.e. collapsing navigation

Common frameworks

• Twitter Bootstrap

• Zurb Foundation

• Skeleton

• Less Framework

Framework pluses and minuses

• May take time to learn framework

• Not always SharePoint ready OOTB

• Can save you a bunch of time!

A Responsive HTML Prototype

Demo

Joining RWDAnd SharePoint

Convert key components to SharePoint

• Distill page into Master Page and Page Layout(s)

• Fix framework to work with SharePoint– Or use pre-converted RWD framework for SharePoint

• Add SharePoint controls, snippets and navigation

Convert a responsive prototype to SharePoint

https://sprwd-public.sharepoint.com/

Demo

A quick review• What is Responsive Web Design and Why We Need

It

• Fundamentals of Responsive Web Design

• Responsive Design Process

• Join Responsive Web Design and SharePoint

Responsive frameworks and SharePoint

• Responsive SharePoint at CodePlex– Free, open source responsive SharePoint Frameworks– SharePoint 2013 Ready– http://responsivesharepoint.codeplex.com

• SP Blueprint– SharePoint 2013 responsive framework– A lean, custom grid– http://spblueprint.codeplex.com

My practical tips to #SPRWD

• Use a prebuilt framework (SharePoint ready)• Set project budget, deliverables and expectations accordingly• Develop for the real world (will mobile users need to edit

pages?)• Don’t break SharePoint*• Mobile first (with caveats)• Be sure you are very comfortable with CSS/HTML• Test, and test, and test some more• Train content authors! RWD relies on groomed content

Resources"Responsive Web Design" by Ethan Marcotte

http://pxml.ly/23fkmjdResponsive Frameworks for SharePoint 2010 and 2013

http://responsivesharepoint.codeplex.comSP Blueprint

http://spblueprint.codeplex.comhtml5shiv

http://pxml.ly/uzcz32Modernizr

http://modernizr.comcss3-mediaqueries-js

http://pxml.ly/zcw2jb2Sample Office 365 SharePoint Online demo

http://sprwd-public.sharepoint.com

Twitter Bootstraphttp://pxml.ly/d3qbekq

Zurb Foundationhttp://pxml.ly/wcxkqv

Skeleton Frameworkhttp://pxml.ly/t2gkrft

Less Frameworkhttp://pxml.ly/y4wq8w

Implementing Off Canvas Navigation http://pxml.ly/26ajefj

“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)

TH22 - Enhance SharePoint 2013 With Responsive Design

Thank YouEric Overfield

PixelMill – USA@ericoverfield