Two Approaches to RWD: Pure and Hybrid (Meet Magento NY 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: Meet Magento NY 2014
Speaker: Brendan Falkowski @ http://gravitydept.com
Location: New York City, USA
Date: September 22, 2014

Transcript

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
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 1/4: Definitions
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. 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. Selecting a smart default and layering on capabilities if the task supports them. Adaptive Design as Progressive Enhancement
34. Find Store City or zip code… Use GPS
35. Adaptive Design Responsive Design
36. Adaptive Layout
37. Adaptive Design Responsive Design Adaptive Layout
38. 3” Screen Size Phone Layout 5” 7” 9” 13” 15” 24” 30” 42” 11” Tablet / Desktop Layout Retrofit for one breakpoint Fixed desktop site
39. Retrofitting adaptive layout. Not great.
40. 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?
41. Adaptive layout is like pretending only small + big screens exist.
42. Proxy Site
43. m.site.com site.com Fixed Size Fixed 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. 1. Expensive and annoying to implement code three times. 2. 3. Three codebases?
48. 1. Expensive and annoying to implement code three times. 2. Discrepancies create a bad user experience. 3. Three codebases?
49. 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?
50. Multiple proxies are inefficient, ineffective, and expensive.
51. Responsive Proxy Site
52. m.site.com site.com Fixed Size RWD Destined to replace the desktop site
53. Responsive Proxies The Guardian BBC Entertainment Weekly
54. 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
55. Responsive proxies are favorable with limited resources.
56. Dynamic Serving
57. User Inspect device site.com Generate mobile site Generate desktop site Send response via same URL 1 2 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 RWD Different header component
66. http://www.lukew.com/ff/entry.asp?1392
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
74. Detecting RESS Usage
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. 326 Using RWD RESS Survey Responses 17 Using RESS
81. 1. Survey is self-reported. 2. 3. Why so few responses?
82. 1. Survey is self-reported. 2. No platforms have RESS built-in. 3. Why so few responses?
83. 1. Survey is self-reported. 2. No platforms have RESS built-in. 3. Custom work is proprietary. Why so few responses?
84. Results are a sampling of RESS practices today.
85. 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:
86. RESS Survey Insights
87. How long have you used RWD? <1 Year 1–2 Years 2–3 Years 3–4 Years 33% 28% 19% 14% Never (Disqualified) 6%
88. OS sniffing Browser sniffing Viewport measurement How do you detect which RESS variation to send? Detection Method MobileDetect WURFL Homegrown system Frameworks
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? Images CSS bundles JS bundles Header / footer markup Navigation markup Most Common
95. 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
96. What are you serving differently through RESS? Simpler navigation for feature phones Rendering animations as flat images Sending less content for low-bandwidth Fallbacks
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% 33% Existing Plugin Custom Plugin Custom Platform
103. Can you share any relevant before/after analytics?
104. Desktop 2.0 MB 41 requests Smartphone 390 KB 13 requests Potential for Significant Control
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.
114. Google’s Recommendation
115. 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
116. 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
117. Separate URLs for mobile and desktop sites. 3. Proxy 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. 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
125. <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:
126. 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:
127. 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:
128. Incomplete / incorrect proxy configuration will rank your site lower.
129. 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:
130. FOLLOW DIRECTIONS ONE DOES NOT SIMPLY
131. Companies should be penalized for redirecting badly, and they are.
132. http://www.mobify.com/insights/apples-handoff-is-bad-news-for-separate-mobile-sites/ http://www.apple.com/osx/preview/mac-and-ios/
133. Problems with Dynamic Serving
134. HTTP Header Vary: User-Agent
135. 1. Signals to caches that response differs based on User Agent 2. Vary: User-Agent http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
136. 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/
137. CDN services will not cache content served with “vary headers”.
138. 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.
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. Multiple frontend implementations = splitting resources. Another external layer = added complexity. Downsides
145. Ultimately, it’s a coping mechanism for the device landscape.
146. RWD Is Recommended
147. https://developers.google.com/webmasters/smartphone-sites/details 3 Reasons Google Prefers RWD 1. Single URL 2. 3.
148. https://developers.google.com/webmasters/smartphone-sites/details 3 Reasons Google Prefers RWD 1. Single URL 2. No redirects 3.
149. 1. Single URL 2. No redirects 3. Crawler efficiency https://developers.google.com/webmasters/smartphone-sites/details 3 Reasons Google Prefers RWD
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. Access to the same information regardless of the device. Content Parity
155. Access to the same features regardless of the device. Functional Parity
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.
163. https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two https://speakerdeck.com/brendanfalkowski/responsive-evolution
164. 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
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. 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
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 My clients: Magento + very custom RWD
168. 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
169. 0.48% slower than Amazon. My B2B client using RWD:
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 gravitydept.com magefrontend.com Brendan Falkowski Falkowski