Grundlagen des responsiven Webdesigns.

A laptop shows a website that implements responsive web design basics.

Wenn ihr eine Website, die auf einem Computer-Monitor tadellos lesbar ist und keinerlei Probleme bei der Navigation bereitet, auf einem Smartphone öffnet, sieht das Layout manchmal plötzlich völlig anders aus oder die Inhalte werden nicht korrekt angezeigt. Das ist ein Anzeichen dafür, dass die Website nicht für jede Plattform und jedes Gerät optimiert ist. Dies kann zu Benutzerfrustration und einem inkonsistenten – oder schlechten – digitalen Erlebnis führen.

Eine Website, die auf unterschiedlichen Geräten nicht korrekt dargestellt wird, schafft ein negatives Erlebnis für Benutzerinnen und Benutzer. Wenn ihr versteht, wie wichtig ein auf allen Plattformen konsistentes Erscheinungsbild eurer Website ist, erstellt ihr automatisch bessere Benutzererlebnisse.

Ob ihr zum Design-, Entwickler- oder Marketing-Team gehört oder in der Unternehmensführung arbeitet: Ihr wollt sicherstellen, dass euer Website-Content auf allen Plattformen effektiv ist. Bevor ihr responsives Webdesign auf eurer Website implementiert, benötigt ihr aber ein allgemeines Verständnis der Grundlagen.

In diesem Artikel erfahrt ihr, was responsives Webdesign ist, seht einige Beispiele, wie ihr eure Website responsiver machen könnt, und lernt einige Best Practices kennen.

Im Einzelnen behandeln wir folgende Themen:

Was ist responsives Webdesign?

Beim responsiven Webdesign werden die Plattform sowie die Bildschirmgröße und -ausrichtung der Benutzergeräte berücksichtigt, damit die Darstellung der Inhalte dynamisch angepasst werden kann. Responsive Web-Seiten haben auf vielen verschiedenen Geräten und Bildschirmgrößen eine konsistente Qualität. Eine responsive Website ist unabhängig vom Gerät, über das Verbraucherinnen und Verbraucher darauf zugreifen, optisch ansprechend, funktional und bedienbar.

Beim Erstellen einer Website mit responsivem Design stellen die Designerinnen und Designer sicher, dass alle Arten von Benutzerinnen und Benutzern, die darauf zugreifen und damit interagieren, ein hochwertiges Erlebnis haben. Durch responsives Webdesign werden Websites schneller, zugänglicher und einfacher zu bedienen, damit die Benutzerinnen und Benutzer die gewünschten Informationen finden und zum Verbleib auf der Website ermuntert werden. Dies kann zu mehr Interaktionen und Kaufabschlüssen führen.

Außerdem gibt es interne Vorteile. Da eine responsive Website dynamisch ist und für jedes Gerät dieselbe Code-Basis genutzt werden kann, sind auch Entwicklung und Pflege einfacher und schneller.

Da 60 % des gesamten Webtraffics auf Mobilgeräte entfallen, zu denen alles zwischen Smartphones und Tablets zählt, ist eine responsive Website unabdingbar für die Wettbewerbsfähigkeit und sollte für jedes Unternehmen höchste Priorität haben.

Was sind Breakpoints?

Ein Breakpoint im responsiven Webdesign ist ein Punkt, an dem sich der Content und das Design der Website auf eine bestimmte Art anpasst, damit das bestmögliche Benutzererlebnis bereitgestellt wird. Mit anderen Worten bestimmen Breakpoints, wie eine Website dargestellt wird. Typischerweise basieren sie auf der Breite des Browser-Fensters.

Manchmal wird der Content einer Website aufgrund verschiedener Bildschirmgrößen schwer lesbar. Dies lässt sich mit responsiven Breakpoints verbessern. Normalerweise gibt es Breakpoints für Mobilgeräte, Tablets und Laptop- oder Desktop-Computer, sie können aber für alle Benutzergeräte angepasst werden, damit ihr die bestmögliche Flexibilität erzielt.

60% of all web traffic comes from mobile devices.

Methoden für responsives Webdesign.

Ihr wisst jetzt, was unter responsivem Webdesign allgemein verstanden wird. Nun betrachten wir die gängigsten Methoden für das Design responsiver Websites.

