Usability/UX Basics: Responsive Design

Websites werden von den Usern über eine Vielzahl verschiedener Endgeräte mit diversen technischen Möglichkeiten angesteuert. Aufgrund dieser unterschiedlichen Anforderungen, welche die Endgeräte stellen, sowie Rahmenbedingungen der Nutzung stellt sich die Frage wie Inhalte so strukturiert werden können, dass sie für jeden Nutzer optimal dargestellt werden. Genau dieses Problem löst seit den frühen 2010er Jahren das responsive Design.


Wer sein Webangebot responsive designt, versucht seinen Content so aufzubauen und strukturieren, dass die Darstellung sich automatisch an das verwendete Endgerät und die Situation des Nutzers anpasst. Die offensichtlichste zu beachtende Einschränkung ist dabei die Größe des Browserfensters. Während klassische (Print-) Medien wie Zeitschriften oder Poster eine feste Größe haben, für welche Struktur und Darstellung der Inhalte optimiert werden müssen, gilt es im Hinblick auf moderne Endgeräte, sich flexibel anzupassen.

Betroffene Elemente

Die größten Faktoren, welche verschiedene Endgeräte unterscheiden sind die Größe des Displays sowie der Modus der Eingabe und Interaktion. Der Platz, welche zur Darstellung der Website zur Verfügung steht, beeinflusst sowohl die Anordung der Elemente auf einer Seite, als auch verwendete Schriftgrößen und die Frage, ob bestimmte Elemente auch bei sehr kleiner Darstellung angezeigt werden sollen.


Für die ideale Lesbarkeit von Inhalten gibt es verschiedene Konventionen. Beispielsweise ist es üblich, Zeilen nicht breiter als ca. 60 Zeichen laufen zu lassen. Aus diesem Grund werden Websites oft in mehrere Spalten eingeteilt. In der Desktop-Ansicht liegen mehrere solche Spalten nebeneinander. Mit schmaler werdender Anzeige rutschen sie immer weiter untereinander. Verwendet eine responsive gestaltete Website in der Desktop-Version vier Spalten nebeneinander, werden auf einem Tablet vermutlich noch zwei Spalten nebeneinander angezeigt und auf einem Smartphone liegen die Spalten komplett untereinander.


Neben der Anordnung der Container mit Inhalt muss auch die Verwendung von Bildern, Videos und Navigationselementen überdacht werden. Einige Formen der Navigation – wie z.B. Mega Menüs – eignen sich nicht für die Anzeige auf kleinen Bildschirmen. Auch die Navigation über Sidebars ist problematisch, da es kleinen Displays von vornherein an Breite fehlt. Solche Elemente sollten wenn möglich versteckt und wenn nötig durch den User aktiviert werden.



Die Verwendung von Bildern und Videos muss aus einem anderen Grund überdacht werden: wird eine Website über ein mobiles Endgerät aufgerufen, ist davon auszugehen, dass der User sich nicht zuhause befindet und deshalb auch die Internetverbindung eingeschränkt ist. Auf langsam ladende Bilder oder Videos sollte also wenn möglich verzichtet werden. Schließlich werden Smartphones und Tablets per Touch Eingabe bedient, was die Gestaltung der Interaktionselemente natürlich auch beeinflusst. Hover Effekte oder Menüs, die sich per Mouse-Over erweitern, funktionieren per Touch nicht. Außerdem müssen alle Schaltflächen ausreichend groß sein, um mit dem Finger ausgewählt werden zu können und weit genug voneinander entfernt sein, dass der User nicht versehentlich zwei Elemente auf einmal auswählt.

Übliche Konventionen des responsive Designs

In den vergangenen Jahren haben sich einige Daumenregeln entwickelt, an welche die meisten responsive gestalteten Websites sich halten:

• Wird das Fenster, in welchem die Website angezeigt wird, schmaler, werden Inhaltsblöcke nicht mehr nebeneinander, sondern untereinander dargestellt.


• Bilder sollten so skaliert werden, dass sie an die Größe der Anzeige angepasst sind, niemals aber über ihre ursprünglichen Maße hinaus.


• Bei der Anzeige auf Smartphones sollte auf Bilder als Hintergrund für anderen Content (wie z.B. Text) verzichtet werden.


• Vertikale Menüs sollten eingeklappt (“Hamburger-Menü”) oder umpositioniert werden.


• Die Schriftgröße des Textes sollte mit schrumpfender Anzeigegröße nicht oder nicht zu weit verringert werden, um gute Lesbarkeit zu gewährleisten.


