Responsive Design – Darum ist adaptives webdesign heute Pflicht

Responsive Webdesign beschreibt den Ansatz, eine Website zu entwickeln, die auf verschiedenen Endgeräten optimal dargestellt wird. Der Begriff Responsive Design ist erst so alt wie das mobile Web und erlangte um 2013 allgemeine Bekanntheit.

Vor dem Aufkommen des mobilen Webs war die Landschaft der internetfähigen Endgeräte stark homogen: Es gab Desktop- oder Laptop-Rechner, die sich in Bezug auf die Ein- und Ausgabemedien recht ähnlich waren. Beide Arten von Geräten verfügten über Tastatur und Maus bzw. Trackpad sowie einen Bildschirm mit einer Breite von ca. 1.000 bis 2.000 Pixel.

Um damals eine Website zu entwickeln, die auf der Mehrzahl der eingesetzten Geräte ordentlich dargestellt würde, musste kein ungebührender Aufwand betrieben werden. Die einfachste Lösung bestand darin, die Breite der Seiten auf den kleinsten gemeinsamen Nenner zu begrenzen. Ein beliebter Ansatz war, die Seiten 800 Pixel breit und zentriert oder linksbündig darzustellen. Auf einem größeren Bildschirm gab es so ggf. etwas mehr Weißraum, aber die Seiten waren auf allen Geräten gut lesbar.

Mit Aufkommen der Mobilgeräte verschob sich die Situation, und es kam zu einer profunden Diversifizierung der Endgeräte. Die Bildschirme von Handys und Tablets unterscheiden sich in mehreren Punkten: Zum einen spielen die Pixel-Dimensionen eine Rolle, zum anderen rückte mit Erscheinen der Retina-Screens auch die physische Auflösung („pixels per inch“, ppi) in den Fokus. Ferner werden diese Geräte nicht mit einer Maus, sondern mit dem Finger bedient. Heutzutage kommen noch große, hochauflösende Monitore hinzu, so dass eine moderne Website auf Bildschirmbreiten von 320 Pixel bis mehr als 4.000 Pixel funktionieren muss.

Eine responsive Website passt sich an den jeweils vorhandenen Platz auf dem Bildschirm an. Man spricht dabei auch von „screen real estate“. Die Website soll auf allen Geräten gut aussehen und eine optimale Nutzererfahrung – User Experience (UX) bieten.

Responsive Webdesign umfasst eine Vielzahl an Techniken und Ansätzen, die kombiniert werden, um eine vollständig responsive Website zu entwickeln. Dazu gehören insbesondere:

• HTML5-Elemente wie picture und Attribute wie srcset und sizes
• CSS Media Queries
• CSS-Einheiten
• Der Einsatz mehrerer Assets einer Ressource
• Der Mobile-first-Ansatz

Die Entwicklung einer responsiven Website bietet verschiedene Vorteile. Dabei steht die Benutzererfahrung im Vordergrund. Prinzipiell lässt sich eine gute Benutzererfahrung auch ohne responsives Design umsetzen. Dies bedingt dann aber entweder eine eigene Mobile-Site, oder die Nutzung von JavaScript. In der Summe ist das dann oft deutlich komplexer als der CSS-basierte Responsive-Webdesign-Ansatz und führt zu mehr Aufwand für die Pflege der unterschiedlichen Site-Versionen.

Das Design einer Website beeinflusst als einer der ausschlaggebenden Faktoren, wie ein Seitenbesucher die dargestellten Informationen wahrnimmt. Ein gutes Design spiegelt die Identität der hinter der Website stehenden Organisation wider und hilft, den Besucher an die Marke zu binden. Der Seitenbesucher soll sich auf der Website wohlfühlen und eine positive Erfahrung machen. Betrachten wir zwei Beispiele, wie Responsive Webdesign zur optimalem Nutzererfahrung beiträgt:

