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/

1. Faster ForwardTM
RESPONSIVE IN THE WILD
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

2. Faster ForwardTM
Responsive is Taking Off

3. Faster ForwardTM
So, how far have we come?
~500 Websites, Self SelectedMany small, manual studies
Not Enough Data…

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. 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. 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. 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. 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. Faster ForwardTM
But what IS responsive anyway?!
Brad Frost wrote
By Tim Kadlec
By Jason Grigsby
Lyza Gardner wrote (on A List Apart):

10. Faster ForwardTM
Digging into Data
Warning:
Here Be
Dragons

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. 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. 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. Faster ForwardTM
People are sometimes… touchy… about their RWD

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. 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. 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. 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. 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…