Two Approaches to RWD: Pure and Hybrid (IRCE 2014)

The first retailers to deploy responsive web design sites used what today is sometimes called pure responsive design. Here, a retailer creates a single web site, which uses a single set of web content and a single code base that automatically render differently to exactly fit the size of the screen on a device accessing the site.

Then, some vendors that launched responsive offerings created what became known as a hybrid approach in which a retailer creates a responsive site only for mobile devices (smartphones and tablets), leaving the desktop e-commerce site untouched.

Gain an understanding of the different types of responsive design sites and their pros and cons in this session.

Conference: IRCE 2014
Speaker: Brendan Falkowski @ http://gravitydept.com
Location: Chicago, USA
Date: June 6, 2014

Transcript

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