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

Size does matter - Responsive Design in 2019

Avatar for Nils Nils
March 27, 2019
Technology
0
71

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
76
Variable Units
Avatar for Nils enbee81
0
71
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
170

Other Decks in Technology

See All in Technology
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
160
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
Avatar for Masaya Kudo msykd
PRO
2
370
GeminiとNotebookLMによる金融実務の業務革新
Avatar for abenben abenben
0
240
ネットワーク保護はどう変わるのか？re:Inforce 2025最新アップデート解説
Avatar for Shun Tokuyama tokushun
0
150
AWS Organizations 新機能！マルチパーティ承認の紹介
Avatar for yhana yhana
1
220
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
Avatar for k.muguruma mtpooh
2
440
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
2
780
GitHub Copilot の概要
Avatar for tomokusaba tomokusaba
1
150
ドメイン特化なCLIPモデルとデータセットの紹介
Avatar for tattaka tattaka
1
440
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
Avatar for yut yu_kod
1
100
mrubyと micro-ROSが繋ぐロボットの世界
Avatar for Katsuhiko Kageyama kishima
2
380
ビギナーであり続ける/beginning
Avatar for 小田中育生 ikuodanaka
1
190

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
670
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k

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