Enhance SharePoint 2013 with Responsive Web Design

With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Enhance SharePoint 2013

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

Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid
i.e. 860 / 940 ~= 91.489361%

The Grid – In Action

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?

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

Planning For
Responsive Design

Our Responsive Goals
 Single site
 Serve a variety of Viewports
 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

Design
Extremes
to the

Navigation
 Responsive Navigation the most difficult decision
 SharePoint Navigation is not Responsive friendly
 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

Floating Navigation

Floating
Drop down
Collapse
Off Canvas
Others?

Dropdown Navigation

Floating
Drop down
Collapsing
Off Canvas
Others?

Collapsing Navigation

Off Canvas Navigation

No two projects are the same
Hide and Cry
Overlay
Footer Navigation
Global Navigation
jQuery or no jQuery

Time to
Code 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

Coding Responsive Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2013 Ready
 http://responsivesharepoint.codeplex.com
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint

Mobile First
 Build Mobile interface first
 Forces us to concentrate on content
 Helps control some resources
 Mobile Interface not great for entering content
 Considerations needed for page editing
 Cross-site publishing in SharePoint 2013?

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?

Build to the Design
not 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
 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 progress
Perfection does not yet exist
There is no silver bullet

Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
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.com
css3-mediaqueries-js
http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.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 2013)

With Responsive Web Design
Enhance SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com

Enhance SharePoint 2013 with Responsive Web Design

More Related Content

What's hot

Viewers also liked

Similar to Enhance SharePoint 2013 with Responsive Web Design

Recently uploaded

Enhance SharePoint 2013 with Responsive Web Design

Editor's Notes