Responsive In The Wild (SmashingConf, 2014)
Download as PPTX, PDF1 like2,187 views
The document discusses the progress and implementation of responsive web design (RWD), highlighting various methods for detecting RWD across websites. Out of a sample of top 100,000 sites, approximately 11% were found to be responsive, with performance advantages such as smaller average page sizes noted for RWD sites. The author emphasizes the importance of understanding RWD metrics and suggests further tracking of responsive technologies and practices.
Responsive In The Wild (SmashingConf, 2014)
- 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…