Responsive Webdesign? Schwachsinn!

Unter „Responsive Webdesign“ versteht man die dynamische Layoutanpassung von Websites an das benutzte Anzeigegerät wie z.B: PC, Laptop, Handy oder Tablet. Der Medien-Hype um Responsive Webdesign mach viele Webdesigner wieder zu Goldgräbern.

Angebote werden von arbeitslosen Webdesign-Trend-Mitläufern in einer grösseren Aufdringlichkeit als die 0900 Werbung im Nachtprogramm von Pro7 versendet und führen aus Unwissenheit oft zu umfangreichen Aufträgen ohne jeglichen Mehrwert für den Webseitenbetreiber und Homepage-Besucher. Responsive Webdesign ist Schwachsinn! Warum?

VERALTET WEGEN UMSTELLUNG GOOGLE REGELN! Ich bin ein Gegner von Responsive Webdesign. Das heisst aber überhaupt nicht, dass ich ein Gegner maximaler Usability und bestmöglicher Darstellung auf allen Endgeräten bin, im Gegenteil! Ich verfolge nur einen ganz anderen Ansatz als die Anhänger des Responsive Webdesigns.

Meine Argumente:

Statistiken zur mobilen Internetnutzung in Deutschland In Deutschland ist das Internet via Kabel und DSL besser ausgebaut als in den meisten anderen westlichen Ländern. Bei uns ist daher die Nutzung des mobilen Internets deutlich geringer. Je nachdem, wer die Statsitiken fälscht, muss man derzeit in Deutschland von einem mobilen Endgeräte-Anteil beim Besucher einer Homepage zwischen 5 und 10% ausgehen (Stand: April 2014, Mittelwert aus 100 Google Analytics Accounts meiner Kunden, ca. 45.000 Besucher/Monat).

Hierbei ist weiter zu differenzieren: Tablets sind auflösungstechnisch deutlich näher am Desktop PC denn am Handy, werden aber oft als „mobile“ Endgeräte gewertet. Google Analytics macht das recht gut und splittet in drei Nutzergruppen auf: Desktop (+Laptop), Tablet und Mobile. Typische Nutzeranteile in Deutschland derzeit: 90% Desktop, 5% Tablet, 5% Mobile. Die Homepage-Betreiber, die also eine dieser tollen „Ruf Mich An!“-Werbungen für Responsive Webdesign bekomen haben, sollten sich also zunächst mal eines fragen: Warum sollte ich für 5% meiner Besucher nochmal 50% der urspünglichen Layoutkosten für die „Verbesserung“ meiner Homepage ausgeben?

Gutes Webdesign = einfaches Webdesign Gutes Webdesign ist immer einfaches Webdesign! Doch Responsive Webdesign ist immer kompliziert. Ich erkläre ihnen das am besten direkt an einem Beispiel aus der Praxis. Seit Jahren bin ich ein großer Fan von www.wordpress.org. WordPress ist eigentlich eine Blog-Software zum Veröffentlichen von tagebuchähnlichen Artikeln im Internet. Aufgrund seiner Einfachheit, Modularität und Flexibilität eignet es sich aber auch hervorragend als Basis für fast jede Homepage, bei der der Webseitenbetreiber selber Inhalte und Bilder ändern will.

WordPress leidet an der gleichen Krankheit wie jedes CMS, das ein gewisses Alter erreicht hat: Es wird immer komplizierter. Seit 2012 werden die WordPress Standard-Themes unter den Prämissen des Responsive Webdesigns erstellt. Die CSS-Formatanweisungen sehen nunmehr z.B. aus wie @media screen and (min-width: 783px) {Definitionen} . Oder übersetzt: wenn Anzeigegerät Bildschirm und Breite größer 783 Pixel, dann diese Layout-Definitionen verwenden.

„Cool!“, denken Sie? „Schwachsinn!“, schreie ich! Es gibt in WordPress nicht nur eine Weiche dieser Art im Responsive Webdesign. Im aktuellen Theme 2014 gibt es deren satte 14 – und eine weitere für Print, welche vollkommen sinnvoll ist. Unter jeder Fallabfrage folgen dann nicht ein paar kleine CSS Anweisungen, sondern es werden Dutzende Elemente alternativ gestyled und repositioniert. Das Resultat für Sie als Besucher der Homepage? Sie wird mit im aktuellen WordPress 2014 Theme 4185 Zeilen / 77kB CSS-Code spürbar langsamer.

