The Future is now! Flexbox und fancy Stuff im Responsive Webdesign

Download The Future is now! Flexbox und fancy Stuff im Responsive Webdesign

Post on 13-Apr-2017

577 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

  • CodeTalks 2015

    The Future is now! Flexbox und fancy Stuff im Response Webdesign

    Peter Rozek@webinterface Grafik: http://www.planningforaliens.com/

    http://www.planningforaliens.com/

  • PETER ROZEK

    Arbeite bei ecx.io (Digital Agentur)

    Themengebiete: UX

    Usability Accessibility

    Frontend

    Peter Rozek@webinterface

  • Where No Man Has Gone Before

    @webinterface

  • Flexbox =Zukunft?

    Big Bot, by Benedict Campbell@webinterface

  • @webinterface

    DesigningProgressive Enhancement!

  • @webinterface

    Progressive Enhancement als Prozess verstehen nicht nur Technik.

  • @webinterface

    1. Kern Funktion identifizieren. 2. Funktion fr ltere Technologien

    zugnglich machen. 3. Enhance.

  • @webinterface

    Design Fluid Experience und nicht ein Layout.

  • @webinterface

  • @webinterface

    Screensize Universum

  • @webinterface

    Progressive Enhancement adressiert Responsive Webdesign.

  • @webinterface

    Responsive Webdesign vereint Prinzipien von Coherence, Adaptability und Fluidity.

  • @webinterface

    Coherence, Adaptability und Fluidity ergnzen sich zum Meta Prinzip Fluid Experience.

  • @webinterface

    Enhance und du gestaltest Sexy Experience.

    http://stuffpoint.com/

    http://stuffpoint.com/science-fiction/image/249898-science-fiction-tron-legacy-wallpaper.jpg

  • @webinterface

    dann bist du ein Superheld.

    browsergames-testen.de

    http://www.browsergames-testen.de/wp-content/uploads/bg_avengers_01.jpg

  • @webinterface

    ein UX Enthusiasts.

  • @webinterface

    ein Coding Ninja.

  • oder ein anderer macht es!

    @webinterface http://images7.alphacoders.com/303/303105.jpg

  • Fluid Experience mit der Flexbox.

    @webinterface

  • @webinterface

    Tables Floats Inline

    CSS Frameworks

    CSS Flexbox

    CSS Grid Layout

    Layout Entwicklung

    Erreichte Evolutionsstufe

  • Leidige Probleme mit CSS Layouts:

    @webinterface

    Floating, equal height, vertikal zentrieren, Reihenfolge ndern

  • Flexbox lst die Probleme.

    @webinterface

  • Du kannst die Flexbox nutzen!

    @webinterface

    Progressive enhancement fr UI Komponenten.

  • Du musst den IE8 supporten?

    @webinterface

  • I work for Booking.com, and we support IE 7, and I use flexbox.

    @webinterface

    Zoe Gillenwater

    https://www.flickr.com

    https://www.flickr.com/photos/placenamehere/8213369466

  • Viel zu lernen du noch hast.Joda

    @webinterface www.wall321.com/

    http://www.wall321.com/Entertainment/Movies/star_wars_movies_clone_wars_cgi_jedi_yoda_episode_1920x1080_wallpaper_34484

  • Layouts die zuvor eine Herausforderung waren, sind nun verstndlicher.

    @webinterface

  • Flexible Layouts erstellen und die Berechnungen macht der Browser.

    @webinterface

  • Elemente lassen sich beliebig positionieren und aneinander ausrichten.

    @webinterface

  • Boxen lassen sich nebeneinander in Zeilen oder untereinander in Spalten anordnen.

    @webinterface

    Space

  • Elemente lassen in der Hhe, und in der Breite unterschiedlichsten Verhltnissen anpassen.

    @webinterface

    Placement

  • Reihenfolge verndern

    @webinterface

    ordredisplay

    ohne das HTML-Dokument anzupassen mit:

  • @webinterface

    Flexbox aktivieren.

    http://oneofus.net/

    display: flex;

    http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/

  • ... ... ...

    .wrapper {display: flex;flex-flow: row wrap;

    }

    wrapper = flex containercontent und sidebar = flex items

    {css}

    @webinterface

  • @webinterface

  • main start main endmain axis

    @webinterface

    cross start

    cross end

    cross axis

    Flex Container

    flex items

  • Reihenfolge umkehren oder beliebig ndern.

    @webinterface

  • 4 3 2 1

    1 2 3 4

    4

    3

    2

    1

    1

    2

    3

    4

    flex-direction: column;

    flex-direction: row-reverse;

    flex-direction: row;

    flex-direction: column-reverse;

    @webinterface

  • @webinterface

    flex-direction: column;

    flex-direction: column-reverse;

  • @webinterface

    ordredisplay

  • ... ... ...

    @webinterface

  • {css}

    @webinterface

    .wrapper {display: flex;flex-flow: row wrap;

    }

    @media screen and (min-width: 60em) {

    .primery { order: 2;

    }.secondary {

    order: 1;}

    }

  • @webinterface

  • @webinterface

    flex-flow: row wrap;Syntax aus: flex-direction flex-wrap

  • @webinterface

    Mehrzeilige Anordnungflex-wrap

  • @webinterface

    flex-wrap: nowrap;

    flex-wrap: wrap;

    flex-wrap: wrap-reverse;

  • @webinterface

    Horizontale Ausrichtung

  • {css}

    Horizontale Navigation display: table-cell;

    @webinterface

    nav {display: table;width: 100%;

    }.list-nav {

    margin: 0;padding: 0;list-style: none;display: table-row;

    }.list-nav li {

    text-align: center;}

  • @webinterface

    ohneFlexbox

  • {css}

    Navigation mit Flexbox

    @webinterface

    nav {display: table;width: 100%;

    }.list-nav {

    display: flex;flex-direction: row;justify-content: space-around;margin: 0;padding: 0;list-style: none;display: table-row;

    }.list-nav li {

    text-align: center;}

  • @webinterface

    ohneFlexbox

    Flexbox

  • {css}

    Pagination

    @webinterface

    .pagination {margin: 0 0 40px 0;padding: 0;list-style: none;text-align: center;

    }.pagination li {

    display: inline-block;}

  • @webinterface

    ohne Flexbox

  • {css}

    @webinterface

    .pagination {display: flex;flex-wrap: wrap;justify-content: space-between;

    }.pagination li {

    order: 2;}.pagination li:first-child {

    order: 0;} .pagination li:last-child {

    order: 1;}.flexbox .pagination li:first-child, .flexbox .pagination li:last-child {

    width: 50%;}

  • @webinterface

    ohne Flexbox Flexbox

  • {css}

    @webinterface

    @media screen and (min-width: 48em) {

    .pagination li,

    .flexbox .pagination li:first-child,

    .flexbox .pagination li:last-child { order: 0;width: auto;text-align: center;

    }

    }

  • @webinterface

    ohne Flexbox

    Flexbox

  • {css}

    @webinterface

    @media screen and (min-width: 60em) {

    .pagination { justify-content: center;

    }

    }

  • @webinterface

    ohne Flexbox

    Flexbox

  • @webinterface

    justify-content

    Definiert Ausrichtung und Abstand auf der horizontalen.

  • flex-start

    flex-end

    center

    space-between

    space-around

    @webinterface

    justify-content

  • Vertikale Ausrichtung

    @webinterface

  • @webinterface

    align-items: flex-start; align-items: flex-end;

    align-items: center; align-items: stretch;

  • Enhance Responsive Form

    @webinterface

    mit flex-grow, flex-shrink und flex-basis

  • .flexitem { flex: 2 1 100px; } flex-grow flex-basis

    flex-shrink

    @webinterface

    Eigenschaft flex gibt den Flex-items flexible Ausmae mit.

  • @webinterface

    Newsletter example with flexbox

    Name

    Email

    Absenden

    Einfaches Formular mit flex.

  • {css}

    Enhance Responsive Form:

    @webinterface

    .flex-container {display: flex;flex-flow: row wrap;

    }.flex-container .form {

    display: flex;flex-direction: column;flex: 1 2 auto;

    }.flex-container button {

    width: 100%;flex: 0 0 auto;

    }

  • @webinterface

    Flexbox ohne Flexbox

  • {css}

    Enhance Responsive Form:

    @webinterface

    @media screen and (min-width: 48em) {

    .flex-container .form {flex: 1 2 auto;flex-flow: row nowrap;

    }.flex-container label {

    align-self: self;}

    }

  • @webinterface

    Flexbox

    ohne Flexbox

  • {css}

    Enhance Responsive Form:

    @webinterface

    @media screen and (min-width: 60em) {

    .flex-container button {flex: 2 0 auto;

    }

    }

  • @webinterface

    Flexbox

    ohne Flexbox

  • Fluid Experience!

    @webinterface

  • Browsersupport Flexbox?

    @webinterface

  • @webinterface

    Edge 39 44 8 30

    Browsersupport Desktop

    11 38 43 7.1 29

    Can i use, Stand: 01.08.2015

    Supported teilweise Supported nicht Supported

  • Supported teilweise Supported nicht Supported

    @webinterface

    8.4* 8 40 10 30 42 38 11

    iOS MiniOpera Mobile

    Chrome Andriod

    Firefox Andriod

    Browsersupport Mobile

    8* 4.4.4 7 12.1 10

    Can i use, Stand: 01.08.2015

  • @webinterface

    CSS Fallback

    Flexbox berschreibt Space

    Flexbox wird nicht berschrieben

    floats

    display: inline-block

    table-cell

    position: absolute;

  • Viewport Units

    @webinterface

    fr flexiblere Grenangaben in Relation zum Browserfenster.

  • @webinterface

    vw (view width)

    vh (view height)

  • div { width: 100vw; height: 50vh;}

    Viewport Units und Layout Elemente

    @webinterface

    50vh = 50 % der Fensterhhe

    100vw = 100 % der Fensterbreite

  • @webinterface

    Flexbox und Viewport Units.flex-container {

    display: flex;flex-direction: column;height: 100vh;

    }.ad {

    background: #242424;color: #FFF;width: 100vw;height: 50vh;align-self: center;display: flex;justify-content: center;align-items: center;

    }

  • SchriftgrenBisherige Lsung: Fr jeden Breakpoint unterschiedliche Schriftgren definieren.

    @webinterface

  • .h1 {font-size: 18px;

    }@media screen and (min-width: 40em;) { .h1 { font-size: 22px; }}@media screen and (min-width: 60em;) { .h1 { font-size: 28px; }}

    {css}

    Code Beispiel

    @webinterface

    Statische Lsung

  • Fluid ExperienceSchriftgren skalieren in Relation zum Viewport.

    @webinterface

  • body { font-size: 1.5625vw; -webkit-transition: font-size .3s;}.h1 { font-size: 5vw;

    }

    {css}

    Code Beispiel

    @webinterface

  • @webinterface

    View width aus der Standard Schriftgre und dem Breakpoint berechnen:

    breakpoint100 = VWx fontsize

  • @webinterface

    100 / 1024 * 16 = 1,5625Breakpoint

    Schriftgre in px

    view width

    100% Breite

  • {css}

    Schriftgre wird in Relation zum Viewport grer.

    @webinterface

    @media width and (min: 1024px) {

    body { font-size: 1.5625vw;}

    }

  • {css}

    Schriftgre wird in Relation zum Viewport kleiner.

    @webinterface

    @media width and (max: 1024px) {

    body { font-size: 1.5625vw;}

    }

  • Browsersupport?

    @webinterface

  • @webinterface

    Edge 39 44 8 30

    Browsersupport Desktop

    11 38 43 7.1 29

    vmax wird nicht supported

    Can i use, Stand: 01.08.2015

    Supported teilweise Supported nicht Supported

  • @webinterface

    8.4 8 40 10 30 42 39 11

    iOS MiniOpera Mobile

    Chrome Andriod

    Firefox Andriod

    Browsersupport Mobile

    vmax wird nicht supported

    8 4.4.4 7 12.1 10

    Can i use, Stand: 01.08.2015

    Supported teilweise Supported nicht Supported

  • @webinterface

    CSS FallbackFr jeden Breakpoint angepasste Schriftgren definieren.

    SASS ist dein Freund !

  • Viewport Polyfill

    @webinterface

    https://gist.github.com/LeaVerou/1347501

    https://gist.github.com/LeaVerou/1347501

  • Responsive Image mit dem Picture Element.

    @webinterface

  • Standard Lsungimg {max-width: 100%;height: auto;

    }

    @webinterface

    not fancy

  • @webinterface

  • Nachteile: Performance Probleme Eingeschrnkte

    Darstellungsmglichkeiten

    @webinterface

  • Fr jeden Breakpoint angepasste und optimierte Bildgren.

    @webinterface

    Fluid Experience

  • @webinterface

    Das geht mit dem picture Element.

  • @webinterface

    Fallback

    Fr veraltete Browser oder wenn das Picture Element noch nicht Supportet wird.

  • @webinterface

    Fr Smartphones

    1x fr normale Auflsungen

    2x fr retina Auflsungen

  • @webinterface

    Fr Tablets

  • @webinterface

    Fr Desktop

  • Vorteile: gute Performance Art Direction (unterschiedliche

    Auflsungen, Bildausschnitte, Seitenverhltnisse oder Motive)

    @webinterface

  • @webinterface

  • Nachteile: Welche Nachteile ?

    @webinterface

  • Picturefill Polyfillhttps://github.com/scottjehl/picturefill

    @webinterface

    https://github.com/scottjehl/picturefill

  • @webinterface

    Resum

  • Progressive Enhancement ist ein Schlssel zur Fluid Experience.

    @webinterface

  • Simplifikation

    @webinterface http://images-cdn.moviepilot.com

    http://images-cdn.moviepilot.com/image/upload/c_fill,h_600,w_926/t_mp_quality/screenshot-2014-12-18-at-16-01-35-hannibal-lecter-is-a-genius-but-do-real-serial-killers-have-high-iqs-png-202762.jpg

  • @webinterface

    lesen Sie bei Marc Aurel nach. Bei jedem einzelnen Ding die Frage, was ist es in sich selbst?

    http://images-cdn.moviepilot.com

    http://images-cdn.moviepilot.com/image/upload/c_fill,h_600,w_926/t_mp_quality/screenshot-2014-12-18-at-16-01-35-hannibal-lecter-is-a-genius-but-do-real-serial-killers-have-high-iqs-png-202762.jpg

  • Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web.

    @webinterface

    Jeremy Keith

  • It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.

    @webinterface

    John Allsopp, A dao of webdesign

  • "The limits of my language are the limits of my world."

    Ludwig Wittgenstein

    @webinterface

  • Fuck up, Stand up

    @webinterface

  • Gehrausausdeiner Komfortzoneundtastedichadaptivanneue Techniken heran.

    @webinterface

  • engange make it so get done

    @webinterface

  • @webinterface

    Enhance und du gestaltest Sexy Experience.

    http://stuffpoint.com/

    http://stuffpoint.com/science-fiction/image/249898-science-fiction-tron-legacy-wallpaper.jpg

  • @webinterface

    dann bist du ein Superheld.

    browsergames-testen.de

    http://www.browsergames-testen.de/wp-content/uploads/bg_avengers_01.jpg

  • @webinterface

    ein UX Enthusiasts.

  • @webinterface

    ein Coding Ninja.

  • oder ein anderer macht es!

    @webinterface http://images7.alphacoders.com/303/303105.jpg

  • Vielen Dank

    @webinterface Peter Rozek

    fr meine Ellen

  • peter.rozek@ecx.io@webinterface