Responsive Webdesign - Unter der Haube

927 views

Published on

Vortrag vom 18.07.2013 im Rahmen des Langen Donnerstags in Dortmund. Thema war die technische Seite von responsive Design, sowie das vorstellen nützlicher Tools und Seiten.

Links zu den genannten Seiten und Tools gibt es gebündelt unter
www.falconwhite.de/unter-der-haube

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
927
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Webdesign - Unter der Haube

  1. 1. Unter der Haube Responsive Webdesign
  2. 2. Kurze Info über mich
  3. 3. "Fluid grids, flexible images, 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. 4. Flex. Grids Flex. Images Media Queries Denkweise
  5. 5. Warum der ganze Aufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
  6. 6. Warum der ganze Aufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
  7. 7. Warum der ganze Aufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
  8. 8. Warum der ganze Aufriss? • Immer mehr „mobiles“ surfen • mCommerce • Wearables • Dem Benutzer sich anpassen
  9. 9. "Some 8,000 cars are sold per week on eBay by users on mobile devices." - Charlie Rose, CEO von eBay Warum der ganze Aufriss?
  10. 10. Free your mind
  11. 11. Planung Wireframe pixelperfect Design Code Launch
  12. 12. Planung
  13. 13. Planung Design Wireframe Coding
  14. 14. Planung Design Wireframe Coding Launch
  15. 15. http://www.adhamdannaway.com
  16. 16. • Webdesigner kennen HTML/CSS • Weniger Photoshop mehr Browser • RWD ist nicht „pixel-perfect“
  17. 17. Mobile First
  18. 18. • Fokus auf das Wichtigste • Technische Probleme früher erkennen • Performance • Auch der Desktop profitiert "Der erste MediaQuery ist kein MediaQuery." - Bryan Rieger
  19. 19. Ich mach‘s später!
  20. 20. • Konzeptionsphase wichtig • Struktur der Inhalte • Anzahl an Inhalten
  21. 21. Stückchen für Stücken zur finalen Seite. von Brad Frost Atomic Design
  22. 22. Stückchen für Stücken zur finalen Seite. von Brad Frost Atomic Design
  23. 23. MediaQueries
  24. 24. @media (min-width: 321px) and (max-width : 767px) { .box { background-color: blue; } } .box { background-color: red; }
  25. 25. @media screen and (max-width: 799px) @media screen and (max-device-width: 799px)
  26. 26. @media screen and (max-height: 799px) @media screen and (max-device-height: 799px)
  27. 27. @media (orientation: portrait/landscape)
  28. 28. @media print and (min-resolution: 300dpi) @media screen and (-webkit-min-device-pixel-ratio : 2)
  29. 29. @media all and (color) @media screen and (min-aspect-ratio: 1/1) @media screen and (device-aspect-ratio: 16/9)
  30. 30. Have a Break(Point) Aber wann?
  31. 31. 4 Modes to rule them all
  32. 32. 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
  33. 33. "Start with the small screen first, then expand until it looks like Shit. TIME FOR A BREAKPOINT!" - Stephen Hay
  34. 34. • Muss ich IE8 unterstützen? • Polyfill: respond.js
  35. 35. Fixed: eine fixe Größe Adaptiv: Mehrere fixe Layouts Fluid: Ein flüssiges Layout Responsive: Mehrere flüssige Layouts
  36. 36. flexible Bilder
  37. 37. „Ughck. Images.“ - Dave Rupert
  38. 38. img { max-width: 100%; }
  39. 39. Download Zeiten Retina-Bildschirme
  40. 40. Art Direction
  41. 41. + Klein + Retina inkl. - Support (IE8) SVG (Vektor)
  42. 42. #katze { background-image: url(katze.jpg); } Backgrounds
  43. 43. #katze { background-image: url(katze.jpg); } @media (max-width: 700px) { #katze {background-image: url(kleine-katze.jpg);} } Backgrounds
  44. 44. #katze { background-image: url(katze.jpg); } @media (max-width: 700px) { #katze {background-image: url(kleine-katze.jpg);} } Backgrounds
  45. 45. + Breaktpoint spezifisch + Retina MQ + Art Direction - SEO - Manchmal muss es IMG sein
  46. 46. + Breaktpoint spezifisch + Retina MQ + SEO - Etwas aufwendiger - Braucht PHP+JS - Nix für CDN Adaptive Images
  47. 47. <picture width="500" height="500"> <source media="(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
  48. 48. "Images are probably the 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
  49. 49. flexible Grids
  50. 50. Seite wird in Spalten eingeteilt, die sich an die Breite des Gerätes anpassen
  51. 51. Bootstrap: - Komplettes UI - Grid in Breakpoints unterteilt - ab v3 mobile first - basiert auf LESS - sehr häufig genutzt
  52. 52. Foundation by Zurb: - vollwertiges Framework - Grid nutzt nur 1 Breakpoint - dafür Large + Small grid - v4 aktuell, mobile first - basiert auf Sass
  53. 53. Pure von yahoo - Sehr jung - minimal und einfach gehalten - Stylebuilder Tool
  54. 54. goldengridsystem.com responsive.gswww.responsivegridsystem.com
  55. 55. Grid Generator: http://responsify.it
  56. 56. Grid PNGs: http://gridulator.com
  57. 57. Erstellen von Grids mit Hilfslinien: http://guideguide.me
  58. 58. Performance
  59. 59. Längere Ladezeit = mehr Seitenabsprünge Schon in der Designphase auch an Performance denken!
  60. 60. Images „Ughck!“
  61. 61. box-shadow, text-shadow, border-radius, gradients 7 CSS it
  62. 62. Icomoon, Fontello und Co. Iconfonts
  63. 63. Lazy Loading
  64. 64. Servergefrickel
  65. 65. Help? Tools!
  66. 66. Foundation Bootstrap Pure Icomoon Fontello
  67. 67. caniuse.com
  68. 68. Responsive.is Am.I.Responsive
  69. 69. LiveView und Skala View
  70. 70. Ultimate CSS Gradient Generator TinyPNG
  71. 71. CSS3PS SlicyGuideguide
  72. 72. Gridulator The Heads-Up-Grid
  73. 73. enquire.js responsive-nav.com
  74. 74. Responsive Design Weekly Responsivehero.com Buch: Responsive Webdesign (DE) Buch: Mobile First (EN) Podcast: Shop-Talk Show Podcast: Team Treehouse Show
  75. 75. CodecadamyTeam Treehouse
  76. 76. Weiterführende Infos: http://bradfrostweb.com http://daverupert.com http://css-tricks.com http://alistapart.com
  77. 77. - Technische Lösungen fehlen noch (Images) - IE8 Unterstüzung = mehr Probleme - Basierend auf Annahmen Was immer noch stinkt
  78. 78. Nativ-App Web-App Macht nichts
  79. 79. - Geräteunabhängig - Pflegeaufwand (1 Seite = alle Geräte) - Seite passt sich den Bedürfnissen des Nutzers an Was daran genial ist
  80. 80. Danke euch Linkliste auf www.falconwhite.de/unter-der-haube

×