Transcript SharePoint for any screen size: an in





 A “new-ish” 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*
Mobile First
Responsive Web Design
Progressive
Enhancement
Desktop First
Graceful
Degradation
Adaptive Web Design



A fluid grid
Flexible media
 Flexible Images
 Flexible Video
 Proportional Text
In-Line Media Query:
Media Query in style sheets:
Device ability to handle orientation
 Build and code mobile interface first
 Helps control some resources
 Forces us to concentrate on content
 *Caveats for IE8
 How will your navigation adapt to different viewports
 Responsive navigation may require thought
 Consider real estate required for navigation
 Multi-level SP OOTB Navigation relies on hover







including for mobile devices
including for mobile devices
 Design to the extremes, then fill in the gaps
 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?
A HTML Prototype
 Pre-built responsive and fluid grids
 Saves time and resources
 Many includes extras
 i.e. collapsing navigation



And so many more
 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




 IE8- does not recognize CSS3 Media Queries
 Will only load mobile view
 Common fixes:
 IE8- stylesheet
 JavaScript Libraries such as CSS3 Media Queries
 http://pxml.ly/zcw2jb2
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<![endif]-->



 http://responsivesharepoint.codeplex.com



 http://spblueprint.codeplex.com








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.
http://pxml.ly/23fkmjd
http://pxml.ly/d3qbekq
http://responsivesharepoint.codeplex.com
http://pxml.ly/wcxkqv
http://spblueprint.codeplex.com
http://pxml.ly/t2gkrft
http://pxml.ly/uzcz32
http://pxml.ly/y4wq8w
http://modernizr.com
http://pxml.ly/26ajefj
http://pxml.ly/zcw2jb2
Sample Office 365 SharePoint Online demo
http://sprwd-public.sharepoint.com
Sponsored by