SlideShare ist ein Scribd-Unternehmen logo
1 von 112
Downloaden Sie, um offline zu lesen
CSS3-Flexbox-Modell
Responsive Webdesign
Neue Möglichkeiten und Freiheiten mit dem
Peter Rozek, ecx.io germany GmbH
Peter Rozek, ecx.io germany GmbH
Speaker
Frontend Entwicklung:
Gestern, Heute, Morgen
Gestern:
float: left/right;
clear: both
position:relative
position:absolute
position: fixed
Heute:
float: left/right;
display: flex;
clear: both
position:relative
position:absolute
position: fixed
Morgen:
display: flex;
Flexbox
unterstützt uns
für flexible und
skalierbare
Layouts.
Beliebig positionieren und
aneinander ausrichten
Reihenfolge verändern
ordre
display
Ohne das HTML-Dokument anzupassen
Vertical Alignment
Boxen lassen sich
nebeneinander in Zeilen,
oder untereinander in Spalten
anordnen.
Elemente lassen in der Höhe, als
auch in der Breite nach
unterschiedlichsten
Verhältnissen anpassen.
„Das geht doch auch mit
herkömmlichen CSS.“
Für komplexere Lösungen wie
z.B. “Equal Height Columns”
oder “Vertical Alignment” muss
man tief in die Trickkiste greifen.
Beispiel mit CSS
Equal Height Columns
<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>
{css}
.content {
width: 60%;
float: left;
background: #fff;
}
.sidebar {
width: 20%;
float: left;
}
.footer {
clear: both;
float: none;
}
Ausrichtung: Design:
#content, #footer, .primary, .secondary {
padding: 3% 5%;
}
#header, #footer {
background: #0e212e;
color: #fff;
}
.secondary {
background: #bbc4c9;
}
.primary {
background: #5f6d7a;
}
mit CSS
und pseudo Selektor
Equal Height Columns
.content {
float: left;
}
.content, .content:before {
width: 60%;
}
.content:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background: #fff;
}
.primary, .primary:before {
width: 20%;
}
.primary:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 60%;
background-color: #5f6673;
}
.secondary, .secondary:before {
width: 20%;
}
.secondary:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 80%;
background-color: #434750;
}
{css}
.sidebar {
float: left;
}
.wrapper {
position: relative;
overflow: hidden;
}
.footer {
clear: both;
float: none;
}
http://brm.io/jquery-match-height/
mit jQuery
matchHeight.js*
Equal Height Columns
* matchHeight.js kann auch Responsive
<!doctype html>
<html lang="de">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.matchHeight.js"></script>
</head>
<html>
jQuery Plugin
jQuery Libary
<html>
<div class="page">
<header>…</header>
<div class="wrapper">
<main class="content" data-match-height=„items-a">...</main>
<aside class="sidebar primary" data-match-height=„items-a">...</aside>
<aside class="sidebar secondary" data-match-height=„items-a">...</aside>
</div>
<footer>…</footer>
</div>
data Attribute
{css}
.content {
width: 60%;
float: left;
background: #fff;
}
.sidebar {
width: 20%;
float: left;
}
.footer {
clear: both;
float: none;
}
Ausrichtung: Design:
#content, #footer, .primary, .secondary {
padding: 3% 5%;
}
#header, #footer {
background: #0e212e;
color: #fff;
}
.secondary {
background: #bbc4c9;
}
.primary {
background: #5f6d7a;
}
mit Flexbox
einfach smarter
Equal Height Columns
<html>
<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>
display: flex;
Das ist alles!
{css}
<html>
<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>
{css}
.wrapper {
display: flex;
}
wrapper = flex container
content und sidebar = flex items
Vorteil gegenüber float:
Nachfolgende Elemente sind von
“display: flex“ nicht betroffen
und umfließen die Flexbox nicht.
clear: both
position:relative
position:absolute
position: fixed
Das hier ist nicht mehr notwendig:
1. Floats? Die brauchen wir nicht.
!
2. Layouts, die zuvor eine
Herausforderung waren, sind
nun verständlicher.
!
3. Wir können wirklich flexible
Layouts erstellen und die
Berechnungen macht der
Browser.
Terminologie
Properties Elternelement
(flex container)
Properties Kindelemente
display
flex-direction
flex-wrap
flex-flow
align-items
justify-content
align-content
order
flex-grow
flex-shrink
flex-basis
flex
(flex items) (flex items) (flex items)
Aufbau Flex Container
main axis
main start main end
cross axis
cross start
cross end
flex items
Properties Elternelement
!
Flexbox aktivieren
http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/
display:
Definiert das Element als Flex-Container. Elemente
darin werden zu Flex-items.
flex
inline-flex
flex-direction:
Steuert die Reihenfolge der Element in einer Flexbox.
row
row-reverse
column
column-reverse
flex-direction: row;
4 3 2 11 2 3 4
4
3
2
1
1
2
3
4
flex-direction: row-reverse;
flex-direction: column; flex-direction: column-reverse;
Syntax:
Mehrzeilige Anordnung
Legt fest, ob die Elemente in einem Flexbox-
Container auf einer Linie liegen, oder bei bedarf auf
mehrere Zeilen verteilt werden können.
flex-wrap: nowrap
wrap
wrap-reverse
Syntax:
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Die flexiblen Elemente liegen
alle in derselben Reihe, auch
wenn dazu der Platz fehlt.
Die flexiblen Elemente können
sich wenn nötig innerhalb des
Containers in mehrere Zeilen
aufteilen (nach unten).
Die flexiblen Elemente können
sich wenn nötig innerhalb des
Containers in mehrere Zeilen
aufteilen (nach oben).
Die Kurzschreibweise flex-flow fasst die
Eigenschaften flex-direction und flex-wrap
zusammen.
syntax aus: „flex-direction“ „flex-wrap“
flex-flow
.flexitem {
flex-flow: row nowrap;
}
flex-wrap
flex-direction
Vertikale Ausrichtung von HTML-Elementen innerhalb
der Flexbox.
align-items: flex-start
flex-end
center
stretch
Syntax:
align-items: flex-start; align-items: flex-end;
align-items: center; align-items: stretch;
http://philipwalton.github.io/solved-by-flexbox/
Leerraumverteilung
Definiert Ausrichtung und Abstand auf der
horizontalen.
justify-content: flex-start
flex-end
center
space-between
space-around
Syntax:
justify-content: flex-end;
justify-content: flex-start;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
Legt fest, wo die Elemente in einem Flexbox-
Container positioniert sind, oder welchen Abstand sie
zueinander haben.
align-content: flex-start
flex-end
center
space-between
space-around
stretch
Syntax:
align-content: flex-start;
1 2
3 4
5 6
1 2
3 4
5 6
1 2
3 4
5 6
1 2
3 4
5 6
1 2
3 4
5 6
1 2
3 4
5 6
align-content: flex-end; align-content: center;
align-content: space-between; align-content: space-around; align-content: stretch;
Properties Kindelemente
Die Kurzschreibweise flex fasst die Eigenschaften
flex-grow, flex-shrink und flex-basis zusammen.
syntax aus: „flex-grow“ „flex-shrink“ „flex-basis“
flex
.flexitem {
flex: 1 1 100px;
}
flex-shrink
flex-basisflex-grow
Eigenschaft flex gibt den
Flex-items flexible Ausmaße mit.
.flex-container {
display: flex;
}
!
.main {
flex: 40% 1 2;
}
!
.primary {
flex: 20% 1 1;
}
!
.secondary {
flex: 20% 2 1;
}
.flexitem {
order: 1;
}
Eigenschaft order ändert die
Reihenfolge im HTML-Dokument.
.flex-container {
display: flex;
}
!
.main {
order: 2;
}
!
.primary {
order: 1;
}
!
.secondary {
order: 3;
}
http://philipwalton.github.io/solved-by-flexbox/
Flexbox Spielwiese
Im Responsive
Webdesign spielt
Flexbox seine
stärken aus.
<html>
Ausgangslage HTML:
<div class=„page flex-container">
<header>…</header>
<main class=„content“>
<div class=„box“>
…
</div>
…
</main>
<aside class="sidebar primary">...</aside>
<aside class="sidebar secondary“>
<div class=„box“>
…
</div>
…
</aside>
<footer>…</footer>
</div>
{css}
..flex-container {
display: flex;
flex-flow: row wrap;
}
#header {
order: 1;
}
.content {
display: flex;
flex-flow: column wrap;
order: 2;
}
.primary {
order: 4;
}
.secondary {
display: flex;
flex-flow: column reverse;
order: 3;
}
#footer {
order: 5;
}
Basis:
{css} Responsive: @media screen and (min-width: 48em) {
.content {
display: flex;
flex-flow: row wrap;
width: 75%;
}
.content .box {
padding: 0;
margin: 0 1em;
flex: 1 1 30%;
}
.primary {
width: 25%;
padding: 1em 4.833%;
order: 3;
}
.secondary {
flex-direction: row;
justify-content: space around;
padding: 3% 4%;
}
.secondary .box {
padding: 0;
margin: 0 1em;
}
}
{css} @media screen and (min-width: 60em) {
!
.content .box {
flex: 1 1 25%;
}
!
}
Responsive:
Flexbox adressiert
Multiscreen Experience
„Multiscreen is about developing a single application
for multiple interfaces – one for each screen type:
smartphone, tablet, desktop, and television.“
Ridley Marx
John Allsopp, A dao of webdesign: http://alistapart.com/article/dao
„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.“
Es geht nicht mehr darum, ein Design pixelgenau
umzusetzen, es geht um den Kern des Internets.
Kern des Internets:
• Transformation
• Informations Experience
• Accessibility
Responsive
Webdesign
Workflow
und Flexbox
Konzeption: Mobile und. Content First
Development: Progressive Enhancement
Graceful degradation
Bild: http://carmoderns.blogspot.nl/2012/09/monster-truck.html
Content Strategy
Bild von: http://samanthatoy.com/style-tiles/
Content Wireframes
http://support.balsamiq.com/customer/portal/articles/615901
Content erstellen
Bild von: http://samanthatoy.com/style-tiles/
Moodboard / Style Tile
Bilder von: http://styletil.es/
HTML-Prototyping
Testen, testen, testen…
Produktion
Responsive Workflow
https://twitter.com/zeldman/statuses/268066054452953088
Kann Flexbox heute
schon eingesetzt
werden?
Ja
Coole und smarte Layouts für
aktuelle Browser entwickeln.
An Fallback Lösungen denken.
Browsersupport
11.0 29.0 35.0 7.0* 21.0
Supported teilweise Supported nicht Supported
Browsersupport Desktop
http://caniuse.com/flexbox
* benötigt Vendor-Präfix
11.0
28.0 34.0
7.0*
20.010.0*
27.0 33.0
6.1*
19.09.0
26.0 32.0
6.0*
18.08.0
24.0 31.0
5.1*
17.0
Supported teilweise Supported nicht Supported
29.0 35.0 21.0
http://caniuse.com/flexbox
* benötigt Vendor-Präfix
7.0* 5.0-7.0 4.4 10.0* 21.0 35.0 29.0 10.0*
Supported teilweise Supported nicht Supported
Browsersupport Mobile
* benötigt Vendor-Präfix
iOS Mini Mobile Andriod Andriod
http://caniuse.com/flexbox
7.0* 5.0-7.0 4.4 10.0*
16.0
35.0 29.0 10.0*
6.0-6.1* 4.2-4.3* 7.0*
12.15.0-5.1* 4.1*
12.04.2-4.3* 4.0*
11.5
Supported teilweise Supported nicht Supported
4.0-4.1* 3.0*
iOS Mini Mobile Andriod Andriod
26.0*33.0
http://caniuse.com/flexbox
21.0
* benötigt Vendor-Präfix
http://developer.android.com/about/dashboards/index.html
Verbreitung Android
http://david-smith.org/iosversionstats/
Verbreitung iOS
Vendor-Präfix für
altere Browser
.selektor {
display: -webkit-box;
!
display: -moz-box;
!
display: -ms-flexbox;
!
display: -webkit-flex;
!
display: flex;
!
}
/* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
/* OLD: Safari, iOS, Android browser, older WebKit browsers. */
/* NEW, Chrome 21–28, Safari 6.1+ */
/* MID: IE 10 */
/* OLD: Firefox (buggy) */
{css}
SCSS
macht es Dir einfach
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
!
.flexbox { @include flexbox; }
{scss}
https://github.com/mastastealth/sass-flex-mixin
sass-flex-mixin
Modernizr und Flexbox
{css}
.no-flexboxlegacy .no-flexbox
.selektor {
/* Angaben wenn keine Flexbox Eigenschaften
unterstützt werden. */
}
{JS}
<script>
Modernizr.addTest(’ meinflexbox ‘,
function(){
return Modernizr.testAllProps
(’ eigenschaft ’); });
</script>
Text ob bestimmte Eigenschaften unterstützt werden.
Die Klasse „meinflexbox“ wird beim html Start-Tag
ergänzt.
Pollyfill
Flexie ist ein JavaScript Polyfill für die Flexbox,
berücksichtigt aber den alten Standard.
Flexie
http://flexiejs.com/
Mach es (anders)
Mach es anders als andere (es erwarten). Selbst wenn
Deine Aktivität in eine falsche Richtung geht, erhältst
Du wertvolle Informationen daraus. Jeder Fehler ist
der Beginn einer neuen Idee.
Hab Mut zum
Experimentieren
Flexbox wird kommen
Danke, Merci, Thanks
Für meine Ellen
Fragen ?
twitter: @webinterface
E-Mail: peter.rozek@ecx.io
E-Mail: hello@peter-rozek.de
Demos: https://github.com/webinterface/Flexbox

