Refining Priorities in Multi-Device Frontend Strategy

Responsive Evolution Refining Priorities in Multi-Device Frontend Strategy Brendan Falkowski Gravity Department

Magento Imagine Conference Las Vegas, Nevada May 13, 2014

Brendan Falkowski Gravity Department Falkowski

GravityDept.com

Design Consulting For

Internet Retailer 2014 Hot 100 List 2014 Mobile 10 List

Net Magazine Brilliant Newcomer Nominee Top 25 Responsive Designs

Featured Across the Web Practical eCommerce eBay Blog Moz Web Performance Today

KISSmetrics Conversion XL Smashing Magazine eConsultancy

Mobify Creative Bloq Yahoo! Small Business Media Queries

Acumen Theme • Used by 1350+ stores • 4 years of updates • Made for customization • Rapid launch

gravitydept.com/to/acumen

Magento Certification Advisory Board Member

#OperationFrontendSteward

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

Tell me about weekends.

2012

2013

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

More devices, More problems

Multi-Device Commerce: 2014 Edition

Screens Are Everywhere

0.5

square feet of LCD

× 7.2B people https://twitter.com/BenedictEvans/status/384768567218278401

125 square miles of LCD screens

Number of unique Android devices

3,997 in 2012

http://opensignal.com/reports/fragmentation-2013/

11,868 in 2013

~266 million US smartphone users by 2020

http://www.asymco.com/2013/10/08/how-many-smartphone-users-will-there-be-in-the-us/

US eCommerce Traffic by Year Thanksgiving + Black Friday Desktop Phone Tablet https://twitter.com/asymco/status/407172788093743105

Responsive design is finally rolling out

http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/

eCommerce sites using RWD from Alexa Top Million

1%

in 2012 http://tomrobertshaw.net/2014/04/april-2014-ecommerce-survey/

16% in 2013

Multi-device users are the new normal

Why I’m back

RWD Won

Universal technology. Great investment. Customers love it.

Fluid multi-device experiences are not special

❐ ✓

Responsive design

Responsive Evolution Refining Priorities in Multi-Device Frontend Strategy

What is Frontend Strategy?

Content Stories Data Media

Branding Identity Aesthetic Personality

Copywriting Information Voice Tone

Interaction Usability Affordances Patterns

User Flows On-boarding Conversion Retention

Information Architecture Navigation Hierarchy Relationships

Code HTML CSS JavaScript

Emotion Trust Delight Confusion

Performance Uptime Latency Perception

It’s all part of frontend strategy.

Make a design system.

Twitter search: site #fail

https://twitter.com/rachel_martino/status/461159741897834496 https://twitter.com/mikeallers/status/465310594329890819

Complex Systems

Gall’s Theory A complex system that works is invariably found to have evolved from a simple system that worked. !

A complex system designed from scratch never works and cannot be patched up to make it work. !

You have to start over with a working simple system. http://en.wikipedia.org/wiki/John_Gall_(author)

Evolving Design Systems

Evolution is a process that adds complexity through natural selection. !

This is to say, nature has its mediocre designs eaten by its good designs. !

~ Bill Nye, The Science Guy https://www.youtube.com/watch?v=z6kgvhG3AkI

http://www.amnh.org/exhibitions/past-exhibitions/darwin

Mutation from Environmental Changes

×

Natural Selection from Environmental Changes

6,000,000,000 photos uploaded every two months.

http://thenextweb.com/socialmedia/2011/08/05/flickr-hits-6-billion-total-photos-but-facebook-does-that-every-2-months/

Let’s do a photo startup. But mobile only.

http://thenextweb.com/socialmedia/2011/08/05/flickr-hits-6-billion-total-photos-but-facebook-does-that-every-2-months/

Survival of the Fittest Those that ”fit in” the best with the changing environment.

Friend me? Here’s $1 Billion.

Environmental factors drive evolution — not competition.

Are your systems, values, and goals fitted to the new environment?

Future-friendly priorities

1. Focus on maintainability 2. Always respect performance

Part One: Maintainability

Why are you hiring responsive design?

Phone site Tablet site Desktop site

Resources You Need for RWD Sweet Spot

~One Site

~Two Sites

~Three Sites

Responsive Design…Technically Sorry

~One Site

~Two Sites

~Three Sites

Constant Iterating Yeya!

~One Site

~Two Sites

~Three Sites

Craftsmanship

DURABILITY

Stop chasing trends. Make design systems.

Design Systems & Teams

“This is how we work and why.”

Design systems should be like DNA.

From your blood.

New project. Familiar thought process.

15%

Budget spent on pattern library and development standards

72%

Less time spent refactoring in the project’s second half

