Enhance SharePoint 2013 with Responsive Web Design

With Responsive Web Design

Eric OverfieldSharePoint Advocate and Enthusiast

PixelMill

Enhance SharePoint 2013

http://pxml.ly/EO-SP2013-Responsive

Introduction – Eric Overfield

Founder and SharePoint Branding/UI Lead,

PixelMill

Speaker, Teacher, Advocate

Author, SharePoint Community Organizer

Located in Davis, CA

ericoverfield.com

@EricOverfield

Order Your Copy http://pxml.ly/zsqykd

Co-author: “Pro SharePoint 2013 Branding and

Responsive Web Development” (Apress – June

12th, 2013)

Co-author: “Black Magic

Solutions for White Hat

SharePoint” (August, 2013)

What You Will Learn

What is Responsive Web Design

(RWD)

Why Should We Use It

Planning for Responsive Design

Join Response Web Design and

SharePoint

SharePoint 2013 RWD Extras@EricOverfield - pixelmill.com

Responsive Web Design

#2 trend for 2012 - .net Magazine

Coined by Ethan Marcotte in May 2010

Use fluid grids and flexible media to adapt

Uses CSS3 and JavaScript

All devices load same page, use CSS3 to adapt

@EricOverfield - pixelmill.com


A Grid – In Action

Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid

@EricOverfield - pixelmill.comi.e. 860 / 940 ~= 91.489361%

Push NotificationsLet’s See a ComparisonFlexible Media


Push NotificationsLet’s See a ComparisonMedia Queries


Load a stylesheet in HTML:

<link rel=“stylesheet” type=“text/css” href=“css/styles.css” media=“screen and (min-width: 768px)” />

Media Queries in a Stylesheet

@media screen and (min-width: 768px) { #banner {

display: block; }}

Added in CSS 2.1, Enhanced with CSS3

Responsive Design

In Action




Who Cares?


The Mobile Revolution

Not The Web


Today’s Web


And Tomorrow?

Watches?

Game Devices?

Printers?

Who Knows?

Toasters?

Televisions?

Cameras? ??@EricOverfield - pixelmill.com


Business Insider conference presentation shows (Blodget & Cocotas, 2012)


http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com

Mobile vs Desktop Traffic

"There’s a plethora of devices out there with widely differing abilities – it’s never been more confusing or challenging to create brilliant interfaces that work across them all.” ~ Jeffery Zeldman


Screen Size

Functionality

Usability

How All Devices Differ


What AboutMobile Apps?


SharePoint Mobile Apps

Freely Available:

SharePoint Newsfeed App

Skydrive Pro App


Third Party:

SharePlus by Infragistics's

Briefcase by Colligo

Mobile Entrée by H3 Solutions

Filamente Mobile SharePoint

App

And more…

Apps and RWD serve different

purposes


Apps -> particular function

Mobile Collaboration

Mobile Document Sharing / Offline Viewing

RWD -> general site / portal

Mobile Friendly Website

Planning ForResponsive

Design@EricOverfield - pixelmill.com

Our Responsive Goals

Single site

Serve a variety of Viewports

And tailored to each viewport


Future Friendly

(i.e. no separate mobile)

Responsive Drawbacks

Desktop vs. Mobile content

Content order


Maybe SharePoint can help?

Device Channels

A lot more work

Start with Content


Mobile First

Information

Architecture

Content Rollups

Search Driven Content

Content is King@EricOverfield - pixelmill.com

Design

Extremes


to the


Navigation

Responsive Navigation the most difficult decision

SharePoint Navigation is not Responsive friendly


SharePoint relies on hover event / unfriendly HTML

Static Navigation vs. SharePoint Navigation

note: Custom Responsive Navigation will require

JS/jQuery

Floating

Drop down

Collapse

Off Canvas

Others?

Floating

Drop down

Collapse

Off Canvas

Others?

Responsive Navigation



Floating Navigation

