Tom Robertshaw


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, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tom Robertshaw

  1. 1. Responsive Designfor MagentoTom RobertshawDarren Belding  Meanbee@bobbyshaw @darrenbelding1 @meanbee
  2. 2. Meanbee•  UK Magento Development•  Front End Developer Certified•  First Magento Build – 2008
  3. 3. eCommerce Survey
  4. 4. Responsive Sites      1% eCommerce sites are responsive.
  5. 5. Responsive Sites      66% of those are Magento
  6. 6. Responsive•  Coined by Ethan Marcotte in 2010•  eCommerce is 2 years behind•  Bow before Brendan Falkowski & SessionDigital
  7. 7. MOBILE  
  8. 8. Mobile52% always have phones within arm’s reach
  9. 9. Mobile60% mobile use is at home
  10. 10. Mobile81% of mobile purchases are spontaneous
  11. 11. Mobile90% use multiple screens to complete a task
  12. 12. Mobile versus “Mobile”Top 50 sites: “Mobile” 11% is smartphone
  13. 13. Why Responsive?•  Trade off between mobile site or app•  Better for search engines•  Future Proof•  Easier to maintain
  14. 14. Content•  Content-First approach•  Information Architecture•  Use Cases
  15. 15. Responsive Workflow•  Designs to implementation•  Make disciplined choices•  E.g. Order of Markup
  16. 16. Fluid•  Retain natural fluidity of the web•  Responsive layout versus adaptive layout•  Structured approach with grids
  17. 17. Grids
  18. 18. Mobile-First or Desktop Down•  Desktop-down only if cannot rebuild•  Make mobile do the least amount of work•  Disadvantage of mobile-first is old IEs
  19. 19. Assets•  Minimise HTTP Requests•  Document size•  Custom JavaScript at the bottom•  Overloading with External JS (FB/Twitter)•  Sprites•  Icon Fonts
  20. 20. Responsive Assets•  Conditional loading of JS•  Mobile networks compress images•  Consider image size for futurebreakpoints
  21. 21. Focal Points
  22. 22. Retina Imagery•  @2x•  Larger compressed images•  JS Image Replacement
  23. 23. eCommerceProblems  
  24. 24. Product Images•  Pinch-zoom on mobile•  Only use hover-over and lightboxes if youknow its supported
  25. 25. Navigation•  Can get very complicated on mobile!•  Consider location•  Consider accessibility
  26. 26. Product Page•  Consider content flow•  May need multiple add to cart buttons
  27. 27. Checkout•  Vertical Forms•  Keep tasks within viewport•  Woven checkout
  28. 28. Tools  
  29. 29. Tools•  You have everything you need already•  CSS Pre-processors (e.g. SASS)•  Modular•  Inheritance•  Keep Magento Upgradable
  30. 30. SASS
  31. 31. Speed•  Network Inspector•  YSlow•  Network LinkConditioner
  32. 32. Device Testing
  33. 33. RESS(Responsive  Web  Design  with  Server  Side  Components)  
  34. 34. Magento RESS - Exceptions
  35. 35. Magento RESS – Image Helper
  36. 36. Magento RESS - Xbox
  37. 37. Start Now•  You are not too busy.•  You cannot afford not to.•  You set the standard for your business
  38. 38. Responsive Designfor MagentoTom
  39. 39. References•  “The Infinite Dial 2013: Navigating Digital Platforms” - Edison Research .•  “Half of Mobile Phone Owners Always Have Their Device Within Arm’s Length” – Marketing Charts•  “How We Should Handle Responsive Images” – Boagworld•  “The New Multi-Screen World Study” – Google•  “RESS: Responsive Design + Server Side Components” – Luke Wroblewski•  “Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site – Copy Blogger•  “Repurposing vs optimised design” – Nielsen Norman Group•  “Iterative Design of a Mobile Screen” – Neilsen Norman Group•  “New stats: Amazon, Apple have biggest proportion of mobile users” – Geek Wire•  “Focal Point GitHub” – Adam Bradley•  “Retina Revolution” –