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

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

Post on 13-Apr-2017

577 views

Category:

Design

1 download

TRANSCRIPT

CodeTalks 2015The Future is now! Flexbox und fancy Stuff im Response WebdesignPeter Rozek@webinterface Grafik: http://www.planningforaliens.com/http://www.planningforaliens.com/PETER ROZEKArbeite bei ecx.io (Digital Agentur)Themengebiete: UX Usability Accessibility FrontendPeter Rozek@webinterfaceWhere No Man Has Gone Before@webinterfaceFlexbox =Zukunft?Big Bot, by Benedict Campbell@webinterface@webinterfaceDesigningProgressive Enhancement!@webinterfaceProgressive Enhancement als Prozess verstehen nicht nur Technik.@webinterface1. Kern Funktion identifizieren. 2. Funktion fr ltere Technologien zugnglich machen. 3. Enhance.@webinterfaceDesign Fluid Experience und nicht ein Layout.@webinterface@webinterfaceScreensize Universum@webinterfaceProgressive Enhancement adressiert Responsive Webdesign.@webinterfaceResponsive Webdesign vereint Prinzipien von Coherence, Adaptability und Fluidity.@webinterfaceCoherence, Adaptability und Fluidity ergnzen sich zum Meta Prinzip Fluid Experience.@webinterfaceEnhance und du gestaltest Sexy Experience.http://stuffpoint.com/http://stuffpoint.com/science-fiction/image/249898-science-fiction-tron-legacy-wallpaper.jpg@webinterfacedann bist du ein Superheld.browsergames-testen.dehttp://www.browsergames-testen.de/wp-content/uploads/bg_avengers_01.jpg@webinterfaceein UX Enthusiasts.@webinterfaceein Coding Ninja.oder ein anderer macht es!@webinterface http://images7.alphacoders.com/303/303105.jpgFluid Experience mit der Flexbox.@webinterface@webinterfaceTables Floats InlineCSS FrameworksCSS FlexboxCSS Grid LayoutLayout EntwicklungErreichte EvolutionsstufeLeidige Probleme mit CSS Layouts:@webinterfaceFloating, equal height, vertikal zentrieren, Reihenfolge ndernFlexbox lst die Probleme.@webinterfaceDu kannst die Flexbox nutzen! @webinterfaceProgressive enhancement fr UI Komponenten.Du musst den IE8 supporten?@webinterfaceI work for Booking.com, and we support IE 7, and I use flexbox.@webinterfaceZoe Gillenwater https://www.flickr.comhttps://www.flickr.com/photos/placenamehere/8213369466Viel zu lernen du noch hast.Joda@webinterface www.wall321.com/http://www.wall321.com/Entertainment/Movies/star_wars_movies_clone_wars_cgi_jedi_yoda_episode_1920x1080_wallpaper_34484Layouts die zuvor eine Herausforderung waren, sind nun verstndlicher.@webinterfaceFlexible Layouts erstellen und die Berechnungen macht der Browser.@webinterfaceElemente lassen sich beliebig positionieren und aneinander ausrichten.@webinterfaceBoxen lassen sich nebeneinander in Zeilen oder untereinander in Spalten anordnen.@webinterfaceSpaceElemente lassen in der Hhe, und in der Breite unterschiedlichsten Verhltnissen anpassen.@webinterfacePlacementReihenfolge verndern@webinterfaceordredisplayohne das HTML-Dokument anzupassen mit:@webinterfaceFlexbox aktivieren.http://oneofus.net/display: flex;http://oneofus.net/2014/04/the-top-ten-starship-captains-of-the-small-screen/ ... ... ....wrapper {display: flex;flex-flow: row wrap;}wrapper = flex containercontent und sidebar = flex items {css}@webinterface@webinterfacemain start main endmain axis@webinterfacecross startcross endcross axisFlex Containerflex itemsReihenfolge umkehren oder beliebig ndern.@webinterface4 3 2 11 2 3 443211234flex-direction: column;flex-direction: row-reverse;flex-direction: row;flex-direction: column-reverse;@webinterface@webinterfaceflex-direction: column;flex-direction: column-reverse;@webinterfaceordredisplay ... ... ...@webinterface{css}@webinterface.wrapper {display: flex;flex-flow: row wrap;}@media screen and (min-width: 60em) {.primery { order: 2;}.secondary { order: 1;}}@webinterface@webinterfaceflex-flow: row wrap;Syntax aus: flex-direction flex-wrap@webinterfaceMehrzeilige Anordnungflex-wrap@webinterfaceflex-wrap: nowrap;flex-wrap: wrap;flex-wrap: wrap-reverse;@webinterfaceHorizontale Ausrichtung {css}Horizontale Navigation display: table-cell;@webinterfacenav {display: table;width: 100%;}.list-nav {margin: 0;padding: 0;list-style: none;display: table-row;}.list-nav li {text-align: center;}@webinterfaceohneFlexbox {css}Navigation mit Flexbox@webinterfacenav {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;}@webinterfaceohneFlexboxFlexbox {css}Pagination@webinterface.pagination {margin: 0 0 40px 0;padding: 0;list-style: none;text-align: center;}.pagination li {display: inline-block;}@webinterfaceohne 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%;}@webinterfaceohne 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;}}@webinterfaceohne FlexboxFlexbox{css}@webinterface@media screen and (min-width: 60em) {.pagination { justify-content: center;}}@webinterfaceohne FlexboxFlexbox@webinterfacejustify-contentDefiniert Ausrichtung und Abstand auf der horizontalen.flex-startflex-endcenterspace-betweenspace-around@webinterfacejustify-contentVertikale Ausrichtung@webinterface@webinterfacealign-items: flex-start; align-items: flex-end;align-items: center; align-items: stretch;Enhance Responsive Form@webinterfacemit flex-grow, flex-shrink und flex-basis.flexitem { flex: 2 1 100px; } flex-grow flex-basisflex-shrink@webinterfaceEigenschaft flex gibt den Flex-items flexible Ausmae mit.@webinterfaceNewsletter example with flexbox Name Email AbsendenEinfaches 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;}@webinterfaceFlexbox 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;}}@webinterfaceFlexboxohne Flexbox{css}Enhance Responsive Form:@webinterface@media screen and (min-width: 60em) {.flex-container button {flex: 2 0 auto;}}@webinterfaceFlexboxohne FlexboxFluid Experience!@webinterfaceBrowsersupport Flexbox?@webinterface@webinterfaceEdge 39 44 8 30Browsersupport Desktop11 38 43 7.1 29Can i use, Stand: 01.08.2015Supported teilweise Supported nicht SupportedSupported teilweise Supported nicht Supported@webinterface8.4* 8 40 10 30 42 38 11iOS MiniOpera MobileChrome AndriodFirefox AndriodBrowsersupport Mobile8* 4.4.4 7 12.1 10Can i use, Stand: 01.08.2015@webinterfaceCSS FallbackFlexbox berschreibt SpaceFlexbox wird nicht berschriebenfloats display: inline-block table-cellposition: absolute;Viewport Units @webinterfacefr flexiblere Grenangaben in Relation zum Browserfenster.@webinterfacevw (view width)vh (view height)div { width: 100vw; height: 50vh;}Viewport Units und Layout Elemente@webinterface50vh = 50 % der Fensterhhe100vw = 100 % der Fensterbreite@webinterfaceFlexbox 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;}SchriftgrenBisherige Lsung: Fr jeden Breakpoint unterschiedliche Schriftgren 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@webinterfaceStatische LsungFluid ExperienceSchriftgren skalieren in Relation zum Viewport.@webinterfacebody { font-size: 1.5625vw; -webkit-transition: font-size .3s;}.h1 { font-size: 5vw;}{css}Code Beispiel@webinterface@webinterfaceView width aus der Standard Schriftgre und dem Breakpoint berechnen:breakpoint100 = VWx fontsize@webinterface100 / 1024 * 16 = 1,5625BreakpointSchriftgre in pxview width100% Breite{css}Schriftgre wird in Relation zum Viewport grer.@webinterface@media width and (min: 1024px) {body { font-size: 1.5625vw;}}{css}Schriftgre wird in Relation zum Viewport kleiner.@webinterface@media width and (max: 1024px) {body { font-size: 1.5625vw;}}Browsersupport?@webinterface@webinterfaceEdge 39 44 8 30Browsersupport Desktop11 38 43 7.1 29vmax wird nicht supportedCan i use, Stand: 01.08.2015Supported teilweise Supported nicht Supported@webinterface8.4 8 40 10 30 42 39 11iOS MiniOpera MobileChrome AndriodFirefox AndriodBrowsersupport Mobilevmax wird nicht supported8 4.4.4 7 12.1 10Can i use, Stand: 01.08.2015Supported teilweise Supported nicht Supported@webinterfaceCSS FallbackFr jeden Breakpoint angepasste Schriftgren definieren.SASS ist dein Freund !Viewport Polyfill@webinterfacehttps://gist.github.com/LeaVerou/1347501https://gist.github.com/LeaVerou/1347501Responsive Image mit dem Picture Element.@webinterfaceStandard Lsungimg {max-width: 100%;height: auto;}@webinterfacenot fancy@webinterfaceNachteile: Performance Probleme Eingeschrnkte Darstellungsmglichkeiten@webinterfaceFr jeden Breakpoint angepasste und optimierte Bildgren.@webinterfaceFluid Experience@webinterfaceDas geht mit dem picture Element.@webinterfaceFallbackFr veraltete Browser oder wenn das Picture Element noch nicht Supportet wird.@webinterfaceFr Smartphones1x fr normale Auflsungen2x fr retina Auflsungen@webinterfaceFr Tablets@webinterfaceFr DesktopVorteile: gute Performance Art Direction (unterschiedliche Auflsungen, Bildausschnitte, Seitenverhltnisse oder Motive)@webinterface@webinterfaceNachteile: Welche Nachteile ?@webinterfacePicturefill Polyfillhttps://github.com/scottjehl/picturefill@webinterfacehttps://github.com/scottjehl/picturefill@webinterfaceResumProgressive Enhancement ist ein Schlssel zur Fluid Experience.@webinterfaceSimplifikation@webinterface http://images-cdn.moviepilot.comhttp://images-cdn.moviepilot.com/image/upload/c_fill,h_600,w_926/t_mp_quality/screenshot-2014-12-18-at-16-01-35-hannibal-lecter-is-a-genius-but-do-real-serial-killers-have-high-iqs-png-202762.jpg@webinterface lesen Sie bei Marc Aurel nach. Bei jedem einzelnen Ding die Frage, was ist es in sich selbst?http://images-cdn.moviepilot.comhttp://images-cdn.moviepilot.com/image/upload/c_fill,h_600,w_926/t_mp_quality/screenshot-2014-12-18-at-16-01-35-hannibal-lecter-is-a-genius-but-do-real-serial-killers-have-high-iqs-png-202762.jpgResponsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web.@webinterface Jeremy KeithIt 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.@webinterfaceJohn Allsopp, A dao of webdesign"The limits of my language are the limits of my world."Ludwig Wittgenstein@webinterfaceFuck up, Stand up@webinterfaceGehrausausdeiner Komfortzoneundtastedichadaptivanneue Techniken heran.@webinterfaceengange make it so get done@webinterface@webinterfaceEnhance und du gestaltest Sexy Experience.http://stuffpoint.com/http://stuffpoint.com/science-fiction/image/249898-science-fiction-tron-legacy-wallpaper.jpg@webinterfacedann bist du ein Superheld.browsergames-testen.dehttp://www.browsergames-testen.de/wp-content/uploads/bg_avengers_01.jpg@webinterfaceein UX Enthusiasts.@webinterfaceein Coding Ninja.oder ein anderer macht es!@webinterface http://images7.alphacoders.com/303/303105.jpgVielen Dank@webinterface Peter Rozekfr meine Ellenpeter.rozek@ecx.io@webinterface