Size does matter - Responsive Design in 2019 - V2

Transcript

1. SIZE DOES MATTER… …Responsive Design in 2019
2. NILS BINDER @supreme-being @nilsbinder
3. Design Backend Development Frontend Development
4. 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
5. 800x600
6. 1024x768
7. 1280x1024 1024
8. 1280x1024 1200
9. 320x480
10. 1440x900
11. 3440x1440 1000 1000 1440
12. 4096x2048 1440
13. 1440x900
14. 1440x900
19. TEIL 1 Denke relativ und nicht absolut.
20. Die Qual der Wahl…
21. Die Qual der Wahl… px % em rem vw/vh vmin/vmax ch fr -keine-
22. Die Qual der Wahl… px vw/vh vmin/vmax % fr rem em ch -keine-
23. html { font-size: 10px; } .teaser { width: 320px; } .teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
25. html { font-size: 10px; } .teaser { width: 320px; } .teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
26. html { font-size: 100%; } .teaser { width: 320px; } .teaser__subline { font-size: 1.8rem; line-height: 2.4rem; }
27. html { font-size: 100%; } .teaser { width: 320px; } .teaser__subline { font-size: 1.125em; line-height: 2.4rem; }
28. html { font-size: 100%; } .teaser { width: 320px; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }
29. html { font-size: 100%; } .teaser { font-size: 1rem; width: 20em; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }
30. html { font-size: 100%; } .teaser { font-size: 1rem; width: 20em; } .teaser__subline { font-size: 1.125em; line-height: 1.333; }
34. TEIL 2 Moderne CSS Layout Methoden
35. grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); Mein Neujahrsvorsatz color: blue;
36. Grid-Header
37. Grid-Header
38. Grid-Header
40. Internet Explorer
41. TEIL 3 Keine Angst vor SVG
48. Frontend Design Backend Development Frontend Development Design