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.7k
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
クラシルを支える技術と組織
rakutek
0
200
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
460
CSC509 Lecture 03
javiergs
PRO
0
330
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
820
CSC305 Lecture 06
javiergs
PRO
0
220
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
止められない医療アプリ、そっと Swift 6 へ
medley
1
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
560
Advance Your Career with Open Source
ivargrimstad
0
480
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Balancing Empowerment & Direction
lara
4
680
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
KATA
mclloyd
32
15k
Making Projects Easy
brettharned
119
6.4k
Designing for Performance
lara
610
69k
A designer walks into a library…
pauljervisheath
209
24k
Why Our Code Smells
bkeepers
PRO
339
57k
Being A Developer After 40
akosma
91
590k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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]