Was ist Responsive Design?

Responsive Design bedeutet, dass sich eine Website automatisch an die Grösse des Bildschirms anpasst. Dieselben Inhalte werden auf dem Smartphone in einer Spalte gezeigt, auf dem Tablet vielleicht in zwei und auf dem Desktop in drei. Texte bleiben lesbar, Bilder passen in den Rahmen und Schaltflächen lassen sich mit dem Finger treffen. Es ist kein Zusatzmodul, sondern eine Arbeitsweise beim Gestalten und Programmieren.

Woher der Begriff kommt

Laut MDN Web Docs prägte der Webdesigner Ethan Marcotte den Begriff 2010. Er beschrieb damit eine Kombination aus drei Techniken: flexible Raster, flexible Bilder und Media Queries. MDN betont, dass Responsive Design keine eigene Technologie ist, sondern eine Sammlung bewährter Vorgehensweisen.

Der Viewport: die unsichtbare Grundlage

Ohne eine kleine Zeile im Code der Seite funktioniert vieles nicht. Mobile Browser stellen Seiten sonst so dar, als wären sie etwa 980 Pixel breit, und verkleinern sie dann. Das Ergebnis ist winziger Text, den man mit zwei Fingern vergrössern muss.

Die Lösung ist das Viewport-Meta-Tag im Kopfbereich der Seite:

<meta name="viewport" content="width=device-width, initial-scale=1">

Damit verwendet der Browser die tatsächliche Breite des Geräts. web.dev rät zudem davon ab, das Zoomen mit Angaben wie maximum-scale oder user-scalable einzuschränken, weil das Menschen benachteiligt, die Inhalte vergrössern müssen.

Flexible Layouts statt fester Breiten

Früher wurden Seiten oft mit festen Breiten in Pixeln gebaut. Heute gibt es Layout-Methoden, die von sich aus flexibel sind:

• Flexbox lässt Elemente in einer Reihe wachsen und schrumpfen.
• CSS Grid verteilt den Platz in Spalten, zum Beispiel mit der Einheit fr.
• Prozentangaben und relative Einheiten wie rem passen sich dem verfügbaren Raum an.

Für Bilder gilt eine einfache Regel: Sie sollen nie breiter werden als ihr Container. Das erreicht man mit max-width: 100%. web.dev empfiehlt zusätzlich, Breite und Höhe der Bilder anzugeben, damit der Browser den Platz reserviert, bevor das Bild geladen ist. Für unterschiedliche Bildgrössen je nach Gerät nennt MDN das Element <picture> sowie die Attribute srcset und sizes.

Ein wichtiges Ziel: Niemand sollte seitlich scrollen müssen. Nutzerinnen und Nutzer erwarten, dass eine Seite nur nach unten weitergeht.

Breakpoints: wo sich das Layout ändert

Mit Media Queries lassen sich CSS-Regeln nur ab einer bestimmten Bildschirmbreite anwenden. Die Stellen, an denen sich das Layout ändert, heissen Breakpoints.

Zwei Empfehlungen aus den Quellen sind besonders praktisch:

• Mobile First: MDN empfiehlt, mit einer einspaltigen Darstellung für kleine Bildschirme zu beginnen und bei mehr Platz Spalten hinzuzufügen.
• Nach Inhalt, nicht nach Gerät: web.dev rät, Breakpoints nicht nach Geräteklassen, Marken oder Betriebssystemen festzulegen. Man vergrössert das Fenster und setzt einen Breakpoint dort, wo das Layout nicht mehr gut aussieht.

Neben grossen Breakpoints für die Spaltenzahl gibt es kleinere Anpassungen, etwa für Schriftgrössen oder Abstände. web.dev weist ausserdem darauf hin, Inhalte nicht einfach auszublenden, nur weil sie auf dem kleinen Bildschirm nicht sofort passen.

Lesbarkeit auf jedem Bildschirm

Gute Lesbarkeit hängt nicht nur von der Schriftgrösse ab, sondern auch von der Zeilenlänge. web.dev verweist auf die klassische Empfehlung von 70 bis 80 Zeichen pro Zeile. Auf grossen Bildschirmen braucht ein Textblock deshalb eine maximale Breite, sonst werden die Zeilen zu lang.

Für Überschriften kann die Schriftgrösse mit der Bildschirmbreite wachsen. MDN zeigt dafür eine Kombination aus fester Einheit und Viewport-Einheit, zum Beispiel calc(1.5rem + 4vw). Wichtig ist der feste Anteil: Wird nur mit Viewport-Einheiten gearbeitet, lässt sich der Text nicht mehr zuverlässig zoomen.

Touch-Ziele: Bedienung mit dem Finger

Auf dem Smartphone gibt es keine Maus. Links und Schaltflächen müssen gross genug sein und genug Abstand haben, damit man nicht daneben tippt.

Quelle	Empfehlung
web.dev	Mindestens rund 48 × 48 Pixel (etwa 9 mm), rund 8 Pixel Abstand
WCAG 2.2, Kriterium 2.5.8 (Stufe AA)	Mindestens 24 × 24 CSS-Pixel, mit Ausnahmen wie Links im Fliesstext

Die WCAG-Vorgabe ist das Minimum für Barrierefreiheit, die Empfehlung von web.dev eine komfortablere Zielgrösse. Typische Problemstellen sind kleine Social-Media-Symbole in der Fusszeile, eng gesetzte Menüpunkte und Telefonnummern ohne klickbaren Link. Mehr zu barrierefreien Websites lesen Sie im Artikel Was bedeutet Barrierefreiheit bei Websites?

So prüfen Sie Ihre eigene Website

Sie brauchen kein technisches Wissen, um die wichtigsten Punkte zu testen:

• Öffnen Sie Ihre Website auf Ihrem eigenen Smartphone und auf einem älteren Gerät, falls vorhanden.
• Drehen Sie das Gerät ins Querformat.
• Prüfen Sie, ob Sie irgendwo seitlich scrollen müssen.
• Tippen Sie auf alle Schaltflächen im Menü und in der Fusszeile. Treffen Sie zuverlässig?
• Vergrössern Sie die Seite mit zwei Fingern. Geht das?
• Füllen Sie das Kontaktformular auf dem Smartphone aus.
• Verkleinern Sie auf dem Computer das Browserfenster langsam und beobachten Sie, ob Inhalte überlappen.

Wer tiefer gehen will, kann in den Entwicklerwerkzeugen des Browsers verschiedene Bildschirmgrössen simulieren. Ein echter Test auf dem eigenen Gerät bleibt trotzdem wichtig. Häufige Fehler, die dabei auffallen, haben wir in einem eigenen Artikel über häufige Fehler auf Firmenwebsites gesammelt.

Fazit

Responsive Design sorgt dafür, dass eine Website auf jedem Bildschirm benutzbar bleibt. Die Grundlagen sind überschaubar: ein korrektes Viewport-Tag, flexible Layouts und Bilder, Breakpoints nach Inhalt und Bedienelemente, die sich mit dem Finger treffen lassen. Aus unserer Sicht gehört das heute zum Standard jeder Firmenwebsite und nicht in die Kategorie Zusatzleistung. Wenn Sie unsicher sind, wie gut Ihre Website auf dem Smartphone funktioniert, finden Sie unter Leistungen einen Überblick, wie wir Websites planen und umsetzen.