1. Mobile and SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 The Design Dilemma of PWR 103

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

3. What You Will Learn  How Accessing the Web has Changed  Differences Between Devices  Possible Solutions with SharePoint  What about SharePoint 2013? @EricOverfield - pixelmill.com

4. The Web has Changed? @EricOverfield - pixelmill.com

5. Not The Web @EricOverfield - pixelmill.com

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

7. And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? ? ? @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. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com

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

11. Screen Size Height – Width – Resolution – Layout @EricOverfield - pixelmill.com

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

13. Not all devices are created equal. Clicks Mouse-overs Touch Swipe Plugin Support @EricOverfield - pixelmill.com

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

15. Load Time Content Placement Screen Utilization Navigation Searchability @EricOverfield - pixelmill.com

16. Embrace the Unforeseeable Build Towards the Future, not the Past @EricOverfield - pixelmill.com

17. What We Can Do @EricOverfield - pixelmill.com

18. Available Options  Device Specific Interfaces  SharePoint 2010 - Mobile Detection  SharePoint 2013 – Device Channels  One design to rule them all, one design to bind them  Responsive Web Design Anyone? @EricOverfield - pixelmill.com

19. The Mobile Interface  SharePoint 2010 has a mobile interface  Allows access to documents, lists, calendars, search, SMS alerts  Controlled by USERAGENT  App_Browsers\compat.browser  Custom Web Parts, _layouts likely won’t work  Difficult to customize @EricOverfield - pixelmill.com

20. Code Once, Use Everywhere Progressive Enhancement Responsive Web Design @EricOverfield - pixelmill.com

21. Progressive Enhancement  #1 trend for 2012 -.net Magazine  Mobile First Strategy  Coined by Steven Champeon in 2003  Content first, then add styling  Separate Content from Presentation @EricOverfield - pixelmill.com

22. SharePoint and Progressive Enhancement  SharePoint was not built with PE in mind  JavaScript and SharePoint  Too much presentation baked into html  i.e. Tables, Inline styles  But Mobile first is useful! @EricOverfield - pixelmill.com

23. Responsive Web Design @EricOverfield - pixelmill.com

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

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

26. Responsive In Action @EricOverfield - pixelmill.com

27. www.its.ms.gov @EricOverfield - pixelmill.com

29. www.ariensco.com @EricOverfield - pixelmill.com

30. www.ariensco.com @EricOverfield - pixelmill.com

31. www.gse.it @EricOverfield - pixelmill.com

32. www.gse.it @EricOverfield - pixelmill.com

33. SharePoint and Responsive Design  Uses CSS3 (media queries) and maybe HTML5.  SharePoint already has a mobile view  Configure with compat.browser  Generally only one Master Page for all devices.  Wide lists, OOTB Layouts, Site Settings not mobile friendly  Flexible Media (Images) May Break Ribbon  Issues with RWD itself! @EricOverfield - pixelmill.com

34. SharePoint and Responsive Design  Additional overhead  Does require CSS3 (SharePoint 2010 not CSS3 Ready)  Bandwidth Concerns  Are mobile users and desktop users the same?  User site requirements @EricOverfield - pixelmill.com

35. What to Do @EricOverfield - pixelmill.com

36.  PE (AWD?) vs RWD vs Separate Mobile  Define Project  Limit HTML/CSS/JS/Media overhead  Find a CSS guru will be key  Use a Framework  Responsive Web Design is worth considering  SharePoint limits our options  One site is difficult enough to maintain @EricOverfield - pixelmill.com

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

38. Device Channels Anyone?  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Pages per Channel  Custom DeviceChannelPanels @EricOverfield - pixelmill.com

39.  Device Channels – The Good  Tailored interfaces!  Device Channels – The Bad  Only works with Publishing Sites  Maintain multiple Master Pages and/or sites  New devices? Maintain that list too?  It’s a mixed bag @EricOverfield - pixelmill.com

40. Responsive Design and Device Channels Build a Responsive site for all devices Use DeviceChannelPanels Create a Device Channel for special cases But when will you upgrade? The Best of Both Worlds @EricOverfield - pixelmill.com

41. Summary  Build towards the future, not the past  Mobile devices will penetrate the corporate firewall  SharePoint 2010 – Responsive Design  SharePoint 2013 – Responsive Design w/ Device Channels @EricOverfield - pixelmill.com

42. Resources "Responsive Web Design" by Ethan Marcottes 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 Marcottes’ 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

43. Mobile and SharePoint The Design Dilemma of PWR 103 Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com Thank You