Responsive Webdesign für die Usability-Optimierung

Steigern Sie Ihren Umsatz durch Responsive Webdesign und schaffen Sie eine Website, die auf allen internetfähigen Geräten optimal dargestellt wird und durch Benutzerfreundlichkeit auf allen Geräten punktet!

Was ist Responsive Webdesign?

Responsive Webdesign bedeutet im übertragenen Sinne „reagierendes Webdesign“ und ermöglicht es Websites dynamisch auf die Bildschirmgröße des Endgerätes, mit dem der Nutzer surft, anzupassen. Inhalte einer Website können einheitlich auf unterschiedlichen Endgeräten dargestellt werden, indem das Layout der Website flexibel gestaltet wird. Durch Responsive Design wird eine gleichbleibende Benutzerfreundlichkeit über alle Endgeräte hinweg geschaffen. Ziel dabei ist es, dass sich der Nutzer auf allen Geräten zurecht findet, ohne dabei den Aufbau, das Navigationssystem und das Content-Schema neu erlernen zu müssen.

Warum das Responsive Design wichtig ist

Laut einer Studie von Statista wir das Internet zunehmend über Smartphones und Tablets genutzt:Zudem wächst die Produktpalette der auf dem Markt erhältlichen internetfähigen Geräte und damit auch die Anzahl unterschiedlicher Bildschirmauflösungen.Da sich die übliche Gestaltung einer Website an Computerbildschirmen orientiert und diese Darstellung nicht für kleinere Bildschirme wie Tablets oder Smartphones geeignet ist – überfüllte Seiten, ständiges Zoomen und folglich eine schlechte Usability – müssten Sie mehrere Varianten Ihrer Website entwickeln. Bedienbarkeit, Schnelligkeit und die Aufbereitung der Inhalte bestimmen heutzutage nämlich den Erfolg von Webseiten.Durch das Responsive Webdesign können Sie diese aufwendigen Arbeiten verhindern, denn es bietet Ihnen die Möglichkeit, Ihre Seite für alle Ausgabegeräte automatisch optimieren zu lassen. Durch den Einsatz von responsive Webdesign vermeiden Sie folglich Absprungraten, unzufriedene Kunden und Verluste bei der Conversion, da die mangelnde User Experience von gängigen Websites auf kleineren Displays verhindert wird.

Exkurs: statisches und adaptives Layout als Abgrenzung

Um die Bedeutung des responsive Designs zu verdeutlichen werden im Folgenden kurz das statische und das adaptive Layout in Abgrenzung zum responsive Layout erläutert.

Statisches Layout

Das statische Layout ist ein fixes Layout, welches eine voreingestellte Seitengröße verwendet. Die Inhalte werden demnach nicht an Bildschirme mit anderen Größen angepasst, weshalb es passieren kann, dass Inhalte abgeschnitten oder schlecht lesbar dargestellt werden. Aufgrund der Gerätevielfalt ist ein solches Design veraltet und sollte vermieden werden.

Adaptives Layout

Adaptiv steht für anpassungsfähig, weshalb das adaptive Layout oft mit dem responsive Layout verwechselt wird. Beim adaptiven Layout wird ein Web-Layout für verschieden Displaygrößen optimiert. Hierbei werden jedoch nicht alle Größen berücksichtig sondern lediglich Layouts für exakte Viewports (Ansichten) entwickelt – üblicherweise sind das eine Desktop-Ansicht, eine Tablet-Ansicht und eine Smatphone-Ansicht mit den Abmessungen der gängigsten Geräte, wie IPad und IPhone. Der Kern des adaptiven Layouts ist ein starres Gestaltungsraster und demnach als „fixed“ zu betrachten.

Abgrenzung zum Responsive Layout

