Enhance SharePoint 2013
With Responsive Web Design
Eric Overfield
Enhance SharePoint 2013
With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
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
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)
ericoverfield.com
@EricOverfield
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
@EricOverfield - pixelmill.com
Fluid
Grid
Push(Flexible)
Let’s
See
Notifications
a Comparison
i.e. 860 / 940 ~= 91.489361%
@EricOverfield - pixelmill.com
Flexible
Media
Push See
Let’s
Notifications
a Comparison
@EricOverfield - pixelmill.com
Media
PushQueries
Let’s
See
Notifications
a Comparison
Added in CSS 2.1, Enhanced with CSS3
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;
}
}
@EricOverfield - pixelmill.com
Responsive Design
In Action
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
The Mobile
Who Cares?
Revolution
@EricOverfield - pixelmill.com
Not The Web
@EricOverfield - pixelmill.com
Today’s Web
@EricOverfield - pixelmill.com
And Tomorrow?
Televisions?
Cameras?
Who Knows?
Watches?
Game Devices?
Printers?
Toasters?
@EricOverfield - pixelmill.com
Business Insider conference presentation shows (Blodget & Cocotas, 2012)
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Mobile vs Desktop Traffic
http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/
@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
How All Devices Differ
Screen Size
Functionality
Usability
@EricOverfield - pixelmill.com
What About
Mobile Apps?
@EricOverfield - pixelmill.com
SharePoint Mobile Apps
Freely Available:
Third Party:
SharePoint Newsfeed App
SharePlus by Infragistics's
Skydrive Pro App
Briefcase by Colligo
Mobile Entrée by H3 Solutions
Filamente Mobile SharePoint App
And more…
@EricOverfield - pixelmill.com
Apps and RWD serve different purposes
Apps -> particular function
Mobile Collaboration
Mobile Document Sharing / Offline Viewing
RWD -> general site / portal
Mobile Friendly Website
@EricOverfield - pixelmill.com
Planning For
Responsive Design
@EricOverfield - pixelmill.com
Our Responsive Goals
 Single site (i.e. no separate mobile)
 Serve a variety of Viewports
 And tailored to each viewport
 Future Friendly
@EricOverfield - pixelmill.com
Responsive Drawbacks
 Desktop vs. Mobile content
 Content order
 Maybe SharePoint can help?
 Device Channels
 A lot more work
@EricOverfield - pixelmill.com
Start with Content
@EricOverfield - pixelmill.com
Mobile First
Information Architecture
Content Rollups
Search Driven Content
Content is King
@EricOverfield - pixelmill.com
Design
to the
Extremes
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapse
Off Canvas
Others?
@EricOverfield - pixelmill.com
Floating Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapse
Off Canvas
Others?
@EricOverfield - pixelmill.com
Dropdown Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
Collapsing Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
Off Canvas Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
Hide and Cry
Overlay
Footer Navigation
Global Navigation
jQuery or no jQuery
No two projects are the same
@EricOverfield - pixelmill.com
Time to
Code it Up
@EricOverfield - pixelmill.com
Frameworks
 Pre-Built Responsive and Fluid Grids
 Saves time and resources
 Many include extras
 i.e. Collapsing navigation
@EricOverfield - pixelmill.com
Framework Drawbacks
 May take time to learn framework
 Not always SharePoint friendly
 But
Might
- can
notsave
be the
a bunch
way “you”
of time
would do it
@EricOverfield - pixelmill.com
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more
@EricOverfield - pixelmill.com
Responsive
Frameworks
and
SharePoint
Coding
SharePoint
Push See
Let’s
Notifications
Responsive
a Comparison
and Responsive
Design
Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2013 Ready
 http://responsivesharepoint.codeplex.com
 SP Blueprint
 http://spblueprint.codeplex.com/
@EricOverfield - pixelmill.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
@EricOverfield - pixelmill.com
Mobile First In Action
@EricOverfield - pixelmill.com
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?
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<![endif]-->
 Or an IE8- stylesheet
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” />
<![endif]-->
@EricOverfield - pixelmill.com
Build to the Design
not the Device
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
SharePoint 2013 Helps
@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
Device Channels – An Example
@EricOverfield - pixelmill.com
Eric’s Practical Tips to #SPRWD
 Start with a framework (Responsive SharePoint?)
 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
@EricOverfield - pixelmill.com
There is no silver bullet
Build towards progress
Perfection does not yet exist
@EricOverfield - pixelmill.com
Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Ethan Marcotte’s 20 Favorite Responsive Designs
http://pxml.ly/yqiyor
v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer
http://pxml.ly/i3dbxre
SharePoint 2010 Responsive Web design Template by Luis Kerr
http://pxml.ly/xvr2ny
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
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
Zurb Foundation
http://pxml.ly/wcxkqv
Skeleton Framework
http://pxml.ly/t2gkrft
Less Framework
http://pxml.ly/y4wq8w
Implementing Off Canvas Navigation
http://pxml.ly/26ajefj
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
@EricOverfield - pixelmill.com
Enhance SharePoint 2013
With Responsive Web Design
http://pxml.ly/EO-SP2013-Responsive
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Special Thanks to our Platinum Sponsor
…and our Gold Sponsor