Responsive In The Wild (SmashingConf, 2014)

1,957 views

Published on

Awareness to Responsive Web Design has grown substantially over the last few years, and practically any major organization has some RWD project in their Mobile Strategy decks. However, are we just talking about it, or actually doing it?

I ran a mass test to identify the responsive websites amongst the top 100,000 websites in the world. Eventually, we'll be able to rerun this test to track RWD adoption over time, but for now we can use it to see how RWD sites compare to each other and to non-RWD sites.

This short presentation, given over beers at the awesome SmashingConf, shares some such insights.
A (slightly smaller) but more detailed description of the test can be found here: www.guypo.com/mobile/roughly-1-in-8-websites-is-responsive/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,957
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive In The Wild (SmashingConf, 2014)

  1. 1. Faster ForwardTM RESPONSIVE IN THE WILD Guy Podjarny (@guypod) CTO, Web Experience, Akamai
  2. 2. Faster ForwardTM Responsive is Taking Off
  3. 3. Faster ForwardTM So, how far have we come? ~500 Websites, Self SelectedMany small, manual studies Not Enough Data…
  4. 4. Faster ForwardTM Detect RWD Option #1: Look for missing m. redirect Redirects aren’t always helpful… Most Sites are neither RWD nor “m.”
  5. 5. Faster ForwardTM Detecting RWD Option #2: look for a media query … @media screen and (max-width:768px) { .mobile-gallery-icon-big{background-size:32px;…} .mobile-gallery-instruction{margin-top:0;top:3%} .mobile-gallery-instruction-text{text-align:left} .mobile-gallery-instruction-wrapper{padding:10px} } … Close, but not quite there… Many non RWD sites use MQs Often to “Slightly Adjust Something”
  6. 6. Faster ForwardTM Detecting RWD Option #3: Resize & see what happens RWD: No “Cut” areas Not RWD: Many “Cut” areas No Scrollbar Scrollbar! We Can Automate This!!!
  7. 7. Faster ForwardTM Ran the test - Sample: Top 100,000 Sites - Per Alexa - Only the top (“/”) path of each - Testing Tool: WebPageTest - Methodology: - Load URL in Chrome - Resize window to 320x480 - Look for Scrollbar - Results posted on guypo.com - Functionality now in webpagetest.org - Add “responsive=1” to runTest API Sample Test Result:
  8. 8. Faster ForwardTM Well, that test kinda tests fluidity, not responsiveness… RWD Fluid 1. Fluid Grids 2. Flexible Images 3. Media Queries 1. Fluid Grids? 2. Flexible Images?
  9. 9. Faster ForwardTM But what IS responsive anyway?! Brad Frost wrote By Tim Kadlec By Jason Grigsby Lyza Gardner wrote (on A List Apart):
  10. 10. Faster ForwardTM Digging into Data Warning: Here Be Dragons
  11. 11. Faster ForwardTM Filter out Error & Text pages www.doe.gov - Yes, they’re fluid, but we don’t really want them… - Hacky Solution: require 3+ “200 OK” Responses - Removes ~7% of websites
  12. 12. Faster ForwardTM Finally, The Data! - ~11% of sites are Responsive - Roughly 1 in 9 sites - Ratio ~holds across top & bottom - RWD Share +1% without filter Top 100 Top 1K Top 10K Top 100K Non-RWD 85 841 8398 83259 RWD 10 113 1016 10112 RWD % 10.5% 11.8% 10.8% 10.8% RWD 11% Non- RWD 89% RWD Sites Ratio Top 100,000 sites
  13. 13. Faster ForwardTM Page Size on Small Resolution vs Big Resolution Much Smaller 7% Slightly Smaller 30% Roughly Same Size 63% Media Queri.es, 500 sites RWD Sites in Top 100,000 Sites
  14. 14. Faster ForwardTM People are sometimes… touchy… about their RWD
  15. 15. Faster ForwardTM RWD is GOOD for performance! (on desktop, long tail) 1,517 1,599 1,374 1,491 1,694 1,626 Top 1K Top 10K Top 100K Average “Desktop” Page Size (KB) RWD Non-RWD +2% -6% -15%
  16. 16. Faster ForwardTM RWD Still MUCH bigger than average m. site 1,643 1,513 540 Non-RWD RWD m. Average Page Size (KB), Top 5,000 Sites Page Weight
  17. 17. Faster ForwardTM Requests 80 42 104 62 Total Reqs Img Reqs RWD Sites Use Fewer Requests RWD Non-RWD 2.3 5.8 0.9 5.0 Font Reqs CSS Reqs RWD Sites have MORE Font/CSS Reqs RWD Non-RWD 9 18 14 18 28 15 Gif Reqs JPG Reqs PNG Reqs RWD Image Request Delta RWD Non-RWD
  18. 18. Faster ForwardTM Bytes – Where Do They Come From? 5,407 32,082 19,572 5,077 23,148 13,901 Avg Gif Size Avg JPG Size Avg PNG Size Average Image File Size, Top 100K RWD Non-RWD 6,037 25,839 18,743 3,787 19,158 12,821 7,391 20,843 12,686 Avg Gif Size Avg JPG Size Avg PNG Size Average Image File Size, Top 5K RWD Non-RWD mdot
  19. 19. Faster ForwardTM What’s Next? - Track Popular RWD JS Libraries - Track Use of Responsive Images - Track future adoption of RWD - … - Find Unicorn sites built “Mobile First” - Right now, I’ll settle for another beer…

×