SharePoint for any screen size: An in-depth look into building responsive web designRita Zhang, GEEric Overfield, PixelMill

SPC345

Software Architect, General Electric

Founder and Architect, SP.me

Author

Founder/SharePoint Branding/UI Lead, PixelMill

Speaker, Teacher, Advocate

Author, SharePoint Community Organizer

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

About usRita Zhang Eric Overfield

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

What is Responsive Web Design and Why We Need It

Fundamentals of Responsive Web Design

Responsive Design Process

Join Responsive Web Design and SharePoint

You will learn…

What is Responsive Web Design

A “new-ish” 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*

Responsive web design

Important related buzzwords

ProgressiveEnhancement

GracefulDegradation

Adaptive Web Design

Responsive Web Design

Desktop First

Mobile First

Why We Need It

Screen size (viewport, proportions, resolution)

Functionality (clicks, hover, touch, swipe…)

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

So many different devices

Demo

Responsive Web Design in Action

Fundamentals of RWD

The 3 pillars of responsive web design

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

Build and code mobile interface first

Helps control some resources

Forces us to concentrate on content

*Caveats for IE8

Mobile first

Demo

Mobile First – An Introduction Demo

How will your navigation adapt to different viewports

Responsive navigation may require thought

Consider real estate required for navigation

Multi-level SP OOTB Navigation relies on hover

Navigation

Floating Drop down

Off Canvas

Collapsing

Common mobile navigation

Demo

Collapsing Navigation

Let’s Build a RWD Site

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

Begin with site planning

What will be a part of the Master Page

How will Page Layout content be defined

How will you handle navigation?

Will you include the quick launch on all pages?

Always remember SharePoint

Demo

Responsive friendly wireframes and mockups

Time to Code it UpA HTML Prototype

Pre-built responsive and fluid grids

Saves time and resources

Many includes extras

i.e. collapsing navigation

Your own grid vs existing framework

May take time to learn framework

Not always SharePoint ready OOTB

Can save you a bunch of time!

Frameworks pluses and minuses

TwitterBootstrap

ZurbFoundation

LessFramework

Skeleton

Common frameworks

And so many more

Demo

A Responsive HTML Prototype

Joining RWDAnd 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 key components to SharePoint

Demo

Convert a responsive prototype to SharePoint

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

What is Responsive Web Design and Why We Need It

Fundamentals of Responsive Web Design

Responsive Design Process

Join Responsive Web Design and SharePoint

A quick review; we discussed…

IE8- does not recognize CSS3 Media Queries

Will only load mobile view

Common fixes: IE8- stylesheet JavaScript Libraries such as CSS3 Media Queries

http://pxml.ly/zcw2jb2

Caveats – mobile first and IE8 / IE7

IE8- Stylesheet<!--[if lt IE 9]>

<link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” /><![endif]-->

JavaScript Library<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script><![endif]-->

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

Responsive frameworks and SharePoint

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.

Our practical tips to #SPRWD

"Responsive Web Design" by Ethan Marcottehttp://pxml.ly/23fkmjd

Responsive 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

ResourcesTwitter Bootstrap

http://pxml.ly/d3qbekqZurb Foundation

http://pxml.ly/wcxkqvSkeleton Framework

http://pxml.ly/t2gkrftLess Framework

http://pxml.ly/y4wq8wImplementing Off Canvas Navigation

http://pxml.ly/26ajefj

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

June 2013)

SharePoint for any screen size: an in-depth look into building responsive web design

Rita Zhang, GEEric Overfield, PixelMill

Thank You

MySPCSponsored by

connect. reimagine. transform.

Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.