SlideShare ist ein Scribd-Unternehmen logo
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
@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
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
@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
ordre
display
<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 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>
@webinterface
ohne

Flexbox
<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>
@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 Mini
Opera
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


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öß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;}
}
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 Mini
Opera
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 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
@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, 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>
<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
Fallback
Für veraltete Browser oder wenn
das Picture Element noch nicht
Supportet wird.
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="madium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 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, 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
Für Tablets
<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
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, 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“>
<!--[if IE 9]></video><![endif]-->
<img src="fallback.jpg">
</picture>
@webinterface
Workaround Internet Explorer 9
Picturefill Polyfill
https://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
peter.rozek@ecx.io
@webinterface

Weitere ähnliche Inhalte

Andere mochten auch

Procrastination Drug Of A Nation
Procrastination Drug Of A NationProcrastination Drug Of A Nation
Procrastination Drug Of A Nation
Hendrik Dacquin
 
10 time management hacks
10 time management hacks10 time management hacks
10 time management hacks
ricke78
 
How to organize an LC meeting
How to organize an LC meetingHow to organize an LC meeting
How to organize an LC meeting
Mounaim Lamouni
 
New Manager Bootcamp
New Manager Bootcamp New Manager Bootcamp
New Manager Bootcamp
Leah Guren
 
LDV koostöö projekti tutvustus
LDV koostöö projekti tutvustusLDV koostöö projekti tutvustus
LDV koostöö projekti tutvustuslepakas
 
Toomas Kuuda - Mida tähendavad muudatused majanduses
Toomas Kuuda - Mida tähendavad muudatused majandusesToomas Kuuda - Mida tähendavad muudatused majanduses
Toomas Kuuda - Mida tähendavad muudatused majanduses
lepakas
 
Organize Meetings
Organize MeetingsOrganize Meetings
Organize Meetings
Marvin Nurse
 
กลวิธีคลายเครียด
กลวิธีคลายเครียดกลวิธีคลายเครียด
กลวิธีคลายเครียดaemporn gaewkhiew
 
ネイバージャパン モジュールのバージョン管理
ネイバージャパン モジュールのバージョン管理ネイバージャパン モジュールのバージョン管理
ネイバージャパン モジュールのバージョン管理LINE Corporation (Tech Unit)
 
INBIOMEDvision Workshop at MIE 2011. Victoria López
INBIOMEDvision Workshop at MIE 2011. Victoria LópezINBIOMEDvision Workshop at MIE 2011. Victoria López
INBIOMEDvision Workshop at MIE 2011. Victoria López
INBIOMEDvision
 
Market research for architecture and sustainable development
Market research for architecture and sustainable developmentMarket research for architecture and sustainable development
Market research for architecture and sustainable development
Yinetd Pineda Cruz
 
Evolucion de la computadora daniel
Evolucion de la computadora danielEvolucion de la computadora daniel
Evolucion de la computadora daniel
adaniel275
 
The Function of Aesthetic
The Function of AestheticThe Function of Aesthetic
The Function of Aesthetic
Lex Roman
 
Impacto de las tic en educaciòn
Impacto de las tic en educaciònImpacto de las tic en educaciòn
Impacto de las tic en educaciòn
claudiamilenapg
 
ICT for Lifelong Mobility
ICT for Lifelong MobilityICT for Lifelong Mobility
ICT for Lifelong Mobility
Airina Volungeviciene
 
Share Valuation for Razak Pharmaceutical
Share Valuation for Razak PharmaceuticalShare Valuation for Razak Pharmaceutical
Share Valuation for Razak PharmaceuticalReza Motaghedi
 
Xuventude novas n57_xaneiro2015
Xuventude novas n57_xaneiro2015Xuventude novas n57_xaneiro2015
Xuventude novas n57_xaneiro2015satelite1
 
Kellogg's Digital Strategy
Kellogg's Digital StrategyKellogg's Digital Strategy
Kellogg's Digital Strategy
menzov
 
economia_popular_y_solidaria
economia_popular_y_solidariaeconomia_popular_y_solidaria
economia_popular_y_solidaria
Jennifer Elizabeth Bonilla Velasco
 
Ley de gauss clase 2a
Ley de gauss clase 2aLey de gauss clase 2a
Ley de gauss clase 2a
Tensor
 

Andere mochten auch (20)

Procrastination Drug Of A Nation
Procrastination Drug Of A NationProcrastination Drug Of A Nation
Procrastination Drug Of A Nation
 