• Vertikales Scrollen ist auf jeden Fall zu vermeiden.

Abgrenzung zu verwandten Bereichen

Responsive Design passt sich flexibel an jede Größe des Anzeigefensters an, bleibt also immer reaktionsfähig. Dabei wird eine Version der Website erstellt, welche sich automatisch an die Größe der Ausgabe sowie das verwendete Endgerät anpasst. Andere Ansätze mit unterschiedlichen Endgeräten und Displaygrößen umzugehen sind:

• Adaptive Design: im Gegensatz zu responsive Design, welches sich wirklich an jede Größe des Browserfensters anpasst, werden beim adaptive Design mehrere Breakpoints definiert, an welche sich die Darstellung der Website ändert. Für eine Website werden also beispielsweise drei Layout-Versionen erstellt und fest definiert, aber welcher Anzeigebreite welche Version dargestellt wird. Zwischen diesen Breakpoints bleibt das Layout unverändert.


• Liquid Design: beim Liquid Design wird definiert, welcher Teil des Contents welchen Anteil der Breite der Anzeige einnimmt. Der prozentuale Anteil, den ein Element einnimmt ist also unabhängig von der Breite der Anzeige immer gleich. Das bedeutet, dass die einzelnen Elemente umso schmaler werden, je schmaler das Browserfenster wird. Im Zweifelsfall kann es also passieren, dass in einem Inhaltsblock auf einem schmalen Display nur noch ein Wort steht.


• Mobile Website: ursprünglich wurde die Frage nach der Darstellung von Websites auf mobilen Endgeräten über das Erstellen mobiler Versionen von Websites gelöst. Dieser Lösungsansatz verweist mobile Endgeräte, welche versuchen auf die Website zuzugreifen, an eine komplett eigenständige Version der Website. Diese läuft in der Regel über eine eigene Subdomain (etwa m.beispiel.de).

Responsive Design ist im Prinzip eine Mischform aus adaptivem und liquidem Design. Einerseits ist die Breite der Elementen relativ definiert und passt sich an jede Fensterbreite an, andererseits gibt es bestimmte Breakpoints, an welchen sich das Layout der Website ändert. Mobile Websites als Lösung zu nutzen ist heutzutage eher unüblich, da die beiden Versionen und deren Content komplett getrennt voneinander betreut werden müssen. Auch im Bezug auf die Search Engine Optimization (SEO) sind mobile Versionen auf einer eigenen Subdomain nicht ratsam.

Mobile first?

Soll eine Website erstellt oder von Grund auf erneuert werden, stellt sich trotz responsive Design die Frage, auf welchem Endgerät das Hauptaugenmerk beim Design liegen soll. Der Mobile First Ansatz (oder Progressive Enhancement) ist hier weit verbreitet. Einerseits aufgrund der stetig steigenden Zahlen von Zugriffen über Smartphones, andererseits ist die Annahme, dass es einfacher ist, zuerst für leistungsschwache Browser und kleine Displays zu optimieren und die Website nachträglich anzureichern, als anders herum.


Während diese Daumenregel generell sinnvoll ist, gibt es auch Fälle in welchen es Sinn macht, mit ihr zu brechen. Ist beispielsweise bekannt, dass sogut wie alle User über ihre PCs auf die Website zugreifen, sollte die User Experience natürlich für entsprechend große Displays optimiert und die mobile Version anschließend ausgearbeitet werden (Graceful Degradation). Auch im Fall, dass die Website zum Vertrieb eines Angebotes dient, welches Kunden nicht über mobile Endgeräte kaufen, ist es vernünftig, sich auf das Design der Desktop Version zu konzentrieren.


Das Ziel von responsive Design ist vor allem, dass der Inhalt unabhängig vom Ausgabemedium korrekt dargestellt wird und alle User sich auf der Website zurecht finden. Aus diesem Grund sollte das Design trotz verschiedener Möglichkeiten und Anforderungen der Devices konsistent sein. Einerseits damit der User beim Wechsel von einem Gerät aufs andere überhaupt erkennt, dass es sich auf derselben Website befindet, andererseits damit die Navigation und Informationsarchitektur nicht neu gelernt werden müssen.




Ob das gewählte Design für die User und ihr individuelles Endgerät funktioniert kann User Testing aufklären. Mehr Informationen dazu hier.
Für die nächsten Wochen haben wir geplant, einige weitere Basics zu erklären. Neue Blog Beiträge kündigen wir übrigens auch über Twitter an: @usertimesHQ.