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
   

   View Slide

2. Brendan
   Falkowski
   Gravity Department
   Falkowski
   

   View Slide

3. GravityDept.com
   

   View Slide

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

   View Slide

5. Product Consulting For
   

   View Slide

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
   

   View Slide

7. • Used by 1350+ stores
   • 4 years of updates
   • Made for customization
   • Rapid launch
   Acumen Theme
   gravitydept.com/to/acumen
   

   View Slide

8. View Slide

9. Advisory Board Member
   Magento Certification
   

   View Slide

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

    View Slide

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
    

    View Slide

12. Two Approaches
    to RWD:
    Pure and Hybrid
    

    View Slide

13. Two Approaches
    to RWD:
    Pure and Hybrid
    

    View Slide

14. View Slide

15. Part 1/4:
    Definitions
    

    View Slide

16. Words mean what you think,
    except when they don’t.
    

    View Slide

17. Responsive Design
    Adaptive Design
    Adaptive Layout
    Proxy Sites
    M-DOT Sites
    Hybrids
    Retrofitting
    Dynamic Serving
    RESS
    …?
    

    View Slide

18. Responsive
    Web Design
    (RWD)
    

    View Slide

19. 1. Fluid grid
    2. Flexible content
    3. Media queries
    

    View Slide

20. Keep it simple.
    Pure RWD === RWD
    

    View Slide

21. CSS
    HTML
    }Google Glass
    Smartphone
    Small Tablet
    Big Tablet
    Netbook
    Laptop Computer
    Desktop Computer
    Television
    ?
    

    View Slide

