Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MobileTech Conference 2015
The Future is now!
Flexbox und fancy Stuff 

im Response Webdesign
Peter Rozek@webinterface
PETER ROZEK
Arbeite bei ecx.io (Digital Agentur)
Themengebiete:
UX
Usability
Accessibility
Frontend
Peter Rozek@webinterfa...
"The limits of my language are the
limits of my world."
Ludwig Wittgenstein
@webinterface
1. Flexbox
2. and more Stuff…
@webinterface
Zukunft?
Big Bot, by Benedict Campbell@webinterface
„Where No Man Has
Gone Before…“
@webinterface
Designing

Progressive
Enhancement!
@webinterface
@webinterface
Progressive
Enhancement
adressiert
Responsive 

Webdesign.
@webinterface
Responsive Webdesign
vereint Prinzipien von
Coherence, Adaptability
und Fluidity.
Coherence, Adaptability
und Fluidity ergänzen
sich zum Meta Prinzip
Fluid Experience.
@webinterface@webinterface
@webinterface
Enhance deinen Code
und du schreibst sexy Code.
http://stuffpoint.com/
@webinterface
Werde zum Superheld.
browsergames-testen.de
@webinterface
Werde zum 

Coding Ninja.
Oder ein anderer macht
es…
@webinterface http://images7.alphacoders.com/303/303105.jpg
Content Choreography
mit Flexbox.
@webinterface
@webinterface
Tables
Floats
Inline
CSS 

Frameworks
CSS 

Flexbox
CSS 

Grid Layout
Layout Entwicklung
Erreichte Evolution...
Leidige Probleme mit
CSS Layouts:
@webinterface
Floating, equal height, vertikal
zentrieren, Reihenfolge ändern…
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/
Flexbox adressiert 

