Enhancing SharePoint with Responsive Web Design

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

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
 The What and Why of Responsive Web Design (RWD)
 Planning for Responsive Design
 Join Response Web Design and SharePoint
 SharePoint 2013 Considerations
@EricOverfield - pixelmill.com

Responsive Web Design
 A “new-ish” web design methodology
 Addresses growing number of Internet devices
 Tailored experience for any device
 Limit resizing, panning and scrolling
 The Key: All devices load the same page

Progressive
Enhancement
Graceful
Degradation
Adaptive WebDesign
Responsive WebDesign Desktop FirstMobile First
Related Terms

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?)

"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

Responsive Design
In Action

Fundamentals of RWD

The 3 Pillars of Responsive Web Design
Fluid Grid – Flexible Media – CSS3 Media Queries

Fluid Grid

Push NotificationsLet’s See a ComparisonFlexible Media
 Flexible Images
 Flexible Video
 Proportional Text

Push NotificationsLet’s See a ComparisonMedia Queries
In-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 a Stylesheet
@media screen and (min-width: 768px) {
#banner {
display: block;
}
}
Added in CSS 2.1, Enhanced with CSS3
Device ability to handle orientation

Beyond the Pillars

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

Mobile First
 Build and code mobile interface first
 Mobile friendly – progressively enhance
 Forces us to concentrate on content
 *Caveats for IE8

Mobile First
In Action

Planning For
Responsive Design

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 will Page Layout content be defined
 How will you handle navigation
 Will you include the quick launch on all pages

Responsive Friendly
Wireframes and Mockups

Time to Code it Up
A HTML Prototype

Your Own Grid Vs Existing Framework
 Pre-built responsive and fluid grids
 Saves time and resources
 Many includes extras
 i.e. collapsing navigation

Frameworks Pluses and Minuses
 May take time to learn framework
 Not always SharePoint ready OOTB
 Can save you a bunch of time!

Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more

A Responsive
HTML Prototype

Joining RWD
And 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 (2013) and navigation

Convert a Responsive
Prototype to SharePoint
https://sprwd-public.sharepoint.com/

A Quick Review
 The What and Why of Responsive Web Design (RWD)
 Planning for Responsive Design
 Join Response Web Design and SharePoint

Coding Responsive Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2010/2013 Ready
 http://responsivesharepoint.codeplex.com
 SP Blueprint (SharePoint 2013)
 SharePoint 2013 responsive framework
 A lean, custom grid
 http://spblueprint.codeplex.com/
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint

Mobile First and IE8 / IE7
 Will only load mobile view
 Fix with CSS Media Queries
 JS Library: http://pxml.ly/zcw2jb2 (Among others)
 So we need to use JS?

 Or an IE8- stylesheet

And SharePoint 2013?

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
 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/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.com
css3-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
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com

Enhancing SharePoint with Responsive Web Design

More Related Content

What's hot

Viewers also liked

Similar to Enhancing SharePoint with Responsive Web Design

More from Eric Overfield

Recently uploaded

Enhancing SharePoint with Responsive Web Design

Editor's Notes