Responsive Webdesign – optimiert für alle Geräte

Seit dem 21. April 2015 zeigt Google auf den Suchergebnisseiten mobiler Endgeräte andere Ergebnisse als am Desktop-Rechner. Die Suchmaschine straft damit Seitenbetreiber ab, die lediglich eine Desktop-Variante des Webauftritts anbieten. Wer einen Blick auf das typische Verhalten von Nutzern wirft, stellt fest, dass diese Initiative durchaus gerechtfertigt ist. Es kommt jedoch auch zu berechtigter Kritik.

Problematik variabler Displaygrößen

Als sich das Internet noch am Beginn seiner Erfolgsgeschichte befand, waren alle Endgeräte gleich: Desktop-Rechner mit vergleichbar großen Monitoren stellten die Webseiten dar. Schon die Einführung von Breitbildmonitoren im 16:9-Format zeigte, dass sich Webgestaltung auch an Monitorgrößen zu orientieren hat: Nutzer mit dem älteren Darstellungsformat 4:3 mussten entweder die Darstellung verkleinern oder seitlich scrollen, wenn sie den gesamten Seiteninhalt sehen wollten. In der verkleinerten Abbildung war Schrift häufig nicht mehr lesbar und das Scrollen in der Horizontalen wird allgemein als extrem unkomfortabel empfunden. Tablets und Smartphones brachten weitere Darstellungsprobleme mit sich.

Was bedeutet responsive Design?

Mit jeder Anfrage an einen Server werden Informationen übergeben. Mithilfe dieser Angaben wird der User-Agent ermittelt und der Server liefert passend zur vermuteten Bildschirmgröße entsprechend konfigurierte Seiteninhalte aus, die in Form von Templates vorliegen. Ebenfalls wird versucht, Unterschiede bei der Bedienung zu berücksichtigen. Hier sind vornehmlich Gestensteuerung bzw. Maussteuerung zu nennen. Ferner wird vorausgesetzt, dass für mobile Endgeräte häufig keine stabile Datenverbindung verfügbar ist.

Geringere Displaygröße – vergleichbare Inhalte

Die Darstellung einer Website auf kleinen Displays wie denen mobiler Endgeräte erfordert ein angepasstes Design. Trotz weniger Fläche sollen die wichtigsten Informationen schnell ersichtlich sein. Schon früh begannen Webgestalter damit, mobile Versionen von Webseiten anzubieten. Erkennbar sind sie an dem führenden »m.« in den URLs. Was anfänglich noch ein reiner Service kundenorientierter Anbieter war, wurde mit steigenden Nutzerzahlen mobiler Endgeräte zur Pflicht für alle, die sich mit dem Kaufverhalten von Konsumenten näher beschäftigten.

Wie kaufen wir elektronisch ein?

Mindestens zwei Monitorgrößen lassen sich den meisten Haushalten heute zuordnen: Neben den nach wie vor vorhandenen Desktop-Rechnern sind ebenfalls Smartphones am Kaufprozess beteiligt. Mitunter nutzen User zusätzlich ein Tablet für den Besuch des Internets. Interessant ist, dass die Suche nach einem Produkt oder einem Anbieter vornehmlich am Smartphone durchgeführt wird. Dies mag an der permanenten Verfügbarkeit liegen. Recherchen lassen sich in öffentlichen Verkehrsmitteln oder Arbeitspausen schnell und an jedem Ort durchführen. Die Kaufentscheidung findet allerdings eher am Desktop-Rechner statt. Kunden scheinen damit eine höhere Sicherheit bei der Übertragung ihrer persönlichen Daten zu verbinden. Bankgeschäfte und Bezahlvorgänge am Smartphone sind deshalb eher selten. Kommen unterschiedliche Geräte eines einzelnen Users zum Einsatz, spricht der Fachmann von multiplen Touchpoints.

Von der Kür zur Pflicht

Spätestens seit dem Zeitpunkt der abweichenden Suchergebnisse an mobilen Endgeräten werden Webseitenbetreiber einen Rückgang der Seitenaufrufe durch Smartphones oder Tablets feststellen können. Ihre Seiten werden dem User nicht mehr vorgeschlagen. Wer bis heute auf das Angebot mobilfreundlicher Webseiten verzichtet hat, muss mit rückläufigen Zugriffszahlen rechnen. Dies wird sicher nur die Anbieter unberührt lassen, deren Nutzer ausschließlich von Desktop-Rechnern Zugang suchen. Die Mehrzahl aller Anbieter muss jedoch handeln.

Aus groß wird klein

Bei der Transformation üblicher Webseiten auf das Westentaschenformat für Smartphones haben es Gestalter nicht leicht: Die Wiedererkennbarkeit muss gewährleistet bleiben und die Menüführung darf zwischen den unterschiedlichen Darstellungsweisen nicht allzu sehr voneinander abweichen. In vielen Fällen war und ist es nicht damit getan, der Desktop-Ansicht eine Miniaturversion zur Seite zu stellen. Häufig führt es zur Überarbeitung beider Darstellungsformen. Dies geschieht optimalerweise Schritt für Schritt, um den Nutzer nicht unerwartet mit einer vollkommen überarbeiteten Darstellung zu konfrontieren.

Zwischengröße Tablet

Tablets und Netbooks stellen heute noch die Achillesferse des Systems dar. Zwar sind die Bildschirme häufig deutlich kleiner als die von stationären Monitoren, allerdings doch größer als die der meisten Smartphones. Ausgestattet mit einem mobilen Internetzugang werden diese nun mit Seiten für Smartphones beliefert, obwohl sie durchaus die Desktop-Variante darstellen könnten. Schon so mancher User ist daran verzweifelt, dass er unbeirrbar die Mobile-Version der Webseiten erhielt, trotzdem er wiederholt die Desktop-Variante aufrief. Wenn sich Warenkörbe und Links dann nicht an vergleichbaren Positionen befinden, kann dies schnell zum Abbruch führen. Die viel zitierte Customer Journey endet dann fatal – für alle Beteiligten. Ursache hierfür ist häufig die dynamische Bereitstellung von Webseiten, die den User-Agent bei jedem Zugriff neu ermitteln.

Der goldene Mittelweg

Klar im Vorteil sind einfach strukturierte Webauftritte, die nur wenig verlieren, wenn sie in ein mobiles Format überführt werden. Aspekte zu berücksichtigen, die zum Themenkreis Usability zählen, ist ebenfalls hilfreich. Hier sind in erster Linie Bilder und Grafiken zu nennen, die in der Auflösung dem kleineren Display anzupassen sind. Sie genügen damit auch den meist langsameren Datenverbindungen, die unterwegs verfügbar sind. Zu jedem Zeitpunkt muss der Nutzer frei entschieden können, ob er die Desktop- oder die Mobil-Variante sehen möchte. Wichtig: Hat er diese Entscheidung einmal getroffen, sollte an ihr auch im weiteren Verlauf festgehalten werden. Technisch scheint derzeit die sauberste Lösung in separaten URLs zu liegen. Im Gegensatz zur dynamischen Bereitstellung verbleibt der User hier innerhalb der Menüstruktur auf entsprechend zugeordneten Seiten. Eine vorangehende Untersuchung zu den am häufigsten genutzten Geräten kann helfen, die optimale Vorgehensweise zu ermitteln und die Weggestaltung darauf abzustellen.