Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Size does matter - Responsive Design in 2019

Avatar for Nils Nils
March 27, 2019
Technology
77
0

Size does matter - Responsive Design in 2019

Avatar for Nils

Nils

March 27, 2019

More Decks by Nils

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

Other Decks in Technology

See All in Technology
ブラウザとサーバーから考えるAI時代のフロントエンド監視
Avatar for Shogo Fukami shogo4131
3
940
パスキーの自動テストはどこまでいけるのか
Avatar for teamLab teamlab
PRO
0
200
SAENM ~Jupyterで残すPoCの試行錯誤、未来の自分と仲間を助ける記録！~
Avatar for Manabu TERADA terapyon
0
110
会社説明資料
Avatar for パーソル＆サーバーワークス株式会社 persolserverworks
0
9.8k
JAWS-UGグッズ職人仕事の流儀
Avatar for Hiroo Katoh kentapapa
0
100
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
2
280
AI駆動開発の時代になったのでトヨタ生産方式から見直す
Avatar for terurou terurou
7
6k
分析AIエージェントを育てる、動く環境を育てる
Avatar for Codatum codatum
1
1.1k
Running Kotlin + Quarkus with Lambda
Avatar for Nealle nealle
1
3.7k
Persisting Massive Data with Rails ~Designing for 60 billion rows, and fighting the bottlenecks~ Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
0
730
Tofu-Controller lightning talk @ Containerday 2026
Avatar for Giovanni Toraldo gionn
0
100
Post AI時代のリファクタリング実践記 / Refactoring in the post AI era
Avatar for 株式会社カミナシ kaminashi
1
230

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
220
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
300
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
380
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
550
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.6k

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