• Nehmen wir an, eine Überschrift auf einem Mobilgerät füllt den gesamten Bildschirm. Jedoch fällt die Überschrift auf der Desktop-Version in gleicher Schriftgröße kaum auf. Auf dem Desktop muss die Überschrift größer dargestellt werden, um tatsächlich das Auge des Besuchers auf sich zu ziehen.
• Ein weiteres Beispiel: stellen Sie sich einen Blog vor, bei dem rechts neben dem Artikel eine Sidebar dargestellt wird. Die Sidebar enthält Links zu weiteren Artikeln mit kleinen Vorschaubildern. In der Desktop-Version hilft die Sidebar, die Artikelbreite zu begrenzen, und trägt damit zur Lesbarkeit bei. Auf einem Mobilgerät jedoch würde die Sidebar fast die Hälfte des Screens bedecken. Das Layout muss auf Mobilgeräten umgeschaltet werden, damit der Inhalt der Sidebar unterhalb des Artikels erscheint

Prinzipiell wird eine nicht responsiv aufgebaute Website auf dem kleinen Bildschirm eines Mobilgeräts genauso dargestellt wie auf dem Desktop, nur eben sehr viel kleiner. Das zwingt den Nutzer, in einzelne Seitenbereiche hineinzuzoomen. Daher ist es besser, eine optimierte Version anzubieten. Ein paar Beispiele:

• Ein Button auf einer Website wird am Desktop mit der Maus angeklickt. Ein Mobilgerät wird jedoch mit dem Finger bedient. Der Button muss daher für die Mobilversion größer sein und mehr Abstand zu anderen Elementen erhalten.
• Stellen Sie sich ein Formular auf einer Seite vor. Normalerweise wird diesem per CSS ein Innenabstand (padding) zugewiesen, damit der enthaltene Text gut lesbar ist und die Ränder des Fomulars nicht berührt. Ein Innenabstand von jeweils 20 Pixeln rechts und links ist normal und sieht auf großen Bildschirmen gut aus. Aber auf dem Mobilgerät mit nur 320 Pixeln Bildschirmbreite gehen 40 von 320 Pixeln verloren: ein Achtel. Hat das Formular auch noch einen Außenabstand (margin), sagen wir: weitere 20 Pixel pro Seite, gehen auf dem Mobilgerät bereits 25 Prozent des verfügbaren Platzes verloren. Um dies zu verhindern, sollten die Abstände auf dem Mobilgerät verringert werden.

Ein großer Prozentsatz der Nutzer greift heutzutage über mobile Geräte auf Webinhalte zu. Es gibt reale, schwerwiegende Nachteile, wenn eine Website nicht komplett responsiv aufgebaut ist. Dazu zählen insbesondere:

• Schlechte Konversionsrate und hohe Bouncerate, verursacht durch suboptimales Design und Störung der Nutzererfahrung
• Schlechtes Suchmaschinenranking, denn Google erkennt z. B., wenn Elemente sich zu nah aneinander befinden
• Schlechte Performance durch Laden nicht optimierter Ressourcen, insbesondere auf Mobilgeräten

Responsive Design umfasst verschiedene Ansätze und Technologien. Normalerweise gibt es für die unterschiedlichen Szenarien mehrere Lösungswege. Die Entwicklung befindet sich weiterhin im Fluss.

Das Umsetzen komplexer Layouts auf Websites war seit Beginn des World Wide Web eine Wissenschaft für sich. HTML kennt verschiedene Element-Typen, die in Bezug auf ihr Layout unterschiedliche Verhaltensweisen an den Tag legen. Insbesondere gibt es die Element-Typen block, inline und inline-block. Block-Elemente nehmen die gesamte verfügbare Breite ein und positionieren sich gestapelt. Inline-Elemente nehmen nur die von ihrem Inhalt tatsächlich benötigte Breite ein und positionieren sich nebeneinander. Hier eine Übersicht der fürs Responsive Webdesign wichtigsten Element-Typen:

Um ein Layout umzusetzen, muss man meist Block-Elemente nebeneinander positionieren. Dafür bedient man sich verschiedener Methoden. Vor dem Aufkommen von CSS waren die Tabellen-basierten Layouts Standard, mit CSS kamen dann Float-basierte Layouts dazu. Heutzutage nutzt man CSS Flexbox für einfache reihen- oder spaltenbasierte Layouts und greift für komplexe Layouts auf das CSS-Grid-Modul zurück. In allen Fällen werden relative CSS-Dimensionen genutzt, um die Anzahl nebeneinander dargestellter Elemente zu variieren.

