Two Approaches
to RWD:
Pure & Hybrid
Brendan Falkowski
Gravity Department
Meet Magento NYC
New York, New York
September 22, 2014
Slide 2
Slide 2 text
Brendan
Falkowski
Gravity Department
Falkowski
Slide 3
Slide 3 text
GravityDept.com
Slide 4
Slide 4 text
Frontend Consulting For
$4B B2B leader
(private beta)
Slide 5
Slide 5 text
Product Consulting For
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
• Used by 1350+ stores
• 4 years of updates
• Made for customization
• Rapid launch
Acumen Theme
gravitydept.com/to/acumen
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
Slide 12
Slide 12 text
Two Approaches
to RWD:
Pure and Hybrid
Slide 13
Slide 13 text
Two Approaches
to RWD:
Pure and Hybrid
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Part 1/4:
Definitions
Slide 16
Slide 16 text
Words mean what you think,
except when they don’t.
1. Fluid grid
2. Flexible content
3. Media queries
Slide 20
Slide 20 text
Keep it simple.
Pure RWD === RWD
Slide 21
Slide 21 text
CSS
HTML
}Google Glass
Smartphone
Small Tablet
Big Tablet
Netbook
Laptop Computer
Desktop Computer
Television
?
Slide 22
Slide 22 text
{
Google Glass
Smartphone
Small Tablet (you)
Big Tablet
Netbook
Laptop Computer
Desktop Computer
Television
?
Ignore this.
{
Apply this.
Slide 23
Slide 23 text
Retrofitting RWD
augments desktop problems.
Slide 24
Slide 24 text
Designing for the highest constraints makes you prioritize.
Mobile First
http://www.abookapart.com/products/mobile-first
Slide 25
Slide 25 text
Improve the content. Don’t degrade the experience.
Progressive Enhancement
http://alistapart.com/article/understandingprogressiveenhancement
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Blame the implementation
not the technique.
Slide 28
Slide 28 text
Most RWD sites are
rushed and not great today.
Slide 29
Slide 29 text
Blame RWD?
Or take responsibility?
Slide 30
Slide 30 text
Text
http://gravitydept.com/blog/responsive-evolution
Slide 31
Slide 31 text
Adaptive Design
Slide 32
Slide 32 text
Any variation in response to the environment.
Adaptive Design
Slide 33
Slide 33 text
Selecting a smart default and layering
on capabilities if the task supports them.
Adaptive Design as
Progressive Enhancement
Slide 34
Slide 34 text
Find Store
City or zip code…
Use GPS
Slide 35
Slide 35 text
Adaptive
Design
Responsive
Design
Slide 36
Slide 36 text
Adaptive
Layout
Slide 37
Slide 37 text
Adaptive
Design
Responsive
Design
Adaptive
Layout
Slide 38
Slide 38 text
3”
Screen Size
Phone Layout
5” 7” 9” 13” 15” 24” 30” 42”
11”
Tablet / Desktop Layout
Retrofit for one
breakpoint
Fixed desktop
site
Slide 39
Slide 39 text
Retrofitting
adaptive layout.
Not great.
Slide 40
Slide 40 text
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?
Slide 41
Slide 41 text
Adaptive layout is like
pretending only small + big
screens exist.
Slide 42
Slide 42 text
Proxy Site
Slide 43
Slide 43 text
m.site.com site.com
Fixed Size
Fixed
Size
Slide 44
Slide 44 text
Proxies sacrifice for speed by
ripping out content and
functionality.
Slide 45
Slide 45 text
Jane Doe’s context and
goals are not inferred by her
device’s characteristics.
Slide 46
Slide 46 text
Where is the elusive T-DOT?
Slide 47
Slide 47 text
1. Expensive and annoying to implement code three times.
2.
3.
Three codebases?
Slide 48
Slide 48 text
1. Expensive and annoying to implement code three times.
2. Discrepancies create a bad user experience.
3.
Three codebases?
Slide 49
Slide 49 text
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?
Slide 50
Slide 50 text
Multiple proxies are inefficient,
ineffective, and expensive.
Slide 51
Slide 51 text
Responsive
Proxy Site
Slide 52
Slide 52 text
m.site.com
site.com
Fixed Size
RWD Destined to
replace the
desktop site
Slide 53
Slide 53 text
Responsive Proxies
The Guardian BBC Entertainment Weekly
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
Responsive proxies
are favorable with
limited resources.
Slide 56
Slide 56 text
Dynamic
Serving
Slide 57
Slide 57 text
User
Inspect
device
site.com
Generate mobile site
Generate desktop site
Send response
via same URL
1
2
3
Responsive Design
with Server-Side
Components
(RESS)
Slide 65
Slide 65 text
One RWD site with component variations.
RWD
RWD Different
header
component
Slide 66
Slide 66 text
http://www.lukew.com/ff/entry.asp?1392
Slide 67
Slide 67 text
No platforms support
component-driven
variation today.
Slide 68
Slide 68 text
RESS is the only bridge
between responsive design
and delivery optimization.
Slide 69
Slide 69 text
Google now executes JS and
renders CSS during indexing.
http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html
Slide 70
Slide 70 text
Badly written or
blocking JS/CSS can
derail search spiders.
Slide 71
Slide 71 text
Progress rendering and
on-demand content can
finally be indexed fully.
Slide 72
Slide 72 text
JavaScript will make RESS-like
variation accessible sooner.
Slide 73
Slide 73 text
Part 2/4:
RESS Survey
Slide 74
Slide 74 text
Detecting
RESS Usage
Slide 75
Slide 75 text
Resizing your browser usually
won’t trigger RESS variations.
Slide 76
Slide 76 text
Feature detection may
rely on an external database
queried by user agent.
Slide 77
Slide 77 text
If device characteristics
or user agent don’t line up,
you won’t notice RESS.
Slide 78
Slide 78 text
My RESS Survey
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
326
Using RWD
RESS Survey Responses
17
Using RESS
Slide 81
Slide 81 text
1. Survey is self-reported.
2.
3.
Why so few responses?
Slide 82
Slide 82 text
1. Survey is self-reported.
2. No platforms have RESS built-in.
3.
Why so few responses?
Slide 83
Slide 83 text
1. Survey is self-reported.
2. No platforms have RESS built-in.
3. Custom work is proprietary.
Why so few responses?
Slide 84
Slide 84 text
Results are a sampling of
RESS practices today.
Slide 85
Slide 85 text
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:
Slide 86
Slide 86 text
RESS Survey
Insights
Slide 87
Slide 87 text
How long have you used RWD?
<1 Year 1–2 Years 2–3 Years 3–4 Years
33%
28%
19%
14%
Never
(Disqualified)
6%
Slide 88
Slide 88 text
OS sniffing
Browser sniffing
Viewport measurement
How do you detect which
RESS variation to send?
Detection Method
MobileDetect
WURFL
Homegrown system
Frameworks
Slide 89
Slide 89 text
Most feature detection starts
being applied on the
second page load.
Slide 90
Slide 90 text
What percentage of content
are you serving with RESS?
Slide 91
Slide 91 text
5–10%
Of content served by RESS
Slide 92
Slide 92 text
Minimal RESS usage
reinforces that RWD handles
most things well.
Slide 93
Slide 93 text
What are you serving
differently through RESS?
Slide 94
Slide 94 text
What are you serving
differently through RESS?
Images
CSS bundles
JS bundles
Header / footer markup
Navigation markup
Most Common
Slide 95
Slide 95 text
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
Slide 96
Slide 96 text
What are you serving
differently through RESS?
Simpler navigation for feature phones
Rendering animations as flat images
Sending less content for low-bandwidth
Fallbacks
Slide 97
Slide 97 text
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
Slide 98
Slide 98 text
RESS reduces the need for
developers to span code from
IE8 to iOS7.
Slide 99
Slide 99 text
What impact did RESS
have on performance?
Slide 100
Slide 100 text
RESS can unhinge your
caching/CDN technology.
Slide 101
Slide 101 text
Did the CMS/platform facilitate
or discourage the use of RESS?
Slide 102
Slide 102 text
Did the CMS/platform facilitate
or discourage the use of RESS?
33%
33%
33%
Existing
Plugin
Custom
Plugin
Custom
Platform
Slide 103
Slide 103 text
Can you share any relevant
before/after analytics?
Slide 104
Slide 104 text
Desktop
2.0 MB
41 requests
Smartphone
390 KB
13 requests
Potential for Significant Control
Slide 105
Slide 105 text
How important is RESS to
the future of RWD?
Slide 106
Slide 106 text
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.
“
Slide 107
Slide 107 text
We don’t think RESS is the answer to
RWD, but either RESS or conditional
loading are necessary today.
“
Slide 108
Slide 108 text
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.
Slide 109
Slide 109 text
Part 3/4:
Viable Solutions
Slide 110
Slide 110 text
RWD !== Proxy !==
Dynamic Serving !== RESS
Slide 111
Slide 111 text
The efficacy of these
approaches is not equivalent.
Slide 112
Slide 112 text
Each strategy has trade-offs.
It’s different for every business.
Slide 113
Slide 113 text
RWD is wonderful.
It’s not always the right choice.
Slide 114
Slide 114 text
Google’s
Recommendation
Slide 115
Slide 115 text
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
Slide 116
Slide 116 text
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
Slide 117
Slide 117 text
Separate URLs for mobile and desktop sites.
3. Proxy Sites
https://developers.google.com/webmasters/smartphone-sites/details
Slide 118
Slide 118 text
Google’s suggestions hint at
pitfalls in each approach.
Slide 119
Slide 119 text
Problems with
Proxy Sites
Slide 120
Slide 120 text
Duplicate content splits
attribution for your URLs.
Slide 121
Slide 121 text
Proxy sites can force you to
compete against yourself.
Slide 122
Slide 122 text
Competitors can easily
outrank your split attribution.
Slide 123
Slide 123 text
Bad UX of Proxy Sites
On desktop ➔ Click m.site.com link ➔ D’oh
On smartphone ➔ Click site.com link ➔ D’oh
Slide 124
Slide 124 text
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
Slide 125
Slide 125 text
For every mobile page:
Slide 126
Slide 126 text
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:
Slide 127
Slide 127 text
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:
Slide 128
Slide 128 text
Incomplete / incorrect
proxy configuration will
rank your site lower.
Slide 129
Slide 129 text
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:
Slide 130
Slide 130 text
FOLLOW DIRECTIONS
ONE DOES NOT SIMPLY
Slide 131
Slide 131 text
Companies should be
penalized for redirecting badly,
and they are.
1. Signals to caches that response differs based on User Agent
2.
Vary: User-Agent
http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
Slide 136
Slide 136 text
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/
Slide 137
Slide 137 text
CDN services will not
cache content served with
“vary headers”.
Slide 138
Slide 138 text
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.
Slide 139
Slide 139 text
CDNs don’t want to
distribute thousands of
variations for one page.
Slide 140
Slide 140 text
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/
Slide 141
Slide 141 text
Dynamic Serving & Delivery
Optimization Vendors
Slide 142
Slide 142 text
Adaptive content?
Responsive delivery? (ugh)
Mobile detection?
Slide 143
Slide 143 text
Dynamic serving is a
practical way to retrofit
without a full rebuild.
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
Slide 165
Slide 165 text
Speed Index measures the
perceived completeness
of a web page.
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
Slide 166
Slide 166 text
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
Slide 167
Slide 167 text
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
Slide 168
Slide 168 text
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
Slide 169
Slide 169 text
0.48%
slower than Amazon.
My B2B client using RWD:
Slide 170
Slide 170 text
RWD can be fast.
Performance is yours to lose.
Potential value is huge.
Slide 171
Slide 171 text
Frontend Audits
Targeted performance consulting
from Gravity Department