Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Size does matter - Responsive Design in 2019 - V2

Avatar for Nils Nils
May 23, 2019
Technology
180
0

Size does matter - Responsive Design in 2019 - V2

Avatar for Nils

Nils

May 23, 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
Avatar for Nils enbee81
0
77

Other Decks in Technology

See All in Technology
Slack上でインフラをトラブルシュートする！ Agentic Platform Engineeringの第一歩
Avatar for teru0x1 teru0x1
5
1.8k
EventBridge に「合流」はない ― サーバーレスのワークフローを育てるということ / No Join in EventBridge
Avatar for Yusuke Shimizu yusukeshimizu
2
260
AIエージェントの権限管理 3:  Agentic RAG の Fine grained access control 編
Avatar for Renya Kujirada ren8k
0
140
銀行勘定系システムにおける開発プロセス刷新×AIによる環境モダナイゼーション / Development Process Transformation and AI-Driven Environment Modernization
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
1
2.4k
登壇の自信を奪う3匹のオバケ / 3 Ghosts That Rob You of Your Confidence in Public Speaking
Avatar for Pauli pauli
9
1k
2026-09-18 gotanda.sre Terraformで複数環境作ったり、複数Stateに分割したりそれとTerragrunt / Terraform multi envs and multi states
Avatar for SUZUKI Masashi masasuzu
3
600
Issue 駆動でスペシャリストの意図を届ける、AI 実装のアクセシビリティ向上
Avatar for thkt thkt
0
120
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
5
25k
Claude in Chrome 入門 / Introduction to Claude in Chrome
Avatar for yuta cielo1985
0
870
新機種発売前に見直そう！端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
Avatar for ZOZO Developers zozotech
PRO
0
220
事業課題から技術的負債に向き合う
Avatar for SansanTech sansantech
PRO
2
2k
AIは推し活である。
Avatar for くらず / Kurazu kurazuuuuuu
1
850

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
36k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
39k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
280
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
240
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
430
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
680

Transcript

  1. SIZE DOES MATTER… …Responsive Design in 2019

  2. NILS BINDER @supreme-being @nilsbinder

  3. Design Backend Development Frontend Development

  4. Frontend Design Backend Development Frontend Development Design http://bradfrost.com/blog/post/full-stack-developers/ Fotografie UX-Design

    CSS Accessibility Speed API Data Storage Illustration UI-Design HTML Presentational JS JS Frameworks Business Logic

  5. 800x600

  6. 1024x768

  7. 1280x1024 1024

  8. 1280x1024 1200

  9. 320x480

  10. 1440x900

  11. 3440x1440 1000 1000 1440

  12. 4096x2048 1440

  13. 1440x900

  14. 1440x900

  15. None
  16. None
  17. None
  18. None

  19. TEIL 1 Denke relativ und nicht absolut.

  20. Die Qual der Wahl…

  21. Die Qual der Wahl… px % em rem vw/vh vmin/vmax

    ch fr -keine-

  22. Die Qual der Wahl… px vw/vh vmin/vmax % fr rem

    em ch -keine-

  23. html { font-size: 10px; } .teaser { width: 320px; }

    .teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
  24. None

  25. html { font-size: 10px; } .teaser { width: 320px; }

    .teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }

  26. html { font-size: 100%; } .teaser { width: 320px; }

    .teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }

  27. html { font-size: 100%; } .teaser { width: 320px; }

    .teaser__subline { font-size: 1.125em; line-height: 2.4rem; }

  28. html { font-size: 100%; } .teaser { width: 320px; }

    .teaser__subline { font-size: 1.125em; line-height: 1.333; }

  29. html { font-size: 100%; } .teaser { font-size: 1rem; width:

    20em; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }

  30. html { font-size: 100%; } .teaser { font-size: 1rem; width:

    20em; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }
  31. None
  32. None
  33. None

  34. TEIL 2 Moderne CSS Layout Methoden

  35. grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); Mein Neujahrsvorsatz color: blue;

  36. Grid-Header

  37. Grid-Header

  38. Grid-Header

  39. None

  40. Internet Explorer

  41. TEIL 3 Keine Angst vor SVG

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None

  48. Frontend Design Backend Development Frontend Development Design

  49. None