Ein anschauliches Beispiel: Stellen Sie sich eine Seite mit vier Vorschau-Elementen für Blogartikel vor. Die Vorschau-Elemente enthalten jeweils Vorschaubild, Überschrift, Teaser und „Mehr lesen“-Button. Mit Flexbox lässt sich das folgende responsive Layout leicht umsetzen:

• Darstellung auf großem Bildschirm: alle Vorschau-Elemente nebeneinander in einer Reihe. Jedes der Elemente nimmt 25 Prozent des verfügbaren Platzes ein.
• Darstellung auf mittlerem Bildschirm: zwei Vorschau-Elemente nebeneinander in zwei Reihen. Jedes der Elemente nimmt 50 Prozent des verfügbaren Platzes ein.
• Darstellung auf kleinem Bildschirm: alle vier Vorschau-Elemente untereinander in einer Zeile. Jedes der Elemente nimmt 100 Prozent des verfügbaren Platzes ein.

Hier eine Beispiel-Implementierung mit Klassen des responsiven CSS-Frameworks Tachyons. Wir definieren für jeden Vorschau-Container die Klassen 'w-100 w-50-m w-25-l'. Alle vier Vorschau-Container werden in einem mit 'flex flex-wrap' ausgezeichneten Container untergebracht:

Manchmal ist es sinnvoll, ein Element nur auf einer bestimmten Bildschirmgröße anzuzeigen. Betrachten wir ein praktisches Beispiel: Tabellarische Daten werden in HTML per <table>-Tag als Tabelle abgebildet. Je nach Größe der Tabelle kann es jedoch schwierig sein, die Darstellung an sehr kleine Bildschirme anzupassen. Hier hilft ein einfacher Trick weiter: Wir weisen den Nutzer darauf hin, sein Gerät zu kippen, um für die Darstellung der Tabelle ausreichend Platz zur Verfügung zu stellen. Dieser Hinweis soll allerdings nur auf einem Gerät mit kleinem Bildschirmen angezeigt werden, wenn dieses hochkant gehalten wird.

Das Verbergen eines Elements lässt sich mit der CSS-Eigenschaft display: none; leicht bewerkstelligen. Mit einem speziellen CSS Media-Query fragen wir neben der Bildschirmbreite auch die Orientierung des Geräts ab. Nur wenn die Breite des Bildschirms hochkant weniger als 640 Pixel beträgt, soll der Hinweis angezeigt werden. Ansonsten verbergen wir das Element:

In Kombination mit dem folgenden HTML-Code ist das Feature komplett:

Für eine optimale Nutzererfahrung muss die Schriftgröße der Textelemente einer Website an die vorhandene Bildschirmfläche angepasst werden. Dabei kommen im Responsive Webdesign verschiedene Schrift-Techniken zum Einsatz.

Als grundlegende Maßnahme nutzt man die CSS-Einheit rem („root element“), um die Schriftgröße eines Elements proportional an das HTML-'root'-Element zu binden. Dann genügt es, die Schriftgröße des 'root'-Elements über CSS-Breakpoints anzupassen, um alle Schriften konsistent zu skalieren.

Schauen wir uns ein Beispiel an. Hier legen wir zunächst dem Mobile-first-Ansatz folgend die Schriftgrößen für kleine Bildschirme fest:

Anschließend passen wir die Schriftgröße des HTML-Elements für größere Bildschirme an. Da die Schriftgröße der H1-Überschriften per rem definiert ist, skaliert sie automatisch:

Ein weiterer verbreiteter Ansatz besteht darin, die CSS-Einheiten vh und vw für eine fluide Anpassung der Schriftgröße an die Bildschirmhöhe oder -breite zu nutzen. Prinzipiell kommt dieser Ansatz ohne Breakpoints aus, jedoch wird dann ggf. die Schrift auf kleinen Bildschirmen winzig dargestellt. In diesem Fall setzt man punktuell Breakpoints ein oder verwendet die CSS-calc()-Funktion, um eine Mindestgröße festzulegen.

Zur Optimierung bildschirmfüllender Überschriften auf Geräten mit kleinem Bildschirm kommt ein Ansatz ohne Nutzung von CSS zum Einsatz. Überschriften sollen das Auge des Betrachters auf sich ziehen. Das macht es dem Benutzer einfacher, den Inhalt einer Seite schnell zu ergreifen. Jedoch können gerade in deutscher Sprache Wörter sehr lang werden, was ggf. zu Darstellungsproblemen führt. Hier helfen die HTML-Entitäten „Non-breaking space“ (&nbsp;) und „Soft hyphen“ (&shy;) weiter. Mit diesen lässt sich präzise festlegen, an welchen Stellen die Wörter einer Überschrift getrennt werden dürfen.

