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

Size does matter - Responsive Design in 2019

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
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
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
630
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
360
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
260
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.5k
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
310
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
120
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
460
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
190
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
160
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
320

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
67
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
53
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
1
250
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k

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