progressive
enhancement!
@webinterface
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, als
auch in der Breite nach
unterschiedlichsten Verhältnissen
anpassen.
@webinterface
Placeme...
Reihenfolge verändern
@webinterface
ordre
display
ohne das HTML-Dokument anzupassen mit:
Start the Engine
@webinterface
selektor {
display: flex;
}
<div class="page">
<header>…</header>
<div class="wrapper">
<main class="content">...</main>
<aside class="sidebar primary...
@webinterface
main start main endmain axis
@webinterface
cross start
cross end
cross axis
Flex Container
flex items
Reihenfolge umkehren
oder beliebig ändern.
@webinterface
@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;
fl...
@webinterface
Horizontale Ausrichtung
<nav>
<ul class="list-nav">
<li> … </li>
<li> … </li>
</ul>
</nav>
.list-nav {
margin: 0;
padding: 0;
list-style: none;
te...
@webinterface
ohne

Flexbox
.list-nav {
display: flex;
flex-direction: row;
justify-content: center;
margin: 0;
padding: 0;
text-align: center;
}
.lis...
@webinterface
Flexbox
ohne

Flexbox
<html> {css}
Navigation display: table-cell;
@webinterface
nav {
display: table;
width: 100%;
}
.list-nav {
margin: 0;
pad...
@webinterface
ohne

Flexbox
<html> {css}
Navigation mit Flexbox
@webinterface
nav {
display: table;
width: 100%;
}
.list-nav {
display: flex;
flex-dir...
@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
{css}
Flex:
@webinterface
Eigenschaft flex gibt den
Flex-i...
@webinterface
<form class="pure-form">
<fieldset>
<legend>Newsletter example with flexbox</legend>
<div class="flex-contai...
@webinterface
ohne Flexbox Flexbox
{css}
Enhance Responsive Form:
@webinterface
@media screen and (min-width: 48em) {
.form {
flex: 1 2 auto;
}
.button {
fle...
@webinterface
ohne Flexbox
Flexbox .form {
flex: 1 2 auto;
}
.button {
flex: 0 0 auto;
}
@webinterface
ohne Flexbox
Flexbox
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 Supp...
Supported teilweise Supported nicht Supported
@webinterface
8.4* 8 40 10 30 42 38 11
iOS Mini
Opera
Mobile
Chrome
Andriod
...
@webinterface
CSS Fallback
Flexbox
überschreibt Space
Flexbox wird nicht
überschrieben
floats
display: inline-block
table-...
Browser Traffic.
@webinterface
Safari ist der am meisten genutzte
Browser auf Tablets.
@webinterface
@webinterface
@webinterface DeviceAtlas - Mobile Traffic Report Q2 2015 - Tablet Edition.pdf
Bei Smartphones liegt Android in
73 von 90 Ländern vor iOS.
@webinterface
Viewport Units
@webinterface


für flexiblere
Größenangaben in
Relation zum
Browserfenster.
@webinterface
vw (view width)
vh (view height)
div {
width: 100vw;
height: 50vh;
}
{css}
Viewport Units 

und Layout Elemente
@webinterface
50vh = 50 % der Fensterhöhe
1...
@webinterface
Flexbox und
Viewport Units
.flex-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.ad {
b...
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: 6...
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 * fontsize px
100
= VW
@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: ...
{css}
Schriftgröße wird in Relation zum
Viewport kleiner.
@webinterface
@media width and (max: 1024px) {
body { font-size:...
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.201...
@webinterface
8.4 8 40 10 30 42 39 11
iOS Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
vmax wird...
@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)" s...
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" s...
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" s...
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" s...
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" s...
Vorteile:
• gute Performance
• 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 1...
Picturefill Polyfill
https://github.com/scottjehl/picturefill
@webinterface
Resumé
@webinterface
Progressive
Enhancement
ist der 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://image...
„Responsive design
is not about mobile.
Its not about tablets.
Its not about desktops.
Its about The Web.“
@webinterface
J...
„It is the nature of the web to be flexible, and
it should be our role as designers and
developers to embrace this flexibi...
„Responsive design
is not about mobile.
Its not about tablets.
Its not about desktops.
Its about The Web.“
@webinterface
J...
Adaptability, Fluidity
und Peformance 

ist wichtiger 

als Aussehen.
@webinterface
Mach es anders als erwarten.
Selbst wenn deine Aktivität in eine
falsche Richtung geht, erhältst
Du wertvolle Informatione...
@webinterface
Enhance deinen Code
und du schreibst sexy Code.
http://stuffpoint.com/
@webinterface
Werde zum Superheld.
browsergames-testen.de
@webinterface
Werde zum 

Coding Ninja.
Oder ein anderer macht
es…
@webinterface http://images7.alphacoders.com/303/303105.jpg
Vielen Dank
@webinterface Peter Rozek
…für meine Ellen
@webinterface
@webinterface Peter Rozek
Fragen?
E-Mail: peter.rozek@ecx.io
Twitter: @webinterface
Präsentation bei Slideshare
Bildnachwe...
Upcoming SlideShare
Loading in …5
×

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

1,115 views

Published on

Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für Neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen.

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. MobileTech Conference 2015 The Future is now! Flexbox und fancy Stuff 
 im Response Webdesign Peter Rozek@webinterface
  2. 2. PETER ROZEK Arbeite bei ecx.io (Digital Agentur) Themengebiete: UX Usability Accessibility Frontend Peter Rozek@webinterface
  3. 3. "The limits of my language are the limits of my world." Ludwig Wittgenstein @webinterface
  4. 4. 1. Flexbox 2. and more Stuff… @webinterface
  5. 5. Zukunft? Big Bot, by Benedict Campbell@webinterface
  6. 6. „Where No Man Has Gone Before…“ @webinterface
  7. 7. Designing
 Progressive Enhancement! @webinterface
  8. 8. @webinterface Progressive Enhancement adressiert Responsive 
 Webdesign.
  9. 9. @webinterface Responsive Webdesign vereint Prinzipien von Coherence, Adaptability und Fluidity.
  10. 10. Coherence, Adaptability und Fluidity ergänzen sich zum Meta Prinzip Fluid Experience. @webinterface@webinterface
  11. 11. @webinterface Enhance deinen Code und du schreibst sexy Code. http://stuffpoint.com/
  12. 12. @webinterface Werde zum Superheld. browsergames-testen.de
  13. 13. @webinterface Werde zum 
 Coding Ninja.
  14. 14. Oder ein anderer macht es… @webinterface http://images7.alphacoders.com/303/303105.jpg
  15. 15. Content Choreography mit Flexbox. @webinterface
  16. 16. @webinterface Tables Floats Inline CSS 
 Frameworks CSS 
 Flexbox CSS 
 Grid Layout Layout Entwicklung Erreichte Evolutionsstufe
  17. 17. Leidige Probleme mit CSS Layouts: @webinterface Floating, equal height, vertikal zentrieren, Reihenfolge ändern…
  18. 18. Du kannst die Flexbox nutzen! @webinterface Progressive enhancement 
 für UI Komponenten.
  19. 19. Du musst den IE8 supporten? @webinterface
  20. 20. “I work for Booking.com, and we support IE 7, and I use flexbox.” @webinterface Zoe Gillenwater https://www.flickr.com
  21. 21. „Viel zu lernen 
 du noch hast.“ Joda @webinterface www.wall321.com/
  22. 22. Flexbox adressiert 
 progressive enhancement! @webinterface
  23. 23. Layouts die zuvor eine Herausforderung waren, sind nun verständlicher. @webinterface
  24. 24. Flexible Layouts erstellen und die Berechnungen macht der Browser. @webinterface
  25. 25. Elemente lassen sich beliebig positionieren und aneinander ausrichten. @webinterface
  26. 26. Boxen lassen sich nebeneinander in Zeilen oder untereinander in Spalten anordnen. @webinterface Space
  27. 27. Elemente lassen in der Höhe, als auch in der Breite nach unterschiedlichsten Verhältnissen anpassen. @webinterface Placement
  28. 28. Reihenfolge verändern @webinterface ordre display ohne das HTML-Dokument anzupassen mit:
  29. 29. Start the Engine @webinterface selektor { display: flex; }
  30. 30. <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} Ein wenig code Magic: @webinterface
  31. 31. @webinterface
  32. 32. main start main endmain axis @webinterface cross start cross end cross axis Flex Container flex items
  33. 33. Reihenfolge umkehren oder beliebig ändern. @webinterface
  34. 34. @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;
  35. 35. @webinterface Horizontale Ausrichtung
  36. 36. <nav> <ul class="list-nav"> <li> … </li> <li> … </li> </ul> </nav> .list-nav { margin: 0; padding: 0; list-style: none; text-align: center; } .list-nav li { display: inline-block; padding: 0 .5em; text-align: center; } <html> {css} Horizontale Navigation 
 ohne Flexbox @webinterface
  37. 37. @webinterface ohne
 Flexbox
  38. 38. .list-nav { display: flex; flex-direction: row; justify-content: center; margin: 0; padding: 0; text-align: center; } .list-nav li { display: inline-block; padding: 0 .5em; text-align: center; } <html> {css} Navigation mit Flexbox @webinterface <nav> <ul class="list-nav"> <li> … </li> <li> … </li> </ul> </nav>
  39. 39. @webinterface Flexbox ohne
 Flexbox
  40. 40. <html> {css} 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>
  41. 41. @webinterface ohne
 Flexbox
  42. 42. <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>
  43. 43. @webinterface ohne
 Flexbox Flexbox
  44. 44. @webinterface justify-content Definiert Ausrichtung und Abstand auf der horizontalen.
  45. 45. flex-start flex-end center space-between space-around @webinterface justify-content
  46. 46. Vertikale Ausrichtung @webinterface
  47. 47. @webinterface align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;
  48. 48. Enhance 
 Responsive Form @webinterface mit flex-grow, flex-shrink und flex-basis
  49. 49. .flexitem { flex: 2 1 100px; } flex-grow flex-basis flex-shrink {css} Flex: @webinterface Eigenschaft flex gibt den Flex-items flexible Ausmaße mit.
  50. 50. @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.
  51. 51. @webinterface ohne Flexbox Flexbox
  52. 52. {css} Enhance Responsive Form: @webinterface @media screen and (min-width: 48em) { .form { flex: 1 2 auto; } .button { flex: 0 0 auto; } }
  53. 53. @webinterface ohne Flexbox Flexbox .form { flex: 1 2 auto; } .button { flex: 0 0 auto; }
  54. 54. @webinterface ohne Flexbox Flexbox
  55. 55. Browsersupport Flexbox? @webinterface
  56. 56. @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
  57. 57. 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
  58. 58. @webinterface CSS Fallback Flexbox überschreibt Space Flexbox wird nicht überschrieben floats display: inline-block table-cell position: absolute;
  59. 59. Browser Traffic. @webinterface
  60. 60. Safari ist der am meisten genutzte Browser auf Tablets. @webinterface
  61. 61. @webinterface
  62. 62. @webinterface DeviceAtlas - Mobile Traffic Report Q2 2015 - Tablet Edition.pdf
  63. 63. Bei Smartphones liegt Android in 73 von 90 Ländern vor iOS. @webinterface
  64. 64. Viewport Units @webinterface 
 für flexiblere Größenangaben in Relation zum Browserfenster.
  65. 65. @webinterface vw (view width) vh (view height)
  66. 66. div { width: 100vw; height: 50vh; } {css} Viewport Units 
 und Layout Elemente @webinterface 50vh = 50 % der Fensterhöhe 100vw = 100 % der Fensterbreite
  67. 67. @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; }
  68. 68. Schriftgrößen Bisherige Lösung: Für jeden Breakpoint unterschiedliche Schriftgrößen definieren. @webinterface
  69. 69. .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
  70. 70. Fluid Experience Schriftgrößen skalieren in Relation zum Viewport. @webinterface
  71. 71. body { font-size: 1.5625vw; -webkit-transition: font-size .3s; } .h1 { font-size: 5vw; } {css} Code Beispiel @webinterface
  72. 72. @webinterface View width aus der Standard Schriftgröße und dem Breakpoint berechnen: breakpoint * fontsize px 100 = VW
  73. 73. @webinterface 100 / 1024 * 16 = 1,5625 Breakpoint Schriftgröße in px view width 100% Breite
  74. 74. {css} Schriftgröße wird in Relation zum Viewport größer. @webinterface @media width and (min: 1024px) { body { font-size: 1.5625vw;} }
  75. 75. {css} Schriftgröße wird in Relation zum Viewport kleiner. @webinterface @media width and (max: 1024px) { body { font-size: 1.5625vw;} }
  76. 76. Browsersupport? @webinterface
  77. 77. @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
  78. 78. @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
  79. 79. @webinterface CSS Fallback Für jeden Breakpoint angepasste Schriftgrößen definieren. SASS ist dein Freund !
  80. 80. Viewport Polyfill @webinterface https://gist.github.com/LeaVerou/1347501
  81. 81. Responsive Image mit dem Picture Element. @webinterface
  82. 82. Standard Lösung img { max-width: 100%; height: auto; } @webinterface not fancy
  83. 83. @webinterface
  84. 84. Nachteile: • Performance Probleme • Eingeschränkte Darstellungsmöglichkeiten @webinterface
  85. 85. Für jeden Breakpoint angepasste und optimierte Bildgrößen. @webinterface Fluid Experience
  86. 86. <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 Das geht mit dem picture Element.
  87. 87. <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 Fallback Für veraltete Browser oder wenn das Picture Element noch nicht Supportet wird.
  88. 88. <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
  89. 89. <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 Tablets
  90. 90. <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 Desktop
  91. 91. Vorteile: • gute Performance • unterschiedliche Auflösungen, Bildausschnitte, Seitenverhältnisse oder Motive. @webinterface
  92. 92. @webinterface
  93. 93. Nachteile: • Welche Nachteile ? @webinterface
  94. 94. <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="madium.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
  95. 95. Picturefill Polyfill https://github.com/scottjehl/picturefill @webinterface
  96. 96. Resumé @webinterface
  97. 97. Progressive Enhancement ist der Schlüssel zur Fluid Experience. @webinterface
  98. 98. Simplifikation @webinterface http://images-cdn.moviepilot.com
  99. 99. @webinterface … lesen Sie bei Marc Aurel nach. Bei jedem einzelnen Ding die Frage, was ist es in sich selbst? http://images-cdn.moviepilot.com
  100. 100. „Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web.“ @webinterface Jeremy Keith
  101. 101. „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
  102. 102. „Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web.“ @webinterface Jeremy Keith „Understandig your users, their devices and how they use them should be every designer’s first step.“ Andy Gilliland
  103. 103. Adaptability, Fluidity und Peformance 
 ist wichtiger 
 als Aussehen. @webinterface
  104. 104. Mach es anders als 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. @webinterface
  105. 105. @webinterface Enhance deinen Code und du schreibst sexy Code. http://stuffpoint.com/
  106. 106. @webinterface Werde zum Superheld. browsergames-testen.de
  107. 107. @webinterface Werde zum 
 Coding Ninja.
  108. 108. Oder ein anderer macht es… @webinterface http://images7.alphacoders.com/303/303105.jpg
  109. 109. Vielen Dank @webinterface Peter Rozek
  110. 110. …für meine Ellen @webinterface
  111. 111. @webinterface Peter Rozek Fragen? E-Mail: peter.rozek@ecx.io Twitter: @webinterface Präsentation bei Slideshare Bildnachweis Rocket: 
 http://www.planningforaliens.com/

×