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
Designing 
Progressive
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

@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 ﬂexbox.”
@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
Space

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

Reihenfolge verändern
@webinterface
ordre
display
ohne das HTML-Dokument anzupassen mit:

@webinterface
Flexbox aktivieren.
http://oneofus.net/
display: flex;

<div class="page">
<header>…</header>
<div class="wrapper">
<main class="content">...</main>
<aside class="sidebar primary">...</aside>
<aside class="sidebar secondary">...</aside>
</div>
<footer>…</footer>
</div>
.wrapper {
display: flex;
flex-flow: row wrap;
}
wrapper = flex container
content 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
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-reverse;

<div class="page">
<header>…</header>
<div class="wrapper">
<main class="content">...</main>
<aside class="sidebar primary">...</aside>
<aside class="sidebar secondary">...</aside>
</div>
<footer>…</footer>
</div>
<html>
@webinterface

{css}
@webinterface
.wrapper {
display: flex;
}
@media screen and (min-width: 60em) {
.primery {
order: 2;
}
.secondary {
order: 1;
}
}

@webinterface
Syntax aus: „flex-direction“ „flex-wrap“

@webinterface
Mehrzeilige Anordnung
flex-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;
}
<nav>
<ul class="list-nav">
<li> … </li>
<li> … </li>
</ul>
</nav>

<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;
}
<nav>
<ul class="list-nav">
<li> … </li>
<li> … </li>
</ul>
</nav>

@webinterface
ohne 
Flexbox
Flexbox

<html> {css}
Pagination
@webinterface
.pagination {
margin: 0 0 40px 0;
padding: 0;
list-style: none;
text-align: center;
}
.pagination li {
display: inline-block;
}
<section role="navigation">
<ul class="pagination">
<li><a href=""> … </a></li>
<li><a href=""> … </a></li>
</ul>
</section>

{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
.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
.pagination {
justify-content: center;
}
}

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

@webinterface
<form class="pure-form">
<fieldset>
<legend>Newsletter example with flexbox</legend>
<div class="flex-container">
<div class="form">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Name">
</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.

{css}
Enhance Responsive Form:
@webinterface
.flex-container {
display: flex;
}
.flex-container .form {
display: flex;
flex: 1 2 auto;
}
.flex-container button {
width: 100%;
flex: 0 0 auto;
}

@webinterface
Flexbox ohne Flexbox

{css}
@webinterface
.flex-container .form {
flex: 1 2 auto;
flex-flow: row nowrap;
}
.flex-container label {
align-self: self;
}
}

@webinterface
Flexbox
ohne Flexbox

{css}
@webinterface
.flex-container button {
flex: 2 0 auto;
}
}

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

@webinterface
8.4* 8 40 10 30 42 38 11
iOS Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
8* 4.4.4 7 12.1 10

@webinterface
CSS Fallback
Flexbox
überschreibt Space
Flexbox 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;
height: 100vh;
}
.ad {
background: #242424;
color: #FFF;
width: 100vw;
height: 50vh;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
}

Schriftgrößen
Bisherige 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;
}
}
{css}
Code Beispiel
@webinterface
Statische
Lösung

Fluid Experience
Schriftgrößen 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
Schriftgröße und dem Breakpoint
berechnen:
breakpoint
100
= VWx fontsize

@webinterface
100 / 1024 * 16 = 1,5625
Breakpoint
Schriftgröße in px
view width
100% Breite

{css}
Schriftgröße wird in Relation zum
Viewport größer.
@webinterface
@media width and (min: 1024px) {
body { font-size: 1.5625vw;}
}

{css}
Schriftgröße wird in Relation zum
Viewport kleiner.
@webinterface
@media width and (max: 1024px) {
body { font-size: 1.5625vw;}
}

@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 Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
vmax wird nicht supported
8 4.4.4 7 12.1 10

@webinterface
CSS Fallback
Fü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ösung
img {
max-width: 100%;
height: auto;
}
@webinterface
not fancy

Nachteile:
• Performance Probleme
• Eingeschränkte
Darstellungsmöglichkeiten
@webinterface

Für jeden Breakpoint angepasste
und optimierte Bildgrößen.
@webinterface
Fluid Experience

<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Das geht mit dem picture Element.

<picture>
</picture>
@webinterface
Fallback
Für veraltete Browser oder wenn
das Picture Element noch nicht
Supportet wird.

<picture>
<source media="(min-width: 768px)" srcset="madium.jpg 1x, medium@2x.jpg 2x">
</picture>
@webinterface
Für Smartphones
1x für normale Auflösungen
2x für retina Auflösungen

<picture>
</picture>
@webinterface
Für Tablets

<picture>
</picture>
@webinterface
Für Desktop

Vorteile:
• gute Performance
• Art Direction (unterschiedliche
Auflösungen, Bildausschnitte,
Seitenverhältnisse oder Motive)
@webinterface

Nachteile:
• Welche Nachteile ?
@webinterface

<picture>

<source srcset="small.jpg 1x, small@2x.jpg 2x“>

</picture>
@webinterface
Workaround Internet Explorer 9

Picturefill Polyfill
https://github.com/scottjehl/picturefill
@webinterface

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

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

Weitere ähnliche Inhalte

Andere mochten auch

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

Mehr von Peter Rozek

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