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
86
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
作って終わりじゃないサーバーレス 〜9年運用する大規模EC物流API基盤の設計・運用のリアル〜
Avatar for ZOZO Developers zozotech
PRO
0
430
銀行勘定系システムにおける開発プロセス刷新×AIによる環境モダナイゼーション / Development Process Transformation and AI-Driven Environment Modernization
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
1
2.6k
Minecraft JavaのMODをSwiftで作る
Avatar for 1mash0 1mash0
0
190
Why Agent Cost Needs Observability
Avatar for NTT docomo Business nttcom
0
120
人間はどの意思決定を手放せるのか
Avatar for Yoshitaka Kawashima kawasima
15
7.9k
2026-09-08 そのJavaモダナイゼーション、AIに丸投げで大丈夫？IBM Bobで変わる品質と効率
Avatar for YutaNonaka yutanonaka
1
120
「ピッケル本」日本語版は4.0(第6版)が出版されるべき / pickaxe4-nagoyark05
Avatar for Shintaro Kakutani kakutani
2
270
え、こんなに早く改修できるの？──新人エンジニアとスクラムマスターの2人が語る、AI×アジャイル開発の現場
Avatar for Yoshihiro Sasago ysasago
2
640
ソフトウェアDNAとクラウドエージェントのススメ
Avatar for Cloud Ace cloudace
0
120
時うどん〜Socket.getifaddrsで学ぶネットワーク編 / Tokiudon: The Socket.getifaddrs Edition
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
4
210
Antigravity SDK for the Java Developer
Avatar for Guillaume Laforge glaforge
0
170
ADKで始める業務改善 - AIエージェント開発時の考えと設計
Avatar for Kazuki Hara harappa80
2
260

Featured

See All Featured
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
380
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
600
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
310
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
670
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
540
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
250
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k

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