Responsive Webdesign - Unter der Haube
- 1. Unter der Haube ResponsiveWebdesign
- 2. Kurze Info übermich
- 3. "Fluid grids, flexibleimages, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking." - Ethan Marcott Was war das nochmal? Responsive Webdesign
- 4. Flex. Grids Flex.Images Media Queries Denkweise
- 8. Warum der ganzeAufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
- 9. Warum der ganzeAufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
- 10. Warum der ganzeAufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
- 11. Warum der ganzeAufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
- 12. "Some 8,000 carsare sold per week on eBay by users on mobile devices." - Charlie Rose, CEO von eBay Warum der ganze Aufriss?
- 13.
- 14.
- 16.
- 17. Planung Design WireframeCoding
- 18. Planung Design WireframeCoding Launch
- 20.
- 21. • Webdesigner kennenHTML/CSS • Weniger Photoshop mehr Browser • RWD ist nicht „pixel-perfect“
- 22.
- 23. • Fokus aufdas Wichtigste • Technische Probleme früher erkennen • Performance • Auch der Desktop profitiert "Der erste MediaQuery ist kein MediaQuery." - Bryan Rieger
- 24.
- 25. • Konzeptionsphase wichtig •Struktur der Inhalte • Anzahl an Inhalten
- 26. Stückchen für Stückenzur finalen Seite. von Brad Frost Atomic Design
- 27. Stückchen für Stückenzur finalen Seite. von Brad Frost Atomic Design
- 28.
- 29. @media (min-width: 321px)and (max-width : 767px) { .box { background-color: blue; } } .box { background-color: red; }
- 30. @media screen and(max-width: 799px) @media screen and (max-device-width: 799px)
- 31. @media screen and(max-height: 799px) @media screen and (max-device-height: 799px)
- 32.
- 33. @media print and(min-resolution: 300dpi) @media screen and (-webkit-min-device-pixel-ratio : 2)
- 34. @media all and(color) @media screen and (min-aspect-ratio: 1/1) @media screen and (device-aspect-ratio: 16/9)
- 35.
- 36. 4 Modes torule them all
- 37. Standardgrößen: 320 Pixel =Smartphone 768 Pixel = Alle außer das iPhone 960 Pixel = Tablets (Portrait) 1280 Pixel = kleinere Desktops 1281+ Pixel = große Desktops
- 39. "Start with thesmall screen first, then expand until it looks like Shit. TIME FOR A BREAKPOINT!" - Stephen Hay
- 40. • Muss ichIE8 unterstützen? • Polyfill: respond.js
- 41. Fixed: eine fixeGröße Adaptiv: Mehrere fixe Layouts Fluid: Ein flüssiges Layout Responsive: Mehrere flüssige Layouts
- 42.
- 43. „Ughck. Images.“ - DaveRupert
- 44.
- 45.
- 46.
- 47. + Klein + Retinainkl. - Support (IE8) SVG (Vektor)
- 48.
- 49. #katze { background-image: url(katze.jpg); } @media(max-width: 700px) { #katze {background-image: url(kleine-katze.jpg);} } Backgrounds
- 50. #katze { background-image: url(katze.jpg); } @media(max-width: 700px) { #katze {background-image: url(kleine-katze.jpg);} } Backgrounds
- 51. + Breaktpoint spezifisch +Retina MQ + Art Direction - SEO - Manchmal muss es IMG sein
- 52. + Breaktpoint spezifisch +Retina MQ + SEO - Etwas aufwendiger - Braucht PHP+JS - Nix für CDN Adaptive Images
- 53. <picture width="500" height="500"> <sourcemedia="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> </picture> <img alt="The Breakfast Combo“ src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> Picture + Srcset
- 54. "Images are probablythe fattest, lowest hanging fruit, so yeah… don’t give up. Do something, anything! Try to shave off 500ms and increase revenue 20%. Make your client rich. Sell them the fastest website ever..." - Dave Rupert
- 55.
- 56. Seite wird inSpalten eingeteilt, die sich an die Breite des Gerätes anpassen
- 57. Bootstrap: - Komplettes UI -Grid in Breakpoints unterteilt - ab v3 mobile first - basiert auf LESS - sehr häufig genutzt
- 58. Foundation by Zurb: -vollwertiges Framework - Grid nutzt nur 1 Breakpoint - dafür Large + Small grid - v4 aktuell, mobile first - basiert auf Sass
- 59. Pure von yahoo -Sehr jung - minimal und einfach gehalten - Stylebuilder Tool
- 60.
- 61.
- 62.
- 63. Erstellen von Gridsmit Hilfslinien: http://guideguide.me
- 64.
- 65. Längere Ladezeit =mehr Seitenabsprünge Schon in der Designphase auch an Performance denken!
- 66.
- 67. box-shadow, text-shadow, border-radius,gradients 7 CSS it
- 68. Icomoon, Fontello undCo. Iconfonts
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80. Responsive Design WeeklyResponsivehero.com Buch: Responsive Webdesign (DE) Buch: Mobile First (EN) Podcast: Shop-Talk Show Podcast: Team Treehouse Show
- 81.
- 82.
- 83. - Technische Lösungenfehlen noch (Images) - IE8 Unterstüzung = mehr Probleme - Basierend auf Annahmen Was immer noch stinkt
- 84. Nativ-App Web-App Machtnichts
- 85. - Geräteunabhängig - Pflegeaufwand(1 Seite = alle Geräte) - Seite passt sich den Bedürfnissen des Nutzers an Was daran genial ist
- 86.