Das Resultat für mich als Webdesigner? Wenn ich ein auf 2014 basierendes Theme erstelle, müsste ich eigentlich die Website in 14 verschiedenen Auflösungen auf wenigstens zwei Endgeräten (Desktop/Mobile) testen. Wie soll ich so bitte noch effektiv arbeiten? Meine Kunden sind nicht Yahoo, BMW oder die Telekom! Meine Kunden sind ganz normale Homepagebetreiber mit bis zu 100.000 Besuchern im Monat. Für die lohnt sich eine derartige Weichen-Wut dank Responsive Webdesign nicht. Geschweige denn, dass ich auch nur einem einzigen Kunden die drastischen Mehrkosten für Responsive Webdesign rechtfertigen könnte – oder wollte.

Was mache ich stattdessen? Seit den letzten Custom WordPress Themes für Kunden setze ich generell zum Radikalschlag an. Vom WordPress CSS bleiben nur die wichtigsten grundlegenden Definitionen, ca. 50 Zeilen Code. Die anderen 4135 Zeilen schmeisse ich komplett weg. Sie sind überflüssiger Responsive-Webdesign-Schrott. Was ich brauche, schreibe ich komplett neu – ohne Responsive Webdesign aber dafür super einfach, klein, schnell – und in mobilen Endgeräten funktionieren meine Websites trotzdem hervorragend. Wie mache ich das?

Darstellung auf mobilen Endgeräten Die Darstellung von Websites auf mobilen Endgeräten ist vor allem wegen zwei Punkten schwer zu planen. Erstens ist der Markt für mobile Endgeräte in ständiger Bewegung. Jeden Tag gibt es neue Hersteller, Geräte und Bildschirmauflösungen. Die Konstanz für mich als Webdesigner ist somit nicht gewährleistet. Ich verstehe ja auch irgendwie die „panisch Händen durch die Luft wedeln“ Reaktion vieler geschäftstüchtiger Webdesigner-Kollegen: „Wir brauchen Responsive Webdesign!“. Trotzdem schrei ich dagegen an: „Ihr geldgeilen Mitläufer!“.

Statt Webdesign immer komplizierter zu machen, sollten wir es mit der zunehmenden Diversifizierung der Endgeräte und Auflösungen immer einfacher machen. Einfachheit contra Responsive Webdesign bedeutet: Wir verwenden keine systeminkompatiblen CSS-Formatanweisungen. Inkompatibel zu welchem System? Zu allen! Liebe Responsive Webdesigner: Setzt euch nochmal hin! Lernt welches Gerät und welcher Browser welches CSS wirklich immer korrekt darstellt! Experimentiert anstatt euren Kunden Websites in der Komplexizität eines Chemielabors zu basteln.

Der zweite wichtige Punkt im Kampf der Einfachheit gegen Responsive Webdesign ist die Bildschirmauflösung. Mit den tollen flashigen Ultra Full HD-Widescreens im Wohnzimmer scheinen viele Webdesigner vollkommen zu vergessen, woher das Webdesign kam – und zu ignorieren wohin es geht. Aktuelle Statistiken zeigen uns, dass bei Desktops die kleinste gebräuchliche Auflösung bei 1024 x 768 Pixel liegt. Nur 1% aller Benutzer müssten bei einer Website mit dieser Breite noch horizontal scrollen [Quelle]. Weder Höhe noch Breite sind fix, Benutzer können Toolbars oder Sidebars eingeblendet haben – doch die meisten haben nur eine leicht verringerte Höhe, die Breite steht meist uneingeschränkt zur Verfügung. Fast alle Benutzer verwenden heute Displays mit Breiten von über 1280 Pixeln. Ja, wir müssen als Webdesigner möglichst vielen Besuchern ein bestmögliches Ergebnis präsentieren. Aus ökonomischen Gründen ist es jedoch genauo wichtig, irgendwo den Schlussstrich ziehen. Wir sollten nicht 30% des Budgets einer Website ausgeben, um die User Experience von 0,5% der Besucher unter großem Einsatz komplexer Technik zu verbessern. Man kann natürlich auch einen Airbag in ein Ford T-Modell einbauen. Der Fahrer stirbt trotzdem beim Crash auf der Autobahn.

