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

3. GravityDept.com

4. Frontend Consulting For
$4B B2B leader
(private beta)

5. Product Consulting For

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

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

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

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. 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?

30. Text
http://gravitydept.com/blog/responsive-evolution

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.

51. Responsive
Proxy Site

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

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

86. RESS Survey
Insights

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.

114. Google’s
Recommendation

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.

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

163. https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two
https://speakerdeck.com/brendanfalkowski/responsive-evolution

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