With Responsive Web Design

Eric OverfieldSharePoint Advocate and Enthusiast

PixelMill

SharePoint Fest Denver – March 18th - 20th 2013

Enhance SharePoint

DEV 201

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/226mwkj

Co-author: “Pro SharePoint 2013 Branding and

Responsive Web Development” (Apress – May

2013)

What You Will Learn

What is Responsive Web Design

(RWD)

Why Should We Use It

The Responsive Process

Join Response Web Design and

SharePoint

SharePoint 2013 Considerations@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

Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com

@EricOverfield - pixelmill.com

@EricOverfield - pixelmill.com

Why Do We Need Responsive

Design?

@EricOverfield - pixelmill.com

Not The Web

@EricOverfield - pixelmill.com

Today’s Web

@EricOverfield - pixelmill.com

And Tomorrow?

Watches?

Game Devices?

Printers?

Who Knows?

Toasters?

Televisions?

Cameras? ??@EricOverfield - pixelmill.com

"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

@EricOverfield - pixelmill.com

Screen Size

Functionality

Usability

How All Devices Differ

@EricOverfield - pixelmill.com

The ResponsiveProcess

@EricOverfield - pixelmill.com

Our Responsive Goals

Single site

Serve a variety of Viewports

@EricOverfield - pixelmill.com

Future Friendly

(i.e. no separate mobile)

Responsive Drawbacks

Desktop vs. Mobile content

Content order

@EricOverfield - pixelmill.com

Maybe SharePoint can help?

Start with Content

@EricOverfield - pixelmill.com

Design

Extremes

@EricOverfield - pixelmill.com

to the

@EricOverfield - pixelmill.com

Navigation

Responsive Navigation the most difficult decision

SharePoint Navigation is not Responsive friendly

@EricOverfield - pixelmill.com

SharePoint relies on hover event

Static Navigation vs. SharePoint Navigation

Floating

Drop down

Collapse

Off Canvas

Others?

Floating

Drop down

Collapse

Off Canvas

Others?

Responsive Navigation

@EricOverfield - pixelmill.com

@EricOverfield - pixelmill.com

Floating Navigation

Floating

Drop down

Collapse

Off Canvas

Others?

Responsive Navigation

@EricOverfield - pixelmill.com

@EricOverfield - pixelmill.com

Dropdown Navigation

Floating

Drop down

Collapsing

Off Canvas

Others?

Responsive Navigation

@EricOverfield - pixelmill.com

@EricOverfield - pixelmill.com

Collapsing Navigation

Floating

Drop down

Collapsing

Off Canvas

Others?

Responsive Navigation

@EricOverfield - pixelmill.com

@EricOverfield - pixelmill.com

Off Canvas Navigation

Floating

Drop down

Collapsing

Off Canvas

Others?

Responsive Navigation

@EricOverfield - pixelmill.com

No two projects are the same

Hide and Cry

Overlay

Footer Navigation

Global Navigation

jQuery or no jQuery

@EricOverfield - pixelmill.com

Time to Code it Up

@EricOverfield - pixelmill.com

Frameworks

Pre-Built Responsive and Fluid Grids

Saves time and resources

@EricOverfield - pixelmill.com

Many include extras

i.e. Collapsing navigation

Framework Drawbacks

May take time to learn framework

Not always SharePoint friendly

@EricOverfield - pixelmill.com

Twitter Bootstrap

Zurb Foundation

Skeleton

Less Framework

and so many more@EricOverfield - pixelmill.com

Mobile First

Build Mobile interface first

Forces us to concentrate on content

Helps control some resources

@EricOverfield - pixelmill.com

Mobile Interface not great for entering content

Considerations needed for page editing

Cross-site publishing in SharePoint 2013?

Mobile First In Action

@EricOverfield - pixelmill.com

Build to the Designnot the Device

@EricOverfield - pixelmill.com

Become Device Independent

Base breakpoints based on design

Allows for any device

Use a background image to help

@EricOverfield - pixelmill.com

Temporary background image with columns

Start with 300 pixel block

Then 50 to 100 pixel columns through 1200 pixels

total

And SharePoint 2013?

@EricOverfield - pixelmill.com

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!

@EricOverfield - pixelmill.com

Demos

@EricOverfield - pixelmill.com

Build towards

progressPerfection does not yet

exist

There is no silver bullet

@EricOverfield - pixelmill.com

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

@EricOverfield - pixelmill.com

50 Useful Responsive Web Design Tools For Designers

http://pxml.ly/hifruno

Eric Overfield@EricOverfield

ericoverfield.comeoverfield@pixelmill.com

Thank You

With Responsive Web Design

Enhance SharePoint

DEV 201