Bei mobilen Endgeräten sehen die Auflösungen ganz anders aus. Erstens sind sie niedriger, zweitens kann man praktisch alle mobilen Endgeräten drehen und damit die Orientierung der Website ändern. Im April 2014 bieten die meisten Handies nur eine Anzeigenbreite von 320 Pixel [Quelle] – dieser Wert wird sich aber sehr schnell in Richtung 480 und 720 Pixel bewegen. Im Querformat bieten die meisten Smartphones schon heute eine Displaybreite von wenigstens 600 Pixeln.

Schon mal von Zoom gehört? Standardgemäss stellen die meisten mobilen Endgeräte heute Webseiten, die zu breit für das Display sind, verkleinert da. Lesbar wird die Website erst durch das Einzoomen. Was sollte daran verwerflich sein, Website-Besuchern mit kleinen Mobile-Displays das Zoomen zuzumuten? Ja, klar: null Barrierefreiheit für Piraten, die mehr als acht Finger verloren haben. Aber vollkommen praktikabel für jeden anderen Menschen mit wenigstens zwei Fingern.

Der Webseiten-Zoom auf mobilen Endgeräten funktioniert heute sehr zuverlässig, schnell und effektiv. Worauf wir als Webdesigner achten müssen: Beim Zoomen dürfen sich keine Seitenelemente verschieben, siehe obiger Stichpunkt maximale CSS-Kompatibilität zu jedem System. Ich kenne zahlreiche Webseiten, die mit Responsive Webdesign „glänzen“ – aber das Einzoomen in die immernoch zu kleinen Texte ist entweder gar nicht möglich, oder aber die Elemente der Website werden beim Zoomen so böse verschoben, dass die Nutzung der Website eher einem Videsospiel denn Usability gleicht. KISS! Keep it straight and simple!

„Können Sie mir Responsive Webdesign in meine Homepage einbauen?“ Aufgeschreckt von den 27 Werbemails der letzten zwei Wochen rufen mich Neukunden oft an und fragen, ob ich ihnen ihre Homepage auf Responsive Webdesign umstellten könne. Daraus ergeben sich immer wieder sehr ähnlich verlaufende Frage- und Antwortspiele:

ff: Haben Sie ihre Website schon mal auf dem Handy angeschaut?
K: Nein, muss ich das denn?
ff: Was ist denn schlecht an ihrer Homepage auf dem Handy?
K: (ruft Website in Mobile auf, testet…)
K: Beim Zoomen verschieben sich ein paar Elemente. Videos fehlen.
ff: Verkaufen sie Handyzubehör oder vermieten Sie Ferienwohnungen?
K: Nein.
ff: Dann brauchen Sie kein Responsive Webdesign!

An dieser Stelle erkläre ich dem Kunden dann, wie man die Usability der Website auf dem Handy mit minimalem Aufwand und ohne Responsive Webdesign deutlich verbessern kann. Manche sind enttäuscht, dass ich nicht anbiete, wovon sie überall gelesen haben – und was die letzten 27 Spam-Mails arbeitsloser Webdesigner als unumgänglich suggerierten. Aber nach ein paar weiteren Erläuterungen und vor allem dem Kostenvoranschlag verstehen es fast alle: Responsive Webdesign ist Schwachsinn!

Responsive Webdesign ist teuer Webdesigner, die jedem Kunden ohne genaue Analyse nahelegen, die Homepage auf Responsive Webdesign umzustellen, mögen manchmal gut sein. Auf jeden Fall aber haben sie zu wenig Arbeit oder sind schlichtweg geldgeil. Die Kosten für wirklich voll Responsives Webdesign sind aufgrund der komplizierten Technik, der vielen zu bedenkenden Anzeigegeräte und Auflösungen resultierend in sehr aufwändigen Tests in allen möglichen Geräten und Auflösungen sehr teuer. Die Umstellung einer statischen Homepage mit 10 Unterseiten auf Responsive Webdesign unter Minimalanforderung (PC, Tablet, Handy, Bildschirmbreite 320 / 640 / 1024 / 1280+ px) erfordert selbst für einfachste Layouts wenigstens 6h Arbeit. Komplexe Layouts und mehr Fallunterscheidungen können die Arbeitszeit verdoppeln. Eine dynamische Homepage auf Basis eines CMS wie WordPress oder Joomla sind aufgrund der Template-Engine nochmals aufwändinger in der Umstellung auf Responsive Webdesign. Wir rechnen hier mit wenigstens 10 bis 20 Arbeitsstunden. Komplexe Shopsysteme benötigen wegen der Vielzahl an Seitenarten und Seitenelementen sogar 30-50 Arbeitsstunden.

