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
@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 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
Space
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 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 containercontent und sidebar = flex items
<html> {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
<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;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
<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>
@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;}
<nav><ul class="list-nav">
<li> … </li><li> … </li>
</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;}
<section role="navigation"><ul class="pagination">
<li><a href=""> … </a></li><li><a href=""> … </a></li>
</ul></section>
@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 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-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 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; }}
{css}
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;
}
{css}
Code Beispiel
@webinterface
@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
{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;}
}
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 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>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, [email protected] 2x">
<source srcset="small.jpg 1x, [email protected] 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Das geht mit dem picture Element.
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, [email protected] 2x">
<source srcset="small.jpg 1x, [email protected] 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Fallback
Für veraltete Browser oder wenn das Picture Element noch nicht Supportet wird.
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="madium.jpg 1x, [email protected] 2x">
<source srcset="small.jpg 1x, [email protected] 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Für Smartphones
1x für normale Auflösungen
2x für retina Auflösungen
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, [email protected] 2x">
<source srcset="small.jpg 1x, [email protected] 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Für Tablets
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, [email protected] 2x">
<source srcset="small.jpg 1x, [email protected] 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Für Desktop
Vorteile:• gute Performance • Art Direction (unterschiedliche
Auflösungen, Bildausschnitte, Seitenverhältnisse oder Motive)
@webinterface
@webinterface
Nachteile:• Welche Nachteile ?
@webinterface
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, [email protected] 2x">
<source srcset="small.jpg 1x, [email protected] 2x“>
<!--[if IE 9]></video><![endif]-->
<img src="fallback.jpg">
</picture>
@webinterface
Workaround Internet Explorer 9
Picturefill Polyfillhttps://github.com/scottjehl/picturefill
@webinterface
@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
@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
[email protected]@webinterface
