1. Enhance SharePoint 2013 With Responsive Web Design Enhance SharePoint 2013 With Responsive Web Design Eric Overfield

2. With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint 2013 http://pxml.ly/EO-SP2013-Responsive

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

4. What You Will Learn  What is Responsive Web Design (RWD)  Why Should We Use It  Planning for Responsive Design  Join Response Web Design and SharePoint  SharePoint 2013 RWD Extras @EricOverfield - pixelmill.com

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

6. A Grid – In Action

7. Push NotificationsLet’s See a Comparison Fluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%

8. Push NotificationsLet’s See a Comparison Flexible Media @EricOverfield - pixelmill.com

9. Push NotificationsLet’s See a Comparison Media Queries @EricOverfield - pixelmill.com Load a stylesheet in HTML: <link rel=“stylesheet” type=“text/css” href=“css/styles.css” media=“screen and (min-width: 768px)” /> Media Queries in a Stylesheet @media screen and (min-width: 768px) { #banner { display: block; } Added in CSS 2.1, Enhanced with CSS3

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

13. Who Cares? @EricOverfield - pixelmill.com The Mobile Revolution

14. Not The Web @EricOverfield - pixelmill.com

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

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

17. Business Insider conference presentation shows (Blodget & Cocotas, 2012)

18. @EricOverfield - pixelmill.com

19. http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com Mobile vs Desktop Traffic

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

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

22. What About Mobile Apps? @EricOverfield - pixelmill.com

23. SharePoint Mobile Apps Freely Available: SharePoint Newsfeed App Skydrive Pro App @EricOverfield - pixelmill.com Third Party: SharePlus by Infragistics's Briefcase by Colligo Mobile Entrée by H3 Solutions Filamente Mobile SharePoint App And more…

24. Apps and RWD serve different purposes @EricOverfield - pixelmill.com Apps -> particular function Mobile Collaboration Mobile Document Sharing / Offline Viewing RWD -> general site / portal Mobile Friendly Website

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

26. Our Responsive Goals  Single site  Serve a variety of Viewports  And tailored to each viewport @EricOverfield - pixelmill.com  Future Friendly (i.e. no separate mobile)

27. Responsive Drawbacks  Desktop vs. Mobile content  Content order @EricOverfield - pixelmill.com  Maybe SharePoint can help?  Device Channels  A lot more work

28. Start with Content @EricOverfield - pixelmill.com

29. Mobile First Information Architecture Content Rollups Search Driven Content Content is King @EricOverfield - pixelmill.com

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

31. @EricOverfield - pixelmill.com

32. Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly @EricOverfield - pixelmill.com  SharePoint relies on hover event / unfriendly HTML  Static Navigation vs. SharePoint Navigation  note: Custom Responsive Navigation will require JS/jQuery

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

34. Floating Navigation

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

36. Dropdown Navigation

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

38. Collapsing Navigation

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

40. Off Canvas Navigation

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

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

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

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

45. Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly @EricOverfield - pixelmill.com  Might not be the way “you” would do it  But - can save a bunch of time

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

47. Coding Responsive Design  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2013 Ready  http://responsivesharepoint.codeplex.com http://responsivesharepoint.codeplex.com  SP Blueprint  http://spblueprint.codeplex.com/ SharePoint and Responsive DesignPush NotificationsLet’s See a Comparison Responsive Frameworks and SharePoint @EricOverfield - pixelmill.com

48. 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  May not be preferable with some development processes  Not IE7/IE8 friendly

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

50. Mobile First and IE8 / IE7  Will only load mobile view @EricOverfield - pixelmill.com  Fix with CSS Media Queries  JS Library: http://pxml.ly/zcw2jb2  So we need to use JS?  Or an IE8- stylesheet

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

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

53. SharePoint 2013 Helps @EricOverfield - pixelmill.com

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

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

56. Demos @EricOverfield - pixelmill.com

57. Eric’s Practical Tips to #SPRWD  Start with a framework @EricOverfield - pixelmill.com  Mobile first (most likely)  Set your project expectations accordingly  Test your design on primary devices/browsers  Be sure you are very comfortable with CSS/HTML  Don’t stop learning (Responsive SharePoint?)

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

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

60. 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)

61. With Responsive Web Design Enhance SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com http://pxml.ly/EO-SP2013-Responsive

62. Special Thanks to our Platinum Sponsor …and our Gold Sponsor