Beispiele für responsives Webdesign.

Viele Unternehmen mit umfangreicher Web-Präsenz haben ihre Websites so aktualisiert, dass sie für verschiedene Benutzertypen und Geräte responsiver sind. Sehen wir uns ein paar Beispiele für responsives Webdesign an.

  1. Die New York Times.

The New York Times is an example of responsive web design.

2018 hat die New York Times die Geschwindigkeit und das Benutzererlebnis ihrer Website mit responsivem Webdesign verbessert. Durch das Update erzielte die Website höhere Konsistenz und ermöglichte Leserinnen und Lesern der digitalen Version den Zugriff auf allen Plattformen der Zeitung.

Nachdem die Mobile App nach dem Vorbild der Print-Ausgabe benutzerfreundlicher und optisch ansprechender gestaltet wurde, stellte die Times fest, dass das Desktop-Design nun hinterherhinkte. Daraufhin wurde das Webdesign für Leserinnen und Leser auf Laptops und Desktops verbessert, sodass deren Erlebnisse nun eine ähnliche Qualität haben wie die der Leserschaft der Mobile-App- oder gar der Print-Version.

  1. Dropbox.

Dropbox is an example of responsive web design.

Der beliebte Datei-Hosting- und Cloud-Speicher-Service hat seine Website ebenfalls für bessere Erlebnisse auf Mobilgeräten überarbeitet und angepasst. Beim Vergleich der beiden Layouts wird deutlich, dass die Desktop-Version (links) der Version für Mobile Apps (rechts) sehr ähnlich ist. Allerdings unterscheiden sich einige Rasterfarben und Schriftarten, damit die Seite gut lesbar bleibt.

  1. Etsy.

Etsy is an example of responsive web design.

Auf der Website von Etsy wird deutlich, wie das Unternehmen das Format, die Schriftarten und die Menüoptionen an verschiedene Arten und Größen von Bildschirmen anpasst. Die Versionen für Tablets und Desktops haben ein ähnliches Layout, die einzigen Unterschiede sind die Optionen in der Kopfzeile und ein leicht angepasstes Design, wodurch gerätespezifisch abweichenden Benutzerabsichten Rechnung getragen wird. Wenn ihr diese Versionen aber mit der Anzeige der Etsy-Website auf Mobilgeräten vergleicht, stellt ihr fest, dass die Navigationsleiste entfernt wurde, um den Bildschirm nicht zu überfrachten.

Auf Mobilgeräten priorisiert Etsy eindeutig die Personalisierung und führt die Kundschaft schnell zum Ziel – den Produkten.

  1. GitHub.

GitHub is an example of responsive web design.

Diese Website zeigt, worauf es für Unternehmen ankommt, wenn sie ihre Ziele bezüglich Geschäftsabschlüssen und Conversions erreichen möchten. Zu den ersten Elementen, die Besucherinnen und Besucher der Website auf Desktops sehen, zählen Produktangebote und ein Formular, mit dem sie sich bei GitHub registrieren können.

Auf Mobilgeräten ist die Seite zur Registrierung/Anmeldung noch prominenter, ohne den zusätzlichen Content und mit Elementen in größerer Auflösung.

  1. Slack.

Slack is an example of responsive web design.

Slack gruppiert seine Website-Optionen für Mobilgeräte und Tablets in einem Hamburger-Menü, wogegen die Desktop-Version eine Navigationsleiste oben im Bildschirm aufweist. Außerdem werden auf Mobilgeräten weniger CTAs angezeigt. Die beiden CTAs oben in der Desktop-Anzeige werden durch eine große Schaltfläche ersetzt, die auf der Anzeige für Mobilgeräte und Tablets fast die gesamte Bildschirmbreite einnimmt.

Außerdem ist der Content der Web-Seite in der Mobilversion vertikal auf eine Spalte komprimiert und die Textabsätze befinden sich über und unter den Grafiken.

  1. Starbucks.

Starbucks is an example of responsive web design.

Starbucks verdeutlicht, wie ein einfaches und beeindruckendes responsives Webdesign im Optimalfall aussehen kann. Auf spezielle Bewegungsparallaxen-Effekte wird verzichtet, aber die farbenfrohen statischen Abbildungen saisonaler Produkte funktionieren hervorragend.

