Unwrapping Web Design | WW-Ruhr 2023

Transcript

1. Nils Binder @ 9elements Unwrapping Web Design
4. .wrapper { max - width: 75rem; margin: 0 auto; padding: 0 1.5rem; } .wrapper { width: min(100% - 3rem, 75rem); margin - inline: auto; } .wrapper { width: min(100% - 3rem, var( -- wrapper - max, 75rem)); margin - inline: auto; } .wrapper { margin - inline: max(1.5rem, ((100% - 75rem) / 2)); } .wrapper { margin - inline: max(1.5rem, ((100% - var( -- wrapper - max, 75rem)) / 2)); }
6. 3440 1440
7. W h i t e 
 s p a c e W h i t e 
 s p a c e
9. Warum?
10. D u m u s s t e i n G r i d - S y s t e m n u t z e n ! ! 1 !
11. D e n k m a l m e h r i n K o m p o n e n t e n D a s g e h t n u r i m P r i n t a b e r n i c h t i m W e b ! N u t z ’ n i c h t s o v i e l e S c h r i f t a r t e n ! D a s m u s s ‘ P i x e l P e r f e c t ’ s e i n … S c h a u d i r m a l B o o t s t r a p a n ! D u m u s s t e i n G r i d - S y s t e m n u t z e n ! ! 1 ! B l e n d m o d e s s i n d n i c h t m ö g l i c h !
13. flex - direction padding gap justify - content align - items flex - wrap
14. 🤯
17. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this fl exibility. John Allsopp, A Dao of Web Design - 2000
18. px % rem px % rem vw vh vmin vmax vi vb dvh lvh svh lvb svb dvb dvw lvw svw lvi svi dvi lvmin svmin dvmin lvmax svmax dvmax ch ex em cqw cqi cqh cqb cqmin cqmax
34. Design for fl exibility