Responsive Web Design - Tom Robertshaw

719 views
579 views

Published on

Responsive design has been around for a few years in terms of the rest of the web but it is only recently pervading eCommerce. We will confirm to you why it’s so important in the expanding omni-channel world. We will then proceed to share our techniques and experiences for building responsively designed stores as standard

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
719
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design - Tom Robertshaw

  1. 1. Responsive Design Tom Robertshaw & Darren Belding Meanbee
  2. 2. Meanbee •  UK Magento Development •  First eCommerce build 2008 •  Graduated 2011
  3. 3. eCommerce Survey
  4. 4. 52% always have phones within arm’s reach Mobile
  5. 5. Mobile 60% mobile use is at home
  6. 6. Mobile 81% of mobile purchases are spontaneous
  7. 7. Mobile 90% use multiple screens to complete a task
  8. 8. Responsive Sites 1% eCommerce sites are responsive.
  9. 9. Responsive Sites 66% of those are Magento
  10. 10. History •  Coined by Ethan Marcotte in 2010 •  eCommerce is 2 years behind •  Flexibility not fixed
  11. 11. Why use it? •  Customer experience •  SEO •  Maintainability •  Future Friendly.
  12. 12. Effect on Conversion O’Neill Clothing +66% Skinny Ties +71% Fathead +90%
  13. 13. Content •  Takes precedence •  Information Architecture •  Use Cases
  14. 14. Mobile-first or Desktop-first •  Desktop-first –  Legacy Systems –  Good for IE •  Mobile-first –  Load only what the device needs
  15. 15. Legacy Browsers •  Consider ROI •  Many tools available –  respond.js (media query polyfill) –  selectivizr (CSS 3 selector polyfill) –  html5shiv (HTML 5 element enabling script)
  16. 16. Design Patterns •  Document flow •  Consider navigation across devices •  Visible feedback in viewport
  17. 17. Implementation •  Use a framework or boilerplate •  Tailor to your own needs
  18. 18. Methodology •  Semantic versus non-semantic •  featured-products, search-container, footer-actions •  small-5, push-2, small-offset-1 •  CSS Pre-processors (LESS, SASS, Stylus) •  Retain Magento upgradability
  19. 19. Accessibility •  Foundation of a great design experience •  Mouse, keyboard, touch •  Slow connection •  Web Content Accessibility Guidelines •  We recommend AA
  20. 20. Device Branded •  Apple Icons •  Window Tiles
  21. 21. Interactions HTML 5 inputs –  tel –  number –  email –  date –  pattern •  e.g. pattern=”[0-9]*”
  22. 22. Enhancements •  Modernizr (feature detection) •  Gesture Control –  Ensure JS and UI support it e.g. Carousels. –  Add your own
  23. 23. Responsive Assets Conditional loading of JS –  matchMedia –  enquire.js –  harvey.js
  24. 24. Assets •  Minimise HTTP Requests •  Sprites •  Avoid weighty JS libraries •  Custom JS at the bottom •  Overloading with External JS (FB/Twitter)
  25. 25. Speed •  Network Inspector •  YSlow •  Network Link Conditioner
  26. 26. Responsive Imagery 4 success criteria •  Fluid •  Art-directed •  Resolution (retina) •  File-size optimized
  27. 27. Fluid Nice and easy height: auto !important; max-width: 100%;
  28. 28. Focal Points
  29. 29. Retina Imagery •  SVG •  Icon Fonts •  @1.5X @2x •  Larger compressed images
  30. 30. picture, srcset Deliver optimised image for viewport <span data-picture data-alt="Ordnance Survey"> <span data-src=”/ordnancesurvey-custommade.png"></span> <span data-src=”/ordnancesurvey-custommade@2x.png" data- media=“only screen and(min-device-pixel-ratio:2)"></span> <span data-src="/ordnancesurvey-custommade-650.png" data- media="(min-width: 400px)"></span> <span data-src=”/ordnancesurvey-custommade-650@2x.png" data- media="(min-width: 400px) only screen and (min-device-pixel- ratio:2) "></span> <noscript> <img src=”/ordnancesurvey-custommade.png" alt="Ordnance Survey"> </noscript> </span>
  31. 31. Responsive Tables •  Consider content •  Solutions –  responsivetables.js –  Flip scroll –  Unseen column –  Responsive Table
  32. 32. Responsive Video •  HTML 5 video height: auto !important; width: 100% !important; •  For everything else there’s Fitvids.js
  33. 33. RESS (Responsive Web Design with Server Side Components)
  34. 34. RESS •  Component-level optimization for performance •  82 of top 100 Alexa sites deliver different content based on user-agent •  Necessary evil to change device experience
  35. 35. Magento Exceptions
  36. 36. Conclusion Responsive design paired with server side optimisations enables maintainable, future ready device experiences
  37. 37. Start Now •  You are not too busy. •  You cannot afford not to. •  You set the standard for your business
  38. 38. References •  "The infinite Dial 2013: Navigating Digital Platforms" - Edison Research http://www.edisonresearch.com/home/archives/2013/04/the-infinite-dial-2013-navigating-digital-platforms.php •  "Half of Mobile Phone Owners Always Have Their Device Within Arm’s Length" – Marketing Charts http://www.marketingcharts.com/wp/interactive/half-of-mobile-phone-owners-always-have-their-device-within-arms-length-28367/ •  "The New Multi-Screen World Study" – Google http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html •  "RESS: Responsive Design + Server Side Components" – Luke Wroblewski http://www.lukew.com/ff/entry.asp?1392 •  "Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site – Copy Blogger http://www.copyblogger.com/mobile-responsive-design-benefits/ •  "Repurposing vs optimised design" – Nielsen Norman Group http://www.nngroup.com/articles/repurposing-vs-optimized-design/ •  Iterative Design of a Mobile Screen" – Neilsen Norman Group http://www.nngroup.com/articles/iterative-design-mobile-screen/ •  "New stats: Amazon, Apple have biggest proportion of mobile users" – Geek Wire http://www.geekwire.com/2013/multiplatform-stats-amazon-apple-biggest-proportion-mobile-users/ •  "Retina Revolution" – Netvlies.nl http://blog.netvlies.nl/design-interactie/retina-revolution/ •  "Data Monday: Impact of Responsive Designs” – Luke Wroblewski http://www.lukew.com/ff/entry.asp?16 •  "Responsive Patterns" – Brad Frost http://bradfrost.github.io/this-is-responsive/patterns.html •  "Responsive Tables" – Simon Elvery http://elvery.net/demo/responsive-tables/ •  "Server-side Mobile Web Detection Used by 82% of Alexa Top 100 Sites” – CircleID http://www.circleid.com/posts/0120111_analysis_of_server_side_mobile_web_detection •  "Web Content Accessibility Guidelines (WCAG) 2.0" – W3C http://www.w3.org/TR/WCAG20/ •  "Responsive Images Group" - http://responsiveimages.org/

×