In seinem Artikel „Warum Responsive Webdesign Schrott ist“ rechnet Patrick Voelcker mit dem seiner Meinung nach unberechtigten Trend oder Hype Responsive Webdesign (RWD) ab. Die Kenntnislosigkeit seiner Argumentation wurde in sehr vielen Kommentaren thematisiert. Ausserdem liess sich Marc Hinse zu einer sehr ausführlichen, manchmal polemischen Sezierung des Artikels hinreissen.
Die vielen Missverständnisse des Themas erfordern m.E. eine unaufgeregte Darstellung der Fakten, die ich im Folgenden vornehmen möchte.
Das Web selber ist responsive
Voelcker stellt zu Anfang seines Artikels zurecht fest, dass das Web an sich responsiv ist. Fügt man keine das Layout beschränkenden CSS-Regeln hinzu, passen sich Texte ihrer Umgebung an. Es ist ein Leichtes, auch Bilder und Videos responsiv zu bekommen.
Durch unsere Designentscheidungen beschränken wir diese natürliche Anpassungsfähigkeit von Webseiten. Wir müssen uns deshalb entscheiden, ob uns das interessiert oder nicht.
Unübersichtliche Device-Vielfalt
Eine Fahrt mit öffentlichen Verkehrsmitteln genügt, um zu verstehen, dass wir bei der Konzeption und Gestaltung von Webseiten heute nicht mehr von einem Festrechner mit 1024×768 Pixeln grossem Monitor ausgehen können. Smartphones haben sich stark verbreitet. Für viele ist die Nutzung ihres Smartphones natürlicher und wichtiger, als die ihres PC oder Notebooks. Kunststück: das Smartphone ist sehr transportabel und sehr persönlich.
Aber die meisten Webseiten-Layouts tragen diesen neuen Devices keine Rechnung und kommen mit der Grundannahme eines Festrechners. Und der Dialog zwischen Kunde und Agentur/Dienstleister passiert unter dieser Prämisse.
Aber diese Annahme ist falsch. Mittlerweile werden mehr Tablets als Notebooks verkauft, der Smartphone-Traffic hat gigantische Steigerungsraten und überflügelt auf mancher Seite schon den Traffic stationärer Rechner.
Selbsterkenntnis ist der erste Schritt
Ein RWD-Projekt wird deshalb nur dann erfolgreich sein, wenn es von der Selbsterkenntnis getrieben ist, dass unsere bisherige Arbeits- und Denkweise fehlerhaft ist und korrigiert werden muss.
Seit der kommerziellen Eroberung des Internet haben wir uns meist selber vorgemacht, wir könnten voraussehen, wie jemand unsere Webseiten konsumiert. Dabei haben wir das Web seiner inhärenten Flexibilität beraubt. Wir müssten nun lernen, loszulassen und die Flexibilität als die Stärke des Netzes zu begreifen. Alle müssen dies lernen: Entwickler, Designer, Kundenberater, Konzepter und Kunden. Doch offenbar ist dieser Kontrollverlust für viele Beteiligte ein Gräuel.
Wir sollten aus der rapiden Verbreitung von Smartphones und Tablet-PCs die Lehre ziehen, dass wir eben keine Planungssicherheit besitzen. Weissagungen über die Nutzung einer Seite haben schon in früheren Jahren nicht funktioniert, warum sollte es nun besser werden, wo die technische Landschaft viel komplexer und unübersichtlicher geworden ist?
Genau da setzt RWD an. Responsive Webdesign ist viel mehr, als die Anwendung einiger Techniken. Es ist die Erkenntnis, dass wir den grössten Nutzen aus der Flexibilität des Web ziehen können, indem wir nicht dagegen arbeiten.
Bullshit-Bingo
Ein immer wieder gehörter Vorwurf – Einwand kann man es nicht nennen – gegenüber RWD ist, dass es sich dabei um einen Modetrend, ein Buzzword handele. Tatsächlich wird es heiss und oft diskutiert. Unter Entwicklern und Designern wird dies mit grossem Ernst und auch mit Problembewusstsein gemacht. Was im Marketing, also einem themenfernen Bereich, daraus gemacht wird, ist eine andere Sache.
Die unglückliche Angewohnheit des Marketings, wichtige technische Fakten auf Worthülsen und Heilsversprechen zu reduzieren, kennen wir aber schon aus der Vergangenheit. Da betraf es “Multimedia”, “RIA”, “Apps”, “SaaS”, “Cloud Computing” und viele andere mehr.
Man sollte also nicht eventuelles Marketing-Gewäsch mit der Realität verwechseln. Das ist nie gut. Und die Marketingverantwortlichen sollten vermehrt ermutigt werden, sich über die Realität zu informieren, anstatt sie zurechtzubiegen.
Anpassung an die Umgebung
Responsive Webdesign (RWD) ist nicht “mobiles Webdesign” oder “Design für das iPad”. RWD möchte sicherstellen, dass eine Webseite sich an die jeweilige Umgebung anpassen kann. Das Ziel ist dabei eine bessere Bedienbarkeit für die Nutzer und über diesen Umweg eine bessere Akzeptanz der eigenen Site.
Denkt man genauer über diese einfache Definition nach, so kommen nach und nach Problemfelder in den Sinn, die es zweifelsohne gibt. Das beginnt bei der Auslieferung der passenden Bilder in den passenden Größen und Ausschnitten und endet bei der richtigen Usability. Es ist nicht einfach, jede x-beliebige Seite responsiv zu erstellen. Für manche Probleme gibt es heute auch noch keine vollkommen befriedigende Lösung. Unsere Techniken hängen den Anforderungen der Realität hinterher.
Mobile First? Content First!
Wenn man erst einmal begriffen hat, dass sich ein Layout nicht gleichförmig und gleich gut auf einem kleinen Smartphone wie auf einem grossen Notebook darstellen lässt, verschiebt sich der Fokus. Nicht die Hülle sollte als Erstes im Blick sein, sondern der Inhalt der Seite.
Dienstleister und Kunde sollten also als Erstes den Inhalt und eventuelle Interaktionen besprechen, planen und gewichten. So könnte man beispielsweise Inhalte als untauglich oder weniger wichtig für kleine Bildschirme definieren. Danach entscheidet man sich für eine Strategie, das Layout aufzubauen und den Content zu integrieren. Bei “mobile first” geht man vom kleinsten gemeinsamen Nenner, dem Smartphone, aus und fügt mittels AJAX neue Inhalte für größere Bildschirme hinzu. Gestaltet man erst für breite Bildschirme, muss man oft auch JavaScript nutzen, um Inhalte für kleine Bildschirme nicht zu laden.
Es gibt hierfür noch keine elegante und allgemein gebräuchliche Lösung. Jede Lösung hat einen anderen Nachteil. Passt man hingegen das Layout überhaupt nicht für kleine Bildschirme an, hat man den größten Nachteil überhaupt: die Nutzung der Webseite wird anstrengend durch ständiges pinchen und zoomen.
Responsive Werbung
Die Banner-Industrie hat ein Problem mit RWD. Das verwundert nicht, schliesslich wäre Kreativität und technische Exzellenz gefragt. Wer sich schonmal den Quellcode von Werbannern angeschaut hat weiss, dass es mit der technischen Exzellenz nicht weit her ist.
Mittlerweile gibt es zarte Ansätze, responsive Werbung zu erstellen und die Bezahlmodelle der veränderten Lage anzupassen. Was bringt es denn auch, wenn eine Seite im Smartphone auf fast mikroskopische Größe verkleinert wird, damit sie in den Browser passt und der Nutzer dann weder Inhalte noch Werbung erfassen kann? Damit ist niemandem geholfen.
Die werbetreibende Industrie darf sich nicht faul ausruhen, sondern muss sich den technischen Realitäten stellen und die passenden Antworten finden. Diesmal hoffentlich mit gutem Quellcode.
Performance
Gerne wird das Gespenst schlechter Performance von RWD-Gegnern an die Wand gemalt. Schliesslich benötigen wir mehr Styles und große Bilder würden einfach nur klein skaliert. Es ist eine Frage der Planung und Konzeption, ob diese Anwürfe zutreffen. Denn schliesslich gibt es durchaus mehrere Strategien, einem kleinen Bildschirm auch kleine Bilder auszuliefern. Diese sind optimalerweise nicht nur kleiner, sondern haben auch einen passenden Ausschnitt.
Mittels JavaScript kann man zudem entscheiden, welche JavaScript- und CSS-Dateien für welche Umgebung ausgeliefert werden. Aber auch eine leicht aufgeblähte CSS-Datei ist immernoch keine so große Perfomancebremse, wie ein paar nicht optimierte Bilder. Die sind aber die Regel.
Braucht jeder RWD?
Glaubt man dem Marketing, dann benötigt natürlich jeder eine responsive Webseite. Aber in Wahrheit sollte man eine genaue Abwägung vornehmen. Gerade jetzt, da wir am Anfang der Entwicklung stehen und die meisten Designer und Entwickler noch keine Ahnung vom Thema, geschweige denn Erfahrung haben, ist eine responsive Seite sicherlich mit höherem Aufwand und dadurch auch höheren Kosten verbunden. Aber die Übung wird auch hier den Meister machen.
Können Sie nachweisen, dass es nur minimalen Zugriff mobiler Endgeräte auf das fragliche Projekt gibt, kann eine responsive Gestaltung eine geringe Priorität bekommen. Wägen Sie immer Kosten und Nutzen ab. Ein Nutzen kann übrigens auch sein, dass die bessere Bedienung einer responsiven Seite mobile Nutzer erst anlockt.
Aber grundsätzlich können wir davon ausgehen, dass in naher Zukunft jedes kommerzielle Projekt mit einem hohen Prozentsatz mobiler Zugriffe konfrontiert ist. Möchte man die Nutzer dann nicht auf “pinchen” und “zoomen” verweisen, sollte man eine responsive Webseite entwickeln lassen.
Allein bei Seiten mit ausufernden Navigationen (bspw. Megamenüs) und sehr hohem Datenbestand mit hoher Detailtiefe (Shops wie Amazon) kann es sein, dass eine spezielle Aufbereitung in Form einer speziellen mobilen Webseite oder App (zur Freude des Marketings) angebracht ist. Aber das sind wenige Ausnahmen.
Quantifizierbarer Nutzen
Es gibt bislang wenig belastbares Zahlenmaterial zu responsiven Webseiten. Die von Herrn Voelcker zitierte Studie von Jakob Nielsen gehört definitiv nicht dazu, denn solche Seiten wurden darin nicht untersucht.
Luke Wroblewski führt einige Daten von e-commerce Seiten auf, die aufhorchen lassen. So stieg beim Shop von O’Neill die Konversionsrate von iOS-Geräten um 65,7%, von Android-Geräten sogar um 407,3%. Das ist kein Wunder, denn schliesslich stellt RWD sicher, dass man eine Seite auch auf kleine Displays vernünftig bedienen kann. Insbesondere beim Ausfüllen von Formularen ist dies wichtig. Wer auf solche Steigerungsraten verzichten möchte, kann sich natürlich die Investition in eine responsive Website sparen.
Fazit
Responsive Webdesign ist ein Ansatz, um die flexible Natur des Webs zur Geltung zu bringen. Ein fundamentales Umdenken und ein veränderter Workflow sind dafür wichtig. Natürlich kann ein jeder in der gewohnten Weise weiterarbeiten und die technischen Realitäten ignorieren, es wird nur keine positiven Ergebnisse erzeugen. Responsive Webdesign ist die Zukunft, daran ändern auch die Rückzugsgefechte Ewiggestriger nichts.
12. August 2013 um 10:15 Uhr
Sehr schöne Übersicht. Ich fragte mich, ob es tatsächlich nötig war, denn eigentlich ist RWD selbstverständlich. Aber offenbar ist es wichtig.
Und um einen Drauf zu setzen, RWD ist ein Aspekt des barrierefreien Webdesigns, zumindest was die technische Darstellung am Bildschirm angeht, nur hieß es in der Barrierefreiheitsszene „Flexibles Webdesign“. Letztlich weiß man nicht, wie der Nutzer seine Browsereinstellungen vornimmt: größerer Text, minimale Schriftgröße, andere Schriftarten etc.
12. August 2013 um 10:38 Uhr
Hallo Jens,
ich bin der Meinung das RWD nicht die Zukunft ist, sondern verpflichtende Gegenwart. Seit Ende letzten / Anfang diesen Jahres sind mehr mobile Endgeräte mit Zugang zum Internet gemessen worden als über den guten alten Desktop. Um wirklich jedem mobilen Endgerät gerecht zu werden, kommt man um RWD gar nicht mehr herum. Webdesigner die behaupten RWD ist unnötig, sollten dringend ihren Job wechseln.
Viele Grüße und eine erfolgreiche Woche.
Andy
12. August 2013 um 10:40 Uhr
Danke, Jens!
12. August 2013 um 10:53 Uhr
Danke für den Beitrag. Angenehm unaufgeregt.
12. August 2013 um 17:11 Uhr
Vielen Dank!
Ohne falsche Emotion oder Polemik auf den Punkt gebracht…
12. August 2013 um 17:29 Uhr
Auch ich als Autodidakt kann die Betrachtungen, bis auf ein paar Ausnahmen, gut nachvollziehen.
Danke.
13. August 2013 um 14:59 Uhr
Cennydd Bowles’ Gradient Charts ist übrigens eine interessante Methode, den Bedarf einer separaten, mobilen Webseite (die natürlich auch responsive sein sollte) zu ermitteln.
14. August 2013 um 6:45 Uhr
Danke für den Hinweis, Dennis. Den Artikel hatte ich wieder vergessen. Aber eigentlich ist er ganz interessant und wichtig.
15. August 2013 um 11:28 Uhr
Sehr schöner Artikel und eine angenehm unaufgeregte Reaktion auf den provokanten, fehlerdurchzogenen Blogbeitrag von Hr. Voelker.
Danke dir Jens!
16. August 2013 um 8:38 Uhr
Hier klingt es doch schon viel besser, und nicht wie in den Kommentaren…
Die Brisanz herauszunehmen ist gut, es sachlich angehen, unerwartet, daher ein Lob.
20. August 2013 um 10:50 Uhr
Ich würde gerne noch einen Aspekt hinzufügen: es geht nicht nur um Ästehtik, sondern auch um Gesundheit. Der Zusammenhang ist zwar noch nicht statistisch bewiesen (wenn sich das überhaupt jamend traut), aber zumindest naheliegend: Smartphones können kurzsichtig machen: http://www.brillen-sehhilfen.de/blog/machen-smartphones-kurzsichtig-britischer-experte-warnt
Es ist daher dringend zu empfehlen, sie so zu optimieren, das sman sie in angemessener Entfernung benutzen kann.
Gruß, Martin
26. August 2013 um 14:42 Uhr
Hey .. sauber auf den Punkt gebracht. Ich denke, dass das responsive Webdesign sicher gut ist und sich nach und nach die Industrie für Smartphones und Tablets sich anpassen muss. Das wäre für uns Webdesigner mal ein Schritt in die richtige Richtung. Sonst müssen wir uns ja immer anpassen 😉 Also warten wirs ab und hoffen einfach!
30. August 2013 um 10:22 Uhr
Für Unternehmen führt kein Weg daran vorbei, Websites und Landingpages für den mobilen Zugang über Smartphones, Tablets usw. nutzerfreundlich zu gestalten.
Weitere interessante Informationen zum Thema finden sich unter:
http://real-estate-blog.ch/2013/08/05/immobilienmarketing-in-der-schweiz-teil-responsive-design-wird-immer-bedeutender/
30. August 2013 um 21:28 Uhr
Guter Artikel zum Thema Responsive Design. Das der Inhalt vor dem Responsive Webdesign kommt, wird von den meisten Webagenturen leider unterschätzt.