Responsive Webseiten sind flexibel, da sie flexible Gestaltungsraster verwenden. Ohne feste Viewports zu definieren, wird der zur Verfügung stehende Platz eines Bildschirmes optimal ausgenutzt, sodass Inhalte an die jeweiligen Größen angepasst werden und nicht abgeschnitten werden bzw. Platz nicht unnötig verschwendet wird.

Usability-optimierung für das Responsive Design

Wie anfangs erwähnt sorgt das responsive Design für eine gleichbleibende Nutzerfreundlichkeit über alle Endgeräte hinweg. Dennoch gibt es einige Punkte, die es für die Usability zu beachten gilt:

Corporate Design

Um den Wiedererkennungswert zu erhalten, sollte natürlich auf ein durchgängiges Design geachtet werden. Nicht nur Logo und Schriftart sind wichtig. Besonders interaktive Schaltflächen sollten vom Kunden als solche wiedererkannt werden damit diese intuitiv genutzt werden.

Navigationssystem

Aufgrund der unterschiedlichen Platzverhältnisse der einzelnen Endgeräte ist es schwierig ein Navigationssystem zu erstellen, welches für alle Bildschirmgrößen einheitlich ist. Hierbei sollte mehr Wert auf eine identische Benennung der Navigation und einheitliche Kategorien gelegt werden, damit sich der Kunde auf jedem Gerät Zurecht findet und die Struktur nicht erneut erlernen muss.

Content und Funktion

Für eine gute Usability sollten Sie Ihre Funktionen und Inhalte, die Sie auf ihrer Desktop-Ansicht anbieten, auf allen Viewports zur Verfügung stellen. Auch wenn Nutzer über ein Smartphone Ihre Website besuchen möchten Sie vollen Zugriff auf Content und Funktion haben. Natürlich können Funktionen und Inhalte auf den verschiedenen Endgeräten unterschiedlich angeordnet sein. Hierbei muss besonders auf die Priorisierung der Seiteninhalte geachtet werden. Da auf Smartphones Seiteninhalte nicht so dargestellt werden können wie in Desktop-Ansichten, sollten Sie eine sinnvolle Hierarchisierung Ihrer Seiteninhalte vornehmen, um die wirklich relevanten Inhalte hervorzuheben und weniger wichtige Inhalte für den Conversion-Prozess in den Hintergrund zu stellen.

Struktur

Um die Websitestruktur auch auf kleinen Viewports benutzerfreundlich darzustellen, bietet es sich an Verschachtelungen aufzulösen und auf mehrere Seiten zu verteilen. Möchte man Verschachtelungen nicht auf mehrere Seiten aufteilen, sollte man Akkordeons oder Reiter auf kleinen Viewports verwenden, um viele Inhalte strukturiert auf kleinem Raum darstellen zu können und die Verschachtelungen zu verdeutlichen.

Texteingabefelder

Besonders für kleine Viewports sollten lange Texteingabefelder wie Kontaktformulare vermieden werden, da diese beispielsweise auf dem Smartphone mit dem Daumen ausgefüllt werden müssen, was zeitintensiv, unkomfortabel und benutzerunfreundlich ist.

Die Bedeutung des Responsive Designs für die SEO

Das Responsive Webdesign wird von Google unterstützt, da es nutzerfreundlich ist und nur eine URL verwendet, bei der immer der gleiche HTML-Code gesendet wird. Dementsprechend wird Duplicate Content vermieden und Google die Indexierung Ihrer Inhalte erleichtert. Dies kommt auch der Suchmaschinenoptimierung zugute, da es für ein besseres Ranking in den Suchergebnissen sorgt. Zusätzlich wird Ihre Website bei der mobilen Suche besser bewertet, da ihre Website durch das Responsive Design mobiloptimiert ist. Durch die angepassten Inhalte für jedes Endgerät steigt die User-Experience von Nutzern, die Verweildauer wird gesteigert und die Bounce-Rate (Absprungrate) gesenkt, was sich ebenfalls positiv auf Ihr Ranking auswirkt.Zurück zum Online Marketing Ratgeber