Die Einführung der Smartphones bedeutete eine Revolution für die Welt des Webdesigns. Plötzlich wollte jeder zu den Ersten gehören, die Websites mit responsive Webdesign entwickelten. Es wirkte fast wie Zauberei: Veränderte man die Größe des Browserfensters, passte sich die gesamte Website automatisch an die neue Auflösung an – inklusive der Seitenstruktur.
Wenn wir das damals unseren Kunden präsentierten, waren sie – so ungewöhnlich das heute klingt – meist völlig beeindruckt. Das ist noch gar nicht so lange her, doch inzwischen ist diese Technologie längst zum Standard geworden.
Trotzdem gibt es im Bereich responsive Webdesign noch viel zu tun. Es reicht nicht aus, einfach ein CSS-Framework wie Bootstrap zu verwenden und zu erwarten, dass damit alles erledigt ist. Wer eine echte Verbindung zum Endnutzer herstellen möchte, muss ihm eine User Experience bieten, die auf sein Gerät zugeschnitten ist. Dazu gehört, zu verstehen, wie der Nutzer mit seinem Gerät interagiert – und welche Erwartungen er an die Navigation hat.
Am Desktop steht die Maus als zentrales Navigationselement im Fokus. Surft der Nutzer hingegen mit dem Smartphone, muss das Webdesign auf Touch-Bedienung ausgelegt sein und entsprechende Bedienhilfen bieten.
Schlüssel für ein gelungenes Responsive Webdesign
Navigationsmenü
Das Navigationsmenü sollte für den Nutzer intuitiv und einfach zu bedienen sein. Das gelingt zum Beispiel mit einem Button, der das Menü ein- oder ausklappt – seitlich oder nach unten. So bleibt die Seite übersichtlich und der Platz optimal genutzt.
Anpassungsfähige und stimmige Bilder
Alle Bilder im Design müssen flexibel skalierbar sein. Sie sollten sowohl auf einem 27″-Monitor als auch auf einem iPhone optimal dargestellt werden.
Neben der reinen Skalierbarkeit ist vor allem die Kohärenz der Proportionen entscheidend – ein Aspekt, der oft übersehen wird. Die Bilder sollten zur Ausrichtung des Geräts passen. Wird beispielsweise auf der Desktop-Version ein sehr breites Panorama-Bild verwendet, erscheint dieses auf dem Smartphone oft nur als schmaler Streifen über die gesamte Breite – was meist wenig Sinn ergibt.
Die beste Lösung ist daher, ein mittleres Format zu wählen oder für Smartphones alternative Bildversionen bereitzustellen.
Struktur und Hierarchie
Die Reihenfolge der einzelnen Bereiche auf der Website ist entscheidend. Da auf Smartphones die Inhalte meist untereinander in einer Spalte angeordnet werden, sollte man die Reihenfolge der Abschnitte gezielt planen und die wichtigsten Elemente möglichst weit oben platzieren.
Weniger ist mehr
Gerade auf kleinen Bildschirmen empfiehlt es sich, unwichtige Bereiche für mobile Nutzer auszublenden. Typische Fußzeilen können beispielsweise komplett entfernt werden – oder man beschränkt sich auf eine schlichte Zeile mit den wichtigsten Kontaktdaten.
Alle verfügbaren Funktionen nutzen
Wer die mobile Nutzererfahrung optimieren möchte, sollte alle spezifischen Features von Smartphones einbeziehen. Wird auf der Desktop-Version etwa eine Anfahrtskarte angezeigt, kann auf dem Smartphone ein Button zum Öffnen der Navigation im GPS integriert werden. Ebenso lassen sich Direktwahl-Buttons für Anrufe einbauen, um dem Nutzer den Kontakt zu erleichtern.
Weitere interessante Fakten
Aktuelle Statistiken zeigen: Mehr Nutzer besuchen Websites über mobile Endgeräte als über den Desktop. Die Zahlen sprechen für sich: 51 % der Besucher kommen über mobile Geräte, 42 % über Desktop und die restlichen 7 % nutzen andere Geräte.
- 51 % der Besucher über mobile Geräte
- 42 % der Besucher über Desktop
- 7 % nutzen andere Geräte
