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

Responsive in the Wild

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
14
5.7k
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.4k
New "Type" system on PicoRuby
Avatar for pocke pocke
1
990
Developing with AI Agents — Codex, Claude Code & Cowork Practical Guide
Avatar for Daisuke Masuda x5gtrn
PRO
0
1.3k
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
380
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
890
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
190
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
120
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
360
その問い、本当に正しいですか？AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
Avatar for MinoDriven minodriven
11
6k
エンジニア向け会社紹介/Findy Company Profile
Avatar for Findy findyinc
6
350k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.3k

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
490
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
320
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
800
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k

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]