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.

Enhance SharePoint with Responsive Web Design

3,424 views

Published on

Session Dev 201 from SharePoint Fest Denver 2013.

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ★★★ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed...  http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ■■■ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Enhance SharePoint with Responsive Web Design

  1. 1. Enhance SharePointWith Responsive Web Design DEV 201 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  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. 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. 5. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
  6. 6. @EricOverfield - pixelmill.com
  7. 7. @EricOverfield - pixelmill.com
  8. 8. Why Do We NeedResponsive Design? @EricOverfield - pixelmill.com
  9. 9. Not The Web @EricOverfield - pixelmill.com
  10. 10. Today’s Web @EricOverfield - pixelmill.com
  11. 11. And Tomorrow? Televisions? Cameras? Who Knows? Watches? Printers?Game Devices? Toasters? @EricOverfield - pixelmill.com
  12. 12. "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
  13. 13. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
  14. 14. The Responsive Process @EricOverfield - pixelmill.com
  15. 15. Our Responsive Goals  Single site (i.e. no separate mobile)  Serve a variety of Viewports  Future Friendly @EricOverfield - pixelmill.com
  16. 16. Responsive Drawbacks  Desktop vs. Mobile content  Content order  Maybe SharePoint can help? @EricOverfield - pixelmill.com
  17. 17. Start with Content @EricOverfield - pixelmill.com
  18. 18. Design to theExtremes @EricOverfield - pixelmill.com
  19. 19. @EricOverfield - pixelmill.com
  20. 20. Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly  SharePoint relies on hover event  Static Navigation vs. SharePoint Navigation @EricOverfield - pixelmill.com
  21. 21. Responsive Navigation Floating Drop down Collapse Off Canvas Others? @EricOverfield - pixelmill.com
  22. 22. Floating Navigation @EricOverfield - pixelmill.com
  23. 23. Responsive Navigation Floating Drop down Collapse Off Canvas Others? @EricOverfield - pixelmill.com
  24. 24. Dropdown Navigation @EricOverfield - pixelmill.com
  25. 25. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
  26. 26. Collapsing Navigation @EricOverfield - pixelmill.com
  27. 27. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
  28. 28. Off Canvas Navigation @EricOverfield - pixelmill.com
  29. 29. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
  30. 30. Hide and Cry Overlay Footer Navigation Global NavigationjQuery or no jQueryNo two projects are the same @EricOverfield - pixelmill.com
  31. 31. Time to Code it Up @EricOverfield - pixelmill.com
  32. 32. Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and resources  Many include extras  i.e. Collapsing navigation @EricOverfield - pixelmill.com
  33. 33. Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly @EricOverfield - pixelmill.com
  34. 34. Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com
  35. 35. Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some resources  Mobile Interface not great for entering content  Considerations needed for page editing  Cross-site publishing in SharePoint 2013? @EricOverfield - pixelmill.com
  36. 36. Mobile First In Action @EricOverfield - pixelmill.com
  37. 37. Build to the Design not the Device @EricOverfield - pixelmill.com
  38. 38. Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to help  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total @EricOverfield - pixelmill.com
  39. 39. And SharePoint 2013? @EricOverfield - pixelmill.com
  40. 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. 41. Demos @EricOverfield - pixelmill.com
  42. 42. There is no silver bulletBuild towards progress Perfection does not yet exist @EricOverfield - pixelmill.com
  43. 43. Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd Ethan Marcotte’s 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
  44. 44. Resources Twitter Bootstrap http://pxml.ly/d3qbekq Zurb Foundation http://pxml.ly/wcxkqv Skeleton Framework http://pxml.ly/t2gkrft Less Framework http://pxml.ly/y4wq8w Implementing Off Canvas Navigation http://pxml.ly/26ajefj 50 Useful Responsive Web Design Tools For Designers http://pxml.ly/hifruno @EricOverfield - pixelmill.com
  45. 45. Enhance SharePointWith Responsive Web Design DEV 201 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

×