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

1. Unter der Haube
Responsive Webdesign

2. Kurze Info über mich

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. Flex. Grids Flex. Images Media Queries Denkweise

8. Warum der ganze Aufriss?
• Immer mehr „mobiles“ surfen
• mCommerce
• Wearables
• Dem Benutzer sich anpassen

9. Warum der ganze Aufriss?
• Immer mehr „mobiles“ surfen
• mCommerce
• Wearables
• Dem Benutzer sich anpassen

10. Warum der ganze Aufriss?
• Immer mehr „mobiles“ surfen
• mCommerce
• Wearables
• Dem Benutzer sich anpassen

11. Warum der ganze Aufriss?
• Immer mehr „mobiles“ surfen
• mCommerce
• Wearables
• Dem Benutzer sich anpassen

12. "Some 8,000 cars are sold per week
on eBay by users on mobile devices."
- Charlie Rose, CEO von eBay
Warum der ganze Aufriss?

13. Free your mind

14. Planung Wireframe pixelperfect
Design
Code Launch

16. Planung

17. Planung Design Wireframe Coding

18. Planung Design Wireframe Coding Launch

20. http://www.adhamdannaway.com

21. • Webdesigner kennen HTML/CSS
• Weniger Photoshop mehr Browser
• RWD ist nicht „pixel-perfect“

22. Mobile First

23. • Fokus auf das Wichtigste
• Technische Probleme früher erkennen
• Performance
• Auch der Desktop profitiert
"Der erste MediaQuery ist kein MediaQuery."
- Bryan Rieger

24. Ich mach‘s später!

25. • Konzeptionsphase wichtig
• Struktur der Inhalte
• Anzahl an Inhalten

26. Stückchen für Stücken zur finalen Seite.
von Brad Frost
Atomic Design

27. Stückchen für Stücken zur finalen Seite.
von Brad Frost
Atomic Design

28. MediaQueries

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. @media (orientation: portrait/landscape)

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. Have a Break(Point)
Aber wann?

36. 4 Modes to rule 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 the small screen first, then expand
until it looks like Shit. TIME FOR A BREAKPOINT!"
- Stephen Hay

40. • Muss ich IE8 unterstützen?
• Polyfill: respond.js

41. Fixed: eine fixe Größe
Adaptiv: Mehrere fixe Layouts
Fluid: Ein flüssiges Layout
Responsive: Mehrere flüssige Layouts

42. flexible Bilder

43. „Ughck. Images.“
- Dave Rupert

44. img {
max-width: 100%;
}

45. Download Zeiten Retina-Bildschirme

46. Art Direction

47. + Klein
+ Retina inkl.
- Support (IE8)
SVG (Vektor)

48. #katze {
background-image: url(katze.jpg);
}
Backgrounds

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">
<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

54. "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

55. flexible Grids

56. Seite wird in Spalten 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. goldengridsystem.com responsive.gswww.responsivegridsystem.com

61. Grid Generator: http://responsify.it

62. Grid PNGs: http://gridulator.com

63. Erstellen von Grids mit Hilfslinien: http://guideguide.me

64. Performance

65. Längere Ladezeit = mehr Seitenabsprünge
Schon in der Designphase auch an Performance denken!

66. Images
„Ughck!“

67. box-shadow, text-shadow, border-radius, gradients
7
CSS it

68. Icomoon, Fontello und Co.
Iconfonts

69. Lazy Loading

70. Servergefrickel

71. Help? Tools!

72. Foundation
Bootstrap
Pure
Icomoon
Fontello

73. caniuse.com

74. Responsive.is Am.I.Responsive

75. LiveView und Skala View

76. Ultimate CSS
Gradient Generator
TinyPNG

77. CSS3PS SlicyGuideguide

78. Gridulator The Heads-Up-Grid

79. enquire.js responsive-nav.com

80. Responsive Design Weekly Responsivehero.com
Buch: Responsive Webdesign (DE) Buch: Mobile First (EN)
Podcast: Shop-Talk Show Podcast: Team Treehouse Show

81. CodecadamyTeam Treehouse

82. Weiterführende Infos:
http://bradfrostweb.com
http://daverupert.com
http://css-tricks.com
http://alistapart.com

83. - Technische Lösungen fehlen noch (Images)
- IE8 Unterstüzung = mehr Probleme
- Basierend auf Annahmen
Was immer noch stinkt

84. Nativ-App Web-App Macht nichts

85. - Geräteunabhängig
- Pflegeaufwand (1 Seite = alle Geräte)
- Seite passt sich den Bedürfnissen des Nutzers an
Was daran genial ist

86. Danke euch
Linkliste auf
www.falconwhite.de/unter-der-haube