Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive in the Wild

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

More Decks by Mark Zeman

See All by Mark Zeman
Speed Matters
zeman
7
78k

Other Decks in Programming

See All in Programming
Ethereum_.pdf
nekomatu
0
370
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
AI時代におけるSRE、
あるいはエンジニアの生存戦略
pyama86
4
940
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.2k
WEBエンジニア向けAI活用入門
sutetotanuki
0
330
受け取る人から提供する人になるということ
little_rubyist
0
180
JaSST 24 九州：ワークショップ(は除く) 実践！マインドマップを活用したソフトウェアテスト＋活用事例
satohiroyuki
0
320
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
2k
Jakarta EE meets AI
ivargrimstad
0
120
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k

Featured

See All Featured
Navigating Team Friction
lara
183
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Typedesign – Prime Four
hannesfritz
40
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k

Transcript

  1. Responsive in the wild

  2. Many techniques Picturefill Inline CSS & JS Conditional loading WebP

    RESS 14k Srcset

  3. 250 Responsive websites

  4. 17 Viewport widths 1024 1366 320 1920 360 400 480

    560 640 768 864 960 1152 1280 1483 1600 1760

  5. 449 316 320 1920 IMG JS CSS FONT HTML KB

    KB PX PX PX 1024

  6. 1024 1366 2217 KB 1861 KB 18% 320 1920

  7. None

  8. 38% FLATLINE

  9. 1024 1366 320 1920 IMG JS CSS 3530 3530

  10. 3530k 3530k

  11. 38% 55% IMAGES

  12. 1024 1366 1020 587 43% 768 320 1920 IMG JS

    CSS FONT Size

  13. 1024 2021 51 grolsch.co.uk 320 1920 IMG JS

  14. 768 1280 2160 1254 rue21.com 320 1920 IMG JS FONT

  15. 768 1280 1770 637 newzealand.com 320 1920 IMG JS

  16. =!

  17. 864 1959 3395 engadget.com 320 1920 IMG JS

  18. 5% Conditional CSS

  19. 1024 254 32 barackobama.com 320 1920 IMG JS CSS

  20. 11% Conditional JS

  21. 1024 280 156 famm.org 320 1920 IMG JS CSS

  22. 1024 38 14 320 1920 IMG JS CSS HTML 34

    15 Requests 5 5 5 5

  23. Mobile is nearing 50%

  24. yet there’s minimal responsive optimisation!

  25. None

  26. 1024 1599 768 mediatemple.net 320 1920 IMG JS FONT

  27. speedcurve.com/blog @MarkZeman FRONT-END PERFORMANCE MONITORING [email protected]