Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive in the Wild

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Mark Zeman Mark Zeman
June 25, 2014
Programming
3.8k
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
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1.4k
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
今こそ押さえておきたい アマゾンウェブサービス（AWS）の データベースの基礎 おもクラ #6版
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
230
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
400
Strategy for Finding a Problem for OSS: With Real Examples
Avatar for Chikahiro Tokoro kibitan
0
130
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
190
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
750
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
320
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
5.3k
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
2
480
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
170
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
160
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
150
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
960
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
280
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
280
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
240

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]