Responsive Web Design in Magento (Meet Magento Poland 2013)

Bf9f3f29049791136b9b815f59e1f09c?s=47 Meanbee
November 05, 2013

Responsive Web Design in Magento (Meet Magento Poland 2013)

We talk about how the responsive design concept has changed our mentality for approaching the multi-device web. We share our knowledge and experiences of implementing this concept in Magento, covering the shift in developer thinking, implementation examples and solutions to common ecommerce problems.

Presented by Darren Belding and Tom Robertshaw

Bf9f3f29049791136b9b815f59e1f09c?s=128

Meanbee

November 05, 2013
Tweet

Transcript

  1. Darren Belding @dsbelding Tom Robertshaw @bobbyshaw Responsive Web Design

  2. Meanbee •  UK Magento Development •  Front End Developer Certified

    •  Magento since 2008
  3. Mobile 52% always have phones within arm’s reach

  4. Mobile 90% use multiple screens to complete a task

  5. Mobile 81% of mobile purchases are spontaneous

  6. eCommerce Survey

  7. Responsive Sites •  2% of eCommerce sites are responsive • 

    Doubled in 6 months •  66% Magento
  8. What is responsive design? •  Concept coined by Ethan Marcotte

    (2010) •  eCommerce is 2 years behind •  Flexibility not fixed.
  9. Why use it? •  Customer Experience •  SEO •  Maintainability

    •  Future Friendly
  10. Effect on Conversion O’Neill Clothing + 66% Skinny Ties +

    71% Fathead + 90%
  11. How? How?

  12. Content •  Takes precedence •  Information Architecture •  Use cases

  13. Mobile-first or Desktop-first •  Desktop-first – Legacy systems •  Mobile First

    – Mobile optimised (load only what device needs) – But IE
  14. Legacy Browsers •  Consider ROI •  Many tools available: – respond.js

    (media query polyfill) – selectivizr (css3 selector polyfill) – html5shiv (html5 element enabling script)
  15. Design Patterns •  Make disciplined decisions •  Document Flow • 

    Consider navigation across devices •  Restrict interactions to the viewport
  16. Accessibility •  Accessibility is the foundation of a great design

    experience •  Mouse, keyboard, touch •  Bandwidth •  Web Content Accessibility Guidelines
  17. Implementation •  Use a framework or boilerplate •  Tailor to

    your own needs
  18. Fluid Grids

  19. Fluid Grids •  Semantic versus Non-semantic •  CSS Pre-processors (LESS,

    SASS, Stylus) •  Retain upgradability of Magento
  20. Interactions •  HTML 5 inputs – tel – number – email – date – pattern

    •  e.g. pattern="[0-9]*"
  21. Interactions •  Anchor Types – tel: – sms: – mailto: – skype:

  22. Interactions •  Larger touch area – Buttons – Tabs – Form Fields

  23. Enhancements •  modernizr (feature detection) •  Gesture Control – Ensure JS

    and UI support it •  E.g. carousels – Add your own
  24. Device Branded •  Favicons •  Apple Icons •  Windows Tiles

  25. Responsive Tables •  Consider content •  Solutions •  responsivetables.js • 

    Flip scroll •  Unseen column •  Responsive Table
  26. Responsive Video •  HTML 5 video !! !height: auto !important;

    ! !width: 100% !important;! •  For everything else there’s Fitvids.js
  27. Responsive Imagery •  4 success criteria – Fluid – Art-directed – Resolution (retina)

    – File-size Optimized
  28. Fluid •  Nice and easy ! ! ! !height: auto

    !important; ! ! ! !max-width: 100%;!
  29. Art Directed Focal Points

  30. Resolution •  Retina-targeted imagery – SVG – HiDPI sprites – Icon fonts – @1.5X

    @2X – Larger compressed images
  31. Resolution •  Foresight.js •  picture! •  srcset!

  32. Adaptive Size & Resolution •  Device size detection •  Resize

    images before delivery •  Reduce bandwidth, reduce page load time.
  33. None
  34. None
  35. Adaptive Images •  Large image is 1509 x 906 (80KB)

    •  Small image is 480 x 288 (12KB) •  85% reduction in size
  36. Device Testing

  37. RESS Responsive Web Design with Server Side Components

  38. RESS •  Optimization at the component level to increase performance

    •  82 of top 100 Alexa site deliver different content based on user agent. •  Necessary evil to change device experience
  39. Magento Exceptions

  40. Device Experiences •  Choice of Checkout •  Limit product carousels

    •  Use helpers
  41. Conclusion Responsive design paired with server side optimisations enables maintainable,

    future ready, device experiences.
  42. Go Forth •  Start now •  A lot of documentation

    and tools available •  You and your clients cannot afford not to.
  43. Darren Belding @dsbelding Tom Robertshaw @bobbyshaw Responsive Web Design

  44. 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/ •  “Focal Point GitHub” – Adam Bradley https://github.com/adamdbradley/focal-point •  “Foresight GitHub” – Adam Bradley https://github.com/adamdbradley/foresight.js/ •  “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?1691 •  “Adaptive Images” – Matt Wilcox http://adaptive-images.com/ •  “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/20120111_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/