Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Size does matter - Responsive Design in 2019 - V2
Search
Nils
May 23, 2019
Technology
0
170
Size does matter - Responsive Design in 2019 - V2
Nils
May 23, 2019
Tweet
Share
More Decks by Nils
See All by Nils
Unwrapping Web Design | WW-Ruhr 2023
enbee81
0
110
History of Art vs. Web Design vs CSS Development
enbee81
1
120
How Studying History Of Arts Helped Me Become A Better Frontend Designer
enbee81
0
76
Variable Units
enbee81
0
71
History of Art and modern CSS
enbee81
0
270
Size does matter - Responsive Design in 2019
enbee81
0
71
Other Decks in Technology
See All in Technology
Model Mondays S2E03: SLMs & Reasoning
nitya
0
220
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
170
asken AI勉強会(Android)
tadashi_sato
0
110
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
120
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
420
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
1
530
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
320
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
150
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
120
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
630
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
280
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Speed Design
sergeychernyshev
32
1k
Site-Speed That Sticks
csswizardry
10
670
Making Projects Easy
brettharned
116
6.3k
The World Runs on Bad Software
bkeepers
PRO
69
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
Visualization
eitanlees
146
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why Our Code Smells
bkeepers
PRO
337
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Transcript
SIZE DOES MATTER… …Responsive Design in 2019
NILS BINDER @supreme-being @nilsbinder
Design Backend Development Frontend Development
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
800x600
1024x768
1280x1024 1024
1280x1024 1200
320x480
1440x900
3440x1440 1000 1000 1440
4096x2048 1440
1440x900
1440x900
None
None
None
None
TEIL 1 Denke relativ und nicht absolut.
Die Qual der Wahl…
Die Qual der Wahl… px % em rem vw/vh vmin/vmax
ch fr -keine-
Die Qual der Wahl… px vw/vh vmin/vmax % fr rem
em ch -keine-
html { font-size: 10px; } .teaser { width: 320px; }
.teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
None
html { font-size: 10px; } .teaser { width: 320px; }
.teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
html { font-size: 100%; } .teaser { width: 320px; }
.teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
html { font-size: 100%; } .teaser { width: 320px; }
.teaser__subline { font-size: 1.125em; line-height: 2.4rem; }
html { font-size: 100%; } .teaser { width: 320px; }
.teaser__subline { font-size: 1.125em; line-height: 1.333; }
html { font-size: 100%; } .teaser { font-size: 1rem; width:
20em; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }
html { font-size: 100%; } .teaser { font-size: 1rem; width:
20em; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }
None
None
None
TEIL 2 Moderne CSS Layout Methoden
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); Mein Neujahrsvorsatz color: blue;
Grid-Header
Grid-Header
Grid-Header
None
Internet Explorer
TEIL 3 Keine Angst vor SVG
None
None
None
None
None
None
Frontend Design Backend Development Frontend Development Design
None