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

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

    View full-size slide

  2. NILS BINDER
    @supreme-being
    @nilsbinder

    View full-size slide

  3. Design
    Backend
    Development
    Frontend
    Development

    View full-size slide

  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

    View full-size slide

  5. 1280x1024
    1024

    View full-size slide

  6. 1280x1024
    1200

    View full-size slide

  7. 3440x1440


    1000 1000
    1440

    View full-size slide

  8. 4096x2048
    1440

    View full-size slide

  9. TEIL 1
    Denke relativ und nicht absolut.

    View full-size slide

  10. Die Qual der Wahl…

    View full-size slide

  11. Die Qual der Wahl…
    px % em rem vw/vh vmin/vmax ch fr -keine-

    View full-size slide

  12. Die Qual der Wahl…
    px vw/vh vmin/vmax
    % fr rem
    em ch -keine-

    View full-size slide

  13. html {
    font-size: 10px;
    }
    .teaser {
    width: 320px;
    }
    .teaser__subline {
    font-size: 1.8rem;
    line-height: 2.4rem;
    }

    View full-size slide

  14. html {
    font-size: 10px;
    }
    .teaser {
    width: 320px;
    }
    .teaser__subline {
    font-size: 1.8rem;
    line-height: 2.4rem;
    }

    View full-size slide

  15. html {
    font-size: 100%;
    }
    .teaser {
    width: 320px;
    }
    .teaser__subline {
    font-size: 1.8rem;
    line-height: 2.4rem;
    }

    View full-size slide

  16. html {
    font-size: 100%;
    }
    .teaser {
    width: 320px;
    }
    .teaser__subline {
    font-size: 1.125em;
    line-height: 2.4rem;
    }

    View full-size slide

  17. html {
    font-size: 100%;
    }
    .teaser {
    width: 320px;
    }
    .teaser__subline {
    font-size: 1.125em;
    line-height: 1.333;
    }

    View full-size slide

  18. html {
    font-size: 100%;
    }
    .teaser {
    font-size: 1rem;
    width: 20em;
    }
    .teaser__subline {
    font-size: 1.125em;
    line-height: 1.333;
    }

    View full-size slide

  19. html {
    font-size: 100%;
    }
    .teaser {
    font-size: 1rem;
    width: 20em;
    }
    .teaser__subline {
    font-size: 1.125em;
    line-height: 1.333;
    }

    View full-size slide

  20. TEIL 2
    Moderne CSS Layout Methoden

    View full-size slide

  21. grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
    Mein Neujahrsvorsatz
    color: blue;

    View full-size slide

  22. Internet Explorer

    View full-size slide

  23. TEIL 3
    Keine Angst vor SVG

    View full-size slide

  24. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design

    View full-size slide