1. With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 Enhance SharePoint DEV 201

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/226mwkj Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – May 2013)

3. What You Will Learn  What is Responsive Web Design (RWD)  Why Should We Use It  The Responsive Process  Join Response Web Design and SharePoint  SharePoint 2013 Considerations @EricOverfield - pixelmill.com

4. Responsive Web Design  #2 trend for 2012 -.net Magazine  Coined by Ethan Marcotte in May 2010  Use fluid grids and flexible media to adapt  Uses CSS3 and JavaScript  All devices load same page, use CSS3 to adapt @EricOverfield - pixelmill.com

5. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com

8. Why Do We Need Responsive Design? @EricOverfield - pixelmill.com

9. Not The Web @EricOverfield - pixelmill.com

10. Today’s Web @EricOverfield - pixelmill.com

11. And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? ? ? @EricOverfield - pixelmill.com

12. "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

13. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com

14. The Responsive Process @EricOverfield - pixelmill.com

15. Our Responsive Goals  Single site  Serve a variety of Viewports @EricOverfield - pixelmill.com  Future Friendly (i.e. no separate mobile)

16. Responsive Drawbacks  Desktop vs. Mobile content  Content order @EricOverfield - pixelmill.com  Maybe SharePoint can help?

17. Start with Content @EricOverfield - pixelmill.com

18. Design Extremes @EricOverfield - pixelmill.com to the

19. @EricOverfield - pixelmill.com

20. Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly @EricOverfield - pixelmill.com  SharePoint relies on hover event  Static Navigation vs. SharePoint Navigation

21. Floating Drop down Collapse Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com

22. Floating Navigation

23. Floating Drop down Collapse Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com

24. Dropdown Navigation

25. Floating Drop down Collapsing Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com

26. Collapsing Navigation

27. Floating Drop down Collapsing Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com

28. Off Canvas Navigation

29. Floating Drop down Collapsing Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com

30. No two projects are the same Hide and Cry Overlay Footer Navigation Global Navigation jQuery or no jQuery @EricOverfield - pixelmill.com

31. Time to Code it Up @EricOverfield - pixelmill.com

32. Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and resources @EricOverfield - pixelmill.com  Many include extras  i.e. Collapsing navigation

33. Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly @EricOverfield - pixelmill.com

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

35. Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some resources @EricOverfield - pixelmill.com  Mobile Interface not great for entering content  Considerations needed for page editing  Cross-site publishing in SharePoint 2013?

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

37. Build to the Design not the Device @EricOverfield - pixelmill.com

38. Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to help @EricOverfield - pixelmill.com  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total

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

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

41. Demos @EricOverfield - pixelmill.com

42. Build towards progress Perfection does not yet exist There is no silver bullet @EricOverfield - pixelmill.com

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

44. 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 50 Useful Responsive Web Design Tools For Designers http://pxml.ly/hifruno

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