Lohnt sich Responsive Webdesign für irgendeine Homepage? Ja, es gibt riesengrosse Unterschiede beim Anteil mobiler Homepage-Nutzer je nach Branchen. Wer Büromaterial online kaufen will, macht das in der Regel vom Schreibtisch aus. Bei Urlaub, Restaurantkritiken und Escort-Services sind die Benutzer nun mal meist Reisende, sprich mobil unterwegs. Es wäre also falsch, kategorisch zu behaupten, Responsive Webdesign lohnt sich für niemanden. Der Homepage-Betreiber sollte also erst einmal genau eruriern, wie groß der Anteil mobiler Benutzer auf seiner Homepage ist. Google Analytics ist hierbei das Werkzeug der ersten Wahl. Die ff-webdesigner helfen ihnen gerne beim Einrichten und Erklären der ermittelten Werte.

Wenn relativ viele Besucher Ihrer Homepage mobile surfen und / oder das Thema Ihrer Website die Übertragung ladezeitenintensiver Dateien erfodert, könnte Responsive Webdesign für Sie durchaus interessant sein. Beispiel: Sie verkaufen Klingeltöne über einen Online-Shop. Das Problem: Online-Shops sind meist grafisch recht umfangreich: Viele Funktionen sind für mobile Nutzer überflüssig oder uninteressant. Hier kann man durchaus darüber nachdenken, mittels Responsive Webdesign bestimmte Bereiche der Homepage für Besucher mit mobilen Endgeräten auszublenden, oder besser noch: gar nicht zu übertragen. Denn auch das Ladevolumen ist bei den meisten mobilen Nutzern durchaus ein kritischer Faktor.  Jedes gesparte Kilobyte gibt Ihnen einen Vorsprung gegenüber der Konkurrenz. Auf mobilen Endgeräten könnte man Ladevolumen sparen z.B. durch das Austauschen von Bildern in Versionen mit niedrigerer Auflösung oder mp3-Demos mit niedrigerer Qualität.

Ich plädiere für Hirn statt Responsive Webdesign:

• Wir verwenden tendentiell in Zukunft eher etwas grössere und vor allem (trotz Google Web Fonts!) gut lesbare Schriften. Die Internet-Benutzer werden im Schnitt immer älter, und die Anzahl der DPI auf allen Anzeigegeräten immer höher – und damit wird auch oft die Schrift kleiner.
• Wir verwenden EIN Layout für alle Geräte – und erstellen dieses sauber in allen Systemen getestet mit einer Breite von exakt 1000 Pixeln. Diese Breite funktioniert (ggf. mit Zoom) auf allen Anzeigegeräten gut. Für große Displays jenseits 1000 Pixel kann man dem Body-Tag noch einen Seitenhintergund zuweisen, der das zu scrollende Layout jedoch nicht verbreitern darf.
• Wir verzichten auf alle CSS-Techniken, die auf Smartphones zu Darstellungsfehlern beim Zoomen führen. Vor allem verzichten wir aber auf die großartige Möglichkeit, dem Benutzer das Zoomen zu verbieten.
• Dropdown-Navigation ist für Dekstop / Laptop-Benutzer hilfreich und platzsparend. Auf Touchscreens wie den meisten Smartphones jedoch ist die Dropdown-Navigation in der Bedienung ein absolutes Grauen. Abhilfe schafft man dadurch, dass man zumindest die Unterpunkte (und wenigstens für Mobiles) nach Klick auf einen Hauptpunkt zusätzlich in einer Sidebar anzeigt.

Überzeugt? Oder haben Sie Fragen? Sie benötigen Hilfe bei der kostengünstigen, effektiven und erfolgreichen Optimierung Ihrer Homepage für mobile Endgeräte? Dann rufen Sie uns an! Wir helfen gerne!