Responsive Webdesign: Was ist das und was kann das?

Wireframe

In einer digitalisierten Welt mit ständig wachsenden technischen Fortschritt wollen Nutzer zu jeder Zeit, von jedem Ort und dem Endgerät ihrer Wahl aus, Webseiten aufrufen können. Dabei sollen diese auf Smartphones eine genauso gute Performance bieten wie auf einem Desktop Computer. Hier kommt Responsive Webdesign ins Spiel. “Responsivität” heißt übersetzt “Ansprechempfindlichkeit”, was bezogen auf die Webpräsenz bedeutet, dass die Webseiten, egal auf welchem Ausgabegerät sie aufgerufen werden, auf die Umgebung ansprechen und sich dem Benutzer so benutzerfreundlich und übersichtlich wie möglich präsentieren. Dieses Tool ermöglicht es also, Webseiten so zu programmieren, dass sie auf jedem Device mit derselben Qualität abgerufen werden können. Dies beinhaltet beispielsweise die Darstellung und Anordnung von Navigationselementen, Texten, Bildern und Seitenspalten.

Chancen von Responsive Webdesign

einmalige Entwicklung der Website für alle Ausgabegeräte
bessere Performance in den Google-Suchergebnissen, da längere Aufenthaltsdauer und niedrigere Absprungraten das Ranking verbessern
der Wiedererkennungswert ist für Nutzer viel höher, und Inhalte werden in der vom PC bekannten Navigationshierarchie viel schneller wieder gefunden
es wird dem Nutzer die Wahl gelassen, auf welchem Endgerät er die Website aufsuchen will

Flexiblen Darstellung mithilfe des Responsive Webdesigns

Das Responsive Webdesign, welches vor allem auf flexiblen Gestaltungsrastern und -elementen auf der Grundlage von Media Queries beruht, ist Teil der deutlich breiteren "Adaptive"- Philosophie bzw. -Strategie. Diese Strategie zielt nicht nur darauf ab, die Gestaltung endgerätspezifisch auszugeben, sondern auch, die Bedienung sowie Inhalte und Features in unterschiedlichen Varianten zu planen und auszuspielen.

Mit der Hilfe von Media Queries werden die speziellen Eigenschaften des Endgerätes, mit dem der Besucher die Webseite aufrufen will, abgefragt. Zu diesen analysierten Merkmalen gehört beispielsweise die Gerätegröße, die aktuelle Auflösung, die aktuelle Position des Ausgabegerätes (horizontal/ vertikal) oder wie breit und hoch das Browserfenster ist. Danach werden dann das Raster der Seite und schließlich auch Schriftgröße sowie Bilder in Breite und Höhe angepasst. Fluide Grids helfen dabei, das Design prozentual festzulegen und damit das Seitenraster jeweils im gewünschten Verhältnis an die Screengröße anzupassen. Außerdem können Breakpoints festgelegt werden, ab denen sich das Layout wesentlich ändert.

Mobile First im Responsive Webdesign

Mobile First ist ein Konzept zur Entwicklung von Webseiten mit Responsive Design. Dem Konzept folgend, sollten die kleinsten Screens, also zum Beispiel Smartphones, die Ausgangsbasis der Entwicklung von responsiven Layouts sein, um sicherstellen zu können, dass alle wichtigen Inhalte optimal dargestellt werden können. Allerdings ist dieses Konzept nicht immer die beste Herangehensweise. Im Fall von E-Commerce beispielsweise, ist es sinnvoller von beiden Extremen, also der größten und der kleinsten Auflösung, auszugehen.

User Experience fim Responsive Webdesign

