Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
- 1. Two Approaches to RWD: Pure & Hybrid Brendan Falkowski Gravity Department Meet Magento NYC New York, New York September 22, 2014
- 2. Brendan Falkowski Gravity Department Falkowski
- 4. Frontend Consulting For $4B B2B leader (private beta)
- 6. Internet Retailer 2014 Hot 100 List 2014 Mobile 10 List Net Magazine Brilliant Newcomer Nominee Top 25 Responsive Designs Featured Across the Web Practical eCommerce eBay Blog Moz Web Performance Today KISSmetrics Conversion XL Smashing Magazine eConsultancy Mobify Creative Bloq Yahoo! Small Business Media Queries
- 7. Acumen Theme • Used by 1350+ stores • 4 years of updates • Made for customization • Rapid launch gravitydept.com/to/acumen
- 9. Magento Certification Advisory Board Member
- 11. 2012 2013 2014 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 https://speakerdeck.com/brendanfalkowski/responsive-evolution You Are Here
- 12. Two Approaches to RWD: Pure and Hybrid
- 13. Two Approaches to RWD: Pure and Hybrid
- 16. Words mean what you think, except when they don’t.
- 17. Responsive Design Adaptive Design Adaptive Layout Proxy Sites M-DOT Sites Hybrids Retrofitting Dynamic Serving RESS …?
- 18. Responsive Web Design (RWD)
- 19. 1. Fluid grid 2. Flexible content 3. Media queries
- 20. Pure RWD === RWD Keep it simple.
- 21. HTML } Google Glass CSS Smartphone Small Tablet Big Tablet Netbook Laptop Computer Desktop Computer Television ?
- 22. Apply this. { { Google Glass Smartphone Small Tablet (you) Big Tablet Netbook Laptop Computer Desktop Computer Television ? Ignore this.
- 23. Retrofitting RWD augments desktop problems.
- 24. Mobile First Designing for the highest constraints makes you prioritize. http://www.abookapart.com/products/mobile-first
- 25. Progressive Enhancement Improve the content. Don’t degrade the experience. http://alistapart.com/article/understandingprogressiveenhancement
- 27. Blame the implementation not the technique.
- 28. Most RWD sites are rushed and not great today.
- 29. Blame RWD? Or take responsibility?
- 31. Adaptive Design
- 32. Adaptive Design Any variation in response to the environment.
- 33. Adaptive Design as Progressive Enhancement Selecting a smart default and layering on capabilities if the task supports them.
- 34. City or zip code… Find Store Use GPS
- 35. Adaptive Design Responsive Design
- 36. Adaptive Layout
- 37. Adaptive Design Responsive Design Adaptive Layout
- 38. 3” Retrofit for one breakpoint Tablet / Desktop Layout Screen Size Phone Layout Fixed desktop site 5” 7” 9” 11” 13” 15” 24” 30” 42”
- 39. Retrofitting adaptive layout. Not great.
- 40. Who chooses Adaptive Layout? 1. Not ready to modify desktop site. 2. No experience designing for non-fixed layouts. 3. Much faster than responsive design.
- 41. Adaptive layout is like pretending only small + big screens exist.
- 42. Proxy Site
- 43. m.site.com site.com Fixed Fixed Size Size
- 44. Proxies sacrifice for speed by ripping out content and functionality.
- 45. Jane Doe’s context and goals are not inferred by her device’s characteristics.
- 46. Where is the elusive T-DOT?
- 47. Three codebases? 1. Expensive and annoying to implement code three times. 2. 3.
- 48. Three codebases? 1. Expensive and annoying to implement code three times. 2. Discrepancies create a bad user experience. 3.
- 49. Three codebases? 1. Expensive and annoying to implement code three times. 2. Discrepancies create a bad user experience. 3. Broad changes incur massive technical debt.
- 50. Multiple proxies are inefficient, ineffective, and expensive.
- 52. m.site.com site.com RWD Destined to Fixed Size replace the desktop site
- 53. Responsive Proxies The Guardian BBC Entertainment Weekly
- 54. Our plan is that this will grow up to be a much better replacement for our current desktop site, but we’re a long while away from that. “ Chris Mulholland Product Manager @ The Guardian http://www.designweek.co.uk/news/guardian-unveils-new-responsive-website/3037904.article
- 55. Responsive proxies are favorable with limited resources.
- 56. Dynamic Serving
- 57. User Send response via same URL 1 Inspect device site.com Generate mobile site 2 Generate desktop site 3
- 58. A single domain is better for SEO than proxies.
- 59. 1. You have to inspect the browser accurately.
- 60. 2. Delivering variations cannot impact performance.
- 61. 3. Still need multiple frontend implementations.
- 62. sweetwater.com Phone Tablet Desktop
- 63. shop.lego.com Phone Tablet Desktop
- 64. Responsive Design with Server-Side Components (RESS)
- 65. One RWD site with component variations. RWD Different RWD header component
- 67. No platforms support component-driven variation today.
- 68. RESS is the only bridge between responsive design and delivery optimization.
- 69. Google now executes JS and renders CSS during indexing. http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html
- 70. Badly written or blocking JS/CSS can derail search spiders.
- 71. Progress rendering and on-demand content can finally be indexed fully.
- 72. JavaScript will make RESS-like variation accessible sooner.
- 73. Part 2/4: RESS Survey
- 75. Resizing your browser usually won’t trigger RESS variations.
- 76. Feature detection may rely on an external database queried by user agent.
- 77. If device characteristics or user agent don’t line up, you won’t notice RESS.
- 78. My RESS Survey
- 80. RESS Survey Responses 326 Using RWD 17 Using RESS
- 81. Why so few responses? 1. Survey is self-reported. 2. 3.
- 82. Why so few responses? 1. Survey is self-reported. 2. No platforms have RESS built-in. 3.
- 83. Why so few responses? 1. Survey is self-reported. 2. No platforms have RESS built-in. 3. Custom work is proprietary.
- 84. Results are a sampling of RESS practices today.
- 85. Special thanks to: Micah Davis, http://ovenbits.com John Tornow, http://ovenbits.com Marc Rinderknecht, http://kobebeef.ch Aaron T. Grogg, http://aarontgrogg.com Remi Grumeau, http://www.remi-grumeau.com
- 87. How long have you used RWD? 33% 28% 19% 14% <1 Year 1–2 Years 2–3 Years 3–4 Years 6% Never (Disqualified)
- 88. How do you detect which RESS variation to send? Detection Method OS sniffing Browser sniffing Viewport measurement Frameworks MobileDetect WURFL Homegrown system
- 89. Most feature detection starts being applied on the second page load.
- 90. What percentage of content are you serving with RESS?
- 91. 5–10% Of content served by RESS
- 92. Minimal RESS usage reinforces that RWD handles most things well.
- 93. What are you serving differently through RESS?
- 94. What are you serving differently through RESS? Most Common Images CSS bundles JS bundles Header / footer markup Navigation markup
- 95. What are you serving differently through RESS? Enhancements Richer media (image carousels) Video format optimization Ad position management SVG / PNG icons Data URIs / URLs in CSS Saving gift cards to iOS Passbook
- 96. What are you serving differently through RESS? Fallbacks Simpler navigation for feature phones Rendering animations as flat images Sending less content for low-bandwidth
- 97. Where did RESS have the biggest impact on UX? Navigation (by far) Images Forms Complex tables Non-critical content (social share) Markup source order Separation of content / layout templates
- 98. RESS reduces the need for developers to span code from IE8 to iOS7.
- 99. What impact did RESS have on performance?
- 100. RESS can unhinge your caching/CDN technology.
- 101. Did the CMS/platform facilitate or discourage the use of RESS?
- 102. Did the CMS/platform facilitate or discourage the use of RESS? 33% 33% Existing 33% Plugin Custom Plugin Custom Platform
- 103. Can you share any relevant before/after analytics?
- 104. Potential for Significant Control Desktop 2.0 MB 41 requests Smartphone 390 KB 13 requests
- 105. How important is RESS to the future of RWD?
- 106. RESS is a cure for “frontend amnesia”. ! Client-side feature detection is asking the same questions to every device thousands of times without remembering the answer. ! Once you’ve identified a device, the screen size and CSS support won’t change mid-session. “
- 107. We don’t think RESS is the answer to RWD, but either RESS or conditional “ loading are necessary today.
- 108. Every site should be responsive. Not every site needs RESS. “ If it isn't needed, congrats, you owe your design team a few rounds of drinks.
- 109. Part 3/4: Viable Solutions
- 110. RWD !== Proxy !== Dynamic Serving !== RESS
- 111. The efficacy of these approaches is not equivalent.
- 112. Each strategy has trade-offs. It’s different for every business.
- 113. RWD is wonderful. It’s not always the right choice.
- 115. 1. Responsive Design Same set of URLs. Same HTML and CSS. UI evaluated relative to the device. https://developers.google.com/webmasters/smartphone-sites/details
- 116. 2. Dynamic Serving Same set of URLs. Different HTML and CSS for specific devices. Includes full-page adaptation and RESS. https://developers.google.com/webmasters/smartphone-sites/details
- 117. 3. Proxy Sites Separate URLs for mobile and desktop sites. https://developers.google.com/webmasters/smartphone-sites/details
- 118. Google’s suggestions hint at pitfalls in each approach.
- 119. Problems with Proxy Sites
- 120. Duplicate content splits attribution for your URLs.
- 121. Proxy sites can force you to compete against yourself.
- 122. Competitors can easily outrank your split attribution.
- 123. Bad UX of Proxy Sites On desktop ➔ Click m.site.com link ➔ D’oh On smartphone ➔ Click site.com link ➔ D’oh
- 124. Bi-Directional Annotations Allow websites to notify search engines of alternate representations. http://searchengineland.com/switchboard-tags-like-canonical-tags-but-for-mobile-seo-127676
- 125. Bi-Directional Annotations For every desktop page: <link rel="alternate" media="only screen and (max-width: 640px)” href=“http://m.site.com/page-name” /> For every mobile page: <link rel="canonical" href="http://www.example.com/page-name" /> https://developers.google.com/webmasters/smartphone-sites/details
- 126. Among the IR500 with M-DOT sites: 50% Don’t set redirects to equivalent content from their M-DOT sites http://moz.com/ugc/the-definitive-guide-to-googles-new-mobile-seo-rules
- 127. Among the IR500 with M-DOT sites: 95% Don’t set desktop ➔ mobile annotations at all http://moz.com/ugc/the-definitive-guide-to-googles-new-mobile-seo-rules
- 128. Incomplete / incorrect proxy configuration will rank your site lower.
- 129. Among the IR500 with M-DOT sites: 4.5% Correctly implement bi-directional annotations http://moz.com/ugc/the-definitive-guide-to-googles-new-mobile-seo-rules
- 130. ONE DOES NOT SIMPLY FOLLOW DIRECTIONS
- 131. Companies should be penalized for redirecting badly, and they are.
- 133. Problems with Dynamic Serving
- 134. Vary: User-Agent HTTP Header
- 135. Vary: User-Agent 1. Signals to caches that response differs based on User Agent 2. http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
- 136. Vary: User-Agent 1. Signals to caches that response differs based on User Agent 2. Signals to search engines that additional crawlers are needed http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
- 137. CDN services will not cache content served with “vary headers”.
- 138. User-agents vary so wildly that they are almost unique for every individual. If you Vary on User-Agent then intermediate caches will pretty much end up never caching resources. “ Patrick Meenan Engineer @ Google and WebPageTest.org http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
- 139. CDNs don’t want to distribute thousands of variations for one page.
- 140. CDNs pass “Vary” requests to the origin server, which creates a bottleneck. http://searchenginewatch.com/article/2249533/How-Googles-Mobile-Best-Practices-Can-Slow-Your-Site-Down http://www.pagetrafficbuzz.com/matt-cutts-http-vary-useragent-header/16621/
- 141. Dynamic Serving & Delivery Optimization Vendors
- 142. Adaptive content? Responsive delivery? (ugh) Mobile detection?
- 143. Dynamic serving is a practical way to retrofit without a full rebuild.
- 144. Downsides Multiple frontend implementations = splitting resources. Another external layer = added complexity.
- 145. Ultimately, it’s a coping mechanism for the device landscape.
- 146. RWD Is Recommended
- 147. 3 Reasons Google Prefers RWD 1. Single URL 2. 3. https://developers.google.com/webmasters/smartphone-sites/details
- 148. 3 Reasons Google Prefers RWD 1. Single URL 2. No redirects 3. https://developers.google.com/webmasters/smartphone-sites/details
- 149. 3 Reasons Google Prefers RWD 1. Single URL 2. No redirects 3. Crawler efficiency https://developers.google.com/webmasters/smartphone-sites/details
- 150. The SEO industry wants “desktop SEO” and “mobile SEO”. ! Search engines don’t.
- 151. Mobile search results favor responsive sites.
- 152. For Google: RWD benefits users, crawlers, and retailers.
- 153. Parity Is A Major Advantage
- 154. Content Parity Access to the same information regardless of the device.
- 155. Functional Parity Access to the same features regardless of the device.
- 156. Good design is accessible.
- 157. “Mobile only” or “desktop only” mindsets fracture the user’s experience.
- 158. Most RWD implementations are functional at best.
- 159. RWD Is Fast
- 160. People make websites slow.
- 161. Almost all sites are slow today.
- 162. They don’t have to be slow.
- 164. Speed Index of major eCommerce sites Amazon — 1439 Apple Store — 4139 eBay — 4207 Grainger — 4409 Home Depot — 2888 Sears — 3759 Dell — 5257 Walmart — 7151 0 1000 2000 3000 4000 5000 6000 7000 8000
- 165. Speed Index measures the perceived completeness of a web page. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
- 166. Benchmarks from Alexa 300K + Google Apple Store — 4139 eBay — 4207 Grainger — 4409 0 1000 2000 3000 4000 5000 6000 7000 8000 Google - 1308 4493 — Mean 3519 — Median Amazon — 1439 Home Depot — 2888 Sears — 3759 Dell — 5257 Walmart — 7151
- 167. My clients: Magento + very custom RWD Angry Birds Shop — 2530 Home Depot — 2888 Skinny Ties — 1800 Apple Store — 4139 eBay — 4207 Grainger — 4409 0 1000 2000 3000 4000 5000 6000 7000 8000 Google - 1308 4493 — Mean 3519 — Median Amazon — 1439 Sears — 3759 Dell — 5257 Walmart — 7151 NDA (Beta) — 1446
- 168. Skinny Ties uses no CDN — still fast Angry Birds Shop — 2530 Home Depot — 2888 Skinny Ties — 1800 Apple Store — 4139 eBay — 4207 Grainger — 4409 0 1000 2000 3000 4000 5000 6000 7000 8000 Google - 1308 4493 — Mean 3519 — Median Amazon — 1439 Sears — 3759 Dell — 5257 Walmart — 7151 NDA (Beta) — 1446
- 169. My B2B client using RWD: 0.48% slower than Amazon.
- 170. RWD can be fast. Performance is yours to lose. Potential value is huge.
- 171. Frontend Audits Targeted performance consulting from Gravity Department
- 172. Frontend Audits Evaluate: Goals / targets Good practices Bad practices Advise: Missing practices Content workflow Code quality Decide: Impact analysis Effort analysis A/B sampling
- 173. Part 4/4: Wrapping Up
- 174. Only RWD serves all devices and reduces cost of ownership.
- 175. RESS will be a critical tool, but it’s nothing without good RWD.
- 176. eCommerce platforms need to invest more on frontend technology.
- 178. Thank you
- 179. Q&A
- 180. Gravity Department GravityDept Brendan Falkowski Falkowski gravitydept.com magefrontend.com