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
1
3.7k

Responsive in the Wild

Deck from Velocity 2014 Lightning Demo.

Avatar for Mark Zeman

Mark Zeman

June 25, 2014
Tweet

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
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
Avatar for Marco Roth marcoroth
3
670
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
Avatar for Tomohiko Morita deka_morita
0
160
複雑化したリポジトリをなんとかした話　pipenvからuvによるモノレポ構成への移行
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
560
実践AIチャットボットUI実装入門
Avatar for syumai syumai
7
2.3k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
220
CSC305 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
ててべんす独演会〜Flowの全てを語ります〜
Avatar for てべすてん tbsten
1
220
Local Peer-to-Peer APIはどのように使われていくのか？
Avatar for Hal hal_spidernight
2
410
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
Avatar for Tomohiro Imaizumi imaizume
0
180
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
270
ABEMAモバイルアプリが
Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
Avatar for Akio Yasui akkyie
0
300
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
Avatar for MinoDriven minodriven
23
11k

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
950
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
40k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k

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]