Responsive Webdesign: So passt sich Ihre Website jedem Bildschirm an

Ihre Website wird auf dem Smartphone in der Bahn, auf dem Tablet am Abend und am großen Monitor im Büro aufgerufen, oft von derselben Person am selben Tag. Auf jedem dieser Geräte sollen Inhalte, Navigation und Formulare gut funktionieren, ohne dass Sie mehrere Versionen pflegen müssen. Genau das leistet responsive Webdesign. Hier lesen Sie, was hinter dem Begriff steckt, wie Mobile First, Breakpoints und Media Queries zusammenspielen und wie Sie eine responsive Website richtig testen.

Was ist responsive Webdesign?

Responsive Webdesign, kurz RWD, ist ein Ansatz für Gestaltung und Programmierung, bei dem sich eine Website automatisch an das Gerät anpasst, auf dem sie angezeigt wird. Das betrifft vor allem die Breite des Bildschirms, aber auch die Bedienung: mit Maus am Desktop oder mit dem Finger auf dem Touchscreen. Es gibt nur eine Website mit einer Adresse und einem Inhalt, lediglich die Darstellung ändert sich.

Geprägt hat den Begriff der US-amerikanische Webdesigner Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin A List Apart. Er beschrieb drei Zutaten, die bis heute die Grundlage bilden:

• Flexible Raster: Spalten und Abstände richten sich nach der verfügbaren Breite statt nach festen Pixelwerten.
• Flexible Bilder: Bilder und Videos werden nie breiter als der Bereich, in dem sie stehen.
• Media Queries: Bedingungen im CSS, mit denen sich das Layout ab bestimmten Bildschirmgrößen ändert.

Responsive Webdesign ist also ein Bündel von Methoden in HTML und CSS und kein einzelnes Plugin. Heute machen moderne Werkzeuge wie Flexbox und CSS Grid die Umsetzung deutlich einfacher als 2010.

Warum responsive Webdesign der Standard ist

Früher gab es für Mobilgeräte oft eine abgespeckte Zweitversion unter einer eigenen Adresse wie m.beispiel.de, mit doppelter Pflege und fehlenden Inhalten. Responsive Webdesign löst das mit einer Version für alle Geräte:

• Bessere Nutzung: Niemand muss zoomen oder seitlich scrollen, Buttons lassen sich mit dem Finger treffen. Davon hängt ab, ob jemand anruft, anfragt oder wieder geht.
• Sichtbarkeit bei Google: Google bewertet Websites anhand ihrer mobilen Version (Mobile-First-Indexierung). Was auf dem Smartphone fehlt, fehlt auch für Google.
• Eine Adresse: Links, geteilte Beiträge und Änderungen laufen über eine URL. Sie pflegen jeden Text nur einmal.
• Barrierearmut: Wer die Ansicht im Browser stark vergrößert, bekommt ein ähnlich schmales Layout wie auf dem Smartphone. Ein sauberes responsives Layout ist deshalb Voraussetzung, um die WCAG zu erfüllen.

Funktioniert eine Website auf dem Smartphone nicht gut, ist das ein klarer Anlass für einen Relaunch. Nachträgliches Flicken hilft bei alten Layouts selten dauerhaft.

Mobile First: klein anfangen, dann erweitern

Mobile First beschreibt die Reihenfolge: Zuerst entsteht die Ansicht für kleine Bildschirme, danach wird sie für größere erweitert. Auf einem schmalen Display ist kein Platz für Nebensächliches. Wer mobil beginnt, muss früh entscheiden, welche Inhalte wichtig sind, in welcher Reihenfolge sie erscheinen und welche Handlung der Besucher ausführen soll. Diese Klarheit kommt auch der Desktop-Version zugute.

Technisch gelten die Grundregeln im CSS für kleine Bildschirme. Media Queries mit min-width ergänzen Regeln, sobald mehr Platz da ist. Der umgekehrte Weg über max-width funktioniert jedoch ebenfalls, nur verarbeiten Smartphones dann zuerst das komplette Desktop-Layout und überschreiben es anschließend.

Breakpoints legen fest, wo sich das Layout ändert

Ein Breakpoint ist die Breite, ab der sich das Layout verändert, etwa von einer Spalte auf zwei oder vom eingeklappten Menü auf eine ausgeschriebene Navigation. Typische Gerätebreiten sind dafür nur eine grobe Orientierung, denn es gibt unzählige Bildschirmgrößen, und Browserfenster am Desktop sind nicht immer maximiert.

Besser ist es, Breakpoints am Inhalt auszurichten: Ziehen Sie das Fenster langsam schmaler. Wo eine Zeile zu lang wird oder in einer Karte nur noch zwei Wörter pro Zeile stehen, setzen Sie den Breakpoint. Oft reichen wenige Stufen.

