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
受け取る人から提供する人になるということ
little_rubyist
0
180
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
CSC509 Lecture 09
javiergs
PRO
0
140
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
240
色々なIaCツールを実際に触って比較してみる
iriikeita
0
310
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.1k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
5
2k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
160
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
160
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
140
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
560
A Tale of Four Properties
chriscoyier
156
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building an army of robots
kneath
302
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Building Adaptive Systems
keathley
38
2.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Facilitating Awesome Meetings
lara
49
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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]