two approaches to rwd: pure & hybrid. brendan falkowski
DESCRIPTION
Two approaches to RWD: Pure & Hybrid. Brendan FalkowskiTRANSCRIPT
![Page 1: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/1.jpg)
Two Approaches to RWD: Pure & HybridBrendan Falkowski Gravity Department
Meet Magento NYC New York, New York September 22, 2014
![Page 2: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/2.jpg)
Brendan FalkowskiGravity Department
Falkowski
![Page 3: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/3.jpg)
GravityDept.com
![Page 4: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/4.jpg)
Frontend Consulting For
$4B B2B leader (private beta)
![Page 5: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/5.jpg)
Product Consulting For
![Page 6: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/6.jpg)
2014 Hot 100 List 2014 Mobile 10 List
Internet RetailerBrilliant Newcomer Nominee Top 25 Responsive Designs
Net Magazine
Practical eCommerce eBay Blog Moz Web Performance Today
Featured Across the WebKISSmetrics Conversion XL Smashing Magazine eConsultancy
Mobify Creative Bloq Yahoo! Small Business Media Queries
![Page 7: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/7.jpg)
• Used by 1350+ stores • 4 years of updates • Made for customization • Rapid launch
Acumen Theme
gravitydept.com/to/acumen
![Page 8: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/8.jpg)
![Page 9: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/9.jpg)
Advisory Board MemberMagento Certification
![Page 10: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/10.jpg)
#OperationFrontendSteward
https://github.com/magento-hackathon/operation-frontend-steward
![Page 11: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/11.jpg)
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
![Page 12: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/12.jpg)
Two Approaches to RWD:
Pure and Hybrid
![Page 13: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/13.jpg)
Two Approaches to RWD:
Pure and Hybrid
![Page 14: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/14.jpg)
![Page 15: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/15.jpg)
Part 1/4: Definitions
![Page 16: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/16.jpg)
Words mean what you think, except when they don’t.
![Page 17: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/17.jpg)
Responsive Design Adaptive Design Adaptive Layout Proxy Sites M-DOT Sites
Hybrids Retrofitting Dynamic Serving RESS …?
![Page 18: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/18.jpg)
Responsive Web Design
(RWD)
![Page 19: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/19.jpg)
1. Fluid grid 2. Flexible content 3. Media queries
![Page 20: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/20.jpg)
Keep it simple.
Pure RWD === RWD
![Page 21: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/21.jpg)
CSS
HTML }Google Glass Smartphone Small Tablet Big Tablet Netbook Laptop Computer Desktop Computer Television ?
![Page 22: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/22.jpg)
{Google Glass Smartphone Small Tablet (you) Big Tablet Netbook Laptop Computer Desktop Computer Television ?
Ignore this.
{Apply this.
![Page 23: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/23.jpg)
Retrofitting RWD augments desktop problems.
![Page 24: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/24.jpg)
Designing for the highest constraints makes you prioritize.
Mobile First
http://www.abookapart.com/products/mobile-first
![Page 25: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/25.jpg)
Improve the content. Don’t degrade the experience.
Progressive Enhancement
http://alistapart.com/article/understandingprogressiveenhancement
![Page 26: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/26.jpg)
![Page 27: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/27.jpg)
Blame the implementation not the technique.
![Page 28: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/28.jpg)
Most RWD sites are rushed and not great today.
![Page 29: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/29.jpg)
Blame RWD? Or take responsibility?
![Page 30: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/30.jpg)
Text
http://gravitydept.com/blog/responsive-evolution
![Page 31: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/31.jpg)
Adaptive Design
![Page 32: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/32.jpg)
Any variation in response to the environment.
Adaptive Design
![Page 33: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/33.jpg)
Selecting a smart default and layering on capabilities if the task supports them.
Adaptive Design as Progressive Enhancement
![Page 34: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/34.jpg)
Find Store
City or zip code…
Use GPS
![Page 35: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/35.jpg)
Adaptive Design
Responsive Design
![Page 36: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/36.jpg)
Adaptive Layout
![Page 37: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/37.jpg)
Adaptive Design
Responsive Design
Adaptive Layout
![Page 38: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/38.jpg)
3”
Screen Size
Phone Layout
5” 7” 9” 13” 15” 24” 30” 42”11”
Tablet / Desktop Layout
Retrofit for one breakpoint
Fixed desktop site
![Page 39: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/39.jpg)
Retrofitting adaptive layout. Not great.
![Page 40: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/40.jpg)
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?
![Page 41: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/41.jpg)
Adaptive layout is like pretending only small + big
screens exist.
![Page 42: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/42.jpg)
Proxy Site
![Page 43: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/43.jpg)
m.site.com site.com
Fixed SizeFixed Size
![Page 44: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/44.jpg)
Proxies sacrifice for speed by ripping out content and
functionality.
![Page 45: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/45.jpg)
Jane Doe’s context and goals are not inferred by her
device’s characteristics.
![Page 46: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/46.jpg)
Where is the elusive T-DOT?
![Page 47: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/47.jpg)
1. Expensive and annoying to implement code three times. 2. 3.
Three codebases?
![Page 48: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/48.jpg)
1. Expensive and annoying to implement code three times. 2. Discrepancies create a bad user experience. 3.
Three codebases?
![Page 49: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/49.jpg)
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?
![Page 50: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/50.jpg)
Multiple proxies are inefficient, ineffective, and expensive.
![Page 51: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/51.jpg)
Responsive Proxy Site
![Page 52: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/52.jpg)
m.site.comsite.com
Fixed SizeRWD Destined to replace the desktop site
![Page 53: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/53.jpg)
Responsive ProxiesThe Guardian BBC Entertainment Weekly
![Page 54: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/54.jpg)
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
![Page 55: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/55.jpg)
Responsive proxies are favorable with limited resources.
![Page 56: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/56.jpg)
Dynamic Serving
![Page 57: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/57.jpg)
User
Inspect device
site.comGenerate mobile site
Generate desktop site
Send response via same URL
1
2
3
![Page 58: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/58.jpg)
A single domain is better for SEO than proxies.
![Page 59: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/59.jpg)
1. You have to inspect the browser accurately.
![Page 60: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/60.jpg)
2. Delivering variations cannot impact performance.
![Page 61: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/61.jpg)
3. Still need multiple frontend implementations.
![Page 62: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/62.jpg)
sweetwater.com
Phone Tablet Desktop
![Page 63: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/63.jpg)
shop.lego.com
Phone Tablet Desktop
![Page 64: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/64.jpg)
Responsive Design with Server-Side
Components (RESS)
![Page 65: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/65.jpg)
One RWD site with component variations.
RWDRWD Different header
component
![Page 66: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/66.jpg)
http://www.lukew.com/ff/entry.asp?1392
![Page 67: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/67.jpg)
No platforms support component-driven
variation today.
![Page 68: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/68.jpg)
RESS is the only bridge between responsive design and delivery optimization.
![Page 69: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/69.jpg)
Google now executes JS and renders CSS during indexing.
http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html
![Page 70: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/70.jpg)
Badly written or blocking JS/CSS can derail search spiders.
![Page 71: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/71.jpg)
Progress rendering and on-demand content can finally be indexed fully.
![Page 72: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/72.jpg)
JavaScript will make RESS-like variation accessible sooner.
![Page 73: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/73.jpg)
Part 2/4: RESS Survey
![Page 74: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/74.jpg)
Detecting RESS Usage
![Page 75: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/75.jpg)
Resizing your browser usually won’t trigger RESS variations.
![Page 76: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/76.jpg)
Feature detection may rely on an external database
queried by user agent.
![Page 77: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/77.jpg)
If device characteristics or user agent don’t line up,
you won’t notice RESS.
![Page 78: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/78.jpg)
My RESS Survey
![Page 79: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/79.jpg)
![Page 80: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/80.jpg)
326Using RWD
RESS Survey Responses
17Using RESS
![Page 81: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/81.jpg)
1. Survey is self-reported. 2. 3.
Why so few responses?
![Page 82: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/82.jpg)
1. Survey is self-reported. 2. No platforms have RESS built-in. 3.
Why so few responses?
![Page 83: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/83.jpg)
1. Survey is self-reported. 2. No platforms have RESS built-in. 3. Custom work is proprietary.
Why so few responses?
![Page 84: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/84.jpg)
Results are a sampling of RESS practices today.
![Page 85: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/85.jpg)
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:
![Page 86: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/86.jpg)
RESS Survey Insights
![Page 87: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/87.jpg)
How long have you used RWD?
<1 Year 1–2 Years 2–3 Years 3–4 Years
33%
28%
19%
14%
Never (Disqualified)
6%
![Page 88: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/88.jpg)
OS sniffing Browser sniffing Viewport measurement
How do you detect which RESS variation to send?
Detection MethodMobileDetect WURFL Homegrown system
Frameworks
![Page 89: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/89.jpg)
Most feature detection starts being applied on the
second page load.
![Page 90: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/90.jpg)
What percentage of content are you serving with RESS?
![Page 91: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/91.jpg)
5–10%Of content served by RESS
![Page 92: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/92.jpg)
Minimal RESS usage reinforces that RWD handles
most things well.
![Page 93: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/93.jpg)
What are you serving differently through RESS?
![Page 94: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/94.jpg)
What are you serving differently through RESS?
Images CSS bundles JS bundles Header / footer markup Navigation markup
Most Common
![Page 95: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/95.jpg)
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
![Page 96: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/96.jpg)
What are you serving differently through RESS?
Simpler navigation for feature phones Rendering animations as flat images Sending less content for low-bandwidth
Fallbacks
![Page 97: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/97.jpg)
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
![Page 98: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/98.jpg)
RESS reduces the need for developers to span code from
IE8 to iOS7.
![Page 99: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/99.jpg)
What impact did RESS have on performance?
![Page 100: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/100.jpg)
RESS can unhinge your caching/CDN technology.
![Page 101: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/101.jpg)
Did the CMS/platform facilitate or discourage the use of RESS?
![Page 102: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/102.jpg)
Did the CMS/platform facilitate or discourage the use of RESS?
33%
33%
33%Existing Plugin
Custom Plugin
Custom Platform
![Page 103: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/103.jpg)
Can you share any relevant before/after analytics?
![Page 104: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/104.jpg)
Desktop 2.0 MB 41 requests
Smartphone 390 KB 13 requests
Potential for Significant Control
![Page 105: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/105.jpg)
How important is RESS to the future of RWD?
![Page 106: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/106.jpg)
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.
“
![Page 107: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/107.jpg)
We don’t think RESS is the answer to RWD, but either RESS or conditional loading are necessary today.“
![Page 108: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/108.jpg)
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.
![Page 109: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/109.jpg)
Part 3/4: Viable Solutions
![Page 110: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/110.jpg)
RWD !== Proxy !== Dynamic Serving !== RESS
![Page 111: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/111.jpg)
The efficacy of these approaches is not equivalent.
![Page 112: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/112.jpg)
Each strategy has trade-offs. It’s different for every business.
![Page 113: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/113.jpg)
RWD is wonderful. It’s not always the right choice.
![Page 114: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/114.jpg)
Google’s Recommendation
![Page 115: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/115.jpg)
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
![Page 116: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/116.jpg)
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
![Page 117: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/117.jpg)
Separate URLs for mobile and desktop sites.
3. Proxy Sites
https://developers.google.com/webmasters/smartphone-sites/details
![Page 118: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/118.jpg)
Google’s suggestions hint at pitfalls in each approach.
![Page 119: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/119.jpg)
Problems with Proxy Sites
![Page 120: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/120.jpg)
Duplicate content splits attribution for your URLs.
![Page 121: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/121.jpg)
Proxy sites can force you to compete against yourself.
![Page 122: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/122.jpg)
Competitors can easily outrank your split attribution.
![Page 123: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/123.jpg)
Bad UX of Proxy Sites
On desktop ➔ Click m.site.com link ➔ D’oh On smartphone ➔ Click site.com link ➔ D’oh
![Page 124: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/124.jpg)
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
![Page 125: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/125.jpg)
<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:
![Page 126: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/126.jpg)
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:
![Page 127: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/127.jpg)
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:
![Page 128: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/128.jpg)
Incomplete / incorrect proxy configuration will
rank your site lower.
![Page 129: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/129.jpg)
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:
![Page 130: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/130.jpg)
FOLLOW DIRECTIONS
ONE DOES NOT SIMPLY
![Page 131: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/131.jpg)
Companies should be penalized for redirecting badly,
and they are.
![Page 132: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/132.jpg)
http://www.mobify.com/insights/apples-handoff-is-bad-news-for-separate-mobile-sites/ http://www.apple.com/osx/preview/mac-and-ios/
![Page 133: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/133.jpg)
Problems with Dynamic Serving
![Page 134: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/134.jpg)
HTTP Header
Vary: User-Agent
![Page 135: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/135.jpg)
1. Signals to caches that response differs based on User Agent 2.
Vary: User-Agent
http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
![Page 136: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/136.jpg)
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/
![Page 137: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/137.jpg)
CDN services will not cache content served with
“vary headers”.
![Page 138: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/138.jpg)
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.
![Page 139: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/139.jpg)
CDNs don’t want to distribute thousands of variations for one page.
![Page 140: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/140.jpg)
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/
![Page 141: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/141.jpg)
Dynamic Serving & Delivery Optimization Vendors
![Page 142: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/142.jpg)
Adaptive content? Responsive delivery? (ugh)
Mobile detection?
![Page 143: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/143.jpg)
Dynamic serving is a practical way to retrofit without a full rebuild.
![Page 144: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/144.jpg)
Multiple frontend implementations = splitting resources. Another external layer = added complexity.
Downsides
![Page 145: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/145.jpg)
Ultimately, it’s a coping mechanism for the
device landscape.
![Page 146: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/146.jpg)
RWD Is Recommended
![Page 147: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/147.jpg)
https://developers.google.com/webmasters/smartphone-sites/details
3 Reasons Google Prefers RWD
1. Single URL 2. 3.
![Page 148: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/148.jpg)
https://developers.google.com/webmasters/smartphone-sites/details
3 Reasons Google Prefers RWD
1. Single URL 2. No redirects 3.
![Page 149: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/149.jpg)
1. Single URL 2. No redirects 3. Crawler efficiency
https://developers.google.com/webmasters/smartphone-sites/details
3 Reasons Google Prefers RWD
![Page 150: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/150.jpg)
The SEO industry wants “desktop SEO” and “mobile SEO”.
!
Search engines don’t.
![Page 151: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/151.jpg)
Mobile search results favor responsive sites.
![Page 152: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/152.jpg)
For Google: RWD benefits users, crawlers, and retailers.
![Page 153: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/153.jpg)
Parity Is A Major Advantage
![Page 154: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/154.jpg)
Access to the same information regardless of the device.
Content Parity
![Page 155: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/155.jpg)
Access to the same features regardless of the device.
Functional Parity
![Page 156: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/156.jpg)
Good design is accessible.
![Page 157: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/157.jpg)
“Mobile only” or “desktop only” mindsets fracture the
user’s experience.
![Page 158: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/158.jpg)
Most RWD implementations are functional at best.
![Page 159: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/159.jpg)
RWD Is Fast
![Page 160: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/160.jpg)
People make websites slow.
![Page 161: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/161.jpg)
Almost all sites are slow today.
![Page 162: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/162.jpg)
They don’t have to be slow.
![Page 163: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/163.jpg)
https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two https://speakerdeck.com/brendanfalkowski/responsive-evolution
![Page 164: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/164.jpg)
Speed Index of major eCommerce sites
1000 2000 3000 4000 5000 6000 7000 80000
Amazon — 1439
Home Depot — 2888
Sears — 3759
Apple Store — 4139
eBay — 4207
Grainger — 4409
Dell — 5257
Walmart — 7151
![Page 165: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/165.jpg)
Speed Index measures the perceived completeness
of a web page.
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
![Page 166: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/166.jpg)
1000 2000 3000 4000 5000 6000 7000 80000
Google - 1308
3519 — Median
4493 — Mean
Amazon — 1439
Home Depot — 2888
Sears — 3759
Apple Store — 4139
eBay — 4207
Grainger — 4409
Dell — 5257
Walmart — 7151
Benchmarks from Alexa 300K + Google
![Page 167: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/167.jpg)
1000 2000 3000 4000 5000 6000 7000 80000
Google - 1308
3519 — Median
4493 — Mean
Amazon — 1439
Skinny Ties — 1800
Angry Birds Shop — 2530
Home Depot — 2888
Sears — 3759
Apple Store — 4139
eBay — 4207
Grainger — 4409
Dell — 5257
Walmart — 7151
NDA (Beta) — 1446
My clients: Magento + very custom RWD
![Page 168: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/168.jpg)
1000 2000 3000 4000 5000 6000 7000 80000
Google - 1308
3519 — Median
4493 — Mean
Amazon — 1439
Skinny Ties — 1800
Angry Birds Shop — 2530
Home Depot — 2888
Sears — 3759
Apple Store — 4139
eBay — 4207
Grainger — 4409
Dell — 5257
Walmart — 7151
NDA (Beta) — 1446
Skinny Ties uses no CDN — still fast
![Page 169: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/169.jpg)
0.48%slower than Amazon.
My B2B client using RWD:
![Page 170: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/170.jpg)
RWD can be fast. Performance is yours to lose.
Potential value is huge.
![Page 171: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/171.jpg)
Frontend AuditsTargeted performance consulting from Gravity Department
![Page 172: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/172.jpg)
Frontend Audits
Evaluate: Goals / targets Good practices Bad practices
Advise: Missing practices Content workflow Code quality
Decide: Impact analysis Effort analysis A/B sampling
![Page 173: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/173.jpg)
Part 4/4: Wrapping Up
![Page 174: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/174.jpg)
Only RWD serves all devices and reduces cost of ownership.
![Page 175: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/175.jpg)
RESS will be a critical tool, but it’s nothing without good RWD.
![Page 176: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/176.jpg)
eCommerce platforms need to invest more on frontend technology.
![Page 177: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/177.jpg)
![Page 178: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/178.jpg)
Thank you
![Page 179: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/179.jpg)
Q&A
![Page 180: Two approaches to RWD: Pure & Hybrid. Brendan Falkowski](https://reader033.vdocuments.site/reader033/viewer/2022060118/5589daf7d8b42a2c1d8b46d0/html5/thumbnails/180.jpg)
Gravity DepartmentGravityDept
gravitydept.com magefrontend.com
Brendan FalkowskiFalkowski