Responsive Design ist ein Ansatz im Webdesign, bei dem sich ein einziges Layout fließend an die Breite des Anzeigefensters anpasst und auf jedem Gerät dieselben Inhalte unter derselben Adresse zeigt. Der Begriff stammt aus einem Artikel von Ethan Marcotte aus dem Jahr 2010. Er löste die bis dahin übliche Praxis ab, für Telefone eine eigene mobile Seite unter einer m-Subdomain zu pflegen. Heute ist Responsive Design der Normalfall.
- Responsive Design
Gestaltungsansatz, bei dem sich ein einziges Layout fließend an die Breite des Anzeigefensters anpasst.
Beispiel: „Die Seite ist responsive, deshalb rutschen die vier Teaser auf dem Telefon untereinander.“Auch: RWD als Kurzform von Responsive Web Design, im Deutschen auch Responsives Webdesign. Die drei Bezeichnungen meinen dasselbe.
Abgrenzung: Adaptive Design erreicht ein ähnliches Ergebnis über eine feste Zahl von Layoutstufen, zwischen denen die Seite umschaltet.
Was ein Layout responsive macht
Mehrere Bausteine greifen ineinander. Das Raster rechnet in relativen Einheiten, meist in Prozent, damit die Spalten mitwachsen. Bilder bekommen eine Höchstbreite von 100 Prozent und laufen dadurch nie über ihren Container hinaus. Media Queries fragen die Breite des Fensters ab und ändern die Anordnung dort, wo das reine Mitwachsen an eine Grenze kommt: Aus drei Spalten wird eine, aus der Hauptnavigation ein aufklappbares Menü.
/* Das Raster rechnet relativ, die Spalte wächst mit */
.inhalt { width: 100%; max-width: 72rem; }
/* Bilder laufen nie über ihren Container hinaus */
img { max-width: 100%; height: auto; }
/* Erst wo das Mitwachsen endet, ändert eine Abfrage die Anordnung */
.teaser { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) {
.teaser { grid-template-columns: repeat(3, 1fr); }
}Seit CSS Grid und Flexbox überall verfügbar sind, übernimmt das Layoutmodell einen Teil dieser Arbeit: Eine Kachelreihe bricht um, ohne dass dafür eine Abfrage nötig wäre. Für einen grundsätzlichen Wechsel der Anordnung brauchst du weiterhin eine Media Query.
Warum der Ansatz sich durchgesetzt hat
Der praktische Kern ist der Betrieb: ein Quelltext unter einer Adresse. Eine Änderung am Menü wird einmal gemacht und wirkt auf jedem Gerät. In unseren Relaunch-Projekten wiegt dieser Punkt im Alltag am schwersten, weil jede getrennt gepflegte mobile Version über die Jahre inhaltlich auseinanderläuft.
Dazu kommt, dass sich Bildschirmgrößen schlecht in Gerätekategorien einteilen lassen. Ein Browserfenster am Schreibtisch wird auf halbe Breite gezogen, ein Faltgerät klappt auf. Ein Layout, das auf jede Breite reagiert, deckt solche Fälle mit ab.
Wo Responsive Design an seine Grenzen kommt
Ein Layout, das auf jeder Breite funktioniert, löst noch keine inhaltliche Frage. Wenn auf dem Telefon dieselben zwölf Menüpunkte erscheinen wie am großen Bildschirm, ist die Seite technisch responsive und trotzdem mühsam zu bedienen. Die Breite des Fensters sagt außerdem nichts darüber aus, womit jemand bedient: Ein Touchscreen braucht größere Ziele als eine Maus.
Auch die Datenmenge bleibt eine eigene Aufgabe: Ein Bild, das per CSS auf Telefonbreite verkleinert wird, ist weiterhin so groß, wie der Server es ausgeliefert hat. Wir empfehlen deshalb, jedes responsive Projekt zusätzlich auf echten Geräten abzunehmen, weil das verkleinerte Desktop-Fenster weder die Bedienung per Finger noch die Ladezeit abbildet.