Tom Robertshaw

1,471 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, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,471
On SlideShare
0
From Embeds
0
Number of Embeds
315
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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 Robertshawtom@meanbee.com@bobbyshawDarren Beldingdarren@meanbee.com@darrenbelding1Meanbee@meanbee
  39. 39. References•  “The Infinite Dial 2013: Navigating Digital Platforms” - Edison Researchhttp://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 Chartshttp://www.marketingcharts.com/wp/interactive/half-of-mobile-phone-owners-always-have-their-device-within-arms-length-28367/•  “How We Should Handle Responsive Images” – Boagworldhttp://boagworld.com/dev/how-should-we-handle-responsive-images/•  “The New Multi-Screen World Study” – Googlehttp://www.google.com/think/research-studies/the-new-multi-screen-world-study.html•  “RESS: Responsive Design + Server Side Components” – Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1392•  “Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site – Copy Bloggerhttp://www.copyblogger.com/mobile-responsive-design-benefits/•  “Repurposing vs optimised design” – Nielsen Norman Grouphttp://www.nngroup.com/articles/repurposing-vs-optimized-design/•  “Iterative Design of a Mobile Screen” – Neilsen Norman Grouphttp://www.nngroup.com/articles/iterative-design-mobile-screen/•  “New stats: Amazon, Apple have biggest proportion of mobile users” – Geek Wirehttp://www.geekwire.com/2013/multiplatform-stats-amazon-apple-biggest-proportion-mobile-users/•  “Focal Point GitHub” – Adam Bradley https://github.com/adamdbradley/focal-point•  “Retina Revolution” – Netvlies.nl http://blog.netvlies.nl/design-interactie/retina-revolution/

×