Responsive Webdesign: Gestaltung für alle Bildschirme

Websites werden auf Smartphones, Tablets, Laptops, großen Monitoren und manchmal sogar auf Fernsehern oder Autodisplays aufgerufen. Für jedes Gerät eine eigene Version zu bauen, ist unmöglich. Responsives Webdesign löst das Problem mit einem einzigen Layout, das sich flexibel anpasst. Der Begriff geht auf den Webdesigner Ethan Marcotte zurück, der ihn 2010 prägte. Heute ist responsives Design selbstverständlich, und trotzdem passieren dabei immer noch typische Fehler.

Warum responsiv unverzichtbar ist

Bei vielen Websites stammt inzwischen der größere Teil der Besuche von Mobilgeräten. Google bewertet Websites seit Jahren auf Grundlage ihrer mobilen Version, man spricht von Mobile-First-Indexing. Eine Seite, die auf dem Smartphone schlecht funktioniert, verliert also nicht nur Besucher, die genervt abspringen, sondern kann auch in der Suche schlechter abschneiden. Hinzu kommt die Barrierefreiheit: Wer die Schrift im Browser vergrößert, bekommt auf einem großen Monitor schnell eine Darstellung, die einem Smartphone-Layout entspricht.

Die drei technischen Grundzutaten

1. Der Viewport-Meta-Tag im Kopf jeder Seite sagt mobilen Browsern, dass sie die Seite in der tatsächlichen Gerätebreite darstellen sollen, statt eine verkleinerte Desktop-Ansicht zu zeigen.
2. Ein flexibles Raster: Spalten werden in relativen Einheiten oder mit modernen CSS-Techniken wie Flexbox und CSS Grid angelegt, statt in festen Pixelbreiten.
3. Media Queries: CSS-Regeln, die erst ab oder bis zu einer bestimmten Breite gelten. Damit lassen sich etwa drei Spalten am Desktop auf eine Spalte am Smartphone umstellen.

Mobile First

Beim Ansatz Mobile First wird zuerst das Layout für schmale Bildschirme gestaltet und dann schrittweise für größere erweitert. Das hat zwei Vorteile. Erstens zwingt der knappe Platz dazu, Prioritäten zu setzen: Was ist wirklich wichtig? Zweitens bleibt der Code schlanker, weil Mobilgeräte nur die Grundregeln laden und größere Bildschirme Ergänzungen bekommen. Desktop-Layouts, die nachträglich auf das Smartphone gequetscht werden, erkennt man oft an winzigen Schriften, versteckten Inhalten und endlosen Scrollstrecken.

Breakpoints sinnvoll setzen

Breakpoints sind die Breiten, an denen sich das Layout ändert. Verbreitet sind Stufen für Smartphone, Tablet und Desktop, etwa um 640, 768, 1024 und 1280 Pixel. Gerätegrößen ändern sich aber ständig. Sinnvoller ist es, das Layout im Browser langsam breiter und schmaler zu ziehen und einen Breakpoint genau dort zu setzen, wo es nicht mehr funktioniert: wo Textzeilen zu lang werden, Bilder zu klein oder Navigationspunkte umbrechen.

Container Queries: Bausteine, die sich selbst anpassen

Media Queries fragen die Breite des gesamten Fensters ab. Ein Baustein wie eine Produktkarte steht aber mal in einer breiten Hauptspalte, mal in einer schmalen Seitenleiste. Container Queries lösen das: Der Baustein passt sich an den Platz an, den er tatsächlich hat. Alle aktuellen großen Browser unterstützen Container Queries. Für Designsysteme mit wiederverwendbaren Komponenten sind sie ein großer Fortschritt.

Bilder und Medien

Bilder sollten nie breiter als ihr Container sein. Eine einzige CSS-Regel, die die maximale Breite auf 100 Prozent setzt, verhindert, dass große Bilder aus dem Layout ragen. Damit Smartphones nicht unnötig große Dateien laden, beschreibt man mit srcset und sizes mehrere Bildgrößen, aus denen der Browser die passende wählt. Mit dem picture-Element lassen sich sogar unterschiedliche Bildausschnitte ausliefern, etwa ein Querformat am Desktop und ein enger geschnittenes Hochformat am Smartphone. Breite und Höhe im HTML verhindern, dass das Layout beim Laden springt. Mehr dazu im Ratgeber Pixel, Auflösung und Bildformate.