http://maban.co.uk/projects/front-end-style-guides/

Photo credit: https://www.flickr.com/photos/hellogeri/6154038287/

http://gim.ie/fZyK

manuals.gravitydept.com

https://twitter.com/erikhansen/status/454733933666529280

Long-term Maintainability

Complexity × Size = Maintainability

Complexity Management

OOCSS, BEM, SMACSS, PatternLab http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://smacss.com/ http://patternlab.io/

Size Management

https://www.youtube.com/watch?v=ldx4ZFxMEeo

Smaller systems are better systems.

You can build it. Should you build it?

Your frontend needs a steward.

The least maintainable system is any system after a year with no guardian.

Part Two: Performance

What do you expect?

Websites just aren’t that fast.

How fast are sites really?

200ms

Time-to-first-byte recommended by Google https://developers.google.com/speed/docs/insights/Server

547ms

TTFB for google.com http://www.webpagetest.org/result/140427_8G_NY4/

1894ms

Page load time for google.com http://www.webpagetest.org/result/140427_8G_NY4/

Performance in eCommerce

ONE DOES NOT SIMPLY

OUTPERFORM GOOGLE

Alexa Top 500 Retail Sites

21% slower than last year http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/

Alexa Top 500 Retail Sites

9.3 seconds median page load time http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/

Alexa Top 500 Retail Sites

31% heavier 1.44 Megabytes http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/

Alexa Top 100 Retail Sites

20% interactive in under 3 seconds http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/

Alexa Top 100 Retail Sites

26% interactive in over 8 seconds http://www.webperformancetoday.com/2014/02/18/new-findings-median-ecommerce-page-has-slowed-down-by-21-in-the-past-year/

These are not projections.

Alexa Top 1000 Sites

151% heavier than 3 years ago http://www.webperformancetoday.com/2013/11/26/web-page-growth-151-percent/

We’re to blame.

Physics of Performance

Bandwidth is not the barrier.

http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH

Average Bandwidth in 2014

10.0 Mbps

3.8 Mbps

USA

Worldwide

http://www.akamai.com/dl/akamai/akamai-soti-q413.pdf?WT.mc_id=soti_Q413

Page load time vs Bandwidth

http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH

More bandwidth does not improve load time.

Round Trip Time = Latency Request

Server

You Response

Page load time vs Latency

http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#MORE_BANDWIDTH_DOESNT_MATTER_MUCH

T T R s m 0 4 : l a de

I

https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

: l a u Act

T T R s m 0 0 1 – 0 5

https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

Mobile Latency 100–1000ms Normal latency

https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

1000–2000ms Establish radio link

Minimize requests to improve mobile performance.

Timings Matter

HTTP Request Flow DNS Lookup

TCP SSL Connection Negotiation

Time Time To First Byte

Request

Response

Execute

Load time: backend vs frontend 13%

87%

Backend

Frontend

stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

HTML5 Navigation Timings API

http://www.w3.org/TR/navigation-timing/#processing-model

DOM Interactive

http://www.w3.org/TR/navigation-timing/#processing-model

Every asset (CSS, JS, image) incurs a new request.

DOM Complete

http://www.w3.org/TR/navigation-timing/#processing-model

Google Analytics page timings

3.64s not accounted for?

DOM Complete

DOM Interactive (1.31 seconds)

Parsing, Waiting, and Rendering

CSS blocks the critical rendering path.

http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

What users see while CSS loads

JavaScript blocks rendering and stops downloads.

http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

JavaScript stops parallel downloads.

Put JavaScript before the tag.

If the JS architecture is blocking, you have to work harder.

Single Point of Failure

SPOF One part of a system that can stop the entire system from working if it fails.

SPOF effects

http://www.stevesouders.com/blog/2010/06/01/frontend-spof/

Frontend SPOFs can block the entire site.

Business Metrics of Performance

Walmart Business Metrics for Performance 1s faster

0.1s faster

+2% conversions

+1% Revenue

webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/

5 second difference in page load time !

200% fewer exits

http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/

Faster Sites 1.Engage users longer 2.Convert better 3.Make more money

Measured vs. Perceived Performance

“window.onload is not the best metric for measuring site speed."

http://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/

2004

2014

HTML Images

HTML Images Video CSS JavaScript Web Fonts AJAX Requests

“Time to Interaction” is the critical metric. !

Not page load time.

amazon.com rendering

After 2.0s Looks Mostly Done http://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/

After 5.2s DOM Complete

It only matters when a site looks done — not when it’s actually done.

Perceived speed can’t be measured with a timing event.

Speed Index

Speed Index filmstrip

http://www.webpagetest.org/result/140428_85_WV/

