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
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
73
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
形式手法特論：SMT ソルバで解く認可ポリシの静的解析 #kernelvm / Kernel VM Study Tsukuba No3
Avatar for y_taka_23 ytaka23
1
790
Blue/Green Deployment を用いた PostgreSQL のメジャーバージョンアップ
Avatar for Ken Kato kkato1
0
130
ThetaOS - A Mythical Machine comes Alive
Avatar for Martijn aslander
0
170
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
200
AI時代のIssue駆動開発のススメ
Avatar for Atsushi Nakatsugawa moongift
PRO
0
230
Phase07_実務適用
Avatar for overflow ,Inc overflowinc
0
1.8k
Agent Skill 是什麼？對軟體產業帶來的變化
Avatar for Bo-Yi Wu appleboy
0
230
Phase01_AI座学_基礎
Avatar for overflow ,Inc overflowinc
0
3.9k
データマネジメント戦略Night - 4社のリアルを語る会
Avatar for Tatsuya Koreeda ktatsuya
1
230
DMBOKを使ってレバレジーズのデータマネジメントを評価した
Avatar for Tech Leverages leveragestech
0
260
Why we keep our community?
Avatar for Yasunobu Kawaguchi kawaguti
PRO
0
220
Phase08_クイックウィン実装
Avatar for overflow ,Inc overflowinc
0
1.7k

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
5.6k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
180
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
490
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
160

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