Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Size does matter - Responsive Design in 2019

Avatar for Nils Nils
March 27, 2019
Technology
0
72

Size does matter - Responsive Design in 2019

Avatar for Nils

Nils

March 27, 2019
Tweet

More Decks by Nils

See All by Nils
Unwrapping Web Design | WW-Ruhr 2023
Avatar for Nils enbee81
0
110
History of Art vs. Web Design vs CSS Development
Avatar for Nils enbee81
1
120
How Studying History Of Arts Helped Me Become A Better Frontend Designer
Avatar for Nils enbee81
0
79
Variable Units
Avatar for Nils enbee81
0
72
History of Art and modern CSS
Avatar for Nils enbee81
0
270
Size does matter - Responsive Design in 2019 - V2
Avatar for Nils enbee81
0
180

Other Decks in Technology

See All in Technology
AIBuildersDay_track_A_iidaxs
Avatar for iidaxs iidaxs
4
1.3k
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
11
390k
Bedrock AgentCore Evaluationsで学ぶLLM as a judge入門
Avatar for ShichijoYuhi shichijoyuhi
2
240
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
Avatar for Ryosuke Sekido sekido
PRO
0
210
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
200
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
490
【開発を止めるな】機能追加と並行して進めるアーキテクチャ改善/Keep Shipping: Architecture Improvements Without Pausing Dev
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
130
TED_modeki_共創ラボ_20251203.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
"人"が頑張るAI駆動開発
Avatar for yoko yokomachi
1
130
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
4
1.8k
AWSに革命を起こすかもしれない新サービス・アップデートについてのお話
Avatar for Yuuki Yamashita yama3133
0
500
ESXi のAIOps だ！2025冬
Avatar for Unno Wataru unnowataru
0
350

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
230
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
2
3.8k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
340
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
0
180
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
130
Claude Code のすすめ
Avatar for schroneko schroneko
65
200k

Transcript

  1. SIZE DOES MATTER… …Responsive Design in 2019

  2. NILS BINDER @supreme-being @nilsbinder

  3. 800x600

  4. 1024x768

  5. 1280x1024 1024

  6. 1280x1024 1200

  7. 320x480

  8. 1440x900

  9. 3440x1440 1000 1000 1440

  10. 4096x2048 1440

  11. 1440x900

  12. None
  13. None
  14. None
  15. None

  16. Die Qual der Wahl… px % em rem vw/vh vmin/vmax

    ch fr -keine-

  17. Die Qual der Wahl… px rem vw/vh vmin/vmax % fr

    em ch -keine-

  18. html { font-size: 10px; } .teaser { width: 320px; }

    P { font-size: 1.8rem; line-height: 2.4rem; }
  19. None

  20. html { font-size: 10px; } .teaser { width: 320px; }

    P { font-size: 1.8rem; line-height: 2.4rem; }

  21. html { font-size: 100%; } .teaser { width: 320px; }

    P { font-size: 1.8rem; line-height: 2.4rem; }

  22. html { font-size: 100%; } .teaser { font-size: 1rem; width:

    20em; } P { font-size: 1.8rem; line-height: 2.4rem; }

  23. html { font-size: 100%; } .teaser { font-size: 1rem; width:

    20em; } P { font-size: 1.125em; line-height: 1.333; }
  24. None
  25. None

  26. Grid-Header

  27. Grid-Header

  28. Grid-Header

  29. None
  30. None
  31. None
  32. None
  33. None

  34. Visit https://ruhrjs.de

  35. None