Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Design Dilemma of Mobile and SharePoint

1,201 views

Published on

Session PWR 103 from SharePoint Fest Denver 2013.

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important)  https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

The Design Dilemma of Mobile and SharePoint

  1. 1. The Design Dilemma of Mobile and SharePoint PWR 103 Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18th - 20th 2013
  2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – May 2013) ericoverfield.com Order Your Copy @EricOverfield http://pxml.ly/226mwkj
  3. 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. 4. The Web has Changed? @EricOverfield - pixelmill.com
  5. 5. Not The Web @EricOverfield - pixelmill.com
  6. 6. Today’s Web @EricOverfield - pixelmill.com
  7. 7. And Tomorrow? Televisions? Cameras? Who Knows? Watches? Printers?Game Devices? Toasters? @EricOverfield - pixelmill.com
  8. 8. "There’s a plethora of devicesout there with widely differingabilities – it’s never been moreconfusing or challenging tocreate brilliant interfaces thatwork across them all.” ~ JefferyZeldman @EricOverfield - pixelmill.com
  9. 9. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
  10. 10. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
  11. 11. Screen Size Height – Width – Resolution – Layout @EricOverfield - pixelmill.com
  12. 12. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
  13. 13. Clicks Mouse-overs Touch SwipePlugin SupportNot all devices are created equal. @EricOverfield - pixelmill.com
  14. 14. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
  15. 15. Load Time Content Placement Screen Utilization Navigation Searchability @EricOverfield - pixelmill.com
  16. 16. Embrace the UnforeseeableBuild Towards the Future, not the Past @EricOverfield - pixelmill.com
  17. 17. What We Can Do @EricOverfield - pixelmill.com
  18. 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. 19. The Mobile Interface  SharePoint 2010 has a mobile interface  Allows access to documents, lists, calendars, search, SMS alerts  Controlled by USERAGENT  App_Browserscompat.browser  Custom Web Parts, _layouts likely won’t work  Difficult to customize @EricOverfield - pixelmill.com
  20. 20. Code Once, Use Everywhere Progressive Enhancement Responsive Web Design @EricOverfield - pixelmill.com
  21. 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. 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. 23. Responsive Web Design @EricOverfield - pixelmill.com
  24. 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. 25. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
  26. 26. Responsive In Action @EricOverfield - pixelmill.com
  27. 27. www.its.ms.gov @EricOverfield - pixelmill.com
  28. 28. @EricOverfield - pixelmill.com
  29. 29. www.ariensco.com @EricOverfield - pixelmill.com
  30. 30. www.ariensco.com @EricOverfield - pixelmill.com
  31. 31. www.gse.it @EricOverfield - pixelmill.com
  32. 32. www.gse.it @EricOverfield - pixelmill.com
  33. 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. 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. 35. What to Do @EricOverfield - pixelmill.com
  36. 36.  PE (AWD?) vs RWD vs Separate Mobile One site is difficult enough to maintain SharePoint limits our options Responsive Web Design is worth considering  Define Project  Limit HTML/CSS/JS/Media overhead  Find a CSS guru will be key  Use a Framework @EricOverfield - pixelmill.com
  37. 37. And SharePoint 2013? @EricOverfield - pixelmill.com
  38. 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. 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. 40. The Best of Both WorldsResponsive Design and Device ChannelsBuild a Responsive site for all devicesUse DeviceChannelPanelsCreate a Device Channel for special casesBut when will you upgrade? @EricOverfield - pixelmill.com
  41. 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. 42. Resources "Responsive Web Design" by Ethan Marcottes http://pxml.ly/23fkmjd Ethan Marcottes’ 20 Favorite Responsive Designs http://pxml.ly/yqiyor v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer http://pxml.ly/i3dbxre SharePoint 2010 Responsive Web design Template by Luis Kerr http://pxml.ly/xvr2ny Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com 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. 43. The Design Dilemma of Mobile and SharePoint PWR 103 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

×