Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design for Magento (Meet Magento Netherlands 2013)

Meanbee
May 30, 2013

Responsive Design for Magento (Meet Magento Netherlands 2013)

This session was inspired by recent work within the Meanbee team in the field of responsive design.

We would also like to thank Brendan Falkowski for his expertise and influence in the area.

We gave details on why responsive is useful, how to start building responsively, what tools might be useful and some of the problems and techniques that we have employed.

Presented by Darren Belding and Tom Robertshaw

Meanbee

May 30, 2013
Tweet

More Decks by Meanbee

Other Decks in Design

Transcript

  1. Responsive •  Coined by Ethan Marcotte in 2010 •  eCommerce

    is 2 years behind •  Bow before Brendan Falkowski & Session Digital
  2. Why Responsive? •  Trade off between mobile site or app

    •  Better for search engines •  Future Proof •  Easier to maintain
  3. Fluid •  Retain natural fluidity of the web •  Responsive

    layout versus adaptive layout •  Structured approach with grids
  4. 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
  5. Assets •  Minimise HTTP Requests •  Document size •  Custom

    JavaScript at the bottom •  Overloading with External JS (FB/Twitter) •  Sprites •  Icon Fonts
  6. Responsive Assets •  Conditional loading of JS •  Mobile networks

    compress images •  Consider image size for future breakpoints
  7. Tools •  You have everything you need already •  CSS

    Pre-processors (e.g. SASS) •  Modular •  Inheritance •  Keep Magento Upgradable
  8. Start Now •  You are not too busy. •  You

    cannot afford not to. •  You set the standard for your business
  9. 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/ •  “How We Should Handle Responsive Images” – Boagworld http://boagworld.com/dev/how-should-we-handle-responsive-images/ •  “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 •  “Retina Revolution” – Netvlies.nl http://blog.netvlies.nl/design-interactie/retina-revolution/