Jetzt, da ihr wisst, was responsives Webdesign ist und Beispiele gesehen habt, schauen wir uns die wichtigsten Best Practices an.
Content priorisieren.
Stellt sicher, dass eure Benutzenden den gewünschten Content finden können – mit möglichst wenig scrollen oder suchen. Auch wenn die Ansicht von Website-Informationen auf dem Desktop weniger scrollen erfordert, kann die Ansicht derselben Informationen auf einem Mobilgerät zu einem schlechten Anwendererlebnis führen, wenn der Content umfangreich ist und Schriftarten oder Grafiken nicht an die Bildschirmgröße angepasst werden.
Denkt daran, Content zu erstellen, der in den angegebenen Sichtbereich passt, damit eure Verbrauchenden die gesuchten Informationen leicht finden können.
Reibung reduzieren.
Startet, indem ihr das Hauptziel der Seite identifiziert und sie mit diesem Zweck im Sinn gestaltet. Vermeidet es, eure Benutzenden mit zu vielen CTAs zu überfordern. Ihr müsst jede Version eurer Website an die Bedürfnisse der Benutzerinnen und Benutzer anpassen. Ein Mobile-First-Design-Ansatz hilft Designern zu erkennen und zu entscheiden, was unbedingt auf die Website gehört, damit das Hauptziel der Firma erreicht wird. Ein Beispiel für ein Hauptziel könnte der Kauf eines Produkts oder einer Dienstleistung sein.
Wenn es an der Zeit ist, die Tablet- und Desktop-Versionen der Website aufzubauen, könnt ihr anfangen, über sekundäre Ziele nachzudenken. Dazu gehört, dass ihr Prompts zur Anmeldung für einen Newsletter hinzufügt, um spätere Käufe zu fördern – und entscheidet, welche CTAs und Mikrointeraktionen das ermöglichen. Das Wichtigste ist, dass ihr euch zuerst auf die primären Ziele der Benutzenden konzentriert und dann alle unnötige Reibung ausschaltet, die weder den primären noch den sekundären Zielen dient.
An eure Daumen denken.
Stellt sicher, dass die wichtigen Elemente der Seite auf dem Handy bequem mit dem Daumen erreicht werden können. Der wichtigste Unterschied zwischen Desktop-Benutzenden und Mobile-Benutzenden ist, dass erstere ihren Computer typischerweise auf einer Oberfläche stehen haben, während letztere ihr Device in der Hand halten.
Das verändert erheblich, wie Webdesigner Tippziele und andere Elemente gestalten, mit denen Benutzende interagieren. Beispielsweise erwarten die Menschen auf Desktops normalerweise, dass sich die Hauptnavigation oben befindet. Aber auf Mobile sollte die Navigation in der Mitte oder unten sein, weil ihr sie oben mit dem Daumen nicht gut erreichen könnt.
Gemeinsam gestalten und und entwickeln.
Denkt daran, dass responsives Webdesign ein Ansatz ist, der darauf ausgelegt ist, dass sowohl Design als auch Entwicklung auf das Verhalten und die Umgebung der Benutzenden reagieren – deshalb ist es wichtig, dass sie effektiv zusammenarbeiten. Design und Entwicklung stimmen sich ab, um herauszufinden, wie die Inhalte angeordnet werden und wie das Ergebnis aussehen soll.
Indem ihr gemeinsam designt und entwickelt, könnt ihr:
- Lesbarkeit verbessern.
- Verweildauer auf der Website erhöhen.
- Interaktionen verbessern.
- E-Commerce-Umsatz verbessern.
- Anwendererlebnis insgesamt verbessern.
Um responsives Webdesign praktisch anzuwenden, startet ihr damit, Informationen zu sammeln, die Struktur zu organisieren und das Aussehen der Website zu entwerfen. Dann könnt ihr eine Beta-Version eurer Website testen und starten.
Dem Ganzen Struktur geben.
Responsivität muss in eure Prozesse und Systeme eingebaut werden, nicht nur in eine Web-Seite oder eine bestimmte Marketing-Kampagne. Webdesignerinnen und -designer sollten ihren Fokus auf Responsivität und Funktionalität auf Komponentenebene legen.
Statt über eine ganze Produktseite nachzudenken, überlegt euch, wie der Marquee auf einer Produktseite responsiv umgesetzt wird. Denkt an Karten bzw. Vignetten, Karussells und Handlungsaufrufe (CTAs). Überlegt euch, was nötig ist, damit jede Komponente in verschiedenen Viewport-Größen und Bildschirmauflösungen zur Geltung kommt. Wenn dann eure Design-Teams Anfragen zur Seitenerstellung erhalten, haben sie die bereiten Komponenten schon parat und können den Fokus auf den spezifischen Seiten-Content legen, um das Anwendererlebnis abzurunden.
Regelmäßig testen.
Es ist entscheidend, regelmäßig Usability-Tests auf verschiedenen Plattformen durchzuführen. Testet die Navigation auf der Website. Wenn sich das Gerät ändert, sollte sich auch die Navigationsleiste ändern. Ihr müsst die Tests der Navigation-Designs auf verschiedenen Screens durchführen und sicherstellen, dass dies nicht zu einem schlechten Anwendererlebnis führt.
Ihr könnt auch Schriftarten auf mehreren Geräten testen. Vielleicht möchtet ihr für den Content eurer Website unterschiedliche Schriftarten und Designmethoden verwenden. Allerdings werden diese Schriftarten möglicherweise nicht überall unterstützt, sodass sie auf dem Gerät einer Verbraucherin oder eines Verbrauchers als zufällige Zeichen oder Codes angezeigt werden. Vergesst nicht, die Schriftarten auf mehreren Geräten zu testen, bevor ihr die Aktualisierung auf eurer Website startet.
Testet unbedingt Geräte-Browser-Kombinationen. Ihr könnt die Web- und Mobile-Traffic-Daten aus Google Analytics analysieren und die Browser, die am häufigsten für den Besuch eurer Website verwendet werden, in eure Tests aufnehmen. Abschließend testet die Geschwindigkeit eurer Website, indem ihr die Ladezeiten verschiedener Inhalte wie Bilder und Videos auf unterschiedlichen Devices, berücksichtigt.
