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
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
Macとオーディオ再生 2024/11/02
yusukeito
0
370
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
ヤプリ新卒SREの オンボーディング
masaki12
0
130
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
970
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Featured
See All Featured
Site-Speed That Sticks
csswizardry
0
28
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
A Tale of Four Properties
chriscoyier
156
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing Experiences People Love
moore
138
23k
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]