RWD myth busting @ Topconf
-
Upload
jon-arne-saeteras -
Category
Internet
-
view
767 -
download
0
Transcript of RWD myth busting @ Topconf
![Page 1: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/1.jpg)
BUSTING RWD MYTHS…or rather, how can we take RWD to the next level
Jon Arne Sæterås twitter : @jonarnes
![Page 2: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/2.jpg)
SCIENTIAMOBILEWURFL
device description repository(DDR)
![Page 3: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/3.jpg)
THE SILVER BULLET
…diversity of web access being the werewolf
![Page 4: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/4.jpg)
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
![Page 5: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/5.jpg)
GARTNER HYPE CYCLE
Plateau reached in 2 to 5 years
![Page 6: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/6.jpg)
TRENDSGoogle search trend for “Responsive Web Design”
May 25, 2010:
Responsive Web Design ar
ticle, A List A
part
![Page 7: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/7.jpg)
TRENDSGartner: RWD in “peak of expectations” in July 2014,
reaching plateau in 2016 earliest.
Plateau of productivity
2016-2019
RWD July 2014
![Page 8: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/8.jpg)
REACHING THE PLATEAU
How will Responsive Web Design
mature over the next couple of years?
![Page 9: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/9.jpg)
WHAT CAN WE LEARN FROM THE WEB TODAY?
How are the big sites doing it?
![Page 10: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/10.jpg)
REALITY CHECK“What happens when a mobile device enters a web page?”
![Page 11: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/11.jpg)
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
![Page 12: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/12.jpg)
CATEGORIZE SITES
• Responsive Web Design
• Dynamic Serving (Adaptive)
• Separate URLs (m-dot)
+ Client side progressive enhancement or other form of adaptiveness
- Do nothing
![Page 13: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/13.jpg)
“HOW TO MAKE A WEBSITE”
“How to cook your dinner….”
![Page 14: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/14.jpg)
72% of top 10k sites
86% of top 100 sites
MOBILE FRIENDLINESS
![Page 15: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/15.jpg)
FRIENDLINESS APPROACH
0 %
15 %
30 %
45 %
60 %
top 100 top 1000 top 10000
RWD Sep. URL Dyn. Serv
![Page 16: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/16.jpg)
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%
![Page 17: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/17.jpg)
LOOKING CLOSER
26 %
74 %
use “RWD like” approaches74%
at the mobile friendly sites
![Page 18: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/18.jpg)
LOOKING CLOSERHalf of those, use Device Detection too
26 %
74 %
51 %
18 %
31 %
Separate Urls Dynamic Delivery RWD
![Page 19: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/19.jpg)
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
![Page 20: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/20.jpg)
MOST TOP SITES ARE UTILIZING MULTIPLE
TECHNIQUES
![Page 21: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/21.jpg)
WHY?
![Page 22: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/22.jpg)
![Page 23: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/23.jpg)
–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.”
![Page 24: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/24.jpg)
MORE DATAGuy Podjarny
![Page 25: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/25.jpg)
MORE PROCESSINGGuy Podjarny
![Page 26: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/26.jpg)
MYSPACE.COM
![Page 27: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/27.jpg)
MYSPACE.COM
URL: myspace.comSize: 5.3 MBRequests: 153Cost: $0.38
URL: myspace.comSize: 8.3 MBRequests: 239Cost: $0.60
![Page 28: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/28.jpg)
From: Dulles, VA - Chrome - CableFrom: Dulles, VA - Motorola G - Chrome - 3G
Full test results: Mobile, Desktop
MYSPACE.COM
![Page 29: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/29.jpg)
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
![Page 30: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/30.jpg)
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
![Page 31: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/31.jpg)
IMAGESBetter handling of images is a
low-hanging fruitImages63 %
![Page 32: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/32.jpg)
WURFL IMAGE TAILOR
• Resize image automatically
• Explicit resizing
• Compression and optimization
• webp support!
![Page 33: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/33.jpg)
IMAGE OPTIMIZATION<img src="//wit.wurfl.io/[full-‐url-‐to-‐your-‐image]">
![Page 34: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/34.jpg)
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%">
![Page 35: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/35.jpg)
<img src="//wit.wurfl.io/http://wurfl.github.io/i/pencils.jpg">
…or simply
![Page 36: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/36.jpg)
<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
![Page 37: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/37.jpg)
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.
![Page 38: RWD myth busting @ Topconf](https://reader033.fdocuments.us/reader033/viewer/2022051101/5aaaeb3b7f8b9a586f8b48dd/html5/thumbnails/38.jpg)
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