Ein Problem ist allerdings, dass die Menü-Option, die auf Desktops tatsächlich ein Produkt-„Menü“ ist, auf ein allgemeines Hamburger-Menü reduziert wird, wenn das Design verkleinert wird. Dies könnte verwirrend für Personen sein, die beim Öffnen des Hamburger-Menüs nicht damit rechnen, dass sich dahinter Speisen und Getränke verbergen.

Best Practices für responsives Webdesign.

Ihr wisst jetzt, was responsives Webdesign ist, und habt einige anschauliche Beispiele kennengelernt. Im Folgenden stellen wir euch einige Best Practices vor.

Content priorisieren.

Sorgt dafür, dass Benutzerinnen und Benutzer die gewünschten Inhalte mit so wenig Scrolling- oder Browsing-Aufwand wie möglich finden. Auch wenn die Anzeige von Website-Informationen auf einem Desktop wenig Scrolling erfordert, können dieselben Informationen auf einem Mobilgerät zu einem negativen Benutzererlebnis führen, wenn der Content zu lang ist oder die Schriftarten und Grafiken nicht an die geringere Bildschirmgröße angepasst werden.

Erstellt Content, der in den vorgesehenen Anzeigebereich passt, damit Verbraucherinnen und Verbraucher die gewünschten Informationen mühelos finden können.

Reibungen reduzieren.

Denkt an den Hauptzweck der Seite und erstellt das Design entsprechend, statt beispielsweise möglichst viele CTAs unterbringen zu wollen. Ihr müsst eure Seite für jede Version der Website maßschneidern. Wenn ihr euch zunächst auf die Mobilversion konzentriert, erkennt ihr schon beim Design, was unbedingt auf der Website enthalten sein muss, damit das wichtigste Unternehmensziel erreicht werden kann. Ein wichtiges Ziel könnte der Kauf eines Produkts oder einer Dienstleistung sein.

Wenn ihr später die Versionen für Tablets und Desktops erstellt, könnt ihr sekundäre Ziele berücksichtigen, zum Beispiel die Anmeldung für einen Newsletter, die zu einem späteren Kauf führen könnte, und euch überlegen, welche CTAs und Mikro-Interaktionen dafür hilfreich sind. Das Wichtigste ist, dass ihr euch zunächst auf die wesentlichen Ziele der Benutzerinnen und Benutzer konzentriert und sämtliche unnötigen Reibungspunkte ausschaltet, die für eure primären oder sekundären Ziele nicht förderlich sind.

Daumenfreundlich bleiben.

Stellt sicher, dass die wichtigen Elemente der Seite für eine Person, die ihr Mobiltelefon verwendet, mit dem Daumen leicht erreichbar sind. Der Hauptunterschied zwischen Benutzerinnen und Benutzern von Desktops und Mobilgeräten besteht darin, dass bei ersteren die Computer normalerweise auf einer Oberfläche abgestellt sind, während letztere ihre Geräte in der Hand halten.

Dies beeinflusst erheblich die Art und Weise, wie Web-Designerinnen und -Designer Tipp-Ziele und andere Elemente erstellen, mit denen Personen interagieren. Beispielsweise erwarten die Menschen auf Desktops normalerweise, dass sich die Hauptnavigation oben befindet. Auf Mobilgeräten sollte sie aber in der Mitte oder unten sein, da der obere Bildschirmbereich mit dem Daumen nur schwierig zu erreichen ist.

Gemeinsam designen und entwickeln.

Denkt daran, dass es beim responsiven Webdesign darum geht, dass Design und Entwicklung an das Verhalten und die Umgebung der Benutzerinnen und Benutzer angepasst werden. Daher ist es wichtig, dass beides effektiv Hand in Hand geht. Design- und Entwicklungs-Teams legen in Zusammenarbeit fest, wie der Content angeordnet und wie das Endergebnis aussehen soll.

Wenn ihr Design und Entwicklung gemeinsam durchführt, könnt ihr die Lesbarkeit optimieren, die Verweildauer auf der Website erhöhen, die Interaktion vertiefen, E-Commerce-Absätze steigern und das Benutzererlebnis insgesamt verbessern.

