Enhance SharePoint 2013 with Responsive Web Design

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


A Grid – In Action


Fluid (Flexible) Comparison
Let’s Notifications
Push See a Grid

i.e. 860 / 940 ~= 91.489361%


FlexibleSee a Comparison
Let’s Media
Push Notifications


Media QueriesComparison
Push See a
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;
}
}

Responsive Design
In Action


The Mobile Revolution
Who Cares?


Not The Web


Today’s Web


And Tomorrow?
Televisions?

Cameras?

Who Knows?

Watches?
Game Devices?

Printers?
Toasters?

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


Mobile vs Desktop Traffic

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


"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

How All Devices Differ

Screen Size
Functionality

Usability

What About
Mobile Apps?


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…


Apps and RWD serve different purposes
Apps -> particular function
Mobile Collaboration
Mobile Document Sharing / Offline Viewing

RWD -> general site / portal
Mobile Friendly Website


Planning For
Responsive Design


Our Responsive Goals
 Single site (i.e. no separate mobile)
 Serve a variety of Viewports
 And tailored to each viewport
 Future Friendly


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

to the

Extremes


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


Responsive Navigation

Floating

Drop down
Collapse
Off Canvas

Others?

Floating Navigation


Dropdown Navigation


Responsive Navigation

Floating
Drop down
Collapsing
Off Canvas

Others?

Collapsing Navigation


Off Canvas Navigation


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

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 notsavethe way “you” would do it
But - can be a bunch of time


Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework

and so many more

Responsive Frameworks and SharePoint
SharePoint Comparison
Coding Responsive Design Design
Push See a and Responsive
 Responsive SharePoint at CodePlex

 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2013 Ready

 http://responsivesharepoint.codeplex.com
 SP Blueprint
 http://spblueprint.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 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 (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

There is no silver bullet

Build towards progress
Perfection does not yet exist

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


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


Enhance SharePoint 2013
With Responsive Web Design
http://pxml.ly/EO-SP2013-Responsive

Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com

Enhance SharePoint 2013 with Responsive Web Design

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Enhance SharePoint 2013 with Responsive Web Design

Similar a Enhance SharePoint 2013 with Responsive Web Design (20)

Más de Eric Overfield

Más de Eric Overfield (9)

Último

Último (20)

Enhance SharePoint 2013 with Responsive Web Design

Notas del editor