Upload
jon-arne-saeteras
View
766
Download
0
Embed Size (px)
Citation preview
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