the future is now! flexbox und fancy stuff im responsive webdesign

CodeTalks 2015

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

Peter Rozek@webinterface Grafik: 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 für ältere Technologien

zugänglich machen. 3. Enhance.

@webinterface

Design Fluid Experience und nicht ein Layout.

@webinterface

Screensize Universum

@webinterface

Progressive Enhancement adressiert Responsive Webdesign.

@webinterface

Responsive Webdesign vereint Prinzipien von Coherence, Adaptability und Fluidity.

@webinterface

Coherence, Adaptability und Fluidity ergänzen sich zum Meta Prinzip Fluid Experience.

@webinterface

Enhance und du gestaltest „Sexy“ Experience.

http://stuffpoint.com/

@webinterface

…dann bist du ein Superheld.

browsergames-testen.de

@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

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 löst die Probleme.

@webinterface

Du kannst die Flexbox nutzen!

@webinterface

Progressive enhancement für 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

„Viel zu lernen du noch hast.“Joda

@webinterface www.wall321.com/

Layouts die zuvor eine Herausforderung waren, sind nun verständlicher.

@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

Elemente lassen in der Höhe, und in der Breite unterschiedlichsten Verhältnissen anpassen.

@webinterface

Placement

Reihenfolge verändern

@webinterface

ordredisplay

ohne das HTML-Dokument anzupassen mit:

@webinterface

Flexbox aktivieren.

http://oneofus.net/

display: flex;

</div><footer>…</footer>

</div>

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

wrapper = flex containercontent und sidebar = flex items

<html> {css}

@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

flex-direction: column;

flex-direction: row-reverse;

flex-direction: row;

flex-direction: column-reverse;

@webinterface

flex-direction: column;

flex-direction: column-reverse;

@webinterface

ordredisplay

</div><footer>…</footer>

</div>

<html>

@webinterface

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

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

.primery { order: 2;

}.secondary {

order: 1;}

@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

<html> {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;}

</ul></nav>

@webinterface

ohneFlexbox

<html> {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;}

</ul></nav>

@webinterface

ohneFlexbox

Flexbox

<html> {css}

Pagination

@webinterface

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

}.pagination li {

display: inline-block;}

</ul></section>

@webinterface

ohne Flexbox

@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

@webinterface

.pagination li,

.flexbox .pagination li:first-child,

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

@webinterface

ohne Flexbox

Flexbox

@webinterface

.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

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 Ausmaße mit.

@webinterface

<legend>Newsletter example with flexbox</legend> <div class="flex-container">

</div> <div class="form">

<label for="email">Email</label> <input id="email" type="text" placeholder="E-Mail Adresse">

</div> <button type="submit">Absenden</button>

</div> </fieldset></form>

<html>

Einfaches Formular mit flex.

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

@webinterface

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

}.flex-container label {

align-self: self;}

@webinterface

Flexbox

ohne Flexbox

@webinterface

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

@webinterface

Flexbox

ohne Flexbox

Fluid Experience!

@webinterface

Browsersupport Flexbox?

@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

@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

@webinterface

CSS Fallback

Flexbox überschreibt SpaceFlexbox wird nicht

überschrieben

floats

display: inline-block

table-cell

position: absolute;

Viewport Units

@webinterface

für flexiblere Größenangaben 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 Fensterhöhe

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;

SchriftgrößenBisherige Lösung: Für jeden Breakpoint unterschiedliche Schriftgrößen 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; }}

Code Beispiel

@webinterface

Statische Lösung

Fluid ExperienceSchriftgrößen skalieren in Relation zum Viewport.

@webinterface

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

Code Beispiel

@webinterface

View width aus der Standard Schriftgröße und dem Breakpoint berechnen:

breakpoint100 = VWx fontsize

@webinterface

100 / 1024 * 16 = 1,5625Breakpoint

Schriftgröße in px

view width

100% Breite

Schriftgröße wird in Relation zum Viewport größer.

@webinterface

@media width and (min: 1024px) {

body { font-size: 1.5625vw;}

Schriftgröße wird in Relation zum Viewport kleiner.

@webinterface

@media width and (max: 1024px) {

body { font-size: 1.5625vw;}

Browsersupport?

@webinterface

Edge 39 44 8 30

Browsersupport Desktop

11 38 43 7.1 29

vmax wird 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

@webinterface

CSS FallbackFür jeden Breakpoint angepasste Schriftgrößen definieren.

SASS ist dein Freund !

Viewport Polyfill

@webinterface

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

Responsive Image mit dem Picture Element.

@webinterface

Standard Lösungimg {max-width: 100%;height: auto;

@webinterface

not fancy

@webinterface

Nachteile:• Performance Probleme • Eingeschränkte

Darstellungsmöglichkeiten

@webinterface

Für jeden Breakpoint angepasste und optimierte Bildgrößen.

@webinterface

Fluid Experience

</picture>

@webinterface

Das geht mit dem picture Element.

</picture>

@webinterface

Fallback

Für veraltete Browser oder wenn das Picture Element noch nicht Supportet wird.

</picture>

@webinterface

Für Smartphones

1x für normale Auflösungen

2x für retina Auflösungen

</picture>

@webinterface

Für Tablets

</picture>

@webinterface

Für Desktop

Vorteile:• gute Performance • Art Direction (unterschiedliche

Auflösungen, Bildausschnitte, Seitenverhältnisse oder Motive)

@webinterface

Nachteile:• Welche Nachteile ?

@webinterface

</picture>

@webinterface

Workaround Internet Explorer 9

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

@webinterface

Resumé

Progressive Enhancement ist ein Schlüssel zur Fluid Experience.

@webinterface

Simplifikation

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

@webinterface

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

http://images-cdn.moviepilot.com

„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

Geh raus aus deiner Komfortzone und taste dich adaptiv an neue Techniken heran.

@webinterface

engange make it so get done

@webinterface

Enhance und du gestaltest „Sexy“ Experience.

http://stuffpoint.com/

@webinterface

…dann bist du ein Superheld.

browsergames-testen.de

@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

…für meine Ellen

peter.rozek@ecx.io@webinterface

the future is now! flexbox und fancy stuff im responsive webdesign

Design

responsive design with flexbox

catalog webdesign

webdesign at

003 webdesign

webdesign workflow

contemporary webdesign

symposium flexbox

putting flexbox into practice

unraveling...

flexbox report

responsive webdesign-introduction

webdesign ii

webdesign portfolio

exploring flexbox

rcwx webdesign portfolio

css layout with flexbox

artigo_revista webdesign

responsible webdesign

css: flexbox & grid

ideapixel webdesign portfolio