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
78
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
.NET 10のBlazorの期待の新機能
Avatar for tkym htkym
0
110
様々なファイルシステム
Avatar for Satoru Takeuchi sat
PRO
0
240
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
Avatar for 弁護士ドットコム bengo4com
0
340
QA業務を変える（！？）AIを併用した不具合分析の実践
Avatar for ma2ri__ ma2ri
0
150
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
Avatar for Hiro hiro8ma
1
310
AIエージェントによる業務効率化への飽くなき挑戦 -AWS上の実開発事例から学んだ効果、現実そしてギャップ-
Avatar for Kiminori Yokoi nasuvitz
5
1.2k
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
360
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
Avatar for emi emiki
0
240
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
Avatar for Akira Shimosako simosako
2
210
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
0
250
Kubernetes self-healing of your workload
Avatar for Hung-Wei Chiu hwchiu
0
540
MCP ✖️ Apps SDKを触ってみた
Avatar for hisuzuya hisuzuya
0
370

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.8k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
11k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
353
21k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k

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