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
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
460
Google Apps Script で Ruby を動かす
Avatar for Shogo Kawahara kawahara
0
140
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
210
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
4.1k
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
140
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.4k
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
590
the container ship “Apple Silicon”@WWDC26 Recap -Japan-\(region).swift
Avatar for gangan shingangan
0
110
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
670
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
340
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
220
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
210

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
39k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
640
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
430
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
310
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.1k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.7k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.2k

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]