BUSTING RWD MYTHS…or rather, how can we take RWD to the next level

Jon Arne Sæterås twitter : @jonarnes

SCIENTIAMOBILEWURFL

device description repository(DDR)

THE SILVER BULLET

…diversity of web access being the werewolf

2000 2005 2010 2015

Progressive enhancement

Mobile site

WAPAdaptive Design

HTML5

RWD

Mobile First

716bytes965bytes

1 286bytes1 682bytes

1 953bytes2 162bytes

Web page weight:

Mobile browsing share:2,94%

6,09%10,73%

16,22%

27,12%32,94%

source: httparchive.org

source:StatCounter

215kbps248kbps526kbps

1 387kbps1 683kbps1 700kbps

Downstream bandwidth:source: Cisco

GARTNER HYPE CYCLE

Plateau reached in 2 to 5 years

TRENDSGoogle search trend for “Responsive Web Design”

May 25, 2010:

Responsive Web Design ar

ticle, A List A

part

TRENDSGartner: RWD in “peak of expectations” in July 2014,

reaching plateau in 2016 earliest.

Plateau of productivity

2016-2019

RWD July 2014

REACHING THE PLATEAU

How will Responsive Web Design

mature over the next couple of years?

WHAT CAN WE LEARN FROM THE WEB TODAY?

How are the big sites doing it?

REALITY CHECK“What happens when a mobile device enters a web page?”

TEST SET-UP

• Selenium and Chrome drivers.

• Script looking for traces of RWD, redirects, mobile URLs, changes in markup and CSS, etc,etc.

• Top 10,000 sites globally.

More about the test set-up here: http://www.scientiamobile.com/page/are-you-ready-for-googles-mobile-friendliness-rankings-lessons-from-the-top-10000-sites

CATEGORIZE SITES

• Responsive Web Design

• Dynamic Serving (Adaptive)

• Separate URLs (m-dot)

+ Client side progressive enhancement or other form of adaptiveness

- Do nothing

“HOW TO MAKE A WEBSITE”

“How to cook your dinner….”

72% of top 10k sites

86% of top 100 sites

MOBILE FRIENDLINESS

FRIENDLINESS APPROACH

0 %

15 %

30 %

45 %

60 %

top 100 top 1000 top 10000

RWD Sep. URL Dyn. Serv

LOOKING CLOSERat the mobile friendly sites

0 %

25 %

50 %

75 %

100 %

Top 100 Top 10,000

38 %12 %

22 %52 %

40 %36 %

Separate Url Dynamic delivery RWD

}62%{88%

LOOKING CLOSER

26 %

74 %

use “RWD like” approaches74%

at the mobile friendly sites

LOOKING CLOSERHalf of those, use Device Detection too

26 %

74 %

51 %

18 %

31 %

Separate Urls Dynamic Delivery RWD

COMBINATIONS

Pure RWD Dyn. Delivery Separate URL Total

Responsive 37,5 % 13,5 % 23 % 74 %

Not Responsive 8,7 % 17,3 % 26 %

Total 37,5 % 22,2 % 40,3 % 100 %

Not fair to put a website in one single category, really.

*% of sites with active mobile approach

MOST TOP SITES ARE UTILIZING MULTIPLE

TECHNIQUES

WHY?

–Guy Podjarny, Akamai

“A responsive website tuned to perform the best it can would not be as fast as a dedicated mdot site tuned equally well. Or more realistically, an

average responsive website would always be slower than an average mdot site.”

MORE DATAGuy Podjarny

MORE PROCESSINGGuy Podjarny

MYSPACE.COM

MYSPACE.COM

URL: myspace.comSize: 5.3 MBRequests: 153Cost: $0.38

URL: myspace.comSize: 8.3 MBRequests: 239Cost: $0.60

From: Dulles, VA - Chrome - CableFrom: Dulles, VA - Motorola G - Chrome - 3G

Full test results: Mobile, Desktop

MYSPACE.COM

MYSPACE.COMR

eque

sts

0

75

150

225

300

mobile desktop

image js flash other css font html

Byt

es

0

2 250 000

4 500 000

6 750 000

9 000 000

mobile desktop

5.3 MB

8.3 MB

153

239

Full test results: Mobile, Desktop

Dynamic servingWeight

Desktop 5,7 MBMobile 1,2 MB

RWDWeight

Desktop 5 MBMobile 2,3 MB

Separate urlWeight

Desktop 2,5 MBMobile 0,5 MB

IMAGESBetter handling of images is a

low-hanging fruitImages63 %

WURFL IMAGE TAILOR

• Resize image automatically

• Explicit resizing

• Compression and optimization

• webp support!

IMAGE OPTIMIZATION<img  src="//wit.wurfl.io/[full-­‐url-­‐to-­‐your-­‐image]">

RESPONSIVE IMAGES

<img  src="i/pencils_375.jpg"  sizes="(min-­‐width:  36em)  33.3vw,  100vw"    srcset=“i/pencils_375.jpg  375w,                      i/pencils_480.jpg  480w,                      i/pencils_768.jpg  768w,                      i/pencils_1024.jpg  1024w"      alt=""  width="100%">  

<img  src="//wit.wurfl.io/w_375/http://wurfl.github.io/i/pencils.jpg"        sizes="(min-­‐width:  36em)  33.3vw,  100vw"    srcset="//wit.wurfl.io/w_375/http://wurfl.github.io/i/pencils.jpg  375w,                      //wit.wurfl.io/w_480/http://wurfl.github.io/i/pencils.jpg  480w,                      //wit.wurfl.io/w_768/http://wurfl.github.io/i/pencils.jpg  768w,                      //wit.wurfl.io/w_1024/http://wurfl.github.io/i/pencils.jpg  1024w"      alt=""  width="100%">  

<img  src="//wit.wurfl.io/http://wurfl.github.io/i/pencils.jpg">

…or simply

<img  src="i/coast_375.jpg"      sizes="(min-­‐width:  36em)  33.3vw,  100vw"  

  srcset="i/coast_375.jpg  375w,       i/coast_480.jpg  480w,       i/coast_768.jpg  768w,       i/coast_1024.jpg  1024w"       alt=""  width="100%">

<img    src=“//wit.wurfl.io/http://.../i/coast.jpg”    width="100%"  alt  ="">

446 KB 313 KB

CHOOSING RWD IS NOT A MUTUALLY EXCLUSIVE CHOICE• Responsive Web Design is a characteristic of a site

• 74% of top sites have this characteristic. About half use server-side techniques for additional optimization

• About 60% of m-dot and dynamically serving sites also combine with RWD

• Responsive Design does not fix your images.

THANK YOUQuestions?

WURFL Image Tailor : http://wurfl.io More about the research: http://www.scientiamobile.com/page/are-you-ready-for-googles-mobile-friendliness-rankings-lessons-from-the-top-10000-sites