22. {
    Google Glass
    Smartphone
    Small Tablet (you)
    Big Tablet
    Netbook
    Laptop Computer
    Desktop Computer
    Television
    ?
    Ignore this.
    {
    Apply this.
    

    View Slide

23. Retrofitting RWD
    augments desktop problems.
    

    View Slide

24. Designing for the highest constraints makes you prioritize.
    Mobile First
    http://www.abookapart.com/products/mobile-first
    

    View Slide

25. Improve the content. Don’t degrade the experience.
    Progressive Enhancement
    http://alistapart.com/article/understandingprogressiveenhancement
    

    View Slide

26. View Slide

27. Blame the implementation
    not the technique.
    

    View Slide

28. Most RWD sites are
    rushed and not great today.
    

    View Slide

29. Blame RWD?
    Or take responsibility?
    

    View Slide

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

    View Slide

31. Adaptive Design
    

    View Slide

32. Any variation in response to the environment.
    Adaptive Design
    

    View Slide

33. Selecting a smart default and layering
    on capabilities if the task supports them.
    Adaptive Design as
    Progressive Enhancement
    

    View Slide

34. Find Store
    City or zip code…
    Use GPS
    

    View Slide

35. Adaptive
    Design
    Responsive
    Design
    

    View Slide

36. Adaptive
    Layout
    

    View Slide

37. Adaptive
    Design
    Responsive
    Design
    Adaptive
    Layout
    

    View Slide

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
    

    View Slide

39. Retrofitting
    adaptive layout.
    Not great.
    

    View Slide

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?
    

    View Slide

41. Adaptive layout is like
    pretending only small + big
    screens exist.
    

    View Slide

42. Proxy Site
    

    View Slide

43. m.site.com site.com
    Fixed Size
    Fixed
    Size
    

    View Slide

44. Proxies sacrifice for speed by
    ripping out content and
    functionality.
    

    View Slide

45. Jane Doe’s context and
    goals are not inferred by her
    device’s characteristics.
    

    View Slide

46. Where is the elusive T-DOT?
    

    View Slide

47. 1. Expensive and annoying to implement code three times.
    2.
    3.
    Three codebases?
    

    View Slide

48. 1. Expensive and annoying to implement code three times.
    2. Discrepancies create a bad user experience.
    3.
    Three codebases?
    

    View Slide

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?
    

    View Slide

50. Multiple proxies are inefficient,
    ineffective, and expensive.
    

    View Slide

51. Responsive
    Proxy Site
    

    View Slide

52. m.site.com
    site.com
    Fixed Size
    RWD Destined to
    replace the
    desktop site
    

    View Slide

53. Responsive Proxies
    The Guardian BBC Entertainment Weekly
    

    View Slide

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
    

    View Slide

55. Responsive proxies
    are favorable with
    limited resources.
    

    View Slide

56. Dynamic
    Serving
    

    View Slide

57. User
    Inspect
    device
    site.com
    Generate mobile site
    Generate desktop site
    Send response
    via same URL
    1
    2
    3
    

    View Slide

58. A single domain is better
    for SEO than proxies.
    

    View Slide

59. 1. You have to inspect the
    browser accurately.
    

    View Slide

60. 2. Delivering variations cannot
    impact performance.
    

    View Slide

61. 3. Still need multiple
    frontend implementations.
    

    View Slide

62. sweetwater.com
    Phone Tablet Desktop
    

    View Slide

63. shop.lego.com
    Phone Tablet Desktop
    

    View Slide

64. Responsive Design
    with Server-Side
    Components
    (RESS)
    

    View Slide

65. One RWD site with component variations.
    RWD
    RWD Different
    header
    component
    

    View Slide

66. http://www.lukew.com/ff/entry.asp?1392
    

    View Slide

67. No platforms support
    component-driven
    variation today.
    

    View Slide

68. RESS is the only bridge
    between responsive design
    and delivery optimization.
    

    View Slide

69. Google now executes JS and
    renders CSS during indexing.
    http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html
    

    View Slide

70. Badly written or
    blocking JS/CSS can
    derail search spiders.
    

    View Slide

71. Progress rendering and
    on-demand content can
    finally be indexed fully.
    

    View Slide

72. JavaScript will make RESS-like
    variation accessible sooner.
    

    View Slide

73. Part 2/4:
    RESS Survey
    

    View Slide

74. Detecting
    RESS Usage
    

    View Slide

75. Resizing your browser usually
    won’t trigger RESS variations.
    

    View Slide

76. Feature detection may
    rely on an external database
    queried by user agent.
    

    View Slide

77. If device characteristics
    or user agent don’t line up,
    you won’t notice RESS.
    

    View Slide

78. My RESS Survey
    

    View Slide

79. View Slide

80. 326
    Using RWD
    RESS Survey Responses
    17
    Using RESS
    

    View Slide

81. 1. Survey is self-reported.
    2.
    3.
    Why so few responses?
    

    View Slide

82. 1. Survey is self-reported.
    2. No platforms have RESS built-in.
    3.
    Why so few responses?
    

    View Slide

83. 1. Survey is self-reported.
    2. No platforms have RESS built-in.
    3. Custom work is proprietary.
    Why so few responses?
    

    View Slide

84. Results are a sampling of
    RESS practices today.
    

    View Slide

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:
    

    View Slide

86. RESS Survey
    Insights
    

    View Slide

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%
    

    View Slide

88. OS sniffing
    Browser sniffing
    Viewport measurement
    How do you detect which
    RESS variation to send?
    Detection Method
    MobileDetect
    WURFL
    Homegrown system
    Frameworks
    

    View Slide

89. Most feature detection starts
    being applied on the
    second page load.
    

    View Slide

90. What percentage of content
    are you serving with RESS?
    

    View Slide

91. 5–10%
    Of content served by RESS
    

    View Slide

92. Minimal RESS usage
    reinforces that RWD handles
    most things well.
    

    View Slide

93. What are you serving
    differently through RESS?
    

    View Slide

94. What are you serving
    differently through RESS?
    Images
    CSS bundles
    JS bundles
    Header / footer markup
    Navigation markup
    Most Common
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

98. RESS reduces the need for
    developers to span code from
    IE8 to iOS7.
    

    View Slide

99. What impact did RESS
    have on performance?
    

    View Slide

100. RESS can unhinge your
     caching/CDN technology.
     

     View Slide

101. Did the CMS/platform facilitate
     or discourage the use of RESS?
     

     View Slide

102. Did the CMS/platform facilitate
     or discourage the use of RESS?
     33%
     33%
     33%
     Existing
     Plugin
     Custom
     Plugin
     Custom
     Platform
     

     View Slide

103. Can you share any relevant
     before/after analytics?
     

     View Slide

104. Desktop
     2.0 MB
     41 requests
     Smartphone
     390 KB
     13 requests
     Potential for Significant Control
     

     View Slide

105. How important is RESS to
     the future of RWD?
     

     View Slide

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

     View Slide

107. We don’t think RESS is the answer to
     RWD, but either RESS or conditional
     loading are necessary today.
     “
     

     View Slide

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.
     

     View Slide

109. Part 3/4:
     Viable Solutions
     

     View Slide

110. RWD !== Proxy !==
     Dynamic Serving !== RESS
     

     View Slide

111. The efficacy of these
     approaches is not equivalent.
     

     View Slide

112. Each strategy has trade-offs.
     It’s different for every business.
     

     View Slide

113. RWD is wonderful.
     It’s not always the right choice.
     

     View Slide

114. Google’s
     Recommendation
     

     View Slide

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
     

     View Slide

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
     

     View Slide

117. Separate URLs for mobile and desktop sites.
     3. Proxy Sites
     https://developers.google.com/webmasters/smartphone-sites/details
     

     View Slide

118. Google’s suggestions hint at
     pitfalls in each approach.
     

     View Slide

119. Problems with
     Proxy Sites
     

     View Slide

120. Duplicate content splits
     attribution for your URLs.
     

     View Slide

121. Proxy sites can force you to
     compete against yourself.
     

     View Slide

122. Competitors can easily
     outrank your split attribution.
     

     View Slide

123. Bad UX of Proxy Sites
     On desktop ➔ Click m.site.com link ➔ D’oh
     On smartphone ➔ Click site.com link ➔ D’oh
     

     View Slide

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
     

     View Slide

125. 
     For every mobile page:
     

     View Slide

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:
     

     View Slide

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:
     

     View Slide

128. Incomplete / incorrect
     proxy configuration will
     rank your site lower.
     

     View Slide

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:
     

     View Slide

130. FOLLOW DIRECTIONS
     ONE DOES NOT SIMPLY
     

     View Slide

131. Companies should be
     penalized for redirecting badly,
     and they are.
     

     View Slide

132. http://www.mobify.com/insights/apples-handoff-is-bad-news-for-separate-mobile-sites/
     http://www.apple.com/osx/preview/mac-and-ios/
     

     View Slide

133. Problems with
     Dynamic Serving
     

     View Slide

134. HTTP Header
     Vary: User-Agent
     

     View Slide

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/
     

     View Slide

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/
     

     View Slide

137. CDN services will not
     cache content served with
     “vary headers”.
     

     View Slide

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.
     

     View Slide

139. CDNs don’t want to
     distribute thousands of
     variations for one page.
     

     View Slide

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/
     

     View Slide

141. Dynamic Serving & Delivery
     Optimization Vendors
     

     View Slide

142. Adaptive content?
     Responsive delivery? (ugh)
     Mobile detection?
     

     View Slide

143. Dynamic serving is a
     practical way to retrofit
     without a full rebuild.
     

     View Slide

144. Multiple frontend implementations = splitting resources.
     Another external layer = added complexity.
     Downsides
     

     View Slide

145. Ultimately, it’s a
     coping mechanism for the
     device landscape.
     

     View Slide

146. RWD Is
     Recommended
     

     View Slide

147. https://developers.google.com/webmasters/smartphone-sites/details
     3 Reasons Google Prefers RWD
     1. Single URL
     2.
     3.
     

     View Slide

148. https://developers.google.com/webmasters/smartphone-sites/details
     3 Reasons Google Prefers RWD
     1. Single URL
     2. No redirects
     3.
     

     View Slide

149. 1. Single URL
     2. No redirects
     3. Crawler efficiency
     https://developers.google.com/webmasters/smartphone-sites/details
     3 Reasons Google Prefers RWD
     

     View Slide

150. The SEO industry wants
     “desktop SEO” and “mobile SEO”.
     !
     Search engines don’t.
     

     View Slide

151. Mobile search results favor
     responsive sites.
     

     View Slide

152. For Google: RWD benefits
     users, crawlers, and retailers.
     

     View Slide

153. Parity Is A Major
     Advantage
     

     View Slide

154. Access to the same information regardless of the device.
     Content Parity
     

     View Slide

155. Access to the same features regardless of the device.
     Functional Parity
     

     View Slide

156. Good design is accessible.
     

     View Slide

157. “Mobile only” or “desktop only”
     mindsets fracture the
     user’s experience.
     

     View Slide

158. Most RWD implementations
     are functional at best.
     

     View Slide

159. RWD Is Fast
     

     View Slide

160. People make websites slow.
     

     View Slide

161. Almost all sites are slow today.
     

     View Slide

162. They don’t have to be slow.
     

     View Slide

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

     View Slide

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
     

     View Slide

165. Speed Index measures the
     perceived completeness
     of a web page.
     https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

169. 0.48%
     slower than Amazon.
     My B2B client using RWD:
     

     View Slide

170. RWD can be fast.
     Performance is yours to lose.
     Potential value is huge.
     

     View Slide

171. Frontend Audits
     Targeted performance consulting
     from Gravity Department
     

     View Slide

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
     

     View Slide

173. Part 4/4:
     Wrapping Up
     

     View Slide

174. Only RWD serves all devices
     and reduces cost of ownership.
     

     View Slide

175. RESS will be a critical tool, but
     it’s nothing without good RWD.
     

     View Slide

176. eCommerce platforms
     need to invest more on
     frontend technology.
     

     View Slide

177. View Slide

178. Thank you
     

     View Slide

179. Q&A
     

     View Slide

180. Gravity Department
     GravityDept
     gravitydept.com
     magefrontend.com
     Brendan Falkowski
     Falkowski
     

     View Slide