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
2. Brendan Falkowski Gravity Department Falkowski
3. GravityDept.com
4. Design Consulting For
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
6. • Used by 1350+ stores • 4 years of updates • Made for customization • Rapid launch Acumen Theme gravitydept.com/to/acumen
8. Advisory Board Member Magento Certification
9. #OperationFrontendSteward https://github.com/magento-hackathon/operation-frontend-steward
10. Tell me about weekends.
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
12. More devices, More problems
13. Multi-Device Commerce: 2014 Edition
14. Screens Are Everywhere
15. https://twitter.com/BenedictEvans/status/384768567218278401 square feet of LCD 7.2B people × 0.5
16. 125 square miles of LCD screens
17. 3,997 in 2012 http://opensignal.com/reports/fragmentation-2013/ 11,868 in 2013 Number of unique Android devices
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
19. https://twitter.com/asymco/status/407172788093743105 Desktop US eCommerce Traffic by Year Thanksgiving + Black Friday Phone Tablet
20. Responsive design is finally rolling out
21. http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/
22. 1% in 2012 http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/ 16% in 2013 eCommerce sites using RWD from Alexa Top Million
23. Multi-device users are the new normal
24. Why I’m back
25. Universal technology. Great investment. Customers love it. RWD Won
26. Fluid multi-device experiences are not special
27. Responsive design ❐ ✓
28. Refining Priorities in Multi-Device Frontend Strategy Responsive Evolution
29. What is Frontend Strategy?
30. Stories Data Media Content
31. Identity Aesthetic Personality Branding
32. Information Voice Tone Copywriting
33. Usability Affordances Patterns Interaction
34. On-boarding Conversion Retention User Flows
35. Navigation Hierarchy Relationships Information Architecture
36. HTML CSS JavaScript Code
37. Trust Delight Confusion Emotion
38. Uptime Latency Perception Performance
39. It’s all part of frontend strategy.
40. Make a design system.
41. https://twitter.com/rachel_martino/status/461159741897834496 https://twitter.com/mikeallers/status/465310594329890819 Twitter search: site #fail
42. Complex Systems
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)
44. Evolving Design Systems
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
46. http://www.amnh.org/exhibitions/past-exhibitions/darwin
48. Mutation from Environmental Changes
49. Natural Selection from Environmental Changes ×
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.
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.
52. Those that ”fit in” the best with the changing environment. Survival of the Fittest
53. Friend me? Here’s $1 Billion.
54. Environmental factors drive evolution — not competition.
55. Are your systems, values, and goals fitted to the new environment?
56. Future-friendly priorities
57. 1. Focus on maintainability 2. Always respect performance
58. Part One: Maintainability
59. Why are you hiring responsive design?
60. Phone site Tablet site Desktop site
61. Resources You Need for RWD ~Two Sites ~One Site ~Three Sites Sweet Spot
62. Responsive Design…Technically ~Two Sites ~One Site ~Three Sites Sorry
63. Constant Iterating ~Two Sites ~One Site ~Three Sites Yeya!
64. Craftsmanship
65. DURABILITY
66. Stop chasing trends. Make design systems.
67. Design Systems & Teams
68. “This is how we work and why.”
69. Design systems should be like DNA.
70. From your blood.
71. New project. Familiar thought process.
72. 15% Budget spent on pattern library and development standards
73. 72% Less time spent refactoring in the project’s second half
74. Photo credit: https://www.flickr.com/photos/hellogeri/6154038287/ http://maban.co.uk/projects/front-end-style-guides/ http://gim.ie/fZyK
75. manuals.gravitydept.com
76. https://twitter.com/erikhansen/status/454733933666529280
77. Long-term Maintainability
78. Complexity × Size = Maintainability
79. Complexity Management
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/
81. Size Management https://www.youtube.com/watch?v=ldx4ZFxMEeo
82. Smaller systems are better systems.
83. You can build it. Should you build it?
84. Your frontend needs a steward.
85. The least maintainable system is any system after a year with no guardian.
86. Part Two: Performance
87. What do you expect?
88. Websites just aren’t that fast.
89. How fast are sites really?
91. 200ms Time-to-first-byte recommended by Google https://developers.google.com/speed/docs/insights/Server
92. 547ms TTFB for google.com http://www.webpagetest.org/result/140427_8G_NY4/
93. 1894ms Page load time for google.com http://www.webpagetest.org/result/140427_8G_NY4/
94. Performance in eCommerce
95. OUTPERFORM GOOGLE ONE DOES NOT SIMPLY
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
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
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
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
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
101. These are not projections.
102. Alexa Top 1000 Sites http://www.webperformancetoday.com/2013/11/26/web-page-growth-151-percent/ 151% heavier than 3 years ago
103. We’re to blame.
104. Physics of Performance
106. Bandwidth is not the barrier. http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH
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
108. http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH Page load time vs Bandwidth
109. More bandwidth does not improve load time.
110. Round Trip Time = Latency You Request Server Response
111. http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH Page load time vs Latency
112. https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/ Ideal: 40ms RTT
114. https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/ Actual: 50–100ms RTT
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
116. Minimize requests to improve mobile performance.
117. Timings Matter
118. HTTP Request Flow DNS Lookup TCP Connection Request Response Execute Time Time To First Byte SSL Negotiation
119. Load time: backend vs frontend stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ Frontend Backend 13% 87%
120. HTML5 Navigation Timings API
121. http://www.w3.org/TR/navigation-timing/#processing-model
122. http://www.w3.org/TR/navigation-timing/#processing-model DOM Interactive
123. Every asset (CSS, JS, image) incurs a new request.
124. http://www.w3.org/TR/navigation-timing/#processing-model DOM Complete
125. Google Analytics page timings
126. 3.64s not accounted for? DOM Interactive (1.31 seconds) DOM Complete
127. Parsing, Waiting, and Rendering
128. CSS blocks the critical rendering path. http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
129. What users see while CSS loads
130. JavaScript blocks rendering and stops downloads. http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
131. JavaScript stops parallel downloads.
132. Put JavaScript before the </body> tag.
133. If the JS architecture is blocking, you have to work harder.
134. Single Point of Failure
135. One part of a system that can stop the entire system from working if it fails. SPOF
136. http://www.stevesouders.com/blog/2010/06/01/frontend-spof/ SPOF effects
137. Frontend SPOFs can block the entire site.
138. Business Metrics of Performance
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
140. http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/ 5 second difference in page load time ! 200% fewer exits
141. 1.Engage users longer 2.Convert better 3.Make more money Faster Sites
142. Measured vs. Perceived Performance
143. http://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/ “window.onload is not the best metric for measuring site speed."
144. HTML Images 2004 HTML Images Video CSS JavaScript Web Fonts AJAX Requests 2014
145. “Time to Interaction” is the critical metric. ! Not page load time.
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
147. It only matters when a site looks done — not when it’s actually done.
148. Perceived speed can’t be measured with a timing event.
149. Speed Index
150. Speed Index filmstrip http://www.webpagetest.org/result/140428_85_WV/
151. Speed Index Area https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
152. webpagetest.org
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
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
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
156. With the right frontend performance optimizations, Magento and RWD are fast.
157. The CDN Myth
160. 75% serve content via CDNs http://finance.yahoo.com/news/radware-research-reveals-eretailers-content-093000465.html Alexa Top 100 Retail Sites
161. CDN is up. We’re good.
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
163. CDNs do not clean up your mess.
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.
165. Fast Enough?
166. http://timkadlec.com/2014/01/fast-enough/ How fast is fast enough? A speed index of under 1000.
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.
168. Who has a single-page conversion funnel? Show of Hands
169. Measure the Journey
170. On-site Conversion Funnel Home Catalog Product Cart Checkout
171. Measure and optimize for the entire flow.
172. Pre-fetch Front-load Delay Lazy-load Bundle Cache Design For These Scenarios {
173. The Right Time for Frontend Optimization
175. Source
176. Without careful governance anyone can tank performance.
177. Real User Monitoring (RUM)
179. RUM alerts you before small slips are noticeable.
180. Digging Yourself Out
181. Frontend Audits Targeted performance consulting from Gravity Department
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
183. Wrapping Up
184. 1. Focus on maintainability 2. Always respect performance
185. Frontend strategy is a critical investment and massive opportunity.
186. Thank you
188. Q&A
189. Gravity Department GravityDept gravitydept.com magefrontend.com Brendan Falkowski Falkowski