Damit ihr responsives Webdesign in die Praxis umsetzen könnt, müsst ihr zunächst Informationen sammeln, die Struktur organisieren und das gewünschte Erscheinungsbild der Website designen. Anschließend könnt ihr eine Betaversion eurer Website veröffentlichen und testen.

Strukturiert arbeiten.

Responsivität muss fest in eure Prozesse und Systeme integriert sein und darf nicht nur bei einzelnen Web-Seiten oder einer bestimmten Marketing-Kampagne eine Rolle spielen. Webdesignerinnen und -designer sollten sich auf der Komponentenebene auf Responsivität und Funktionalität fokussieren.

Statt über eine ganze Produktseite nachzudenken, solltet ihr darauf achten, wie ihr das Marquee-Element auf einer Produktseite responsiv gestalten könnt. Denkt über die Karten, Karussells und CTAs nach. Überlegt, was jede Komponente benötigt, damit sie in verschiedenen Anzeigebreiten und Auflösungen ansprechend aussieht. Wenn dann das Designteam den Auftrag zur Seitenentwicklung erhält, hat es die Komponenten bereits vorliegen und kann sich auf bestimmte Seiteninhalte konzentrieren, um das Benutzererlebnis zu perfektionieren.

Testen, testen, testen.

Regelmäßige Benutzerfreundlichkeitstests auf allen Plattformen sind unabdingbar. Testet die Navigation auf der Website. Wenn sich das Gerät ändert, sollte sich auch die Navigationsleiste ändern. Die Designs der Navigation müssen auf verschiedenen Bildschirmen getestet werden, damit ihr eine Beeinträchtigung des Benutzererlebnisses ausschließen könnt.

Ihr könnt auch Schriftarten auf mehreren Geräten testen. Vielleicht möchtet ihr für die Textinhalte eurer Website unterschiedliche Schriftarten und Design-Methoden verwenden. Allerdings werden möglicherweise nicht alle Schriftarten auf allen Geräten unterstützt, was dazu führen kann, dass sie auf bestimmten Verbrauchergeräten als beliebige Zeichen oder Codes angezeigt werden. Vergesst nicht, alle Schriftarten auf mehreren Geräten zu testen, bevor ihr ein Update eurer Website veröffentlicht.

Testet auch unbedingt verschiedene Geräte-Browser-Kombinationen. Ihr könnt euch die Zahlen von Google Analytics für Web-Traffic und mobilen Traffic ansehen und die Browser in die Tests aufnehmen, die am häufigsten von Personen genutzt werden, die eure Website besuchen. Testet schließlich die Geschwindigkeit eurer Website. Berücksichtigt die Ladezeiten verschiedener Inhaltskomponenten wie Grafiken und Videos auf verschiedenen Geräten.

Durch responsives Webdesign werden Websites schneller, zugänglicher und einfacher zu bedienen, damit Benutzerinnen und Benutzer die gewünschten Informationen finden und zum Verbleib auf der Website ermuntert werden. Dies kann zu mehr Interaktionen und Kaufabschlüssen führen.

Erstellung eigener responsiver Websites.

Die Gewährleistung der effektiven Darstellung eurer Website auf unterschiedlichen Geräten und Plattformen ist ein entscheidender Schritt auf dem Weg zu großartigen Erlebnissen für eure Besucherinnen und Besucher.

Wenn ihr bereit seid, mit der Implementierung des responsiven Webdesigns zu beginnen, seht euch einen Abschnitt eurer Website an, den ihr neu gestalten möchtet. Entscheidet, was der primäre Zweck der Seite sein soll, und denkt dann über das entsprechende Design nach, mit dem ihr dieses Ziel erreichen könnt.

Adobe Experience Manager Sites lässt euch mühelos Web-Seiten erstellen, die sich an nahezu alle Geräte anpassen. So könnt ihr euch darauf verlassen, dass ihr euren Benutzerinnen und Benutzer stets das optimale Erlebnis bereitstellt.

Wenn ihr erfahren möchtet, wie Experience Manager Sites euch bei der Erstellung responsiver Websites unterstützen kann, seht euch das Einführungsvideo an oder registriert euch für eine Produkttour.