Responsive Design

Tom Robertshaw & Darren Belding Meanbee

Meanbee

•  UK Magento Development

•  First eCommerce build 2008

•  Graduated 2011

eCommerce Survey

52% always have phones within arm’s reach

Mobile

Mobile

60% mobile use is at home

Mobile

81% of mobile purchases are spontaneous

Mobile

90% use multiple screens to complete a task

Responsive Sites

1% eCommerce sites are responsive.

Responsive Sites

66% of those are Magento

History

•  Coined by Ethan Marcotte in 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%

Content

•  Takes precedence

•  Information Architecture

•  Use Cases

Mobile-first or Desktop-first

•  Desktop-first –  Legacy Systems –  Good for IE

•  Mobile-first –  Load only what the device needs

Legacy Browsers

•  Consider ROI

•  Many tools available –  respond.js (media query polyfill) –  selectivizr (CSS 3 selector polyfill) –  html5shiv (HTML 5 element enabling script)

Design Patterns

•  Document flow

•  Consider navigation across devices

•  Visible feedback in viewport

Implementation

•  Use a framework or boilerplate

•  Tailor to your own needs

Methodology

•  Semantic versus non-semantic •  featured-products, search-container, footer-actions

•  small-5, push-2, small-offset-1

•  CSS Pre-processors (LESS, SASS, Stylus)

•  Retain Magento upgradability

Accessibility

•  Foundation of a great design experience

•  Mouse, keyboard, touch

•  Slow connection

•  Web Content Accessibility Guidelines •  We recommend AA

Device Branded

•  Apple Icons

•  Window Tiles

Interactions HTML 5 inputs

–  tel

–  number

–  email

–  date

–  pattern

•  e.g. pattern=”[0-9]*”

Enhancements

•  Modernizr (feature detection)

•  Gesture Control –  Ensure JS and UI support it e.g. Carousels. –  Add your own

Responsive Assets

Conditional loading of JS –  matchMedia

–  enquire.js –  harvey.js

Assets

•  Minimise HTTP Requests •  Sprites •  Avoid weighty JS libraries •  Custom JS at the bottom •  Overloading with External JS (FB/Twitter)

Speed

•  Network Inspector

•  YSlow

•  Network Link Conditioner

Responsive Imagery 4 success criteria

•  Fluid

•  Art-directed

•  Resolution (retina)

•  File-size optimized

Fluid Nice and easy

height: auto !important;

max-width: 100%;

Focal Points

Retina Imagery

•  SVG

•  Icon Fonts

•  @1.5X @2x

•  Larger compressed images

picture, srcset

Deliver optimised image for viewport <span data-picture data-alt="Ordnance Survey"> <span data-src=”/ordnancesurvey-custommade.png"></span> <span data-src=”/ordnancesurvey-custommade@2x.png" data-

media=“only screen and(min-device-pixel-ratio:2)"></span> <span data-src="/ordnancesurvey-custommade-650.png" data-

media="(min-width: 400px)"></span> <span data-src=”/ordnancesurvey-custommade-650@2x.png" data-

media="(min-width: 400px) only screen and (min-device-pixel-ratio:2) "></span> <noscript> <img src=”/ordnancesurvey-custommade.png" alt="Ordnance Survey"> </noscript> </span>

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

RESS (Responsive Web Design with Server Side Components)

RESS •  Component-level optimization for performance

•  82 of top 100 Alexa sites deliver different content based on user-agent

•  Necessary evil to change device experience

Magento Exceptions

Conclusion

Responsive design paired with server side optimisations enables maintainable, future ready

device experiences

Start Now

•  You are not too busy.

•  You cannot afford not to.

•  You set the standard for your business

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/

•  "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?16

•  "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/0120111_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/