Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
-
Upload
meetmagentony2014 -
Category
Technology
-
view
1.348 -
download
1
description
Transcript of Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two Approaches to RWD: Pure & HybridBrendan Falkowski Gravity Department
Meet Magento NYC New York, New York September 22, 2014
Brendan FalkowskiGravity Department
Falkowski
GravityDept.com
Frontend Consulting For
$4B B2B leader (private beta)
Product Consulting For
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
• Used by 1350+ stores • 4 years of updates • Made for customization • Rapid launch
Acumen Theme
gravitydept.com/to/acumen
Advisory Board MemberMagento Certification
#OperationFrontendSteward
https://github.com/magento-hackathon/operation-frontend-steward
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
Two Approaches to RWD:
Pure and Hybrid
Two Approaches to RWD:
Pure and Hybrid
Part 1/4: Definitions
Words mean what you think, except when they don’t.
Responsive Design Adaptive Design Adaptive Layout Proxy Sites M-DOT Sites
Hybrids Retrofitting Dynamic Serving RESS …?
Responsive Web Design
(RWD)
1. Fluid grid 2. Flexible content 3. Media queries
Keep it simple.
Pure RWD === RWD
CSS
HTML }Google Glass Smartphone Small Tablet Big Tablet Netbook Laptop Computer Desktop Computer Television ?
{Google Glass Smartphone Small Tablet (you) Big Tablet Netbook Laptop Computer Desktop Computer Television ?
Ignore this.
{Apply this.
Retrofitting RWD augments desktop problems.
Designing for the highest constraints makes you prioritize.
Mobile First
http://www.abookapart.com/products/mobile-first
Improve the content. Don’t degrade the experience.
Progressive Enhancement
http://alistapart.com/article/understandingprogressiveenhancement
Blame the implementation not the technique.
Most RWD sites are rushed and not great today.
Blame RWD? Or take responsibility?
Text
http://gravitydept.com/blog/responsive-evolution
Adaptive Design
Any variation in response to the environment.
Adaptive Design
Selecting a smart default and layering on capabilities if the task supports them.
Adaptive Design as Progressive Enhancement
Find Store
City or zip code…
Use GPS
Adaptive Design
Responsive Design
Adaptive Layout
Adaptive Design
Responsive Design
Adaptive Layout
3”
Screen Size
Phone Layout
5” 7” 9” 13” 15” 24” 30” 42”11”
Tablet / Desktop Layout
Retrofit for one breakpoint
Fixed desktop site
Retrofitting adaptive layout. Not great.
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?
Adaptive layout is like pretending only small + big
screens exist.
Proxy Site
m.site.com site.com
Fixed SizeFixed Size
Proxies sacrifice for speed by ripping out content and
functionality.
Jane Doe’s context and goals are not inferred by her
device’s characteristics.
Where is the elusive T-DOT?
1. Expensive and annoying to implement code three times. 2. 3.
Three codebases?
1. Expensive and annoying to implement code three times. 2. Discrepancies create a bad user experience. 3.
Three codebases?
1. Expensive and annoying to implement code three times. 2. Discrepancies create a bad user experience. 3. Broad changes incur massive technical debt.
Three codebases?
Multiple proxies are inefficient, ineffective, and expensive.
Responsive Proxy Site
m.site.comsite.com
Fixed SizeRWD Destined to replace the desktop site
Responsive ProxiesThe Guardian BBC Entertainment Weekly
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
Responsive proxies are favorable with limited resources.
Dynamic Serving
User
Inspect device
site.comGenerate mobile site
Generate desktop site
Send response via same URL
1
2
3
A single domain is better for SEO than proxies.
1. You have to inspect the browser accurately.
2. Delivering variations cannot impact performance.
3. Still need multiple frontend implementations.
sweetwater.com
Phone Tablet Desktop
shop.lego.com
Phone Tablet Desktop
Responsive Design with Server-Side
Components (RESS)
One RWD site with component variations.
RWDRWD Different header
component
http://www.lukew.com/ff/entry.asp?1392
No platforms support component-driven
variation today.
RESS is the only bridge between responsive design and delivery optimization.
Google now executes JS and renders CSS during indexing.
http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html
Badly written or blocking JS/CSS can derail search spiders.
Progress rendering and on-demand content can finally be indexed fully.
JavaScript will make RESS-like variation accessible sooner.
Part 2/4: RESS Survey
Detecting RESS Usage
Resizing your browser usually won’t trigger RESS variations.
Feature detection may rely on an external database
queried by user agent.
If device characteristics or user agent don’t line up,
you won’t notice RESS.
My RESS Survey
326Using RWD
RESS Survey Responses
17Using RESS
1. Survey is self-reported. 2. 3.
Why so few responses?
1. Survey is self-reported. 2. No platforms have RESS built-in. 3.
Why so few responses?
1. Survey is self-reported. 2. No platforms have RESS built-in. 3. Custom work is proprietary.
Why so few responses?
Results are a sampling of RESS practices today.
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:
RESS Survey Insights
How long have you used RWD?
<1 Year 1–2 Years 2–3 Years 3–4 Years
33%
28%
19%
14%
Never (Disqualified)
6%
OS sniffing Browser sniffing Viewport measurement
How do you detect which RESS variation to send?
Detection MethodMobileDetect WURFL Homegrown system
Frameworks
Most feature detection starts being applied on the
second page load.
What percentage of content are you serving with RESS?
5–10%Of content served by RESS
Minimal RESS usage reinforces that RWD handles
most things well.
What are you serving differently through RESS?
What are you serving differently through RESS?
Images CSS bundles JS bundles Header / footer markup Navigation markup
Most Common
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
What are you serving differently through RESS?
Simpler navigation for feature phones Rendering animations as flat images Sending less content for low-bandwidth
Fallbacks
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
RESS reduces the need for developers to span code from
IE8 to iOS7.
What impact did RESS have on performance?
RESS can unhinge your caching/CDN technology.
Did the CMS/platform facilitate or discourage the use of RESS?
Did the CMS/platform facilitate or discourage the use of RESS?
33%
33%
33%Existing Plugin
Custom Plugin
Custom Platform
Can you share any relevant before/after analytics?
Desktop 2.0 MB 41 requests
Smartphone 390 KB 13 requests
Potential for Significant Control
How important is RESS to the future of RWD?
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.
“
We don’t think RESS is the answer to RWD, but either RESS or conditional loading are necessary today.“
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.
Part 3/4: Viable Solutions
RWD !== Proxy !== Dynamic Serving !== RESS
The efficacy of these approaches is not equivalent.
Each strategy has trade-offs. It’s different for every business.
RWD is wonderful. It’s not always the right choice.
Google’s Recommendation
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
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
Separate URLs for mobile and desktop sites.
3. Proxy Sites
https://developers.google.com/webmasters/smartphone-sites/details
Google’s suggestions hint at pitfalls in each approach.
Problems with Proxy Sites
Duplicate content splits attribution for your URLs.
Proxy sites can force you to compete against yourself.
Competitors can easily outrank your split attribution.
Bad UX of Proxy Sites
On desktop ➔ Click m.site.com link ➔ D’oh On smartphone ➔ Click site.com link ➔ D’oh
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
<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:
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:
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:
Incomplete / incorrect proxy configuration will
rank your site lower.
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:
FOLLOW DIRECTIONS
ONE DOES NOT SIMPLY
Companies should be penalized for redirecting badly,
and they are.
http://www.mobify.com/insights/apples-handoff-is-bad-news-for-separate-mobile-sites/ http://www.apple.com/osx/preview/mac-and-ios/
Problems with Dynamic Serving
HTTP Header
Vary: User-Agent
1. Signals to caches that response differs based on User Agent 2.
Vary: User-Agent
http://www.rimmkaufman.com/blog/vary-user-agent/30112012/
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/
CDN services will not cache content served with
“vary headers”.
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.
CDNs don’t want to distribute thousands of variations for one page.
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/
Dynamic Serving & Delivery Optimization Vendors
Adaptive content? Responsive delivery? (ugh)
Mobile detection?
Dynamic serving is a practical way to retrofit without a full rebuild.
Multiple frontend implementations = splitting resources. Another external layer = added complexity.
Downsides
Ultimately, it’s a coping mechanism for the
device landscape.
RWD Is Recommended
https://developers.google.com/webmasters/smartphone-sites/details
3 Reasons Google Prefers RWD
1. Single URL 2. 3.
https://developers.google.com/webmasters/smartphone-sites/details
3 Reasons Google Prefers RWD
1. Single URL 2. No redirects 3.
1. Single URL 2. No redirects 3. Crawler efficiency
https://developers.google.com/webmasters/smartphone-sites/details
3 Reasons Google Prefers RWD
The SEO industry wants “desktop SEO” and “mobile SEO”.
!
Search engines don’t.
Mobile search results favor responsive sites.
For Google: RWD benefits users, crawlers, and retailers.
Parity Is A Major Advantage
Access to the same information regardless of the device.
Content Parity
Access to the same features regardless of the device.
Functional Parity
Good design is accessible.
“Mobile only” or “desktop only” mindsets fracture the
user’s experience.
Most RWD implementations are functional at best.
RWD Is Fast
People make websites slow.
Almost all sites are slow today.
They don’t have to be slow.
https://speakerdeck.com/brendanfalkowski/responsive-ecommerce-part-two https://speakerdeck.com/brendanfalkowski/responsive-evolution
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
Speed Index measures the perceived completeness
of a web page.
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
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
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
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
0.48%slower than Amazon.
My B2B client using RWD:
RWD can be fast. Performance is yours to lose.
Potential value is huge.
Frontend AuditsTargeted performance consulting from Gravity Department
Frontend Audits
Evaluate: Goals / targets Good practices Bad practices
Advise: Missing practices Content workflow Code quality
Decide: Impact analysis Effort analysis A/B sampling
Part 4/4: Wrapping Up
Only RWD serves all devices and reduces cost of ownership.
RESS will be a critical tool, but it’s nothing without good RWD.
eCommerce platforms need to invest more on frontend technology.
Thank you
Q&A
Gravity DepartmentGravityDept
gravitydept.com magefrontend.com
Brendan FalkowskiFalkowski