Neben Layout und Typografie steht die optimierte Darstellung von Bildern im Fokus des Responsive Designs. Offensichtlich ist es wenig sinnvoll, ein Bild mit 1.920 Pixel Kantenlänge auf ein Handy mit 400 Pixel breitem Bildschirm zu laden. Zum einen muss das viel zu große Bild dann rechenaufwendig im Browser herunterskaliert werden. Zum anderen steigt die Dateigröße eines Bilds quadratisch mit der Größe der längsten Seite an.

Ein Bild mit 1.920 x 1.080 Pixel wird ca. viermal so viel Speicherplatz benötigen, wie ein Bild mit 960 x 540 Pixel. Entsprechend länger dauert auch das Herunterladen eines solchen Bildes auf ein Mobilgerät. Zusammengenommen ergibt sich ein ausgesprochen negativer Effekt auf die Performanz und Nutzbarkeit einer Website, wenn Bilder nicht responsiv optimiert sind.

Mit Einführung von HTML5 wurden zwei neue Attribute für das -Tag eingeführt. Mit den Attributen srcset und sizes werden mehrere Grafikdateien für ein Bild festgelegt; man spricht dabei auch von „Assets“. Jede einzelne Datei wird an die Abfrage eines CSS Media Features geknüpft. So kann der Browser aus der Liste verfügbaren Assets eines laden, das für das jeweilige Gerät optimal ist.

Schauen wir uns ein kurzes Beispiel an. Der nachfolgende HTML-Code definiert ein Bild, für das zwei per srcset definierte Assets existieren; eines mit 480 Pixel Kantenlänge und eines mit 800 Pixel Kantenlänge. Ferner wird per sizes festgelegt, dass das Bild mit 480 Pixel bis zu einer Bildschirmbreite von 600 Pixel verwendet werden soll. Ansonsten soll der Browser das Bild mit 800 Pixel laden:

Traditionell war der Bildschirm breiter als hoch, es lag also ein Querformat vor; Handy-Bildschirme sind jedoch im Hochformat. Ein Querformat-Bild auf einem Hochformat-Gerät wirkt sehr klein. Für ein besseres Ergebnis sollte ein eigens zugeschnittenes quadratisches oder hochformatiges Bild zum Einsatz kommen. Die Wahl unterschiedlicher Zuschnitte eines Bildes bezeichnet man als „Art Direction“. Dies lässt sich mit dem HTML5-Element <picture> umsetzen. Das <picture>-Element erlaubt die komplexe Definition mehrerer äquivalenter Bilder für unterschiedliche Anwendungsfälle.

Schauen wir uns ein Beispiel an. Der nachfolgende HTML-Code definiert ein <picture>-Element, das unterschiedliche Assets für Quer- und Hochformat festlegt. Für beide Fälle gibt es jeweils mehrere, für verschiedene Bildschirmgrößen optimierte Versionen:

Traditionell wird die Navigation im Kopfbereich der Seite angezeigt. Oft wird diese als horizontale Liste von Menü-Einträgen dargestellt, mit Untermenüs, die beim Überfahren mit dem Mauszeiger aufklappen. Dies lässt sich auf Mobilgeräten nicht umsetzen. Zum einen fehlt auf kleinen Bildschirmen der Platz für das Menü, zum anderen existiert kein Mauszeiger.

Zur Darstellung von Navigationsmenüs auf Mobilgeräten gibt es verschiedene Ansätze. Diese sind allesamt platzsparend und benötigen keinen Mauszeiger. Die Aktivierung der Navigation wird oft mit einer Animation unterfüttert, um die Aufmerksamkeit des Nutzers zu lenken. Zu den am weitesten verbreiteten Ansätzen für responsive Navigation zählen:

• Das „Hamburger Menu“-Icon (drei waagerechte Striche): Es dient als zentrales Bedienelement zum Aktivieren des Menüs.
• Die „Off Canvas“-Navigation: Das Menü rutscht dann vom Bildschirmrand herein und schiebt den eigentlichen Seiteninhalt beiseite.