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
AI時代のIaC入門 〜なぜインフラをコードで管理したいのか？〜 / Introduction to IaC in the AI Era
Avatar for アキキー | Akihisa Ikeda akihisaikeda
6
1.3k
graphql-ruby を Spinel で速くしようとした話
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
130
Apple Intelligenceとオンデバイス時代の到来
Avatar for Yahiro Sugiyama yahir0
0
180
Crash Auto Pipelines
Avatar for Veronikapj veronikapj
1
200
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
1.6k
3回つくってわかった、
定期実行ジョブ基盤の本質情報
Avatar for Naoto Takai takai
4
3.5k
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
350
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
510
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
750
Spec-Driven Development - Why Vaadin Is the Perfect Fit
Avatar for Simon Martinelli simas
PRO
0
190
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
Avatar for Takuya Akiba iwiwi
4
1.4k
Modernizing iOS Apps
Avatar for seyfeddin seyfoyun
0
140

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.7k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
320
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
460
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
480
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
570
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
610
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
570
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.4k

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]