 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*

Progressive Enhancement Graceful Degradation Adaptive Web Design Responsive Web Design Desktop First Mobile First

 New to SharePoint 2013  Interfaces tailored and mapped to specific device(s)  Custom Master Pages per Channel  Custom DeviceChannelPanels  Yes, but?

A fluid grid

Flexible media  Flexible Images  Flexible Video  Proportional Text

 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

 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 

 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.

Sponsored by