10 time management hacks
10 time management hacks10 time management hacks
10 time management hacks
 
How to organize an LC meeting
How to organize an LC meetingHow to organize an LC meeting
How to organize an LC meeting
 
New Manager Bootcamp
New Manager Bootcamp New Manager Bootcamp
New Manager Bootcamp
 
LDV koostöö projekti tutvustus
LDV koostöö projekti tutvustusLDV koostöö projekti tutvustus
LDV koostöö projekti tutvustus
 
Toomas Kuuda - Mida tähendavad muudatused majanduses
Toomas Kuuda - Mida tähendavad muudatused majandusesToomas Kuuda - Mida tähendavad muudatused majanduses
Toomas Kuuda - Mida tähendavad muudatused majanduses
 
Organize Meetings
Organize MeetingsOrganize Meetings
Organize Meetings
 
กลวิธีคลายเครียด
กลวิธีคลายเครียดกลวิธีคลายเครียด
กลวิธีคลายเครียด
 
ネイバージャパン モジュールのバージョン管理
ネイバージャパン モジュールのバージョン管理ネイバージャパン モジュールのバージョン管理
ネイバージャパン モジュールのバージョン管理
 
INBIOMEDvision Workshop at MIE 2011. Victoria López
INBIOMEDvision Workshop at MIE 2011. Victoria LópezINBIOMEDvision Workshop at MIE 2011. Victoria López
INBIOMEDvision Workshop at MIE 2011. Victoria López
 
Market research for architecture and sustainable development
Market research for architecture and sustainable developmentMarket research for architecture and sustainable development
Market research for architecture and sustainable development
 
Evolucion de la computadora daniel
Evolucion de la computadora danielEvolucion de la computadora daniel
Evolucion de la computadora daniel
 
The Function of Aesthetic
The Function of AestheticThe Function of Aesthetic
The Function of Aesthetic
 
Impacto de las tic en educaciòn
Impacto de las tic en educaciònImpacto de las tic en educaciòn
Impacto de las tic en educaciòn
 
ICT for Lifelong Mobility
ICT for Lifelong MobilityICT for Lifelong Mobility
ICT for Lifelong Mobility
 
Share Valuation for Razak Pharmaceutical
Share Valuation for Razak PharmaceuticalShare Valuation for Razak Pharmaceutical
Share Valuation for Razak Pharmaceutical
 
Xuventude novas n57_xaneiro2015
Xuventude novas n57_xaneiro2015Xuventude novas n57_xaneiro2015
Xuventude novas n57_xaneiro2015
 
Kellogg's Digital Strategy
Kellogg's Digital StrategyKellogg's Digital Strategy
Kellogg's Digital Strategy
 
economia_popular_y_solidaria
economia_popular_y_solidariaeconomia_popular_y_solidaria
economia_popular_y_solidaria
 
Ley de gauss clase 2a
Ley de gauss clase 2aLey de gauss clase 2a
Ley de gauss clase 2a
 

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

HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Peter Rozek
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Peter Müller
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Peter Rozek
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Patrick Lauke
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
ssuser65180a
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web designHenning Schmidt
 
Silverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für FortgeschritteneSilverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für Fortgeschrittene
André Wussow
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
xPages Erfahrungen Wünsch AG
xPages Erfahrungen Wünsch AGxPages Erfahrungen Wünsch AG
xPages Erfahrungen Wünsch AG
Wünsch AG
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Peter Rozek
 
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
Sven Jenzer
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Peter Rozek
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
Peter Rozek
 

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

HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
Silverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für FortgeschritteneSilverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für Fortgeschrittene
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
xPages Erfahrungen Wünsch AG
xPages Erfahrungen Wünsch AGxPages Erfahrungen Wünsch AG
xPages Erfahrungen Wünsch AG
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 

Mehr von Peter Rozek

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
Peter Rozek
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
Peter Rozek
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
Peter Rozek
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
Peter Rozek
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
Peter Rozek
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
Peter Rozek
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
Peter Rozek
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
Peter Rozek
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
Peter Rozek
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
Peter Rozek
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
Peter Rozek
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
Peter Rozek
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
Peter Rozek
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
Peter Rozek
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
Peter Rozek
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
Peter Rozek
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
Peter Rozek
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
Peter Rozek
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices Peter Rozek
 

Mehr von Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
 

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