Was ist Responsive Design? Definition und Funktionsweise

Der Begriff stammt von Ethan Marcotte, der ihn 2010 in „A List Apart" geprägt hat; web.dev beschreibt ihn heute als Designstrategie, die auf die Bedürfnisse der Nutzer und die Fähigkeiten ihrer Geräte reagiert. Praktisch heißt das: Ein Inhaltsbereich, der am Telefon einspaltig steht, wird auf dem Tablet zweispaltig und am Bildschirm drei- oder vierspaltig — ohne dass jemand eine zweite Website pflegt.

Die drei Bausteine

Responsive Design besteht aus drei Techniken, die zusammengehören. Fehlt eine, funktioniert der Rest nur halb.

Der Viewport

Ohne Viewport-Angabe rendern mobile Browser eine Seite in einer Desktop-Breite von typischerweise rund 980 Pixeln und verkleinern das Ergebnis. Der Text ist dann unlesbar, und der Besucher muss zoomen. Eine Zeile im head verhindert das:

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

width=device-width bindet die Seitenbreite an die Bildschirmbreite in geräteunabhängigen Pixeln, initial-scale=1 setzt das Verhältnis von CSS-Pixeln zu Gerätepixeln auf 1:1, damit die Seite beim Drehen ins Querformat neu umbricht statt zu zoomen. Von maximum-scale und user-scalable=no rät web.dev ausdrücklich ab: Sie verhindern, dass Nutzer vergrößern können, und schaffen damit ein Barrierefreiheitsproblem.

Flexible Layouts

Früher wurden Spalten in Prozent gerechnet, damit sie nicht bei fester Pixelbreite über den Bildschirm hinauslaufen. Heute erledigen das Flexbox, CSS Grid und mehrspaltige Layouts. Grid kann mit der Einheit fr Anteile des verfügbaren Platzes verteilen und mit einer Mindestbreite so viele Karten pro Zeile setzen, wie hineinpassen — die Anzahl der Spalten ergibt sich aus dem Platz statt aus einer Annahme über das Gerät.

Media Queries

Media Queries sind Filter, die Stile abhängig von Eigenschaften des Ausgabegeräts anwenden: min-width, max-width, orientation, aspect-ratio. Sie sind das Werkzeug für die Umbrüche, die sich mit flexiblen Rastern allein nicht abbilden lassen — etwa wenn aus einer horizontalen Navigation ein Menü wird.

Weniger bekannt, aber praktisch wichtig: Es lässt sich auch das Eingabegerät abfragen. pointer und hover unterscheiden einen Mauszeiger von einem Finger. Das ist relevant, weil die Annahme „großer Bildschirm gleich Maus" falsch ist — Touch-Notebooks gibt es seit Jahren, und ein Hover-Menü ist auf ihnen unbedienbar.

Bilder

Bilder sind die häufigste Ursache für horizontales Scrollen. web.dev empfiehlt zwei Regeln, die zusammen gehören: max-width: 100% im Stylesheet, damit ein Bild nie breiter wird als sein Container, und trotzdem width- und height-Attribute am img-Element, damit der Browser den Platz reserviert, bevor die Datei geladen ist. Ohne die zweite Regel springt das Layout beim Nachladen — genau der Effekt, den die Core Web Vitals als Layout-Instabilität messen.

Die drei Konfigurationen — und warum Google eine davon empfiehlt

Für eine mobiltaugliche Website nennt Google drei Bauweisen:

Konfiguration	URL	HTML	Aufwand
Responsives Webdesign	eine	identisch für alle Geräte	am geringsten
Dynamische Bereitstellung	eine	je nach User-Agent unterschiedlich	hoch, fehleranfällig
Separate URLs	zwei (m.example.com)	getrennte Fassungen	am höchsten

Google empfiehlt responsives Webdesign ausdrücklich, weil es am einfachsten zu implementieren und zu verwalten ist. Die beiden anderen Wege erzeugen eine Menge Folgearbeit, die in der Dokumentation seitenlang beschrieben ist: identische robots-Meta-Tags, identische strukturierte Daten, identische Titel und Beschreibungen, korrekt gepaarte Canonicals und hreflang-Sets für beide Fassungen. Bei responsivem Design entfällt das alles, weil Inhalt und Metadaten pro Gerät ohnehin dieselben sind.

Mobile First bedeutet zwei verschiedene Dinge

Der Begriff wird für zwei Sachverhalte verwendet, und die Verwechslung sorgt regelmäßig für Missverständnisse.

