Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Size does matter - Responsive Design in 2019 - V2

0b4ec3d1e067656d3a5272473396f55a?s=47 Nils
May 23, 2019
Technology
0
150

Size does matter - Responsive Design in 2019 - V2

0b4ec3d1e067656d3a5272473396f55a?s=128

Nils

May 23, 2019
Tweet

More Decks by Nils

See All by Nils
0b4ec3d1e067656d3a5272473396f55a?s=48 enbee81
0
35
0b4ec3d1e067656d3a5272473396f55a?s=48 enbee81
0
19
0b4ec3d1e067656d3a5272473396f55a?s=48 enbee81
0
170
0b4ec3d1e067656d3a5272473396f55a?s=48 enbee81
0
49

Other Decks in Technology

See All in Technology
457a32224e6ad774f17406984047f9ac?s=48 uuushiro
0
280
Dacd98e0fcfc478b24f9cd7ec9208904?s=48 manabusakai
0
570
9eca6d3a5658ef22998083a3d8e7ec44?s=48 shigeruoda
0
120
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
3
850
3fa91dc187588e13e827810d2f30d8c7?s=48 moepy_stats
2
2k
36c940c1761f55495077121a88570a65?s=48 torutakahashi
0
110
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
160
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
0
330
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
260
Ae788ab7d139931493941e42584eb456?s=48 asoviewinc
0
1.5k
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
360
Aa5b922fefbf18bea89972521971dfea?s=48 yoshikiiida
6
6.9k

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
210
20k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
410k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
48k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
634
50k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.7k
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
1
20k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
27k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.6k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.6k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
688
180k

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

  15. None
  16. None
  17. None
  18. None

  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; }
  24. None

  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; }
  31. None
  32. None
  33. None

  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

  39. None

  40. Internet Explorer

  41. TEIL 3 Keine Angst vor SVG

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None

  48. Frontend Design Backend Development Frontend Development Design

  49. None