Videos und eingebettete Inhalte wie Karten brauchen ebenfalls ein flexibles Seitenverhältnis, das sich heute einfach mit der CSS-Eigenschaft aspect-ratio festlegen lässt.

Typografie, die mitwächst

Eine Hauptüberschrift, die am Desktop mit 56 Pixeln beeindruckt, sprengt auf einem 375 Pixel breiten Smartphone das Layout. Statt für jeden Breakpoint feste Größen festzulegen, lässt sich die Schriftgröße mit der CSS-Funktion clamp() fließend zwischen einem Minimum und einem Maximum skalieren. Fließtext bleibt dagegen auf allen Geräten etwa gleich groß, denn das Smartphone wird näher an die Augen gehalten. Grundlagen dazu stehen im Ratgeber Typografie im Web.

Navigation auf kleinen Bildschirmen

Auf schmalen Bildschirmen ist kein Platz für eine ausgeklappte Navigation mit sechs Punkten. Üblich ist ein Menü hinter einer Schaltfläche, oft als drei Striche dargestellt und “Hamburger-Menü” genannt. Damit es gut funktioniert:

• die Schaltfläche groß genug und eindeutig beschriftet, für Screenreader mit einem Text wie “Menü öffnen”,
• das Menü mit der Tastatur bedienbar und mit Escape schließbar,
• die wichtigste Aktion, etwa Anruf oder Anfrage, zusätzlich direkt sichtbar,
• bei vielen Unterpunkten eine übersichtliche Gliederung statt endloser Liste.

Touch-Ziele und Abstände

Finger sind ungenauer als ein Mauszeiger. Die WCAG 2.2 verlangen auf Stufe AA eine Zielgröße von mindestens 24 × 24 CSS-Pixeln oder genügend Abstand zwischen Zielen. Die Gestaltungsrichtlinien der großen Mobilplattformen empfehlen mit 44 Punkten (Apple) und 48 Density-independent Pixeln (Android) deutlich mehr. Liegen Links in Fließtext oder in Listen eng beieinander, braucht es entsprechend Zeilenabstand. Weitere Anforderungen an zugängliche Bedienung erklärt der Ratgeber Barrierefreies Webdesign.

Häufige Fehler

• Horizontales Scrollen, weil ein Element mit fester Breite oder eine Tabelle über den Rand ragt. Tabellen gehören in einen Container, der seitlich scrollen darf.
• Versteckte Inhalte, die auf dem Smartphone einfach ausgeblendet werden, obwohl Besucher sie brauchen.
• Pop-ups, die den ganzen Bildschirm verdecken und deren Schließen-Knopf kaum zu treffen ist.
• Hover-Effekte als einzige Information, die es auf Touchscreens nicht gibt.
• Zu große Bilder, die im Mobilfunknetz die Ladezeit in die Höhe treiben.
• Fixierte Kopfzeilen, die auf kleinen Bildschirmen im Querformat die Hälfte der Fläche belegen.

So testen Sie Ihre Website

1. In den Entwicklerwerkzeugen des Browsers die Geräteansicht öffnen und verschiedene Breiten durchprobieren, auch krumme Werte zwischen den üblichen Geräten.
2. Das Browserfenster langsam von breit nach schmal ziehen und beobachten, wo das Layout bricht.
3. Auf mindestens einem echten Android-Gerät und einem iPhone testen, im Hoch- und im Querformat.
4. Die Schrift im Browser auf 200 Prozent vergrößern.
5. Die Ladezeit im simulierten langsamen Mobilfunknetz prüfen.

Responsives Design ist kein Zusatz, sondern Teil der Grundlagen. Wie es mit Hierarchie, Raster und Konsistenz zusammenspielt, steht in den Grundlagen guter Gestaltung, konkrete Verbesserungsvorschläge sammeln die Tipps für ansprechendes Webdesign.