Floating

Drop down

Collapse

Off Canvas

Others?




Dropdown Navigation

Floating

Drop down

Collapsing

Off Canvas

Others?




Collapsing Navigation

Floating

Drop down

Collapsing

Off Canvas

Others?




Off Canvas Navigation

Floating

Drop down

Collapsing

Off Canvas

Others?



No two projects are the same

Hide and Cry

Overlay

Footer Navigation

Global Navigation

jQuery or no jQuery


Time toCode it Up


Frameworks

Pre-Built Responsive and Fluid Grids

Saves time and resources


Many include extras

i.e. Collapsing navigation

Framework Drawbacks

May take time to learn framework

Not always SharePoint friendly


Might not be the way “you” would do

it

But - can save a bunch of time

Twitter Bootstrap

Zurb Foundation

Skeleton

Less Framework

and so many more@EricOverfield - pixelmill.com

Coding Responsive Design

Responsive SharePoint at CodePlex

Free, Open Source Responsive SharePoint

Frameworks

SharePoint 2013 Ready

http://responsivesharepoint.codeplex.com

SP Blueprint

http://spblueprint.codeplex.com/

SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint


http://responsivesharepoint.codeplex.com/

Mobile First

Build Mobile interface first

Forces us to concentrate on content

Helps control some resources


Mobile Interface not great for entering content

May not be preferable with some development

processes

Not IE7/IE8 friendly

Mobile First In Action


Mobile First and IE8 / IE7

Will only load mobile view


Fix with CSS Media Queries

JS Library: http://pxml.ly/zcw2jb2

So we need to use JS?

Or an IE8- stylesheet

Build to the Designnot the Device


Become Device Independent

Base breakpoints based on design

Allows for any device

Use a background image to help


Temporary background image with columns

Start with 300 pixel block

Then 50 to 100 pixel columns through 1200 pixels

total

SharePoint 2013 Helps


Device Channels

New to SharePoint 2013

Interfaces tailored and maps to specific device(s)

Custom Master Pages per Channel

Custom DeviceChannelPanels

Change the order of content!


Device Channels – An Example


Eric’s Practical Tips to #SPRWD

Start with a framework


Mobile first (most likely)

Set your project expectations accordingly

Test your design on primary devices/browsers

Be sure you are very comfortable with CSS/HTML

Don’t stop learning

(Responsive

SharePoint?)

Build towards

progressPerfection does not yet

exist

There is no silver bullet


Resources

"Responsive Web Design" by Ethan Marcotte

http://pxml.ly/23fkmjd

Responsive Frameworks for SharePoint 2010 and 2013

http://responsivesharepoint.codeplex.com

SharePoint 2010 Responsive Web design Template by Luis Kerr

http://pxml.ly/xvr2ny

v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer

http://pxml.ly/i3dbxre

Ethan Marcotte’s 20 Favorite Responsive Designs

http://pxml.ly/yqiyor

Configure SharePoint Server 2010 for Mobile Device Access

http://pxml.ly/vh3hhca

html5shiv

http://pxml.ly/uzcz32

Modernizr

http://modernizr.comcss3-mediaqueries-js

http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com

Resources

Twitter Bootstrap

http://pxml.ly/d3qbekq

Implementing Off Canvas Navigation

http://pxml.ly/26ajefj

Less Framework

http://pxml.ly/y4wq8w

Skeleton Framework

http://pxml.ly/t2gkrft

Zurb Foundation

http://pxml.ly/wcxkqv


Order Your Copy http://pxml.ly/zsqykd

“Pro SharePoint 2013 Branding and Responsive Web

Development” (Apress – June 12th, 2013)

With Responsive Web Design

Enhance SharePoint 2013

Thank YouEric Overfield

@EricOverfieldericoverfield.com

[email protected]

http://pxml.ly/EO-SP2013-Responsive

Technology

Enhance SharePoint 2013 with Responsive Web Design