Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Brendan Falkowski

June 13, 2014
Tweet

More Decks by Brendan Falkowski

Other Decks in Design

Transcript

  1. Two Approaches
    to RWD:
    Pure & Hybrid
    Brendan Falkowski
    Gravity Department
    IRCE
    Chicago, Illinois
    June 13, 2014

    View full-size slide

  2. Brendan
    Falkowski
    Gravity Department
    Falkowski

    View full-size slide

  3. GravityDept.com

    View full-size slide

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

    View full-size slide

  5. Product Consulting For

    View full-size 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 full-size slide

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

    View full-size slide

  8. Advisory Board Member
    Magento Certification

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. Two Approaches
    to RWD:
    Pure and Hybrid

    View full-size slide

  12. Two Approaches
    to RWD:
    Pure and Hybrid

    View full-size slide

  13. Part 2/5:
    Definitions

    View full-size slide

  14. They mean what you think,
    except when they don’t.

    View full-size slide

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

    View full-size slide

  16. Responsive
    Web Design
    (RWD)

    View full-size slide

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

    View full-size slide

  18. Keep it simple.
    Pure RWD === RWD

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Retrofitting RWD
    augments desktop problems.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Blame the implementation
    not the technique.

    View full-size slide

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

    View full-size slide

  26. Blame RWD?
    Or take responsibility?

    View full-size slide

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

    View full-size slide

  28. Adaptive Design

    View full-size slide

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

    View full-size slide

  30. Find Store
    City or zip code…
    Use GPS

    View full-size slide

  31. Adaptive
    Design
    Responsive
    Design

    View full-size slide

  32. Adaptive
    Layout

    View full-size slide

  33. Adaptive
    Design
    Responsive
    Design
    Adaptive
    Layout

    View full-size slide

  34. 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 full-size slide

  35. Retrofitting
    adaptive layout.
    Not great.

    View full-size slide

  36. 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 full-size slide

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

    View full-size slide

  38. m.site.com site.com
    Fixed Size
    Fixed
    Size

    View full-size slide

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

    View full-size slide

  40. A user’s context and goals are
    not inferred by her device’s
    characteristics.

    View full-size slide

  41. Where is the elusive T-DOT?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

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

    View full-size slide

  46. Responsive
    Proxy Site

    View full-size slide

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

    View full-size slide

  48. Responsive Proxies
    The Guardian BBC Entertainment Weekly

    View full-size slide

  49. 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 full-size slide

  50. Responsive proxies
    are favorable with
    limited resources.

    View full-size slide

  51. Dynamic
    Serving

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 2. Delivering variations cannot
    impact performance.

    View full-size slide

  56. 3. Still need multiple
    frontend implementations.

    View full-size slide

  57. sweetwater.com
    Phone Tablet Desktop

    View full-size slide

  58. shop.lego.com
    Phone Tablet Desktop

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. No platforms support
    component-driven
    variation today.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. Badly written or blocked
    JS/CSS can derail indexing.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Part 3/5:
    RESS Survey

    View full-size slide

  69. Detecting
    RESS Usage

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. My RESS Survey

    View full-size slide

  74. 326
    Using RWD
    RESS Survey Responses
    17
    Using RESS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. Results are a sampling of
    RESS practices today.

    View full-size slide

  79. 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 full-size slide

  80. RESS Survey
    Insights

    View full-size slide

  81. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. 5–10%
    Of content served by RESS

    View full-size slide

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

    View full-size slide

  87. What are you serving
    differently through RESS?

    View full-size slide

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

    View full-size slide

  89. 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 full-size slide

  90. 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 full-size slide

  91. 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 full-size slide

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

    View full-size slide

  93. What impact did RESS
    have on performance?

    View full-size slide

  94. RESS can unhinge your
    caching/CDN technology.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  100. 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 full-size slide

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

    View full-size slide

  102. 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 full-size slide

  103. Part 4/5:
    Viable Solutions

    View full-size slide

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

    View full-size slide

  105. The result of these approaches
    is not equivalent.

    View full-size slide

  106. Each strategy has trade-offs.
    It’s different for every client.

    View full-size slide

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

    View full-size slide

  108. Google’s
    Recommendation

    View full-size slide

  109. 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 full-size slide

  110. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  113. Problems with
    Proxy Sites

    View full-size slide

  114. Duplicate content splits
    attribution for your URLs.

    View full-size slide

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

    View full-size slide

  116. Competitors can easily
    outrank your split attribution.

    View full-size slide

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

    View full-size slide

  118. 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 full-size slide


  119. For every mobile page:

    View full-size slide

  120. 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 full-size slide

  121. 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 full-size slide

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

    View full-size slide

  123. 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 full-size slide

  124. FOLLOW DIRECTIONS
    ONE DOES NOT SIMPLY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  127. Problems with
    Dynamic Serving

    View full-size slide

  128. HTTP Header
    Vary: User-Agent

    View full-size slide

  129. 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 full-size slide

  130. 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 full-size slide

  131. CDN services will not
    cache content served with
    “Vary” headers.

    View full-size slide

  132. 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 full-size slide

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

    View full-size slide

  134. 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 full-size slide

  135. Dynamic Serving & Delivery
    Optimization Vendors

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  140. RWD Is
    Recommended

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  145. Mobile search results favor
    responsive sites.

    View full-size slide

  146. For Google, RWD benefits
    users, crawlers, and retailers.

    View full-size slide

  147. Parity Is A Major
    Advantage

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  150. Good design is accessible.

    View full-size slide

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

    View full-size slide

  152. Most RWD implementations
    are functional at best.

    View full-size slide

  153. People make websites slow.

    View full-size slide

  154. Almost all sites are slow today.

    View full-size slide

  155. They don’t have to be slow.

    View full-size slide

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

    View full-size slide

  157. 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 full-size slide

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

    View full-size slide

  159. 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 full-size slide

  160. 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 full-size slide

  161. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  164. Frontend Audits
    Targeted performance consulting
    from Gravity Department

    View full-size slide

  165. 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 full-size slide

  166. Part 5/5:
    Wrapping Up

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide