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.6k
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
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
State of CSS 2025
benjaminkott
1
120
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
490
CSC305 Summer Lecture 12
javiergs
PRO
0
120
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
820
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.4k
decksh - a little language for decks
ajstarks
4
21k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
MLH State of the League: 2026 Season
theycallmeswift
0
160
Langfuseと歩む生成AI活用推進
licux
3
300
パスタの技術
yusukebe
1
400
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
4 Signs Your Business is Dying
shpigford
184
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Site-Speed That Sticks
csswizardry
10
790
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Into the Great Unknown - MozCon
thekraken
40
2k
Faster Mobile Websites
deanohume
309
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
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]