Darren Belding @dsbelding Tom Robertshaw @bobbyshaw Responsive Web Design 

Meanbee •  UK Magento Development •  Front End Developer Certified •  Magento since 2008 

Mobile 52% always have phones within arm’s reach 

Mobile 90% use multiple screens to complete a task 

Mobile 81% of mobile purchases are spontaneous 

eCommerce Survey 

Responsive Sites •  2% of eCommerce sites are responsive •  Doubled in 6 months •  66% Magento 

What is responsive design? •  Concept coined by Ethan Marcotte (2010) •  eCommerce is 2 years behind •  Flexibility not fixed. 

Why use it? •  Customer Experience •  SEO •  Maintainability •  Future Friendly 

Effect on Conversion O’Neill Clothing + 66% Skinny Ties + 71% Fathead + 90% 

How? How? 

Content •  Takes precedence •  Information Architecture •  Use cases 

Mobile-first or Desktop-first •  Desktop-first – Legacy systems •  Mobile First – Mobile optimised (load only what device needs) – But IE 

Legacy Browsers •  Consider ROI •  Many tools available: – respond.js (media query polyfill) – selectivizr (css3 selector polyfill) – html5shiv (html5 element enabling script) 

Design Patterns •  Make disciplined decisions •  Document Flow •  Consider navigation across devices •  Restrict interactions to the viewport 

Accessibility •  Accessibility is the foundation of a great design experience •  Mouse, keyboard, touch •  Bandwidth •  Web Content Accessibility Guidelines 

Implementation •  Use a framework or boilerplate •  Tailor to your own needs 

Fluid Grids 

Fluid Grids •  Semantic versus Non-semantic •  CSS Pre-processors (LESS, SASS, Stylus) •  Retain upgradability of Magento 

Interactions •  HTML 5 inputs – tel – number – email – date – pattern •  e.g. pattern="[0-9]*" 

Interactions •  Anchor Types – tel: – sms: – mailto: – skype: 

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

Enhancements •  modernizr (feature detection) •  Gesture Control – Ensure JS and UI support it •  E.g. carousels – Add your own 

Device Branded •  Favicons •  Apple Icons •  Windows Tiles 

Responsive Tables •  Consider content •  Solutions •  responsivetables.js •  Flip scroll •  Unseen column •  Responsive Table 

Responsive Video •  HTML 5 video !! !height: auto !important; ! !width: 100% !important;! •  For everything else there’s Fitvids.js 

Responsive Imagery •  4 success criteria – Fluid – Art-directed – Resolution (retina) – File-size Optimized 

Fluid •  Nice and easy ! ! ! !height: auto !important; ! ! ! !max-width: 100%;! 

Art Directed Focal Points 

Resolution •  Retina-targeted imagery – SVG – HiDPI sprites – Icon fonts – @1.5X @2X – Larger compressed images 

Resolution •  Foresight.js •  picture! •  srcset! 

Adaptive Size & Resolution •  Device size detection •  Resize images before delivery •  Reduce bandwidth, reduce page load time. 

No content

No content

Adaptive Images •  Large image is 1509 x 906 (80KB) •  Small image is 480 x 288 (12KB) •  85% reduction in size 

Device Testing 

RESS Responsive Web Design with Server Side Components 

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 

Magento Exceptions 

Device Experiences •  Choice of Checkout •  Limit product carousels •  Use helpers 

Conclusion Responsive design paired with server side optimisations enables maintainable, future ready, device experiences. 

Go Forth •  Start now •  A lot of documentation and tools available •  You and your clients cannot afford not to. 

Darren Belding @dsbelding Tom Robertshaw @bobbyshaw Responsive Web Design 

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/