Weitere ähnliche Inhalte

Andere mochten auch

Boletín informativo agosto última version
Boletín informativo agosto última versionBoletín informativo agosto última version
Boletín informativo agosto última version
luissalamanca22
 
Futbol
FutbolFutbol
Futbol
elpeo
 
A farewell letter from supplier-Grunewald.gif
A farewell letter from supplier-Grunewald.gifA farewell letter from supplier-Grunewald.gif
A farewell letter from supplier-Grunewald.gif
YIFAT BEN ARIE
 
Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...
Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...
Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...
Sirris
 

Andere mochten auch (16)

Rk Site Master Plan Update
Rk Site Master Plan UpdateRk Site Master Plan Update
Rk Site Master Plan Update
 
Portfolio: Writing
Portfolio: WritingPortfolio: Writing
Portfolio: Writing
 
Olap for Trial shop
Olap for Trial shop Olap for Trial shop
Olap for Trial shop
 
Lone Eagle Consulting Native American Broadband Applications
Lone Eagle Consulting Native American Broadband ApplicationsLone Eagle Consulting Native American Broadband Applications
Lone Eagle Consulting Native American Broadband Applications
 
AP Vita Tronic_Eng
AP Vita Tronic_EngAP Vita Tronic_Eng
AP Vita Tronic_Eng
 
