Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive in the Wild
Search
Mark Zeman
June 25, 2014
Programming
1
3.5k
Responsive in the Wild
Deck from Velocity 2014 Lightning Demo.
Mark Zeman
June 25, 2014
Tweet
Share
More Decks by Mark Zeman
See All by Mark Zeman
Speed Matters
zeman
7
78k
Other Decks in Programming
See All in Programming
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
300
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.2k
振り返れば奴(Cline)がいる
keiyagi
0
130
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
630
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.3k
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6k
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
190
最近のVS Codeで気になるニュース 2025/01
74th
1
240
Rubyでつくるパケットキャプチャツール
ydah
0
530
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Language of Interfaces
destraynor
156
24k
Designing Experiences People Love
moore
139
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
220
Gamification - CAS2011
davidbonilla
80
5.1k
Transcript
Responsive in the wild
Many techniques Picturefill Inline CSS & JS Conditional loading WebP
RESS 14k Srcset
250 Responsive websites
17 Viewport widths 1024 1366 320 1920 360 400 480
560 640 768 864 960 1152 1280 1483 1600 1760
449 316 320 1920 IMG JS CSS FONT HTML KB
KB PX PX PX 1024
1024 1366 2217 KB 1861 KB 18% 320 1920
None
38% FLATLINE
1024 1366 320 1920 IMG JS CSS 3530 3530
3530k 3530k
38% 55% IMAGES
1024 1366 1020 587 43% 768 320 1920 IMG JS
CSS FONT Size
1024 2021 51 grolsch.co.uk 320 1920 IMG JS
768 1280 2160 1254 rue21.com 320 1920 IMG JS FONT
768 1280 1770 637 newzealand.com 320 1920 IMG JS
=!
864 1959 3395 engadget.com 320 1920 IMG JS
5% Conditional CSS
1024 254 32 barackobama.com 320 1920 IMG JS CSS
11% Conditional JS
1024 280 156 famm.org 320 1920 IMG JS CSS
1024 38 14 320 1920 IMG JS CSS HTML 34
15 Requests 5 5 5 5
Mobile is nearing 50%
yet there’s minimal responsive optimisation!
None
1024 1599 768 mediatemple.net 320 1920 IMG JS FONT
speedcurve.com/blog @MarkZeman FRONT-END PERFORMANCE MONITORING
[email protected]