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

Responsive in the Wild

Avatar for Mark Zeman Mark Zeman
June 25, 2014
Programming
3.8k
1

Responsive in the Wild

Deck from Velocity 2014 Lightning Demo.

Avatar for Mark Zeman

Mark Zeman

June 25, 2014

More Decks by Mark Zeman

See All by Mark Zeman
Speed Matters
Avatar for Mark Zeman zeman
7
78k

Other Decks in Programming

See All in Programming
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
240
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.4k
Google Apps Script で Ruby を動かす
Avatar for Shogo Kawahara kawahara
0
140
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.7k
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
150
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
180
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
590
ここ半年くらいでAIに作らせたR用ツール
Avatar for eitsupi eitsupi
0
370
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
480
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
270
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
140
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
Avatar for YuppeEng yuppeeng
0
190

Featured

See All Featured
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
180
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
340
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
630
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.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]