One of the hottest topics in Web Design over the last few years has been Responsive Web Design (RWD). The theory of one site structure for current web devices, including tablets and smartphones, has also attracted SharePoint developers, but the complexity of RWD has been a stumbling block. In this session we will start with an overview of what is Responsive Web Design followed by an in-depth look into the process of applying a responsive design on SharePoint 2013. We will then dive into the code and learn how to create a SharePoint site that is both responsive and attractive.

1. TH22 - Enhance SharePoint 2013
With Responsive Design
Eric Overfield
PixelMill – USA
@ericoverfield

2. About Me
Founder/SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer

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

4. What is Responsive Web Design

5. 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*

6. Why we need it

7. So many different devices
• Screen size (viewport, proportions, resolution)
• Functionality (clicks, hover, touch, swipe…)
• Usability (can your site be used on any device?)

8. Responsive Web Design in Action
Demo

9. Fundamentals of RWD

10. The 3 pillars of RWD
Fluid Grid – Flexible Media – CSS3 Media Queries

11. A fluid grid

12. Flexible media
 Flexible Images
 Flexible Video
 Proportional Text

13. Media queries
In-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: Device ability to handle orientation
@media screen and (orientation: landscape) {
.landscape {
width: 30%;
float: right;
}
}

14. Beyond the Pillars

15. Progressive
Enhancement
Graceful
Degradation
Adaptive WebDesign
Responsive WebDesign DesktopFirstMobileFirst
Related terms

16. Mobile first
• Build and code mobile interface first
• Mobile friendly – progressively enhance
• Forces us to concentrate on content
• *Caveats for IE8

17. Mobile First – An Introduction Demo
Demo

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

19. Example RWD Navigation - Collapsing
Demo

20. Strategy for a RWD Site

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

22. 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?

23. Code a RWD Site
A HTML Prototype

24. Custom grid vs existing framework
• Pre-built responsive and fluid grids
• Saves time and resources
• Many include extras
• i.e. collapsing navigation

25. Common frameworks
• Twitter Bootstrap
• Zurb Foundation
• Skeleton
• Less Framework

26. Framework pluses and minuses
• May take time to learn framework
• Not always SharePoint ready OOTB
• Can save you a bunch of time!

27. A Responsive HTML Prototype
Demo

28. Joining RWD
And SharePoint

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

30. Convert a responsive prototype to SharePoint
https://sprwd-public.sharepoint.com/
Demo

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

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

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

34. Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
SP Blueprint
http://spblueprint.codeplex.com
html5shiv
http://pxml.ly/uzcz32
Modernizr
http://modernizr.com
css3-mediaqueries-js
http://pxml.ly/zcw2jb2
Sample Office 365 SharePoint Online demo
http://sprwd-public.sharepoint.com
http://pxml.ly/d3qbekq
http://pxml.ly/wcxkqv
http://pxml.ly/t2gkrft
http://pxml.ly/y4wq8w
http://pxml.ly/26ajefj

35. TH22 - Enhance SharePoint 2013
With Responsive Design
Thank You
Eric Overfield
PixelMill – USA
@ericoverfield