Stolperfallen im Responsive Webdesign

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.

0478dd09c9247325a7c9ad11bf2a302a?s=128

Christoph Zillgens

October 26, 2013
Tweet

Transcript

  1. None
  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

  11. None
  12. None
  13. None
  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!
  29. None
  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.

  59. None
  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/

  74. None
  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
  87. None
  88. None
  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
  91. None
  92. None
  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

  104. None
  105. Bullshit

  106. None
  107. None
  108. None
  109. None
  110. None
  111. »is is what I see when I visit a website

    that greets me with a popup.« BRAD FROST pic.twitter.com/ezBIRIHvGS
  112. None
  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.

  124. None
  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

  138. None
  139. None
  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