Boletín informativo agosto última version
Boletín informativo agosto última versionBoletín informativo agosto última version
Boletín informativo agosto última version
 
NADIR: the European “Network for Animal Diseases Infectiology Research” faci...
NADIR: the European “Network for Animal Diseases Infectiology Research”  faci...NADIR: the European “Network for Animal Diseases Infectiology Research”  faci...
NADIR: the European “Network for Animal Diseases Infectiology Research” faci...
 
Programa Semana Cultural 2014 Santa Colomba de Sanabria
Programa Semana Cultural 2014 Santa Colomba de SanabriaPrograma Semana Cultural 2014 Santa Colomba de Sanabria
Programa Semana Cultural 2014 Santa Colomba de Sanabria
 
S. Deleonibus Essderc 2009
S. Deleonibus Essderc 2009S. Deleonibus Essderc 2009
S. Deleonibus Essderc 2009
 
Sims bio
Sims bioSims bio
Sims bio
 
Futbol
FutbolFutbol
Futbol
 
A farewell letter from supplier-Grunewald.gif
A farewell letter from supplier-Grunewald.gifA farewell letter from supplier-Grunewald.gif
A farewell letter from supplier-Grunewald.gif
 
El país de las hojas sueltas. tomo i. desde la época prehispánica hasta el fi...
El país de las hojas sueltas. tomo i. desde la época prehispánica hasta el fi...El país de las hojas sueltas. tomo i. desde la época prehispánica hasta el fi...
El país de las hojas sueltas. tomo i. desde la época prehispánica hasta el fi...
 
ADMINISTRACION INTEGRAL DE RIESGOS
ADMINISTRACION INTEGRAL DE RIESGOSADMINISTRACION INTEGRAL DE RIESGOS
ADMINISTRACION INTEGRAL DE RIESGOS
 
Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...
Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...
Sirris Smart Coating workshop - Easy-to-clean and Self cleaning Coatings - 19...
 
Estrecho De Malaca
Estrecho De MalacaEstrecho De Malaca
Estrecho De Malaca
 

Ähnlich wie Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell

Ähnlich wie Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell (11)

The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
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
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
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, ...
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
XHTML
XHTMLXHTML
XHTML
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Flex Skinning
Flex SkinningFlex Skinning
Flex Skinning
 

Mehr von 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
 
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
 
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 (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)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
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)
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 

Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-Modell