CSS-Pixel sind übrigens nicht dasselbe wie die physischen Pixel des Displays. Ein modernes Smartphone hat oft drei Gerätepixel pro CSS-Pixel, damit Schrift scharf aussieht. Für das Layout zählen die CSS-Pixel. Geben Sie Breakpoints am besten in em an. Dann wachsen sie mit, wenn jemand im Browser eine größere Standardschrift eingestellt hat.

Flexible Raster, Bilder und Schriften

Flexible Raster arbeiten mit relativen Größen: Prozentwerten, Bruchteilen des verfügbaren Platzes (die Einheit fr in CSS Grid) oder Mindest- und Höchstwerten. Flexbox eignet sich für Elemente in einer Reihe wie Navigationspunkte, CSS Grid für Kachelübersichten mit Zeilen und Spalten. Begrenzen Sie auf breiten Monitoren die Textbreite: Die WCAG empfehlen in der höchsten Stufe AAA höchstens 80 Zeichen pro Zeile, ein guter Richtwert für jede Website.

Flexible Bilder werden nie breiter als ihr Container. In CSS genügen dafür max-width: 100% und height: auto. Das Bild schrumpft mit der Spalte, wird aber nie über seine tatsächliche Größe hinaus gestreckt. Geben Sie im HTML trotzdem Breite und Höhe an. Der Browser reserviert dann den Platz, bevor das Bild geladen ist, und der Text springt nicht nach unten. Das verbessert den Wert CLS der Core Web Vitals.

Flexible Schriften in rem wachsen mit, wenn Nutzer die Standardschrift vergrößern. Für große Überschriften eignet sich clamp() mit Mindest-, Wunsch- und Höchstgröße. Setzen Sie Schrift nie allein in vw, sonst lässt sie sich beim Zoomen kaum vergrößern.

Media Queries mit Beispiel

Media Queries sind Bedingungen im CSS. Nur wenn die Bedingung erfüllt ist, gelten die Regeln darin. Meist wird die Breite des sichtbaren Bereichs abgefragt, des Viewports. Das Beispiel zeigt eine Kachelübersicht nach Mobile First: eine Spalte als Grundlage, zwei ab 40em und drei ab 64em. Bei der üblichen Standardschrift entspricht das 640 und 1.024 Pixeln.

/* Grundlage: eine Spalte für schmale Bildschirme */
.kacheln {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ab 40em: zwei Spalten */
@media (min-width: 40em) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
}

/* ab 64em: drei Spalten */
@media (min-width: 64em) {
  .kacheln { grid-template-columns: repeat(3, 1fr); }
}

Media Queries können mehr als die Breite abfragen. Nützlich sind vor allem:

• hover und pointer: ob mit Maus oder Finger bedient wird. So erscheinen Hover-Effekte nur dort, wo es sie gibt.
• prefers-reduced-motion: ob jemand im Betriebssystem weniger Bewegung eingestellt hat. Dann sollten Animationen entfallen.
• prefers-color-scheme: ob ein helles oder dunkles Farbschema bevorzugt wird.
• orientation und print: Hoch- oder Querformat und eigene Regeln für den Ausdruck.

Ergänzend gibt es Container Queries. Sie fragen statt der Bildschirmbreite den Platz ab, den ein Element in seinem umgebenden Bereich hat. Eine Teaserkarte zeigt dann in der schmalen Seitenleiste Bild und Text untereinander und im Hauptbereich nebeneinander. Aktuelle Browser unterstützen das.

Damit Smartphones Media Queries korrekt anwenden, braucht jede Seite im Kopfbereich die Angabe <meta name="viewport" content="width=device-width, initial-scale=1">. Sperren Sie dabei nie das Zoomen mit user-scalable=no. Menschen mit Sehschwäche sind aufs Vergrößern angewiesen.

Responsive Bilder mit srcset und sizes

max-width: 100% bewirkt nur, dass ein Bild passt. Geladen wird trotzdem die volle Datei, bei einem 2.000 Pixel breiten Titelbild auf dem Smartphone eine Verschwendung von Datenvolumen und Ladezeit. Mit srcset und sizes bieten Sie dem Browser mehrere Größen an, und er wählt die passende Datei selbst.

<img
  src="montage-1200.webp"
  srcset="montage-600.webp 600w,
          montage-1200.webp 1200w,
          montage-2000.webp 2000w"
  sizes="(min-width: 64em) 50vw, 100vw"
  width="1200" height="800"
  alt="Monteur schließt eine Wärmepumpe an der Hauswand an">