Mobile First als Entwurfsprinzip heißt, zuerst für den kleinen Bildschirm zu gestalten und das Layout nach oben zu erweitern. Das erzwingt Priorisierung: Was auf 390 Pixeln Breite keinen Platz hat, war meistens auch am großen Bildschirm nicht wichtig.

Mobile-First-Indexierung ist dagegen ein Verfahren von Google: Für Indexierung und Ranking wird die mobile Version einer Seite verwendet, gecrawlt mit dem Smartphone-Agent. Daraus folgt eine harte Konsequenz für alle, die nicht responsiv bauen: Was auf der mobilen Fassung fehlt, existiert für die Suche nicht. Google formuliert das nüchtern — wer bewusst weniger Inhalt mobil ausliefert, muss mit einem Rückgang der Zugriffe rechnen. Als Ausweg wird empfohlen, Inhalte in Akkordeons oder Tabs zu verschieben statt sie zu entfernen.

Was Responsive Design für die Sichtbarkeit bedeutet

Ein eigener Rankingfaktor „responsiv" existiert nicht. Google fasst die Frage unter Nutzerfreundlichkeit von Seiten zusammen und stellt dazu eine Selbstprüfung auf: gute Core-Web-Vitals-Werte, sichere Auslieferung über HTTPS, gute Darstellung auf Mobilgeräten, keine erdrückende Werbung, keine aufdringlichen Interstitials, klar erkennbarer Hauptinhalt. Ausdrücklich hält Google fest, dass es kein einzelnes Signal für Nutzerfreundlichkeit gibt und dass gute Werte allein kein Spitzenranking garantieren.

Der eigentliche Hebel ist deshalb nicht das Ranking, sondern was danach passiert. Eine Seite, auf der man zoomen muss, um eine Telefonnummer zu treffen, verliert den Besucher unabhängig von ihrer Position. Bei einer Landingpage mit bezahltem Traffic ist das direkt in Geld messbar.

Woran es in der Praxis scheitert

Nur die Breakpoints beliebter Geräte bedacht. Layouts, die an drei Bildschirmbreiten geprüft wurden, brechen dazwischen. Sinnvoll sind Umbrüche dort, wo der Inhalt es verlangt, nicht dort, wo ein bestimmtes Telefon aufhört.

Tabellen und Code-Blöcke. Breite Inhalte müssen in einem eigenen scrollbaren Container liegen. Sonst scrollt die ganze Seite horizontal.

Touch-Ziele zu klein oder zu dicht. Am Bildschirm mit der Maus nicht auffällig, am Telefon eine Fehlbedienung nach der anderen.

Mobil versteckte Inhalte. Per display: none ausgeblendete Abschnitte lösen das Platzproblem und schaffen ein Indexierungsproblem, weil die mobile Fassung über den Index entscheidet.

Schwere Bilder für kleine Bildschirme. Ein für 2.400 Pixel gerendertes Hero-Bild wird auf dem Telefon auf 390 Pixel skaliert — heruntergeladen wird es trotzdem vollständig.

So macht es Xerx

Wir designen wie Engineers: Tokens vor Komponenten, Komponenten vor Screens. Responsives Verhalten ist dabei keine Nachbearbeitung am Ende, sondern in den Komponenten selbst festgelegt — in Figma gestaltet, im Code gespiegelt und unterwegs dokumentiert, damit Entwickler ein Design ausliefern statt es zu interpretieren. Was dazugehört, steht unter UX/UI Design und Design-Systeme.

Ehrlich zur Abgrenzung: Responsive Design ist breiter als eine Designleistung. Ob eine Seite am Telefon tatsächlich schnell und stabil ist, entscheidet sich in der Umsetzung — Bildgrößen, reservierter Platz, Schriftladen, Bundle-Größe. Deshalb bauen wir in denselben Projekten auch die Frontends und prüfen das Ergebnis mit Lighthouse und Felddaten, nicht am Mockup. Design-Projekte starten bei €3.900, der Endpreis steht nach der Diagnose vor Projektstart fest.

Was wir nicht tun, ist ein Design abzugeben, das nur in drei geprüften Breiten funktioniert. Diese Website hier ist selbst so gebaut: ein Layout, das sich stufenlos verhält, und ein Farbsystem, das der Systemeinstellung des Besuchers für Hell- oder Dunkelmodus folgt, statt ihm eine Fassung aufzuzwingen.

FAQ