Um eine optimale User Experience zu ermöglichen, müssen auch die Bedienelemente angepasst werden.. Bedienelemente und Steuermodule wie zum Beispiel zum Blättern von Fotos müssen angepasst werden, da vieles, was sich auf dem Desktop bequem mit der Mouse navigieren lässt, für den Touchscreen oft zu kleinteilig ist. Auch die Auszeichnung und Bedienung von Links muss dafür optimiert werden. Hoover-Effekte zum Beispiel sind für die Auszeichnung von Links am PC sinnvoll, doch für Ausgabegeräte mit Touchscreen unsichtbar. Ähnliches gilt für den Mouse-Over-Effekt, wie sie beispielsweise bei kontextsensitiven Hilfen oder Navigations-Layern vorkommen. Für solche Probleme sollten individuelle Alternativen, beispielsweise durch Menüs und Layer, die sich per Klick nicht über, sondern innerhalb des Contents in eigens dafür vorgesehenen Bereichen öffnen, implementiert werden. Außerdem sind gewisse Gesten auf dem Smartphone für Nutzer bereits zur Gewohnheit geworden, weshalb für eine optimale Nutzerführung auf diese zurückgegriffen werden sollte. Die optimale Bedienbarkeit einer Seite kann auch auf anderen Ebenen optimiert werden. Zum Beispiel, indem durch den Rückgriff auf kontextsensitive Keyboards die Eingabe bestimmter Daten optimiert wird. So kann bei der Eingabe einer Telefonnummer in ein dafür vorgesehenes Feld direkt das Nummern-Keyboard angezeigt werden.

Tipps für die Implementierung von Responsive Design

Bei der Implementierung einer responsive Website sollte auf eine grundlegende Ordnung geachtet werden. Im Besonderen bedeutet das entweder von klein nach groß (Mobil zu Desktop) oder von groß nach klein (Desktop zu Mobil). Handelt es sich um eine Neukonzeption, so bietet sich besonders der erste Punkt an. Denn dies würde im folgenden das Mobile First-Konzept unterstütze, wobei mobile Inhalte zuerst erstellt und auch geladen werden und die Website sich bei größeren Auflösungen erweitert. Soll eine bestehende Webseite responsive gemacht werden, ist oft die zweite Option die bessere Variante, da das Desktop Layout bereits besteht und man sich dann mit dem Styling von oben nach unten bewegen kann ohne die bestehende Arbeit zu gefährden. Vor allem ist aber immer darauf zu achten, dass die Media Queries absteigend beziehungsweise aufsteigend sortiert sind. Dies spart viel Zeit und Mühe bei der nächsten Verwendung des Codes. Google selbst empfiehlt Webmastern als Best Practice die Trennung von Inhalten und Gestaltung. Das bedeutet einen einheitlichen HTML-Code als Basis und das gegebenenfalls gerätespezifische Rendering der Inhalte über CSS3/ Media Queries.

Wie können Inhalte und Funktionen sinnvoll durch Responsive Webdesign angepasst werden

Bezüglich der Inhalte und Funktionen muss es auch auf keinen Fall nur bei einer reinen Darstellungsanpassung bleiben, auch wenn dies meist den ersten Schritt bei der Planung ausmacht. Durch die dem Raster geschuldete Umstrukturierung des Contents von der Breite in die Länge und die natürliche Beschränkung des Displays sinkt zunächst einmal die Menge des direkt sichtbaren Contents. Im folgenden muss entschieden werden, welche Inhalte auch auf kleinen Bildschirmen im Vordergrund stehen sollen, welche nach unten rutschen, welche eventuell erst per Klick (Blättern, Klappen,...) eingeblendet werden oder möglicherweise ganz wegfallen sollen.

Wir unterstützen Sie in der Optimierung Ihres Online-Shops

Wir sind der richtige Ansprechpartner zur nutzerorientierten Optimierung Ihrer Website oder Ihres Online-Shops. Als Web- und Usability-Experten entwickeln wir effiziente Produkte mit optimalem Nutzererlebnis. Wir bieten Ihnen für Ihr professionelles Projekt nachfolgende Leistungen:

Redaktion, 03.12.2019