1. With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint SPFest Denver 2014 – SPT 205 http://pxml.ly/EO-SP-RWD Wednesday, September 24th – 3:20 PM – 4:30 PM #SPFestDen

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 12 th, 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 Web Design Responsive Web Design 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. 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 Comparison Flexible Media @EricOverfield - pixelmill.com  Flexible Images  Flexible Video  Proportional Text

14. Push NotificationsLet’s See a Comparison Media Queries @EricOverfield - pixelmill.com In-Line Media Query: Media Query in a Stylesheet @media screen and (min-width: 768px) { #banner { display: block; } Added in CSS 2.1, Enhanced with CSS3

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 http://responsivesharepoint.codeplex.com  SP Blueprint (SharePoint 2013)  SharePoint 2013 responsive framework  A lean, custom grid  http://spblueprint.codeplex.com/ http://spblueprint.codeplex.com/ SharePoint and Responsive DesignPush NotificationsLet’s See a Comparison Responsive 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)http://pxml.ly/zcw2jb2  So we need to use JS?  Or an IE8- stylesheet

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 12 th, 2013)

41. With Responsive Web Design Enhance SharePoint Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com SPFest Denver 2014 – SPT 205 http://pxml.ly/EO-SP-RWD