Stolperfallen im Responsive Webdesign

Responsive Webdesign wird bereits von vielen Webworkern und Agenturen in der täglichen Praxis angewendet. Doch nicht immer läuft dabei alles glatt. Von der Frage, wie man richtig an ein Projekt herangeht, bis zum Punkt, an dem man endlich eine gute reaktionsfähige Website ausliefert, warten einige Stolperfallen und Probleme, die umgangen bzw. gelöst werden wollen. Einige dieser potenziellen Fehlerquellen werden hier näher beleuchtet.

Transcript

2. Webdesigner, Autor, Berater @czillgens Christoph Zillgens Über mich
3. Responsive Webdesign = Reaktionsfähiges Webdesign
4. Responsive Webdesign = Reaktionsfähiges Webdesign Eine Website ist fähig, auf äußere Einflüsse zu reagieren
5. Bildschirmgröße, Geräteausrichtung
6. Bildschirmgröße, Geräteausrichtung Steuerung
7. Bildschirmgröße, Geräteausrichtung Steuerung Auflösung Farbigkeit
8. 3 Zutaten 1) Flexibles Grid 2) Flexible Bilder/Medien 3) Mediaqueries
9. RWD etabliert sich
10. 13,5 Mio. Einträge
14. Responsive Webdesign ist nur die Spitze des Eisbergs RWD http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
15. RWD Mobile First Content Strategy Workflow Performance servers. Komp. JavaScript Design/Layout HTML5
16. Wir sind noch nicht am Ziel
17. »der Nutzen steht meist nie in Relation zum Aufwand« »nur ein Hype« »RWD ist Schrott« »zeitaufwändig und teuer« »Design-Sau, die gerade mal wieder durch’s Dorf getrieben wird« »zu geringe mobile Nutzerzahlen«
18. falsche Sichtweisen 1.
19. RWD ist kein Add-on. !
20. RWD ist nicht nur ein technisches Feature. !
21. RWD bedeutet eine fundamentale Veränderung
22. »[RWD] is a fundamental shift in how we’ll build web sites for the decade to come.« JEFF VEEN
23. »[RWD] is, in a way, bigger than web standards.« MARK BOULTON
24. »To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web.« TRENT WALTON
25. RWD fängt im Kopf an
26. 1. Von fixen Dimensionen lösen
27. Das Web ist nicht fix, es ist flexibel.
28. Das Web ist nicht fix, es ist flexibel. Es war schon immer flexibel!
30. Wir Designer haben es durch Kontrollbedürfnis und Gestaltungswillen erst unflexibel gemacht.
31. Wir müssen eine Website nicht flexibel machen, sondern vielmehr ihre ursprüngliche Flexibilität erhalten.
32. RWD hilft uns, die ursprüngliche Flexibilität des Webs zu bewahren.
33. 1. Von fixen Dimensionen lösen 2. Kontrollbedürfnis einschränken
34. Weder Designer noch Entwickler entscheiden, wie eine Website aussieht,
35. Weder Designer noch Entwickler entscheiden, wie eine Website aussieht, sondern der Browser.
36. Weder Designer noch Entwickler entscheiden, wie eine Website aussieht, sondern der Browser. Wir liefern lediglich die Anleitung.
37. 1. Von fixen Dimensionen lösen 2. Kontrollbedürfnis einschränken 3. Schwerpunkte verlagern
38. Eine flexible Website, die geräteunabhängig funktioniert, ist wichtiger als ein bis ins Detail ausgefeiltes Design.
39. Die Flexibilität schafft neue Herausforderungen für Designer. Das ist gut so.
40. Bisherigen WORKFLOW beibehalten 2.
41. Wie es bisher war …
42. Wie es bisher war … Planung/Konzept
43. Wie es bisher war … Planung/Konzept Wireframes
44. Wie es bisher war … Planung/Konzept Design Wireframes
45. Wie es bisher war … Planung/Konzept Entwicklung Design Wireframes
46. Wie es bisher war … Planung/Konzept Auslieferung Entwicklung Design Wireframes
47. Klare Projektphasen
48. Klare Projektphasen Design wurde in Photoshop ausgearbeitet und endete dort
49. Klare Projektphasen Design wurde in Photoshop ausgearbeitet und endete dort HTML und CSS nur »Handlanger« für das Photoshop-Design
50. … ist komplett für den Eimer
51. Designer Konzepter Entwickler
52. Neuer Workflow
53. Design Entwicklung
54. Design + Entwicklung
55. Design + Entwicklung
56. Design + Entwicklung http://new.edenspiekermann.com/blog/posts/hacking-our-way-to-better-results »Hacking our way to better results«
57. »is is how I do RWD and the crazy percentages required to line things up: I throw numbers into the CSS file until it looks right.« Elliot Jay Stocks
58. Die falschen Werkzeuge nutzen 3.
60. Photoshop ist nicht das richtige Werkzeug, um sich RWD anzunähern.
61. Photoshop ist nicht das richtige Werkzeug, um sich RWD anzunähern. Ein statisches Abbild einer Website kann die Flexibilität des RWDs nicht demonstrieren, nicht erfahrbar machen.
62. Wir gehen der Annahme auf den Leim, dass unser in PS entwickeltes Layout das Web widerspiegelt, dabei liefert es nur
63. Wir gehen der Annahme auf den Leim, dass unser in PS entwickeltes Layout das Web widerspiegelt, dabei liefert es nur eine einzelne Ansicht von vielen möglichen.
64. PS-Layout RWD Filmposter Film
65. PS-Layout RWD Filmposter Film
66. PS-Layout RWD Filmposter Film
67. PS-Layout RWD Filmposter Film
68. Photoshop-Design Was Entwickler daraus machen Meagan Fisher: »Monkey Jesus«-Effekt http://vimeo.com/69824624
69. »Photoshop, you damn liar!« Josh Brewer
70. »Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight« Andy Clarke
71. Gestalten im BROWSER
72. http://typecast.com/
73. http://gridsetapp.com/
75. https://piratereverse.info/torrent/.../ADOBE_PHOTOSHOP_CS6_. Designer
76. ABER! Nicht als Werkzeug für umfassende, detaillierte Seitengestaltung. Sondern als Tool • für Teilbereiche, einzelne Module • um schnelle Ideen zu visualisieren • für Texturen und Grafiken, Moodboards
77. http://styletil.es/
78. http://styletil.es/
79. Stift und Papier
80. Inhalte weglassen 4. auf dem Smartphone
81. Das ist immer falsch! * * fast immer !
82. »It’s a myth that mobile users don’t want to do everything that desktop users do.« BRAD FROST
83. We do everything on our phones now. Anytime you say, somebody won’t want that on mobile, that’s not mobile content... you’re wrong. JOSH CLARK
84. Smartphones stellen einen weiteren gleichberechtigten Zugang zum Web her. Warum sollte dieser weniger bieten?
85. Nutzerverhalten Nutzer gehen regelmäßig mit mehreren Geräten online: Laptop / Smartphone Am Arbeitsplatz Desktop / zuhause mit Tablet usw.
86. Nutzerverhalten Nutzer gehen regelmäßig mit mehreren Geräten online: Laptop / Smartphone Am Arbeitsplatz Desktop / zuhause mit Tablet usw. 90% der Teilnehmer einer Google-Befragung nutzen regelmäßig mehr als ein Gerät am Tag. Sie starten Aufgaben auf dem einen und beenden diese auf einem anderen Gerät. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
89. ?
90. Content Parity Alle Inhalte einer Website sollten für alle Nutzer stets erreichbar sein, unabhängig davon, mit welchem Gerät sie auf die Inhalte zugreifen möchten. mobile ≠ weniger
93. One-Web-Philosophie Es gibt kein mobiles Web und kein Desktop-Web. Es gibt nur ein Web, auf das wir lediglich mit vielen verschiedenen Geräten zugreifen.
94. RWD ist dazu da, die Präsentation der Inhalte zu beeinflussen, nicht die Inhalte selbst.
95. Desktop First beginnen 5.
96. Desktop First = Wie bekomme ich einen Elefanten in den Kühlschrank? !
97. MOBILE FIRST
98. Denke »Mobile First« * * First heißt: Von Anfang an, aka Projektstart
99. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und Schwerpunkte zu setzen.
100. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und Schwerpunkte zu setzen. Die Nutzer und ihre Bedürfnisse rücken in den Vordergrund.
101. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und Schwerpunkte zu setzen. Die Nutzer und ihre Bedürfnisse rücken in den Vordergrund. Designplanung für Touch-Bedienung wird zu Beginn berücksichtigt.
102. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und Schwerpunkte zu setzen. Die Nutzer und ihre Bedürfnisse rücken in den Vordergrund. Designplanung für Touch-Bedienung wird zu Beginn berücksichtigt. Keine Degradierung der Inhalte.
103. Desktop-Fail
105. Bullshit
111. »is is what I see when I visit a website that greets me with a popup.« BRAD FROST pic.twitter.com/ezBIRIHvGS
113. »e simple guideline is whatever you are doing—do mobile first.« ERIC SCHMIDT, Google
114. Mediaqueries an Gerätegrößen ausrichten 6.
115. !
116. !
117. »Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!« STEPHEN HAY
118. Das ist das Web
119. Das wird das Web sein http://bradfrostweb.com/blog/post/this-is-the-web/
120. RWD ist die Anpassung an das Unbekannte.
121. 4"-5" Smartphones • Apple iPhone 5 (4" Apple iOS 6.0) • Nokia Lumia 920 (4.5" Microsoft Windows 8) • HTC Windows Phone 8X (4.3" Microsoft Windows 8) • HTC Windows Phone 8S (4.0" Microsoft Windows 8) • Motorola Droid RAZR HD (4.7" Google Android 4.0) • Motorola Droid RAZR M (4.3" Google Android 4.0) • TBD: LG Nexus 4 (4.7" Google Android 4.2) 5"-6" Phone/Tablet Hybrids • Samsung Galaxy Note II (5.5" Google Android 4.0) 7"-8" Tablets • iPad Mini (7.9" Apple iOS 6.0) • Kindle Fire HD (7" Google Android 4.0 modified) • Kindle Fire (7" Google Android 4.0 modified) 9"-10" Tablets • iPad Gen 4 (9.7" Apple iOS 6.0) • Microsoft Surface Tablet (10.6" Microsoft Windows 8) • Kindle Fire HD (8.9" Google Android 4.0 modified) • Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8) • Acer Iconia Tab W510 (10.1" Microsoft Windows 8) • Dell Latitude 10 (10.1" Microsoft Windows 8) • Dell XPS 10 (10.1" Microsoft Windows 8) • Asus Vivo Tab RT (10.1" Microsoft Windows 8) • TBD: Nexus 10 (10" Google Android 4.2) 11"-17" Laptops & Convertibles (Tablet/Laptop) • 13" MacBook Pro with Retina (13" Apple OSX 10.8) • Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8) • Lenovo ThinkPad Twist (12.5" Microsoft Windows 8) • Toshiba Satellite U925T (12.5" Microsoft Windows 8) • Dell XPS 12 (12.5" Microsoft Windows 8) • Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8) • Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8) • Acer Iconia W700 (11.6" Microsoft Windows 8) • Sony Vaio Duo 11 (11.6" Microsoft Windows 8) • Samsung Chromebook (11.6" Google Chrome OS) 20"-30" Desktops • Sony Tap 20 (20" touch screen Microsoft Windows 8) • 21.5-inch iMac (21.5" Apple OSX 10.8) • 27-inch iMac (27" Apple OSX 10.8) Neue Geräte September/Oktober 2012
122. http://www.bild.de/digital/handy-und-telefon/samsung-galaxy/samung-smartphones-und- mega-29965728.bild.html Neue Galaxy-Modelle Mai/Juni 2013
123. Die Gerätevielfalt nimmt zu.
125. Ladezeiten missachten 7.
126. 72% der aktuellen RWD-Websites senden die gleiche Datenmenge an Mobile wie an Desktop. !
127. ! 74% der Nutzer verlassen eine Seite, wenn sie länger als 5 s zum Laden braucht. http://e-commercefacts.com/research/2011/07/what-usrs-want-from- mobil/19986_WhatMobileUsersWant_Wp.pdf
128. Eine durchschnittliche Website wiegt ca. 1.500 kB. 872 kB bzw. 60% davon entfallen auf Bilder. !
129. BILDER optimieren
130. Bilder und RWD • Im mobilen Kontext fallen große Datenmengen besonders ins Gewicht aufgrund langsamer Netzverbindungen
131. Bilder und RWD • Im mobilen Kontext fallen große Datenmengen besonders ins Gewicht aufgrund langsamer Netzverbindungen • Bilder können per CSS kleiner skaliert werden, aber die Bilddatenmenge verringert sich dadurch nicht.
132. Bilder und RWD • Im mobilen Kontext fallen große Datenmengen besonders ins Gewicht aufgrund langsamer Netzverbindungen • Bilder können per CSS kleiner skaliert werden, aber die Bilddatenmenge verringert sich dadurch nicht. • Bilder werden unscharf, wenn sie stark vergrößert werden (->High-Res-Displays).
133. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG ausliefern http://maddesigns.de/responsive-images/
134. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG ausliefern • Dekobilder und nicht inhaltsrelevante Bilder über CSS Hintergrundbilder einbinden http://maddesigns.de/responsive-images/
135. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG ausliefern • Dekobilder und nicht inhaltsrelevante Bilder über CSS Hintergrundbilder einbinden • Inhaltlich relevante Bilder über PictureFill, Source- Shuffle & Co. (JavaScript) http://maddesigns.de/responsive-images/
136. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG ausliefern • Dekobilder und nicht inhaltsrelevante Bilder über CSS Hintergrundbilder einbinden • Inhaltlich relevante Bilder über PictureFill, Source- Shuffle & Co. (JavaScript) • Bilder so gut wie möglich komprimieren! (JEPGmini, TinyPNG, SVGo usw.) http://maddesigns.de/responsive-images/
137. HTTP REQUESTS verringern
140. Keep LADEZEITEN in mind!
141. One MORE thing … !
142. Umstellung braucht Zeit! Jeder braucht eine gewisse Zeit der Eingewöhnung.
143. Umstellung braucht Zeit! Jeder braucht eine gewisse Zeit der Eingewöhnung. Projekte werden am Anfang länger dauern. Prozesse müssen sich einspielen.
144. Umstellung braucht Zeit! Jeder braucht eine gewisse Zeit der Eingewöhnung. Projekte werden am Anfang länger dauern. Prozesse müssen sich einspielen. Rückschläge sind möglich. Vom Projektmanagement sollte dafür Zeit einkalkuliert werden.
145. RWD wird sich auszahlen!
146. RWD wird sich auszahlen! http://bradfrostweb.com/blog/post/responsive-design-to-the-rescue-how-homage-grew-mobile- revenue-by-258/
147. »Done is better than perfect« MARK ZUCKERBERG