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
82
History of Art vs. Web Design vs CSS Development
enbee81
1
110
How Studying History Of Arts Helped Me Become A Better Frontend Designer
enbee81
0
65
Variable Units
enbee81
0
69
History of Art and modern CSS
enbee81
0
240
Size does matter - Responsive Design in 2019
enbee81
0
69
Other Decks in Technology
See All in Technology
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
エンジニア向け会社紹介資料
caddi_eng
14
230k
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Visualization
eitanlees
139
14k
Fireside Chat
paigeccino
25
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
We Have a Design System, Now What?
morganepeng
46
7k
Making Projects Easy
brettharned
111
5.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Navigating Team Friction
lara
181
13k
Statistics for Hackers
jakevdp
792
220k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
How GitHub (no longer) Works
holman
305
140k
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