Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Responsive in the Wild

Avatar for Mark Zeman Mark Zeman
June 25, 2014
Programming
3.9k
1

Responsive in the Wild

Deck from Velocity 2014 Lightning Demo.

Avatar for Mark Zeman

Mark Zeman

June 25, 2014

More Decks by Mark Zeman

See All by Mark Zeman
Speed Matters
Avatar for Mark Zeman zeman
7
78k

Other Decks in Programming

See All in Programming
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
180
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
210
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
990
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
440
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
160
PumaからFalconに移行したRailsアプリケーションでの実践
Avatar for Hayato OKUMOTO falcon8823
0
190
Rでドレミ/Do-Re-Mi_with_R
Avatar for florets1 florets1
0
130
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
380
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～
Avatar for tosite tosite
0
110
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
0
660
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
270
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
150

Featured

See All Featured
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
270
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
740

Transcript

  1. Responsive in the wild

  2. Many techniques Picturefill Inline CSS & JS Conditional loading WebP

    RESS 14k Srcset

  3. 250 Responsive websites

  4. 17 Viewport widths 1024 1366 320 1920 360 400 480

    560 640 768 864 960 1152 1280 1483 1600 1760

  5. 449 316 320 1920 IMG JS CSS FONT HTML KB

    KB PX PX PX 1024

  6. 1024 1366 2217 KB 1861 KB 18% 320 1920

  7. None

  8. 38% FLATLINE

  9. 1024 1366 320 1920 IMG JS CSS 3530 3530

  10. 3530k 3530k

  11. 38% 55% IMAGES

  12. 1024 1366 1020 587 43% 768 320 1920 IMG JS

    CSS FONT Size

  13. 1024 2021 51 grolsch.co.uk 320 1920 IMG JS

  14. 768 1280 2160 1254 rue21.com 320 1920 IMG JS FONT

  15. 768 1280 1770 637 newzealand.com 320 1920 IMG JS

  16. =!

  17. 864 1959 3395 engadget.com 320 1920 IMG JS

  18. 5% Conditional CSS

  19. 1024 254 32 barackobama.com 320 1920 IMG JS CSS

  20. 11% Conditional JS

  21. 1024 280 156 famm.org 320 1920 IMG JS CSS

  22. 1024 38 14 320 1920 IMG JS CSS HTML 34

    15 Requests 5 5 5 5

  23. Mobile is nearing 50%

  24. yet there’s minimal responsive optimisation!

  25. None

  26. 1024 1599 768 mediatemple.net 320 1920 IMG JS FONT

  27. speedcurve.com/blog @MarkZeman FRONT-END PERFORMANCE MONITORING [email protected]