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
71
History of Art vs. Web Design vs CSS Development
enbee81
1
100
How Studying History Of Arts Helped Me Become A Better Frontend Designer
enbee81
0
63
Variable Units
enbee81
0
60
History of Art and modern CSS
enbee81
0
230
Size does matter - Responsive Design in 2019
enbee81
0
66
Other Decks in Technology
See All in Technology
Grafana x PagerDuty Better Together
jacopen
1
260
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
120
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
1
160
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
2.6k
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.7k
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
130
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
130
2023年度にEMとして頑張ったこと
ikefukurou777
0
100
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
310
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
140
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
The Invisible Customer
myddelton
114
12k
Building Effective Engineering Teams - LeadDev
addyosmani
31
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
RailsConf 2023
tenderlove
8
550
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Gamification - CAS2011
davidbonilla
77
4.6k
Ruby is Unlike a Banana
tanoku
96
10k
Git: the NoSQL Database
bkeepers
PRO
423
63k
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