Speed Index Area

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

webpagetest.org

Speed Index from Alexa Top 300,000 sites

0

1000

2000

13 88

—f

3000

as

21 91 te

rt

35

—f

ha n

4000

as

te

90 %

rt

ha

n7

5%

19

5000

44 —f

as

te

rt

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

93

—M

55 ea n

ha

n5

0%

6000

08

—f

as

te

7000

rt

ha

n2

5%

8000

Speed Index from Alexa Top 300,000 sites 0 3 5

9 3 1

—2

4 8 — p 8 o e 8 r 8 h 9 2 8 9 o 9 S 0 43 t 1 — 0 5 3 s S t 7 44 — 7 1 d 1 o e 0 r 7 s 3 l i — — p 2 e 5 — p B — i e n 2 p — 4 er le T s y D o 5 r r g A y a e g o — y ing az inn e l n o a m l S A G Am Sk eB Gra De Ho 00

0

1000

2000

13 88

—f

3000

as

21 91 te

rt

35

—f

ha n

4000

as

te

90 %

rt

ha

n7

5%

19

5000

44 —f

as

te

rt

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

93

ea n

ha

n5

0%

6000

55

—M

alm W

08

—f

as

te

7000

rt

ha

n2

5%

t— r a

1 5 71

8000

My clients running Magento 0 3 5

9 3 1

—2

4 8 — p 8 o e 8 r 8 h 9 2 8 9 o 9 S 0 43 t 1 — 0 5 3 s S t 7 44 — 7 1 d 1 o e 0 r 7 s 3 l i — — p 2 e 5 — p B — i e n 2 p — 4 er le T s y D o 5 r r g A y a e g o — y ing az inn e l n o a m l S A G Am Sk eB Gra De Ho 00

0

1000

2000

13 88

—f

3000

as

21 91 te

rt

35

—f

ha n

4000

as

te

90 %

rt

ha

n7

5%

19

5000

44 —f

as

te

rt

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

93

ea n

ha

n5

0%

6000

55

—M

alm W

08

—f

as

te

7000

rt

ha

n2

5%

t— r a

1 5 71

8000

With the right frontend performance optimizations, Magento and RWD are fast.

The CDN Myth

Alexa Top 100 Retail Sites

75%

serve content via CDNs http://finance.yahoo.com/news/radware-research-reveals-eretailers-content-093000465.html

CDN is up. We’re good.

Sites using CDNs are slower

5.7s using CDN

http://finance.yahoo.com/news/radware-research-reveals-eretailers-content-093000465.html

4.7s no CDN

CDNs do not clean up your mess.

Skinny Ties doesn’t use a CDN (yet). Impressive. 0 3 5

—2

9 3 1

4 8 — p 8 o e 8 r 8 h 9 2 8 9 o 9 S 0 43 t 1 — 0 5 3 s S t 7 44 — 7 1 d 1 o e 0 r 7 s 3 l i — — p 2 e 5 — p B — i e n 2 p — 4 er le T s y D o 5 r r g A y a e g o — y ing az inn e l n o a m l S A G Am Sk eB Gra De Ho 00

0

1000

2000

3000

4000

5000

6000

alm W 7000

t— r a

1 5 71

8000

Fast Enough?

How fast is fast enough? A speed index of under 1000. http://timkadlec.com/2014/01/fast-enough/

This is fast enough. Good luck. 0 3 5

—2

9 3 1

4 8 — p 8 o e 8 r 8 h 9 2 8 9 o 9 S 0 43 t 1 — 0 5 3 s S t 7 44 — 7 1 d 1 o e 0 r 7 s 3 l i — — p 2 e 5 — p B — i e n 2 p — 4 er le T s y D o 5 r r g A y a e g o — y ing az inn e l n o a m l S A G Am Sk eB Gra De Ho 00

0

1000

2000

3000

4000

5000

6000

alm W 7000

t— r a

1 5 71

8000

Show of Hands

Who has a single-page conversion funnel?

Measure the Journey

On-site Conversion Funnel Home

Catalog

Product

Cart

Checkout

Measure and optimize for the entire flow.

Design For These Scenarios

{

Pre-fetch Front-load Delay Lazy-load Bundle Cache

The Right Time for Frontend Optimization

Source

Without careful governance anyone can tank performance.

Real User Monitoring (RUM)

RUM alerts you before small slips are noticeable.

Digging Yourself Out

Frontend Audits Targeted 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

Wrapping Up

1. Focus on maintainability 2. Always respect performance

Frontend strategy is a critical investment and massive opportunity.

Thank you

Q&A

Gravity Department GravityDept

Brendan Falkowski Falkowski

gravitydept.com magefrontend.com