srcset nennt die Dateien mit ihrer Breite, sizes die angezeigte Breite: ab 64em halbe Fensterbreite, darunter volle Breite. Ein Smartphone mit 400 CSS-Pixeln und dreifacher Pixeldichte braucht rund 1.200 Gerätepixel und lädt die mittlere Datei.

• Andere Bildausschnitte: Soll auf dem Smartphone ein enger Hochformat-Ausschnitt erscheinen, nutzen Sie das picture-Element. Damit lassen sich auch AVIF und WebP mit Rückfalloption anbieten.
• WordPress: WordPress erzeugt beim Hochladen mehrere Bildgrößen und schreibt srcset und sizes selbst. Wie gut das klappt, hängt davon ab, ob das Theme die tatsächliche Bildbreite sinnvoll angibt.
• Lazy Loading: Bilder weiter unten laden mit loading="lazy" später. Beim ersten großen Bild im sichtbaren Bereich verzichten Sie darauf.
• Alternativtexte: Jedes inhaltliche Bild braucht eine passende Beschreibung. Wie das gelingt, lesen Sie im Artikel über Alt-Texte.

Touch-Ziele und Bedienung per Finger

Ein Mauszeiger trifft einen Punkt, ein Finger eine Fläche. Links, die am Desktop genügen, werden auf dem Smartphone zur Geduldsprobe, besonders wenn mehrere dicht beieinander liegen. Diese Richtwerte sollten Sie kennen:

• Menüs öffnen sich per Tippen, nicht nur beim Überfahren mit der Maus.
• Der Menü-Button ist ein echtes button-Element, trägt am besten das sichtbare Wort „Menü“ und meldet Screenreadern, ob er offen ist.
• Telefonnummern sind als tel:-Link antippbar.
• Formularfelder nutzen Eingabetypen wie type="email", damit die passende Tastatur erscheint.
• Schrift in Eingabefeldern ist mindestens 16 Pixel groß, sonst zoomt Safari auf dem iPhone beim Antippen hinein.
• Wischgesten haben eine Alternative zum Tippen, etwa Pfeile an einem Karussell.
• Fixierte Kopfzeilen verdecken weder den halben Bildschirm noch fokussierte Elemente.

Responsive Webdesign testen

Ob eine Website wirklich responsiv ist, zeigt ein systematischer Test. Den früheren Google-Test auf Optimierung für Mobilgeräte gibt es seit Ende 2023 nicht mehr. Diese Schritte helfen:

1. Fenster ziehen

   Ziehen Sie das Browserfenster langsam von breit auf schmal und achten Sie auf überlappende Elemente, abgeschnittene Texte und seitliches Scrollen.

2. Geräteansicht und echte Geräte

   Die Geräteansicht in den Entwicklertools von Chrome, Edge und Firefox simuliert Bildschirmgrößen. Prüfen Sie zusätzlich auf einem iPhone, einem Android-Smartphone und einem Tablet, auch im Querformat.

3. Zoom

   Vergrößern Sie am Desktop auf 200 und 400 Prozent. Bei 400 Prozent entspricht die Ansicht etwa 320 CSS-Pixeln Breite, und alles muss ohne seitliches Scrollen lesbar bleiben.

4. Ladezeit mobil

   PageSpeed Insights zeigt in der mobilen Auswertung, ob große Bilder oder Skripte das Laden bremsen.

5. Kernaufgaben durchspielen

   Formular abschicken, Telefonnummer antippen, Menü öffnen und schließen, eine Leistung finden. Was hier hakt, kostet Anfragen.

Responsiv, adaptiv oder eigene mobile Website?

Adaptives Design arbeitet mit einer festen Anzahl vorbereiteter Layouts, etwa für Smartphone, Tablet und Desktop. Dazwischen bleibt das Layout starr, teilweise liefert der Server je nach Gerät eine eigene Version aus. Responsive Designs passen sich dagegen fließend an jede Breite an.

In der Praxis verschwimmen die Grenzen: Moderne Websites sind im Kern responsiv und nutzen an einzelnen Stellen adaptive Elemente, etwa ein anderes Bildmotiv per picture-Element.

Häufige Fehler

• Ausgeblendete Inhalte: Inhalte, die mobil versteckt sind, fehlen Besuchern und Google. Kürzen Sie lieber für alle Geräte.
• Breite Tabellen: Sie brauchen auf kleinen Bildschirmen einen eigenen Scrollbereich oder eine andere Darstellung.
• Text in Bildern: Er wird auf dem Smartphone unlesbar klein. Echter Text skaliert mit.
• Pop-ups ohne erreichbares Schließen-Kreuz: Auf kleinen Bildschirmen liegt es oft außerhalb des sichtbaren Bereichs.

Responsive Website planen lassen

Häufige Fragen