responsive web design's (rwd's) dirty little secrets

20
www.yottaa.com Confidential © 2014 Yottaa, Inc. All Rights Reserved. Dirty Little (not so) Secrets Responsive Web Design

Upload: ariweil

Post on 04-Dec-2014

192 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com Confidential © 2014 Yottaa, Inc. All Rights Reserved.

Dirty Little (not so) Secrets

Responsive Web Design

Page 2: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 2

Agenda

Confidential © All Rights Reserved.

Mobile site challengesResponsive Web Design (RWD)What it doesDifferences highlightedQ&A

Page 3: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 3Confidential © All Rights Reserved.

DO YOU HAVE A MOBILE SITE?

Page 4: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 4

20% of electronics purchases using mobile

35% of mobile visitors prefer www to m.site

80% of mobile revenue from full site browsing

…so yes, yes you do.Confidential © All Rights Reserved.

Do you need one?

Page 5: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 5Confidential © All Rights Reserved.

Mobile is all the RAGE…

64%OF SMARTPHONE USERS EXPECT PAGES TO LOAD IN

UNDER 4s

$1BnAPPAREL &ACCESSORIESPURCHASES

in Q113

71%Of all retail transactions

SMARTPHONEUSERS SHOPVIA MOBILE

48%

Expect mobile to be fasterthan desktop

85%Will go to a competitorto transact

42%Will neverreturn toyour site

29%

Page 6: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 6Confidential © All Rights Reserved.

And RAGE the users do…

51% say websites hard to navigate & use

46% say product images are too small

41% are concerned about security

26% feel that checkout is frustrating

Page 7: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 7Confidential © All Rights Reserved.

Which is reflected in the conversion rates

Website Visits by Device

Smartphone Revenue / Session

Page 8: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 8Confidential © All Rights Reserved.

What it means broadly…and for you?

4.3%in REVENUE

2 secondsslower

Pages that were…

DROP

2.2 secondsimprovement in

landing page speedINCREASED

DOWNLOADS

15.4%by

60% faster

INCREASEDDONATION CONVERSION

MakingBarack Obama’s website

14%

1 seconddelaycauses a

7%in CONVERSIONS

1 seconddelaycauses a

16%in CUSTOMERSATISFACTION

DROP DROP

1 seconddelaycauses an

11%in PAGE VIEWS

DROP

Page 9: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 9

Enter Responsive Web Design

Confidential © All Rights Reserved.

Advantages Disadvantages

Most consistent user experience possible Requires additional code re-working

No duplicate content maintains rankings Difficult to differentiate mobile content

Max link value. No risk of split link value Could affect usability/CRO

No redirects = low latency & fewer errors New code may affect rankings

Page 10: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 10

Little r – presentation mostly– Fluid, flexible layout– Media queries– Responsive images

Big R– Dynamic serving

BOTH are better than

Confidential © All Rights Reserved.

The difference between little r and big R

Page 11: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 11

Cannot impact 3rd party dynamic content like social

media or ads

CONTENT DELIVERY NETWORKS

Confidential © All Rights Reserved.

Mounting pressure to implement big R RWDPA

GE L

OA

D T

IME IT

EFFO

RT &

TIM

E

SITE LAUNCH ONGOING MAINTENANCE AND USER ENGAGEMENT EFFORTS

UPDATE CONTENT & IMAGES

ADD SOCIAL MEDIA WIDGETS

ADD REAL TIME PERSONALIZATION

A/B TEST PAGE CONTENT

Hiding components cannot keep pace with ongoing User & Marketing needs

Cannot control page load behavior, content

priority

FRONTEND OPTIMIZATION

Manual effort for every content change

DO IT YOURSELF

Page 12: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 12

Hidden content on most (eCommerce) sites

Confidential © All Rights Reserved.

Trust Icons

High-Res Images

Long-scrolling pages

Social Media

Dynamic Content

In Addition:• A/B Tests• Analytic tracking• Beacons• Chat• Personalization• Pixels• RWD w/out RESS

Visitors expect fast, flawless

experiences on any device

Marketing needs social media and other tags to engage visitors

IT needs control to ensure speed, scalability and security

Page 13: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 13Confidential © All Rights Reserved.

Where hiding content breaks down

Page 14: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 14

Time to Display 2.942sec

Time to Interact 8.436sec

Page Weight 831KB

Round Trips 76

3rd Party Domains 17

Confidential © All Rights Reserved.

Example: Desktop site

Page 15: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 15

Time to Display 1.495sec

Time to Interact 3.294sec

Page Weight 356KB

Round Trips 50

3rd Party Domains 14

Confidential © All Rights Reserved.

Example: Mobile site

Page 16: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 16

Time to Display 0.940sec

Time to Interact 2.246sec

Page Weight 344KB

Round Trips 42

3rd Party Domains 14

Confidential © All Rights Reserved.

Example: Mobile site w/RESS

Page 17: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 17Confidential © All Rights Reserved.

Visualize the difference (focus on 2.5sec)

Page 18: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 18

Reviews load on-demand– Hidden behind a tab– Only visible in 3rd scroll viewport– Requires 3rd party domain

Trust badges in footer deferred– Only visible in 4th scroll viewport– Requires 3rd party domain

Confidential © All Rights Reserved.

What is different?

Page 19: Responsive Web Design's (RWD's) Dirty Little Secrets

www.yottaa.com 19

Dynamically serve images– Adaptive-images.com– Blueberry.com– Retina-images.complexcompulsions.com

Optimize fonts/typography– Fittextjs.com– Lettering.js.com

Confidential © All Rights Reserved.

Other common optimizations in the wild

Page 20: Responsive Web Design's (RWD's) Dirty Little Secrets

THANK YOU

Confidential © All Rights Reserved. www.yottaa.com 20