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

Responsive Evolution (Magento Imagine 2014)

Responsive Evolution (Magento Imagine 2014)

For the last two years, I’ve made the case for responsive, many-device eCommerce websites. Year one was about possibilities. Year two was about my experience on the front lines. This year I’d like to talk about the refinement and evolution of a responsive frontend strategy for the things that matter today.

This presentation highlights how my changing thoughts and practices relating to frontend architecture have improved performance, user experience, and maintainability on multi-device responsive sites.

Conference: Magento Imagine 2014
Speaker: Brendan Falkowski @ http://gravitydept.com
Location: Las Vegas, USA
Date: May 13, 2014

Brendan Falkowski

May 13, 2014
Tweet

More Decks by Brendan Falkowski

Other Decks in Design

Transcript

  1. Responsive
    Evolution
    Refining Priorities in
    Multi-Device Frontend Strategy
    Brendan Falkowski
    Gravity Department
    Magento Imagine Conference
    Las Vegas, Nevada
    May 13, 2014

    View full-size slide

  2. Brendan
    Falkowski
    Gravity Department
    Falkowski

    View full-size slide

  3. GravityDept.com

    View full-size slide

  4. Design Consulting For

    View full-size slide

  5. 2014 Hot 100 List
    2014 Mobile 10 List
    Internet Retailer
    Brilliant Newcomer Nominee
    Top 25 Responsive Designs
    Net Magazine
    Practical eCommerce
    eBay Blog
    Moz
    Web Performance Today
    Featured Across the Web
    KISSmetrics
    Conversion XL
    Smashing Magazine
    eConsultancy
    Mobify
    Creative Bloq
    Yahoo! Small Business
    Media Queries

    View full-size slide

  6. • Used by 1350+ stores
    • 4 years of updates
    • Made for customization
    • Rapid launch
    Acumen Theme
    gravitydept.com/to/acumen

    View full-size slide

  7. Advisory Board Member
    Magento Certification

    View full-size slide

  8. #OperationFrontendSteward
    https://github.com/magento-hackathon/operation-frontend-steward

    View full-size slide

  9. Tell me about weekends.

    View full-size slide

  10. https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-design-once-sell-everywhere
    https://speakerdeck.com/brendanfalkowski/responsive-design-panel-where-why-and-how
    https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two
    2012
    2013

    View full-size slide

  11. More devices,
    More problems

    View full-size slide

  12. Multi-Device
    Commerce:
    2014 Edition

    View full-size slide

  13. Screens Are Everywhere

    View full-size slide

  14. https://twitter.com/BenedictEvans/status/384768567218278401
    square feet
    of LCD
    7.2B people
    ×
    0.5

    View full-size slide

  15. 125 square miles
    of LCD screens

    View full-size slide

  16. 3,997
    in 2012
    http://opensignal.com/reports/fragmentation-2013/
    11,868
    in 2013
    Number of unique
    Android devices

    View full-size slide

  17. http://www.asymco.com/2013/10/08/how-many-smartphone-users-will-there-be-in-the-us/
    ~266 million
    US smartphone
    users by 2020

    View full-size slide

  18. https://twitter.com/asymco/status/407172788093743105
    Desktop
    US eCommerce Traffic by Year
    Thanksgiving + Black Friday
    Phone
    Tablet

    View full-size slide

  19. Responsive design
    is finally rolling out

    View full-size slide

  20. http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/

    View full-size slide

  21. 1%
    in 2012
    http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/
    16%
    in 2013
    eCommerce sites using RWD
    from Alexa Top Million

    View full-size slide

  22. Multi-device users
    are the new normal

    View full-size slide

  23. Why I’m back

    View full-size slide

  24. Universal technology.
    Great investment.
    Customers love it.
    RWD Won

    View full-size slide

  25. Fluid multi-device
    experiences are not special

    View full-size slide

  26. Responsive design


    View full-size slide

  27. Refining Priorities in
    Multi-Device Frontend Strategy
    Responsive Evolution

    View full-size slide

  28. What is
    Frontend Strategy?

    View full-size slide

  29. Stories
    Data
    Media
    Content

    View full-size slide

  30. Identity
    Aesthetic
    Personality
    Branding

    View full-size slide

  31. Information
    Voice
    Tone
    Copywriting

    View full-size slide

  32. Usability
    Affordances
    Patterns
    Interaction

    View full-size slide

  33. On-boarding
    Conversion
    Retention
    User Flows

    View full-size slide

  34. Navigation
    Hierarchy
    Relationships
    Information Architecture

    View full-size slide

  35. HTML
    CSS
    JavaScript
    Code

    View full-size slide

  36. Trust
    Delight
    Confusion
    Emotion

    View full-size slide

  37. Uptime
    Latency
    Perception
    Performance

    View full-size slide

  38. It’s all part of
    frontend strategy.

    View full-size slide

  39. Make a design system.

    View full-size slide

  40. https://twitter.com/rachel_martino/status/461159741897834496
    https://twitter.com/mikeallers/status/465310594329890819
    Twitter search: site #fail

    View full-size slide

  41. Complex Systems

    View full-size slide

  42. A complex system that works is invariably found to
    have evolved from a simple system that worked.
    !
    A complex system designed from scratch never works
    and cannot be patched up to make it work.
    !
    You have to start over with a working simple system.
    Gall’s Theory
    http://en.wikipedia.org/wiki/John_Gall_(author)

    View full-size slide

  43. Evolving Design
    Systems

    View full-size slide

  44. https://www.youtube.com/watch?v=z6kgvhG3AkI
    Evolution is a process that
    adds complexity through
    natural selection.
    !
    This is to say, nature has its
    mediocre designs eaten by
    its good designs.
    !
    ~ Bill Nye, The Science Guy

    View full-size slide

  45. http://www.amnh.org/exhibitions/past-exhibitions/darwin

    View full-size slide

  46. Mutation from
    Environmental
    Changes

    View full-size slide

  47. Natural Selection
    from
    Environmental
    Changes
    ×

    View full-size slide

  48. http://thenextweb.com/socialmedia/2011/08/05/flickr-hits-6-billion-total-photos-but-facebook-does-that-every-2-months/
    6,000,000,000 photos
    uploaded every two months.

    View full-size slide

  49. http://thenextweb.com/socialmedia/2011/08/05/flickr-hits-6-billion-total-photos-but-facebook-does-that-every-2-months/
    Let’s do a photo startup.
    But mobile only.

    View full-size slide

  50. Those that ”fit in” the best
    with the changing environment.
    Survival of the Fittest

    View full-size slide

  51. Friend me?
    Here’s $1 Billion.

    View full-size slide

  52. Environmental factors drive
    evolution — not competition.

    View full-size slide

  53. Are your systems, values,
    and goals fitted to the new
    environment?

    View full-size slide

  54. Future-friendly
    priorities

    View full-size slide

  55. 1. Focus on maintainability
    2. Always respect performance

    View full-size slide

  56. Part One:
    Maintainability

    View full-size slide

  57. Why are you
    hiring responsive
    design?

    View full-size slide

  58. Phone site
    Tablet site
    Desktop site

    View full-size slide

  59. Resources You Need for RWD
    ~Two Sites
    ~One Site ~Three Sites
    Sweet Spot

    View full-size slide

  60. Responsive Design…Technically
    ~Two Sites
    ~One Site ~Three Sites
    Sorry

    View full-size slide

  61. Constant Iterating
    ~Two Sites
    ~One Site ~Three Sites
    Yeya!

    View full-size slide

  62. Craftsmanship

    View full-size slide

  63. Stop chasing trends.
    Make design systems.

    View full-size slide

  64. Design Systems
    & Teams

    View full-size slide

  65. “This is how we work
    and why.”

    View full-size slide

  66. Design systems should
    be like DNA.

    View full-size slide

  67. From your
    blood.

    View full-size slide

  68. New project.
    Familiar thought process.

    View full-size slide

  69. 15%
    Budget spent on pattern library
    and development standards

    View full-size slide

  70. 72%
    Less time spent refactoring
    in the project’s second half

    View full-size slide

  71. Photo credit: https://www.flickr.com/photos/hellogeri/6154038287/
    http://maban.co.uk/projects/front-end-style-guides/ http://gim.ie/fZyK

    View full-size slide

  72. manuals.gravitydept.com

    View full-size slide

  73. https://twitter.com/erikhansen/status/454733933666529280

    View full-size slide

  74. Long-term
    Maintainability

    View full-size slide

  75. Complexity × Size = Maintainability

    View full-size slide

  76. Complexity
    Management

    View full-size slide

  77. OOCSS, BEM,
    SMACSS, PatternLab
    http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
    http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
    http://smacss.com/
    http://patternlab.io/

    View full-size slide

  78. Size
    Management
    https://www.youtube.com/watch?v=ldx4ZFxMEeo

    View full-size slide

  79. Smaller systems
    are better systems.

    View full-size slide

  80. You can build it.
    Should you build it?

    View full-size slide

  81. Your frontend
    needs a steward.

    View full-size slide

  82. The least maintainable system
    is any system after a year
    with no guardian.

    View full-size slide

  83. Part Two:
    Performance

    View full-size slide

  84. What do you
    expect?

    View full-size slide

  85. Websites just aren’t that fast.

    View full-size slide

  86. How fast are sites
    really?

    View full-size slide

  87. 200ms
    Time-to-first-byte
    recommended by Google
    https://developers.google.com/speed/docs/insights/Server

    View full-size slide

  88. 547ms
    TTFB for google.com
    http://www.webpagetest.org/result/140427_8G_NY4/

    View full-size slide

  89. 1894ms
    Page load time for google.com
    http://www.webpagetest.org/result/140427_8G_NY4/

    View full-size slide

  90. Performance
    in eCommerce

    View full-size slide

  91. OUTPERFORM GOOGLE
    ONE DOES NOT SIMPLY

    View full-size slide

  92. Alexa Top 500 Retail Sites
    http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/
    21%
    slower than last year

    View full-size slide

  93. Alexa Top 500 Retail Sites
    http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/
    9.3 seconds
    median page load time

    View full-size slide

  94. Alexa Top 500 Retail Sites
    http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/
    31% heavier
    1.44 Megabytes

    View full-size slide

  95. Alexa Top 100 Retail Sites
    http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/
    20%
    interactive in under 3 seconds

    View full-size slide

  96. Alexa Top 100 Retail Sites
    http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/
    26%
    interactive in over 8 seconds

    View full-size slide

  97. These are not projections.

    View full-size slide

  98. Alexa Top 1000 Sites
    http://www.webperformancetoday.com/2013/11/26/web-page-growth-151-percent/
    151% heavier
    than 3 years ago

    View full-size slide

  99. We’re to blame.

    View full-size slide

  100. Physics of
    Performance

    View full-size slide

  101. Bandwidth is not the barrier.
    http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH

    View full-size slide

  102. Average Bandwidth in 2014
    http://www.akamai.com/dl/akamai/akamai-soti-q413.pdf?WT.mc_id=soti_Q413
    10.0 Mbps
    USA
    3.8 Mbps
    Worldwide

    View full-size slide

  103. http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH
    Page load time vs Bandwidth

    View full-size slide

  104. More bandwidth does not
    improve load time.

    View full-size slide

  105. Round Trip Time = Latency
    You
    Request
    Server
    Response

    View full-size slide

  106. http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH
    Page load time vs Latency

    View full-size slide

  107. https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
    Ideal: 40ms RTT

    View full-size slide

  108. https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
    Actual: 50–100ms RTT

    View full-size slide

  109. Mobile Latency
    https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
    100–1000ms
    Normal latency
    1000–2000ms
    Establish radio link

    View full-size slide

  110. Minimize requests to improve
    mobile performance.

    View full-size slide

  111. Timings Matter

    View full-size slide

  112. HTTP Request Flow
    DNS
    Lookup
    TCP
    Connection Request Response Execute
    Time
    Time To First Byte
    SSL
    Negotiation

    View full-size slide

  113. Load time: backend vs frontend
    stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
    Frontend
    Backend
    13% 87%

    View full-size slide

  114. HTML5 Navigation
    Timings API

    View full-size slide

  115. http://www.w3.org/TR/navigation-timing/#processing-model

    View full-size slide

  116. http://www.w3.org/TR/navigation-timing/#processing-model
    DOM
    Interactive

    View full-size slide

  117. Every asset (CSS, JS, image)
    incurs a new request.

    View full-size slide

  118. http://www.w3.org/TR/navigation-timing/#processing-model
    DOM
    Complete

    View full-size slide

  119. Google Analytics page timings

    View full-size slide

  120. 3.64s not accounted for?
    DOM Interactive (1.31 seconds)
    DOM
    Complete

    View full-size slide

  121. Parsing, Waiting,
    and Rendering

    View full-size slide

  122. CSS blocks the
    critical rendering path.
    http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

    View full-size slide

  123. What users see while CSS loads

    View full-size slide

  124. JavaScript blocks rendering
    and stops downloads.
    http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

    View full-size slide

  125. JavaScript stops
    parallel downloads.

    View full-size slide

  126. Put JavaScript before
    the

    View full-size slide

  127. If the JS architecture
    is blocking, you have
    to work harder.

    View full-size slide

  128. Single Point
    of Failure

    View full-size slide

  129. One part of a system that can stop the entire
    system from working if it fails.
    SPOF

    View full-size slide

  130. http://www.stevesouders.com/blog/2010/06/01/frontend-spof/
    SPOF effects

    View full-size slide

  131. Frontend SPOFs can
    block the entire site.

    View full-size slide

  132. Business Metrics
    of Performance

    View full-size slide

  133. Walmart Business Metrics
    for Performance
    webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
    1s faster
    +2% conversions
    0.1s faster
    +1% Revenue

    View full-size slide

  134. http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
    5 second
    difference in
    page load time
    !
    200% fewer exits

    View full-size slide

  135. 1.Engage users longer
    2.Convert better
    3.Make more money
    Faster Sites

    View full-size slide

  136. Measured
    vs. Perceived
    Performance

    View full-size slide

  137. http://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/
    “window.onload is
    not the best metric
    for measuring site
    speed."

    View full-size slide

  138. HTML
    Images
    2004
    HTML
    Images
    Video
    CSS
    JavaScript
    Web Fonts
    AJAX Requests
    2014

    View full-size slide

  139. “Time to Interaction” is the
    critical metric.
    !
    Not page load time.

    View full-size slide

  140. amazon.com rendering
    http://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/
    After 2.0s
    Looks Mostly Done
    After 5.2s
    DOM Complete

    View full-size slide

  141. It only matters when a site
    looks done — not when
    it’s actually done.

    View full-size slide

  142. Perceived speed can’t be
    measured with a timing event.

    View full-size slide

  143. Speed Index filmstrip
    http://www.webpagetest.org/result/140428_85_WV/

    View full-size slide

  144. Speed Index Area
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

    View full-size slide

  145. webpagetest.org

    View full-size slide

  146. Speed Index from Alexa Top 300,000 sites
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
    1000 2000 3000 4000 5000 6000 7000 8000
    0
    1388
    — faster than 90%
    2191
    — faster than 75%
    3519
    — faster than 50%
    5508
    — faster than 25%
    4493
    — M
    ean

    View full-size slide

  147. Speed Index from Alexa Top 300,000 sites
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
    1000 2000 3000 4000 5000 6000 7000 8000
    0
    Google — 1308
    Am
    azon — 1439
    Skinny Ties — 1800
    Angry Birds Shop
    — 2530
    Hom
    e Depot — 2888
    Sears — 3759
    Apple Store — 4139
    eBay — 4207
    Grainger — 4409
    Dell — 5257
    W
    alm
    art — 7151
    1388
    — faster than 90%
    2191
    — faster than 75%
    3519
    — faster than 50%
    5508
    — faster than 25%
    4493
    — M
    ean

    View full-size slide

  148. My clients running Magento
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
    1000 2000 3000 4000 5000 6000 7000 8000
    0
    1388
    — faster than 90%
    2191
    — faster than 75%
    3519
    — faster than 50%
    5508
    — faster than 25%
    4493
    — M
    ean
    Google — 1308
    Am
    azon — 1439
    Skinny Ties — 1800
    Angry Birds Shop
    — 2530
    Hom
    e Depot — 2888
    Sears — 3759
    Apple Store — 4139
    eBay — 4207
    Grainger — 4409
    Dell — 5257
    W
    alm
    art — 7151

    View full-size slide

  149. With the right frontend
    performance optimizations,
    Magento and RWD are fast.

    View full-size slide

  150. The CDN Myth

    View full-size slide

  151. 75%
    serve content via CDNs
    http://finance.yahoo.com/news/radware-research-reveals-eretailers-content-093000465.html
    Alexa Top 100 Retail Sites

    View full-size slide

  152. CDN is up.
    We’re good.

    View full-size slide

  153. 5.7s
    using CDN
    http://finance.yahoo.com/news/radware-research-reveals-eretailers-content-093000465.html
    4.7s
    no CDN
    Sites using CDNs are slower

    View full-size slide

  154. CDNs do not
    clean up your mess.

    View full-size slide

  155. 1000 2000 3000 4000 5000 6000 7000 8000
    0
    Google — 1308
    Am
    azon — 1439
    Skinny Ties — 1800
    Angry Birds Shop
    — 2530
    Hom
    e Depot — 2888
    Sears — 3759
    Apple Store — 4139
    eBay — 4207
    Grainger — 4409
    Dell — 5257
    W
    alm
    art — 7151
    Skinny Ties doesn’t use a CDN (yet).
    Impressive.

    View full-size slide

  156. Fast Enough?

    View full-size slide

  157. http://timkadlec.com/2014/01/fast-enough/
    How fast is
    fast enough?
    A speed index
    of under 1000.

    View full-size slide

  158. 1000 2000 3000 4000 5000 6000 7000 8000
    0
    Google — 1308
    Am
    azon — 1439
    Skinny Ties — 1800
    Angry Birds Shop
    — 2530
    Hom
    e Depot — 2888
    Sears — 3759
    Apple Store — 4139
    eBay — 4207
    Grainger — 4409
    Dell — 5257
    W
    alm
    art — 7151
    This is fast enough. Good luck.

    View full-size slide

  159. Who has a single-page conversion funnel?
    Show of Hands

    View full-size slide

  160. Measure the
    Journey

    View full-size slide

  161. On-site Conversion Funnel
    Home Catalog Product Cart Checkout

    View full-size slide

  162. Measure and optimize
    for the entire flow.

    View full-size slide

  163. Pre-fetch
    Front-load
    Delay
    Lazy-load
    Bundle
    Cache
    Design
    For These
    Scenarios
    {

    View full-size slide

  164. The Right Time
    for Frontend
    Optimization

    View full-size slide

  165. Without careful governance
    anyone can tank performance.

    View full-size slide

  166. Real User
    Monitoring (RUM)

    View full-size slide

  167. RUM alerts you before
    small slips are noticeable.

    View full-size slide

  168. Digging
    Yourself Out

    View full-size slide

  169. Frontend Audits
    Targeted performance consulting
    from Gravity Department

    View full-size slide

  170. Frontend
    Audits
    Evaluate:
    Goals / targets
    Good practices
    Bad practices
    Advise:
    Missing practices
    Content workflow
    Code quality
    Decide:
    Impact analysis
    Effort analysis
    A/B sampling

    View full-size slide

  171. 1. Focus on maintainability
    2. Always respect performance

    View full-size slide

  172. Frontend strategy
    is a critical investment
    and massive opportunity.

    View full-size slide

  173. Gravity Department
    GravityDept
    gravitydept.com
    magefrontend.com
    Brendan Falkowski
    Falkowski

    View full-size slide