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
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
Flatt Security XSS Challenge 解答・解説
flatt_security
0
700
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
290
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
10
4.8k
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
110
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
530
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
620
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
290
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
580
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
200
ドメインイベント増えすぎ問題
h0r15h0
2
560
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
A designer walks into a library…
pauljervisheath
205
24k
How STYLIGHT went responsive
nonsquared
96
5.3k
Optimizing for Happiness
mojombo
376
70k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Fireside Chat
paigeccino
34
3.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Navigating Team Friction
lara
183
15k
Being A Developer After 40
akosma
89
590k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.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]