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
160
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
67
History of Art vs. Web Design vs CSS Development
enbee81
1
99
How Studying History Of Arts Helped Me Become A Better Frontend Designer
enbee81
0
62
Variable Units
enbee81
0
56
History of Art and modern CSS
enbee81
0
230
Size does matter - Responsive Design in 2019
enbee81
0
64
Other Decks in Technology
See All in Technology
fujiwara-ware OSSをひたすら紹介する/ya8-2024
fujiwara3
7
370
履歴データテーブルとの向き合い方_PHPerKaigi2024
gennei
25
6.7k
どうやってWebサービスのページ表示速度を1/3にしたか / how-to-reduce-display-speed
pinkumohikan
2
470
Proposal for a fictitious company presented by JAWS-UG DE&I team 'Naniwa Musume'
hiroramos4
PRO
0
120
実録_マルチテナント環境でのGmailガイドライン対応
ryuichi1208
7
1.5k
プロデザ! BY リクルートvol.17_『じゃらんnet』公式アプリの高速リニューアル事例を大公開
recruitengineers
PRO
5
110
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
yukihirochiba
0
370
第131回 雲勉【オンライン】AWSを9年触ってきて経験した落とし穴、ハマったポイント
iret
6
480
パフォーマンスを改善するには仕様変更が1番はやい
yamamotohiroya
12
4.6k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
0
1.1k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
1.8k
Uniting Rust Servers and Clients through OpenAPI
ahl
0
430
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Atom: Resistance is Futile
akmur
258
25k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Side Projects
sachag
451
41k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Building an army of robots
kneath
300
41k
Why Our Code Smells
bkeepers
PRO
330
56k
RailsConf 2023
tenderlove
0
500
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Designing Experiences People Love
moore
135
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
4
1.4k
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