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.

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

713 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. Der Vortrag richtet sich in erster Linie an Frontend Entwickler und User Experience Designer/Consultants die mehr als Grundkenntnisse in HTML, CSS und JavaScript mitbringen.

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. CodeTalks 2015 The Future is now! Flexbox und fancy Stuff 
 im Response Webdesign Peter Rozek@webinterface Grafik: http://www.planningforaliens.com/
  2. 2. PETER ROZEK Arbeite bei ecx.io (Digital Agentur) Themengebiete: UX Usability Accessibility Frontend Peter Rozek@webinterface
  3. 3. „Where No Man Has Gone Before…“ @webinterface
  4. 4. Flexbox =
 Zukunft? Big Bot, by Benedict Campbell@webinterface
  5. 5. @webinterface Designing
 Progressive Enhancement!
  6. 6. @webinterface Progressive Enhancement als Prozess verstehen nicht nur Technik.
  7. 7. @webinterface 1. Kern Funktion identifizieren. 2. Funktion für ältere Technologien zugänglich machen. 3. Enhance.
  8. 8. @webinterface Design Fluid Experience und nicht ein Layout.
  9. 9. @webinterface
  10. 10. @webinterface Screensize Universum
  11. 11. @webinterface Progressive Enhancement adressiert Responsive 
 Webdesign.
  12. 12. @webinterface Responsive Webdesign vereint Prinzipien von Coherence, Adaptability und Fluidity.
  13. 13. @webinterface Coherence, Adaptability und Fluidity ergänzen sich zum Meta Prinzip Fluid Experience.
  14. 14. @webinterface Enhance und du gestaltest 
 „Sexy“ Experience. http://stuffpoint.com/
  15. 15. @webinterface …dann bist du ein Superheld. browsergames-testen.de
  16. 16. @webinterface …ein UX Enthusiasts.
  17. 17. @webinterface …ein Coding Ninja.
  18. 18. …oder ein anderer macht es! @webinterface http://images7.alphacoders.com/303/303105.jpg
  19. 19. Fluid Experience 
 mit der Flexbox. @webinterface
  20. 20. @webinterface Tables Floats Inline CSS 
 Frameworks CSS 
 Flexbox CSS 
 Grid Layout Layout Entwicklung Erreichte Evolutionsstufe
  21. 21. Leidige Probleme mit CSS Layouts: @webinterface Floating, equal height, vertikal zentrieren, Reihenfolge ändern…
  22. 22. Flexbox löst die Probleme. @webinterface
  23. 23. Du kannst die Flexbox nutzen! @webinterface Progressive enhancement 
 für UI Komponenten.
  24. 24. Du musst den IE8 supporten? @webinterface
  25. 25. “I work for Booking.com, and we support IE 7, and I use flexbox.” @webinterface Zoe Gillenwater https://www.flickr.com
  26. 26. „Viel zu lernen 
 du noch hast.“ Joda @webinterface www.wall321.com/
  27. 27. Layouts die zuvor eine Herausforderung waren, sind nun verständlicher. @webinterface
  28. 28. Flexible Layouts erstellen und die Berechnungen macht der Browser. @webinterface
  29. 29. Elemente lassen sich beliebig positionieren und aneinander ausrichten. @webinterface
  30. 30. Boxen lassen sich nebeneinander in Zeilen oder untereinander in Spalten anordnen. @webinterface Space
  31. 31. Elemente lassen in der Höhe, und in der Breite unterschiedlichsten Verhältnissen anpassen. @webinterface Placement
  32. 32. Reihenfolge verändern @webinterface ordre display ohne das HTML-Dokument anzupassen mit:
  33. 33. @webinterface Flexbox aktivieren. http://oneofus.net/ display: flex;
  34. 34. <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
  35. 35. @webinterface
  36. 36. main start main endmain axis @webinterface cross start cross end cross axis Flex Container flex items
  37. 37. Reihenfolge umkehren oder beliebig ändern. @webinterface
  38. 38. 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
  39. 39. @webinterface flex-direction: column; flex-direction: column-reverse;
  40. 40. @webinterface ordre display
  41. 41. <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
  42. 42. {css} @webinterface .wrapper { display: flex; flex-flow: row wrap; } @media screen and (min-width: 60em) { .primery { order: 2; } .secondary { order: 1; } }
  43. 43. @webinterface
  44. 44. @webinterface flex-flow: row wrap; Syntax aus: „flex-direction“ „flex-wrap“
  45. 45. @webinterface Mehrzeilige Anordnung flex-wrap
  46. 46. @webinterface flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;
  47. 47. @webinterface Horizontale Ausrichtung
  48. 48. <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>
  49. 49. @webinterface ohne
 Flexbox
  50. 50. <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>
  51. 51. @webinterface ohne
 Flexbox Flexbox
  52. 52. <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>
  53. 53. @webinterface ohne Flexbox
  54. 54. {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%; }
  55. 55. @webinterface ohne Flexbox Flexbox
  56. 56. {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; } }
  57. 57. @webinterface ohne Flexbox Flexbox
  58. 58. {css} @webinterface @media screen and (min-width: 60em) { .pagination { justify-content: center; } }
  59. 59. @webinterface ohne Flexbox Flexbox
  60. 60. @webinterface justify-content Definiert Ausrichtung und Abstand auf der horizontalen.
  61. 61. flex-start flex-end center space-between space-around @webinterface justify-content
  62. 62. Vertikale Ausrichtung @webinterface
  63. 63. @webinterface align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch;
  64. 64. Enhance 
 Responsive Form @webinterface mit flex-grow, flex-shrink und flex-basis
  65. 65. .flexitem { flex: 2 1 100px; } flex-grow flex-basis flex-shrink @webinterface Eigenschaft flex gibt den Flex-items flexible Ausmaße mit.
  66. 66. @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.
  67. 67. {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; }
  68. 68. @webinterface Flexbox ohne Flexbox
  69. 69. {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; } }
  70. 70. @webinterface Flexbox ohne Flexbox
  71. 71. {css} Enhance Responsive Form: @webinterface @media screen and (min-width: 60em) { .flex-container button { flex: 2 0 auto; } }
  72. 72. @webinterface Flexbox ohne Flexbox
  73. 73. Fluid Experience! @webinterface
  74. 74. Browsersupport Flexbox? @webinterface
  75. 75. @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
  76. 76. 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
  77. 77. @webinterface CSS Fallback Flexbox überschreibt Space Flexbox wird nicht überschrieben floats display: inline-block table-cell position: absolute;
  78. 78. Viewport Units @webinterface 
 für flexiblere Größenangaben in Relation zum Browserfenster.
  79. 79. @webinterface vw (view width) vh (view height)
  80. 80. div { width: 100vw; height: 50vh; } Viewport Units 
 und Layout Elemente @webinterface 50vh = 50 % der Fensterhöhe 100vw = 100 % der Fensterbreite
  81. 81. @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; }
  82. 82. Schriftgrößen Bisherige Lösung: Für jeden Breakpoint unterschiedliche Schriftgrößen definieren. @webinterface
  83. 83. .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
  84. 84. Fluid Experience Schriftgrößen skalieren in Relation zum Viewport. @webinterface
  85. 85. body { font-size: 1.5625vw; -webkit-transition: font-size .3s; } .h1 { font-size: 5vw; } {css} Code Beispiel @webinterface
  86. 86. @webinterface View width aus der Standard Schriftgröße und dem Breakpoint berechnen: breakpoint 100 = VWx fontsize
  87. 87. @webinterface 100 / 1024 * 16 = 1,5625 Breakpoint Schriftgröße in px view width 100% Breite
  88. 88. {css} Schriftgröße wird in Relation zum Viewport größer. @webinterface @media width and (min: 1024px) { body { font-size: 1.5625vw;} }
  89. 89. {css} Schriftgröße wird in Relation zum Viewport kleiner. @webinterface @media width and (max: 1024px) { body { font-size: 1.5625vw;} }
  90. 90. Browsersupport? @webinterface
  91. 91. @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
  92. 92. @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
  93. 93. @webinterface CSS Fallback Für jeden Breakpoint angepasste Schriftgrößen definieren. SASS ist dein Freund !
  94. 94. Viewport Polyfill @webinterface https://gist.github.com/LeaVerou/1347501
  95. 95. Responsive Image mit dem Picture Element. @webinterface
  96. 96. Standard Lösung img { max-width: 100%; height: auto; } @webinterface not fancy
  97. 97. @webinterface
  98. 98. Nachteile: • Performance Probleme • Eingeschränkte Darstellungsmöglichkeiten @webinterface
  99. 99. Für jeden Breakpoint angepasste und optimierte Bildgrößen. @webinterface Fluid Experience
  100. 100. <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.
  101. 101. <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.
  102. 102. <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
  103. 103. <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
  104. 104. <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
  105. 105. Vorteile: • gute Performance • Art Direction (unterschiedliche Auflösungen, Bildausschnitte, Seitenverhältnisse oder Motive) @webinterface
  106. 106. @webinterface
  107. 107. Nachteile: • Welche Nachteile ? @webinterface
  108. 108. <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
  109. 109. Picturefill Polyfill https://github.com/scottjehl/picturefill @webinterface
  110. 110. @webinterface Resumé
  111. 111. Progressive Enhancement ist ein Schlüssel zur Fluid Experience. @webinterface
  112. 112. Simplifikation @webinterface http://images-cdn.moviepilot.com
  113. 113. @webinterface … lesen Sie bei Marc Aurel nach. Bei jedem einzelnen Ding die Frage, was ist es in sich selbst? http://images-cdn.moviepilot.com
  114. 114. „Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web.“ @webinterface Jeremy Keith
  115. 115. „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
  116. 116. "The limits of my language are the limits of my world." Ludwig Wittgenstein @webinterface
  117. 117. Fuck up, Stand up @webinterface
  118. 118. Geh raus aus deiner  Komfortzone und taste  dich adaptiv an neue Techniken heran. @webinterface
  119. 119. engange make it so get done @webinterface
  120. 120. @webinterface Enhance und du gestaltest 
 „Sexy“ Experience. http://stuffpoint.com/
  121. 121. @webinterface …dann bist du ein Superheld. browsergames-testen.de
  122. 122. @webinterface …ein UX Enthusiasts.
  123. 123. @webinterface …ein Coding Ninja.
  124. 124. …oder ein anderer macht es! @webinterface http://images7.alphacoders.com/303/303105.jpg
  125. 125. Vielen Dank @webinterface Peter Rozek …für meine Ellen
  126. 126. peter.rozek@ecx.io @webinterface

×