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

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 Slide

2. Brendan
   Falkowski
   Gravity Department
   Falkowski
   

   View Slide

3. GravityDept.com
   

   View Slide

4. Design Consulting For
   

   View 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 Slide

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

   View Slide

7. View Slide

8. Advisory Board Member
   Magento Certification
   

   View Slide

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

   View Slide

10. Tell me about weekends.
    

    View Slide

11. 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 Slide

12. More devices,
    More problems
    

    View Slide

13. Multi-Device
    Commerce:
    2014 Edition
    

    View Slide

14. Screens Are Everywhere
    

    View Slide

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

    View Slide

16. 125 square miles
    of LCD screens
    

    View Slide

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

    View Slide

18. 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 Slide

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

    View Slide

20. Responsive design
    is finally rolling out
    

    View Slide

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

    View Slide

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

    View Slide

23. Multi-device users
    are the new normal
    

    View Slide

24. Why I’m back
    

    View Slide

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

    View Slide

26. Fluid multi-device
    experiences are not special
    

    View Slide

27. Responsive design
    ❐
    ✓
    

    View Slide

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

    View Slide

29. What is
    Frontend Strategy?
    

    View Slide

30. Stories
    Data
    Media
    Content
    

    View Slide

31. Identity
    Aesthetic
    Personality
    Branding
    

    View Slide

32. Information
    Voice
    Tone
    Copywriting
    

    View Slide

33. Usability
    Affordances
    Patterns
    Interaction
    

    View Slide

34. On-boarding
    Conversion
    Retention
    User Flows
    

    View Slide

35. Navigation
    Hierarchy
    Relationships
    Information Architecture
    

    View Slide

36. HTML
    CSS
    JavaScript
    Code
    

    View Slide

37. Trust
    Delight
    Confusion
    Emotion
    

    View Slide

38. Uptime
    Latency
    Perception
    Performance
    

    View Slide

39. It’s all part of
    frontend strategy.
    

    View Slide

40. Make a design system.
    

    View Slide

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

    View Slide

42. Complex Systems
    

    View Slide

43. 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 Slide

44. Evolving Design
    Systems
    

    View Slide

45. 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 Slide

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

    View Slide

47. View Slide

48. Mutation from
    Environmental
    Changes
    

    View Slide

49. Natural Selection
    from
    Environmental
    Changes
    ×
    

    View Slide

50. 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 Slide

51. 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 Slide

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

    View Slide

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

    View Slide

54. Environmental factors drive
    evolution — not competition.
    

    View Slide

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

    View Slide

56. Future-friendly
    priorities
    

    View Slide

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

    View Slide

58. Part One:
    Maintainability
    

    View Slide

59. Why are you
    hiring responsive
    design?
    

    View Slide

60. Phone site
    Tablet site
    Desktop site
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. Craftsmanship
    

    View Slide

65. DURABILITY
    

    View Slide

66. Stop chasing trends.
    Make design systems.
    

    View Slide

67. Design Systems
    & Teams
    

    View Slide

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

    View Slide

69. Design systems should
    be like DNA.
    

    View Slide

70. From your
    blood.
    

    View Slide

71. New project.
    Familiar thought process.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. manuals.gravitydept.com
    

    View Slide

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

    View Slide

77. Long-term
    Maintainability
    

    View Slide

78. Complexity × Size = Maintainability
    

    View Slide

79. Complexity
    Management
    

    View Slide

80. 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 Slide

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

    View Slide

82. Smaller systems
    are better systems.
    

    View Slide

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

    View Slide

84. Your frontend
    needs a steward.
    

    View Slide

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

    View Slide

86. Part Two:
    Performance
    

    View Slide

87. What do you
    expect?
    

    View Slide

88. Websites just aren’t that fast.
    

    View Slide

89. How fast are sites
    really?
    

    View Slide

90. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. Performance
    in eCommerce
    

    View Slide

95. OUTPERFORM GOOGLE
    ONE DOES NOT SIMPLY
    

    View Slide

96. 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 Slide

97. 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 Slide

98. 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 Slide

99. 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 Slide

100. 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 Slide

101. These are not projections.
     

     View Slide

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

     View Slide

103. We’re to blame.
     

     View Slide

104. Physics of
     Performance
     

     View Slide

105. View Slide

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

     View Slide

107. 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 Slide

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

     View Slide

109. More bandwidth does not
     improve load time.
     

     View Slide

110. Round Trip Time = Latency
     You
     Request
     Server
     Response
     

     View Slide

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

     View Slide

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

     View Slide

113. View Slide

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

     View Slide

115. 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 Slide

116. Minimize requests to improve
     mobile performance.
     

     View Slide

117. Timings Matter
     

     View Slide

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

     View Slide

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

     View Slide

120. HTML5 Navigation
     Timings API
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

125. Google Analytics page timings
     

     View Slide

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

     View Slide

127. Parsing, Waiting,
     and Rendering
     

     View Slide

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

     View Slide

129. What users see while CSS loads
     

     View Slide

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

     View Slide

131. JavaScript stops
     parallel downloads.
     

     View Slide

132. Put JavaScript before
     the

     View Slide

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

     View Slide

134. Single Point
     of Failure
     

     View Slide

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

     View Slide

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

     View Slide

137. Frontend SPOFs can
     block the entire site.
     

     View Slide

138. Business Metrics
     of Performance
     

     View Slide

139. 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 Slide

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

     View Slide

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

     View Slide

142. Measured
     vs. Perceived
     Performance
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

146. 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 Slide

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

     View Slide

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

     View Slide

149. Speed Index
     

     View Slide

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

     View Slide

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

     View Slide

152. webpagetest.org
     

     View Slide

153. 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 Slide

154. 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 Slide

155. 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 Slide

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

     View Slide

157. The CDN Myth
     

     View Slide

158. View Slide

159. View Slide

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

     View Slide

161. CDN is up.
     We’re good.
     

     View Slide

162. 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 Slide

163. CDNs do not
     clean up your mess.
     

     View Slide

164. 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 Slide

165. Fast Enough?
     

     View Slide

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

     View Slide

167. 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 Slide

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

     View Slide

169. Measure the
     Journey
     

     View Slide

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

     View Slide

171. Measure and optimize
     for the entire flow.
     

     View Slide

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

     View Slide

173. The Right Time
     for Frontend
     Optimization
     

     View Slide

174. View Slide

175. Source
     

     View Slide

176. Without careful governance
     anyone can tank performance.
     

     View Slide

177. Real User
     Monitoring (RUM)
     

     View Slide

178. View Slide

179. RUM alerts you before
     small slips are noticeable.
     

     View Slide

180. Digging
     Yourself Out
     

     View Slide

181. Frontend Audits
     Targeted performance consulting
     from Gravity Department
     

     View Slide

182. 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 Slide

183. Wrapping Up
     

     View Slide

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

     View Slide

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

     View Slide

186. Thank you
     

     View Slide

187. View Slide

188. Q&A
     

     View Slide

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

     View Slide