$30 off During Our Annual Pro Sale. View details »

Size does matter - Responsive Design in 2019 - V2

Nils
May 23, 2019

Size does matter - Responsive Design in 2019 - V2

Nils

May 23, 2019
Tweet

More Decks by Nils

Other Decks in Technology

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