Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

transcript

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

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

Keep it simple.

Pure RWD === RWD

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?

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

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

Inspect device

site.comGenerate mobile site

Generate desktop site

Send response via same URL

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.

1. Survey is self-reported. 2. No platforms have RESS built-in. 3. Custom work is proprietary.

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

Never (Disqualified)

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?

Images CSS bundles JS bundles Header / footer markup Navigation markup

Most Common

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

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?

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

Separate URLs for mobile and desktop sites.

3. Proxy Sites

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

Bi-Directional Annotations

For every desktop page:

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

Incomplete / incorrect proxy configuration will

rank your site lower.

4.5%Correctly implement

bi-directional annotations

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

CDN services will not cache content served with

“vary headers”.

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

3 Reasons Google Prefers RWD

1. Single URL 2. 3.

1. Single URL 2. No redirects 3.

1. Single URL 2. No redirects 3. Crawler efficiency

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

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

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

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

Gravity DepartmentGravityDept

gravitydept.com magefrontend.com

Brendan FalkowskiFalkowski

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

Technology