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.
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
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*
7. So many different devices
• Screen size (viewport, proportions, resolution)
• Functionality (clicks, hover, touch, swipe…)
• Usability (can your site be used on any device?)
16. Mobile first
• Build and code mobile interface first
• Mobile friendly – progressively enhance
• Forces us to concentrate on content
• *Caveats for IE8
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
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?
24. Custom grid vs existing framework
• Pre-built responsive and fluid grids
• Saves time and resources
• Many include extras
• i.e. collapsing navigation
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