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
71

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
77
Variable Units
Avatar for Nils enbee81
0
71
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
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
400
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
500
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
Avatar for かわりく / Kawano Riku kawanoriku0
1
210
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
Avatar for 吉田 岳史 yoshidatakeshi1994
0
120
はじめてのOSS開発からみえたGo言語の強み
Avatar for shibutani shibukazu
3
990
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
Avatar for Naoko Shinagawa ratsbane666
0
100
DroidKaigi 2025 Androidエンジニアとしてのキャリア
Avatar for mhidaka mhidaka
2
380
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
Avatar for shinaps shinaps
2
470
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
Avatar for sh_fk2 sh_fk2
3
460
下手な強制、ダメ！絶対！ 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは？
Avatar for Masataka Tsukamoto tsukaman
2
460
「どこから読む？」コードとカルチャーに最速で馴染むための実践ガイド
Avatar for ZOZO Developers zozotech
PRO
0
570
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
Avatar for Shin'ya Ueoka ueokande
1
100

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.1k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k

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