Responsive Design for Magento (Meet Magento Netherlands 2013)

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Responsive Design for Magento Tom Robertshaw Darren Belding! Meanbee @bobbyshaw @darrenbelding1 @meanbee

Slide 3

Slide 3 text

Meanbee •  UK Magento Development •  Front End Developer Certiﬁed •  First Magento Build – 2008

Slide 4

Slide 4 text

eCommerce Survey

Slide 5

Slide 5 text

Responsive Sites ! ! ! 1% eCommerce sites are responsive.

Slide 6

Slide 6 text

Responsive Sites ! ! ! 66% of those are Magento

Slide 7

Slide 7 text

Responsive •  Coined by Ethan Marcotte in 2010 •  eCommerce is 2 years behind •  Bow before Brendan Falkowski & Session Digital

Slide 8

Slide 8 text

MOBILE!

Slide 9

Slide 9 text

Mobile 52% always have phones within arm’s reach

Slide 10

Slide 10 text

Mobile 60% mobile use is at home

Slide 11

Slide 11 text

Mobile 81% of mobile purchases are spontaneous

Slide 12

Slide 12 text

Mobile 90% use multiple screens to complete a task

Slide 13

Slide 13 text

Mobile versus “Mobile” Top 50 sites: “Mobile” 11% is smartphone

Slide 14

Slide 14 text

Why Responsive? •  Trade off between mobile site or app •  Better for search engines •  Future Proof •  Easier to maintain

Slide 15

Slide 15 text

Content •  Content-First approach •  Information Architecture •  Use Cases

Slide 16

Slide 16 text

Responsive Workﬂow •  Designs to implementation •  Make disciplined choices •  E.g. Order of Markup

Slide 17

Slide 17 text

Fluid •  Retain natural ﬂuidity of the web •  Responsive layout versus adaptive layout •  Structured approach with grids

Slide 18

Slide 18 text

Grids

Slide 19

Slide 19 text

Mobile-First or Desktop Down •  Desktop-down only if cannot rebuild •  Make mobile do the least amount of work •  Disadvantage of mobile-ﬁrst is old IEs

Slide 20

Slide 20 text

Assets •  Minimise HTTP Requests •  Document size •  Custom JavaScript at the bottom •  Overloading with External JS (FB/Twitter) •  Sprites •  Icon Fonts

Slide 21

Slide 21 text

Responsive Assets •  Conditional loading of JS •  Mobile networks compress images •  Consider image size for future breakpoints

Slide 22

Slide 22 text

Focal Points

Slide 23

Slide 23 text

Retina Imagery •  @2x •  Larger compressed images •  JS Image Replacement

Slide 24

Slide 24 text

eCommerce Problems!

Slide 25

Slide 25 text

Product Images •  Pinch-zoom on mobile •  Only use hover-over and lightboxes if you know its supported

Slide 26

Slide 26 text

Navigation •  Can get very complicated on mobile! •  Consider location •  Consider accessibility

Slide 27

Slide 27 text

Product Page •  Consider content ﬂow •  May need multiple add to cart buttons

Slide 28

Slide 28 text

Checkout •  Vertical Forms •  Keep tasks within viewport •  Woven checkout

Slide 29

Slide 29 text

Tools!

Slide 30

Slide 30 text

Tools •  You have everything you need already •  CSS Pre-processors (e.g. SASS) •  Modular •  Inheritance •  Keep Magento Upgradable

Slide 31

Slide 31 text

SASS

Slide 32

Slide 32 text

Speed •  Network Inspector •  YSlow •  Network Link Conditioner

Slide 33

Slide 33 text

Device Testing

Slide 34

Slide 34 text

RESS (Responsive!Web!Design!with!Server!Side!Components)!

Slide 35

Slide 35 text

Magento RESS - Exceptions

Slide 36

Slide 36 text

Magento RESS – Image Helper

Slide 37

Slide 37 text

Magento RESS - Xbox

Slide 38

Slide 38 text

Start Now •  You are not too busy. •  You cannot afford not to. •  You set the standard for your business

Slide 39

Slide 39 text

Responsive Design for Magento Tom Robertshaw [email protected] @bobbyshaw Darren Belding [email protected] @darrenbelding1 Meanbee @meanbee

Slide 40

Slide 40 text

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/

Slide 41

Slide 41 text

No content