An in-depth look into Branding SharePoint with Responsive Web Design principles in mind.

1. With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Enhance SharePoint

2. Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, SharePoint Community Organizer
 Located in Davis, CA
ericoverfield.com
@EricOverfield
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)

3. What You Will Learn
 The What and Why of Responsive Web Design (RWD)
 Planning for Responsive Design
 Join Response Web Design and SharePoint
 SharePoint 2013 Considerations
@EricOverfield - pixelmill.com

4. Responsive Web Design
 A “new-ish” web design methodology
 Addresses growing number of Internet devices
 Tailored experience for any device
 Limit resizing, panning and scrolling
@EricOverfield - pixelmill.com
 The Key: All devices load the same page

5. @EricOverfield - pixelmill.com
Progressive
Enhancement
Graceful
Degradation
Adaptive WebDesign
Responsive WebDesign Desktop FirstMobile First
Related Terms

6. Why We Need It
@EricOverfield - pixelmill.com

7. So Many Different Devices
 Screen size (viewport, proportions, resolution)
 Functionality (clicks, hover, touch, swipe…)
 Usability (can your site be used on any device?)
@EricOverfield - pixelmill.com

8. "There’s a plethora of devices
out there with widely differing
abilities – it’s never been more
confusing or challenging to
create brilliant interfaces that
work across them all.” ~ Jeffery
Zeldman
@EricOverfield - pixelmill.com

9. Responsive Design
In Action
@EricOverfield - pixelmill.com

10. Fundamentals of RWD
@EricOverfield - pixelmill.com

11. @EricOverfield - pixelmill.com
The 3 Pillars of Responsive Web Design
Fluid Grid – Flexible Media – CSS3 Media Queries

12. @EricOverfield - pixelmill.com
Fluid Grid

13. Push NotificationsLet’s See a ComparisonFlexible Media
@EricOverfield - pixelmill.com
 Flexible Images
 Flexible Video
 Proportional Text

14. Push NotificationsLet’s See a ComparisonMedia Queries
@EricOverfield - pixelmill.com
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 a Stylesheet
@media screen and (min-width: 768px) {
#banner {
display: block;
}
}
Added in CSS 2.1, Enhanced with CSS3
Device ability to handle orientation

15. Beyond the Pillars
@EricOverfield - pixelmill.com

16. 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
@EricOverfield - pixelmill.com

17. Example RWD
Navigation - Collapsing
@EricOverfield - pixelmill.com

18. Mobile First
 Build and code mobile interface first
 Mobile friendly – progressively enhance
 Forces us to concentrate on content
 *Caveats for IE8
@EricOverfield - pixelmill.com

19. Mobile First
In Action
@EricOverfield - pixelmill.com

20. Planning For
Responsive Design
@EricOverfield - pixelmill.com

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
@EricOverfield - pixelmill.com

22. Always Remember SharePoint
 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
@EricOverfield - pixelmill.com

23. Responsive Friendly
Wireframes and Mockups
@EricOverfield - pixelmill.com

24. Time to Code it Up
A HTML Prototype
@EricOverfield - pixelmill.com

25. Your Own Grid Vs Existing Framework
 Pre-built responsive and fluid grids
 Saves time and resources
 Many includes extras
 i.e. collapsing navigation
@EricOverfield - pixelmill.com

26. Frameworks Pluses and Minuses
 May take time to learn framework
 Not always SharePoint ready OOTB
 Can save you a bunch of time!
@EricOverfield - pixelmill.com

27. Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more
@EricOverfield - pixelmill.com

28. A Responsive
HTML Prototype
@EricOverfield - pixelmill.com

29. Joining RWD
And SharePoint
@EricOverfield - pixelmill.com

30. 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 (2013) and navigation
@EricOverfield - pixelmill.com

31. Convert a Responsive
Prototype to SharePoint
@EricOverfield - pixelmill.com
https://sprwd-public.sharepoint.com/

32. A Quick Review
 The What and Why of Responsive Web Design (RWD)
 Planning for Responsive Design
 Join Response Web Design and SharePoint
@EricOverfield - pixelmill.com

33. Coding Responsive Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2010/2013 Ready
 http://responsivesharepoint.codeplex.com
 SP Blueprint (SharePoint 2013)
 SharePoint 2013 responsive framework
 A lean, custom grid
 http://spblueprint.codeplex.com/
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint
@EricOverfield - pixelmill.com

34. Mobile First and IE8 / IE7
 Will only load mobile view
@EricOverfield - pixelmill.com
 Fix with CSS Media Queries
 JS Library: http://pxml.ly/zcw2jb2 (Among others)
 So we need to use JS?
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<![endif]-->
 Or an IE8- stylesheet
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” />
<![endif]-->

35. And SharePoint 2013?
@EricOverfield - pixelmill.com

36. Device Channels
 New to SharePoint 2013
 Interfaces tailored and maps to specific device(s)
 Custom Master Pages per Channel
 Custom DeviceChannelPanels
 Change the order of content!
@EricOverfield - pixelmill.com

37. Device Channels – An Example
@EricOverfield - pixelmill.com

38. Eric’s 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.
@EricOverfield - pixelmill.com

39. Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
SharePoint 2010 Responsive Web design Template by Luis Kerr
http://pxml.ly/xvr2ny
v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer
http://pxml.ly/i3dbxre
Ethan Marcotte’s 20 Favorite Responsive Designs
http://pxml.ly/yqiyor
Configure SharePoint Server 2010 for Mobile Device Access
http://pxml.ly/vh3hhca
html5shiv
http://pxml.ly/uzcz32
Modernizr
http://modernizr.com
css3-mediaqueries-js
http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com

40. Resources
Twitter Bootstrap
http://pxml.ly/d3qbekq
Implementing Off Canvas Navigation
http://pxml.ly/26ajefj
Less Framework
http://pxml.ly/y4wq8w
Skeleton Framework
http://pxml.ly/t2gkrft
Zurb Foundation
http://pxml.ly/wcxkqv
@EricOverfield - pixelmill.com
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)

41. With Responsive Web Design
Enhance SharePoint
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com