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
構文解析器入門
ydah
7
2k
iOS開発スターターキットの作り方
akidon0000
0
230
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
700
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
640
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
550
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
2
210
コーディングエージェント概観(2025/07)
itsuki_t88
1
480
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
410
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.1k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
260
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
880
kiroでゲームを作ってみた
iriikeita
0
130
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Gamification - CAS2011
davidbonilla
81
5.4k
For a Future-Friendly Web
brad_frost
179
9.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Code Reviewing Like a Champion
maltzj
524
40k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Music & Morning Musume
bryan
46
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
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]