Responsive Website

Was eine Responsive Website ausmacht

Eine Responsive Website ist ein Webauftritt, der seine Darstellung an die Größe des Anzeigebereichs anpasst, ohne dass dafür eine zweite, mobile Fassung gepflegt werden muss. Inhalt und Adresse bleiben identisch, allein die Anordnung ändert sich: Spalten rücken untereinander, Navigationen klappen zusammen, Schriftgrößen und Abstände wachsen oder schrumpfen mit.

Der Ansatz steht damit im Gegensatz zur getrennten Mobilfassung unter eigener Adresse, wie sie bis in die 2010er Jahre üblich war. Für die User Experience ist der Unterschied spürbar, weil geteilte Adressen auf dem Telefon regelmäßig ins Leere führten. Zwei Fassungen bedeuten zwei Pflegestände und zwei Fehlerquellen. Bei einer einzigen Fassung entfällt außerdem die Frage, welche Adresse Suchmaschinen bewerten. Eine Responsive Website ist damit weniger eine Gestaltungsentscheidung als eine über den Pflegeaufwand der nächsten Jahre.

Die vier Bausteine

Vier Techniken tragen das Ergebnis. Ein flexibles Raster verteilt Breiten in Anteilen statt in festen Pixelwerten. Media Queries schalten je nach verfügbarer Breite andere Regeln ein. Flexible Bilder skalieren mit ihrem Behälter und werden idealerweise in mehreren Auflösungen bereitgestellt, damit ein Telefon nicht die Druckdatei lädt. Und eine mitwachsende Typografie hält die Zeilenlänge lesbar. Fehlt der letzte Punkt, entstehen auf breiten Schirmen Zeilen, die niemand liest.

Breakpoints richtig setzen

Ein Breakpoint ist die Bildschirmbreite, ab der ein anderes Layout greift. Verbreitet ist der Reflex, sich an Gerätemodellen zu orientieren, was mit jedem neuen Formfaktor veraltet. Sinnvoller ist, den Breakpoint dort zu setzen, wo der Inhalt bricht. Praktisch heißt das, das Fenster langsam schmaler zu ziehen und dort einen Punkt zu setzen, wo das responsive Layout unangenehm wird. Drei bis vier Breakpoints reichen für die meisten Auftritte, jeder weitere kostet Prüfaufwand bei jeder Änderung.

Woran sich das Ergebnis prüfen lässt

Ein responsives Layout gilt erst dann als fertig, wenn es geprüft ist, und zwar nicht nur im verkleinerten Browserfenster. Zu testen sind echte Geräte, die Bedienung mit dem Daumen, Tabellen und lange Wörter, Formulare mit eingeblendeter Tastatur sowie die Ansicht im Querformat. Bedienelemente brauchen genug Fläche und Abstand, damit ein Treffer nicht zum Glücksspiel wird. Ein zu kleines Bedienelement ist ein Fehler, kein Geschmacksurteil. Diese Anforderungen decken sich weitgehend mit dem, was das Barrierefreiheitsgesetz an Mindestgrößen und Kontrasten verlangt. Wer beides getrennt plant, macht dieselbe Arbeit zweimal. Die gestalterische Seite des Vorgehens beschreibt das Responsive Webdesign.