TH22 - Enhance SharePoint 2013 With Responsive Design
Eric OverfieldPixelMill – USA@ericoverfield
About Me
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
Founder/SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
You will learn…• What is Responsive Web Design and Why We Need
It
• Fundamentals of Responsive Web Design
• Responsive Design Process
• Join Responsive Web Design and SharePoint
What is Responsive Web Design
Responsive Web Design• A web design methodology– Addresses growing number of Internet devices
• Tailored experience to any device– Limits resizing, panning and scrolling
• The Key: All devices load the same page*
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?)
Responsive Web Design in Action
Demo
Fundamentals of RWD
The 3 pillars of RWD
Fluid Grid – Flexible Media – CSS3 Media Queries
A fluid grid
Flexible media
Flexible Images Flexible Video Proportional Text
Media queriesIn-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 style sheets:
@media screen and (min-width: 786px) { body { font-size: 1.3em; }}@media screen and (min-width: 992px) { body { font-size: 1.6em; }}
Device ability to handle orientation
@media screen and (orientation: landscape) { .landscape { width: 30%; float: right; }}
Beyond the Pillars
ProgressiveEnhancement
GracefulDegradation
Adaptive Web Design
Responsive Web Design Desktop FirstMobile First
Related terms
Mobile first• Build and code mobile interface first
• Mobile friendly – progressively enhance
• Forces us to concentrate on content
• *Caveats for IE8
Mobile First – An Introduction Demo
Demo
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
Demo
Strategy for a RWD Site
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 you will you handle navigation?
• Current navigation on all pages?
• How will Page Layout content be defined?
Code a RWD SiteA HTML Prototype
Custom grid vs existing framework
• Pre-built responsive and fluid grids
• Saves time and resources
• Many include extras
• i.e. collapsing navigation
Common frameworks
• Twitter Bootstrap
• Zurb Foundation
• Skeleton
• Less Framework
Framework pluses and minuses
• May take time to learn framework
• Not always SharePoint ready OOTB
• Can save you a bunch of time!
A Responsive HTML Prototype
Demo
Joining RWDAnd 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 and navigation
Convert a responsive prototype to SharePoint
https://sprwd-public.sharepoint.com/
Demo
A quick review• What is Responsive Web Design and Why We Need
It
• Fundamentals of Responsive Web Design
• Responsive Design Process
• Join Responsive Web Design and SharePoint
Responsive frameworks and SharePoint
• Responsive SharePoint at CodePlex– Free, open source responsive SharePoint Frameworks– SharePoint 2013 Ready– http://responsivesharepoint.codeplex.com
• SP Blueprint– SharePoint 2013 responsive framework– A lean, custom grid– http://spblueprint.codeplex.com
My 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/23fkmjdResponsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.comSP Blueprint
http://spblueprint.codeplex.comhtml5shiv
http://pxml.ly/uzcz32Modernizr
http://modernizr.comcss3-mediaqueries-js
http://pxml.ly/zcw2jb2Sample Office 365 SharePoint Online demo
http://sprwd-public.sharepoint.com
Twitter Bootstraphttp://pxml.ly/d3qbekq
Zurb Foundationhttp://pxml.ly/wcxkqv
Skeleton Frameworkhttp://pxml.ly/t2gkrft
Less Frameworkhttp://pxml.ly/y4wq8w
Implementing Off Canvas Navigation http://pxml.ly/26ajefj
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
TH22 - Enhance SharePoint 2013 With Responsive Design
Thank YouEric Overfield
PixelMill – USA@ericoverfield
