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

Responsive in the Wild

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

Responsive in the Wild

Deck from Velocity 2014 Lightning Demo.

Avatar for Mark Zeman

Mark Zeman

June 25, 2014
Tweet

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
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
250
AIコーディングエージェント全社導入とセキュリティ対策
Avatar for hikae hikaruegashira
16
9.4k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
Avatar for hiyanger hiyanger
11
2.9k
Jakarta EE Meets AI
Avatar for ivargrimstad ivargrimstad
0
580
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
Avatar for 幡ヶ谷亭直吉 hiliteeternal
0
390
AI Ramen Fight
Avatar for Yusuke Wada yusukebe
0
130
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
2
720
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
0
160
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
4
2.4k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
960
Dart 参戦！！静的型付き言語界の隠れた実力者
Avatar for Kuno Ayana kno3a87
0
160
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
Avatar for BPStudy bpstudy
0
270

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k

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]