Responsive Webdesign Beispiele: Layout-Muster erkennen und einordnen

Die meisten Beispielsammlungen zeigen zwei Bilder derselben Website, eines breit, eines schmal, und nennen das Ergebnis responsive. Die eigentlich interessante Frage bleibt dabei offen: Nach welchem sichtbaren Muster ist dieses Beispiel gebaut, an welchen Schwellen springt sein Layout, und wurde es von der schmalen oder von der breiten Ansicht aus entwickelt?

Dieser Katalog ordnet konkrete responsive Umsetzungen deshalb zweifach ein, nach Layout-Muster und nach Branche, und liefert danach den Ablauf, mit dem Sie jede beliebige Website selbst einordnen. Die Musternamen Mostly Fluid, Column Drop, Layout Shifter und Off Canvas beschreiben nicht die verwendete Technik, sondern das beobachtbare Verhalten des Layouts. Der Begriff Responsive Webdesign selbst geht auf Ethan Marcotte zurück, der ihn 2010 in einem Artikel für A List Apart einführte; er bezeichnet den Ansatz, eine Website so zu entwickeln, dass sie auf verschiedenen Endgeräten optimal dargestellt wird. Die Beispieldarstellungen einer responsiven Website zeigen dabei dieselben Elemente, angepasst an unterschiedliche Bildschirmauflösungen. Die Mustersystematik entstand später und unterscheidet unter anderem Mostly Fluid, das schlicht das Standardverhalten der Elemente nutzt, von Column Drop.

Eine Vorbemerkung zur Belastbarkeit: Jede Einordnung ist eine Momentaufnahme, keine dauerhafte Zertifizierung. Websites werden laufend überarbeitet, Unterseiten derselben Domain nutzen oft verschiedene Muster, und ein Teil der Entscheidungen wird erst in den CSS-Regeln eindeutig. Behandeln Sie die folgenden Beispiele als Prüfaufgaben. Die fachliche Abgrenzung gegenüber der separaten mobilen Webseite, der adaptiven und der liquiden Website wird hier bewusst nicht vertieft, es geht ausschließlich um die Analyse vorhandener responsiver Umsetzungen.

Erkennungsmatrix: vier Muster in einer Tabelle

Die wichtigste Regel dieser Tabelle: Sie gilt pro Seitenbereich, nicht pro Website. Ein Shop kann gleichzeitig ein Column-Drop-Produktgrid, einen Off-Canvas-Filter und eine Mostly-Fluid-Inhaltsspalte besitzen. Wer eine ganze Domain mit einem einzigen Muster etikettiert, hat meistens nur die Navigation angesehen.

Responsive Beispiele nach Layout-Muster

Mostly Fluid: fließende Flächen mit begrenzter Maximalbreite

Der Inhalt nutzt die verfügbare Breite flexibel, wächst auf großen Displays aber nicht unbegrenzt weiter. Links und rechts entstehen zunehmende Außenabstände. Echte Umbauten passieren erst an wenigen, weit auseinanderliegenden Schwellen.

Typische Erkennungsmerkmale:

• Inhaltsflächen werden beim Verkleinern zunächst kontinuierlich schmaler.
• Die Anordnung bleibt über einen großen Breitenbereich stabil.
• Bilder skalieren proportional mit ihrem Container.
• Auf sehr breiten Displays wächst nur der Rand, nicht die Textspalte.
• Deutliche Layout-Sprünge treten erst an wenigen Schwellen auf.

Der Dreißig-Sekunden-Test: Ziehen Sie das Fenster von der größten auf eine mittlere Desktopbreite. Bleibt die Zeilenlänge des Fließtextes nahezu konstant, ist eine Maximalbreite gesetzt, und Mostly Fluid ist wahrscheinlich.

Beispiele zum Nachprüfen:

Mercedes-Benz: Die Website des Herstellers wird in deutschsprachigen Beispielsammlungen als responsive Umsetzung geführt. Besonders bei großformatigen Fahrzeugmotiven lässt sich beobachten, wie Medienflächen, Textpositionen und Bedienelemente auf unterschiedliche Bildschirmbreiten reagieren. Je nach Seitentyp kommen neben fließenden Bereichen auch deutliche Layout-Wechsel vor.

Apple Produktseiten: Viele Produktseiten arbeiten mit großzügigen, zentrierten Inhaltsbereichen, skalierenden Medien und wenigen klaren Wechseln. Große Bildflächen und Textblöcke bleiben zunächst in derselben visuellen Ordnung. Auf schmalen Displays werden Abstände reduziert, Texte neu umbrochen und nebeneinander platzierte Elemente vertikal angeordnet.

Stripe: Die Marketingseiten kombinieren flexible Inhaltsbreiten mit einer begrenzten zentralen Fläche. Karten, Texte und grafische Elemente reagieren fließend, bevor komplexere Gruppen auf kleineren Ansichten vereinfacht oder gestapelt werden. Einzelne Bühnen zeigen zusätzlich Merkmale eines Layout Shifters, prüfen Sie sie deshalb getrennt.

Mostly Fluid eignet sich besonders für redaktionelle Seiten, Markenauftritte und Produktpräsentationen, bei denen die visuelle Hierarchie auf vielen Breiten ähnlich bleiben soll.

Column Drop: Spalten fallen schrittweise nach unten

Das Layout beginnt breit mit mehreren Spalten. Wird der Platz knapp, rutscht zuerst eine Spalte unter die anderen, danach die nächste, bis alles linear untereinander steht.

Typische Erkennungsmerkmale:

• Drei Spalten werden zunächst zu zwei, später zu einer.
• Eine Seitenleiste wandert unter den Hauptinhalt, nicht in ein Menü.
• Kartenreihen zeigen nacheinander weniger Karten pro Zeile.
• Die inhaltliche Reihenfolge bleibt nachvollziehbar.
• Die Änderungen erfolgen in klar sichtbaren Stufen, nicht gleitend.

Der Dreißig-Sekunden-Test: Zählen Sie die Elemente in der ersten Rasterzeile bei einer großen Desktopbreite, einer Laptopbreite, einer Tabletbreite und einer Smartphonebreite. Ergibt das eine absteigende Zahlenfolge, liegt Column Drop vor.

Beispiele zum Nachprüfen:

IKEA Shop und Kategorieseiten: Produktübersichten zeigen auf großen Bildschirmen mehrere Produkte pro Reihe. Mit abnehmender Breite sinkt die Spaltenzahl. Filter, Sortierung und Produktkarten erhalten mehr Raum oder wechseln in kompaktere Bedienelemente. Die Produktmatrix ist der klassische Fall von Column Drop im E-Commerce.

Zalando: Auch hier ist das Muster an Produktlisten am deutlichsten. Die Anzahl der sichtbaren Produktspalten wird abhängig vom Viewport reduziert, während Filter und Navigation auf kleinen Displays anders zugänglich gemacht werden. Die Seite kombiniert damit Column Drop im Katalog mit Off-Canvas- oder Overlay-Verhalten bei den Bedienelementen.

Smashing Magazine: Redaktionelle Übersichten und Artikelseiten zeigen dieselbe Mechanik mit Artikelkarten und ergänzenden Modulen. Nicht jede Ansicht ist eine reine Column-Drop-Umsetzung, doch das stufenweise Stapeln von Inhaltsbereichen ist deutlich erkennbar.

Bei der Analyse ist zwischen einem echten Layout-Wechsel und normalem Textumbruch zu unterscheiden. Wenn lediglich eine Überschrift eine zusätzliche Zeile benötigt, ist das noch kein Breakpoint. Wird dagegen eine dreispaltige Kartenreihe zweispaltig, liegt eine definierte Layout-Änderung nahe.

Layout Shifter: Elemente wechseln Position und Gewichtung

Hier wird nicht nur gestapelt, sondern neu komponiert. Ein Bild steht auf dem Desktop rechts neben dem Text und mobil darüber, eine Nebeninformation wandert in den Lesefluss, ein Bedienelement wechselt die Gruppe.

Typische Erkennungsmerkmale:

• Inhalte werden nicht nur gestapelt, sondern neu sortiert.
• Medien wechseln von einer seitlichen in eine obere Position.
• Ein Element ist mobil prominenter als auf dem Desktop, etwa ein fixierter Kaufbutton.
• Desktop und Mobile wirken wie zwei bewusst gestaltete Kompositionen.

Der Dreißig-Sekunden-Test: Notieren Sie die Reihenfolge der ersten fünf sichtbaren Elemente auf einer breiten Desktopansicht und wiederholen Sie das auf einer schmalen Smartphoneansicht. Weicht die Reihenfolge ab, ist es ein Layout Shifter, kein Column Drop.

Beispiele zum Nachprüfen:

Mitsubishi Motors: Auch Mitsubishi Motors wird in deutschsprachigen Sammlungen responsiver Websites geführt. Fahrzeugseiten kombinieren großformatige Medien, Modellinformationen und Aktionsflächen, deren Reihenfolge, Größe und Gruppierung sich bei schmaleren Ansichten deutlich verändern können.

Airbnb: Suchoberflächen, Unterkunftsseiten und Kartenansichten verändern ihre Komposition abhängig von der verfügbaren Fläche. Suchfelder werden verdichtet, Inhalte anders gruppiert, Karten oder Filter erhalten je nach Gerät eine andere Position. Die mobile Ansicht ist erkennbar keine schmalere Desktopseite.

Nike: Kampagnen- und Produktseiten arbeiten mit stark inszenierten Medien. Text, Bilder, Produktinformationen und Handlungsaufforderungen wechseln zwischen den Viewports ihre Anordnung. Besonders an Bild-Text-Bühnen wird sichtbar, dass das Layout gezielt neu komponiert wird.

Der entscheidende Wechsel liegt häufig auf einer mittleren Tabletbreite. Zwei Aufnahmen, eine vom Desktop und eine vom Smartphone, reichen als Beleg deshalb nicht aus.

Off Canvas: Navigation, Filter oder Werkzeuge außerhalb der Fläche

Navigation, Filter oder Werkzeuge liegen außerhalb des sichtbaren Inhaltsbereichs bereit und erscheinen erst nach einer Interaktion, meist über ein Menüsymbol oder einen Filterknopf. Das Muster spart Platz, ohne Funktionen zu entfernen.

Typische Erkennungsmerkmale:

• Eine Fläche fährt seitlich ein und legt sich über den Inhalt oder schiebt ihn weg.
• Die Hauptnavigation ist mobil zunächst verborgen.
• Shopfilter öffnen sich als Panel oder Vollbildfläche.
• Der Hintergrund wird während der Bedienung häufig abgedunkelt oder gesperrt.
• Das eingeblendete Element besitzt eine eigene Schließen-Funktion.

Der Dreißig-Sekunden-Test: Öffnen Sie das mobile Menü und achten Sie auf die Bewegungsrichtung. Klappt etwas nach unten auf, ist es ein Dropdown. Kommt es von der Seite und deckt den Inhalt ab, ist es Off Canvas.

Beispiele zum Nachprüfen:

Zalando Filter: Auf kleineren Ansichten werden umfangreiche Filter nicht dauerhaft neben der Produktliste angezeigt, sondern über eine separate Bedienfläche geöffnet. Das Produktgrid bleibt dadurch breit genug, während die Filter erreichbar bleiben.

IKEA Navigation: Umfangreiche Kategorien werden auf schmalen Geräten in kompakte Menüs verlagert. Die mobile Navigation bildet einen eigenen Funktionsraum, statt alle Links oberhalb des Inhalts zu stapeln.

GitHub: Die öffentliche Website und einzelne Produktoberflächen verlagern Menüs bei begrenzter Breite in eigene Flächen, während der primäre Inhalt im Vordergrund bleibt.

Formulieren Sie das Ergebnis präzise: Die Navigation nutzt Off Canvas, während der Inhaltsbereich nach Mostly Fluid oder Column Drop reagiert.

Responsive Webdesign Beispiele nach Branche

Beispielsammlungen für gelungenes Responsive Webdesign werden üblicherweise nach Einsatzzweck gegliedert, etwa Portfolio, E-Commerce, Event und Unternehmen. Die Branche beeinflusst, welches Muster besonders sichtbar wird.

Shop: Produktgrid plus mobile Funktionsflächen

Onlineshops zeigen fast immer eine Kombination. Das Produktgrid folgt Column Drop, die Filter wechseln in ein Off-Canvas-Panel, und die Produktdetailseite ist ein Layout Shifter, weil Bildergalerie, Preis, Variantenwahl und Kaufaktion ihre Reihenfolge tauschen oder teilweise fixiert werden.

Prüfen Sie ein Shop-Beispiel in drei getrennten Schritten:

1. Wie verändert sich die Anzahl der Produktspalten über die Breiten?
2. Wo liegen Filter und Sortierung auf jeder geprüften Breite?
3. Bleibt die Kaufaktion bei jeder Breite ohne Scrollen erreichbar?

Unternehmen: fließender Rahmen mit wechselnden Inhaltsbühnen

Herstellerseiten wie Mercedes-Benz oder Mitsubishi Motors setzen auf große Medienflächen und begrenzte Inhaltsbreiten. Der äußere Rahmen verhält sich Mostly Fluid, einzelne Bühnen reagieren als Layout Shifter: Text steht breit neben dem Motiv und schmal darunter, damit Motiv und Inhalt lesbar bleiben. Mehrspaltige Leistungs- oder Modellübersichten folgen dagegen dem Column-Drop-Prinzip.

Wichtig ist die Seitenauswahl. Startseite, Modellübersicht, Karrierebereich und Kontaktseite stammen häufig aus verschiedenen Ausbaustufen und nutzen unterschiedliche Muster. Ein Urteil über die Domain, das nur auf der Startseite beruht, ist wertlos.

Portfolio: flexibles Raster und bewusste Neusortierung

Portfolios von Designstudios, Fotografen und Entwicklern zeigen breit mehrere Arbeiten nebeneinander, mittig weniger Spalten und mobil eine lineare Folge. Ein gleichmäßiges Raster spricht für Column Drop. Werden Projekte unterschiedlich groß inszeniert, neu sortiert oder mit wechselnden Textpositionen kombiniert, kommt ein Layout Shifter hinzu.

Der ergiebigste Vergleich ist hier Übersicht gegen Projektdetail. Die Übersicht folgt meist einem Raster, die Detailseite mit großen Bildern und Textblöcken eher Mostly Fluid.

Prüfblock: ein beliebiges Beispiel in fünf Schritten einordnen

Die technischen Bausteine, auf die dieser Ablauf trifft, sind das flexible Layout (Float, Flexbox, CSS Grid), CSS Media Queries, der Viewport und responsive Bilder.

1. Sichtbare Zustände dokumentieren

Öffnen Sie dieselbe Seite in mindestens fünf Breiten: schmale Smartphoneansicht, breite Smartphoneansicht, Tabletansicht, kleine Desktopansicht, große Desktopansicht. Notieren Sie je Zustand:

• Anzahl der Spalten
• Reihenfolge der Inhalte
• Position von Navigation, Filter und Nebenflächen
• Breite des zentralen Inhalts
• Sichtbare, verborgene oder neu gruppierte Elemente

2. Das Muster pro Bereich bestimmen

Wenden Sie die Erkennungsmatrix getrennt auf Kopfbereich, Hauptinhalt, Nebenflächen und Fußbereich an. Mehrfachzuordnungen sind der Normalfall und kein Widerspruch: Ein Shop kann ein Column-Drop-Produktgrid, einen Off-Canvas-Filter und eine Mostly-Fluid-Inhaltsfläche zugleich besitzen.

3. Breakpoints eingrenzen

Breakpoints sind Schwellenwerte für Layout-Änderungen und hängen direkt mit den Media Queries zusammen, die diese Schwellen definieren. Verkleinern oder vergrößern Sie den Viewport langsam und markieren Sie den Moment, in dem sich Spaltenzahl, Navigation oder Reihenfolge ändern. Liegt der Wechsel beispielsweise zwischen 760 und 780 Pixeln, verfeinern Sie die Prüfung in diesem Bereich. Die sichtbare Änderung liefert den praktischen Wert, den exakten finden Sie in den Media Queries der Entwicklerwerkzeuge.

Nicht jede Veränderung stammt von einem Breakpoint. Flexible Grid-Spalten, proportionale Bilder und Textumbrüche passen sich kontinuierlich an. Ein Breakpoint liegt vor allem dann nahe, wenn mehrere Eigenschaften gleichzeitig umschalten, etwa Spaltenzahl und Navigation zusammen.

4. Mobile First oder Desktop First prüfen

Für die Umsetzung werden zwei gegenläufige Vorgehensweisen unterschieden: Graceful Degradation, also Desktop First, und Progressive Enhancement, also Mobile First. Aus zwei Screenshots ist das nicht zu entscheiden, aus dem CSS schon.

Hinweise auf Mobile First:

• Die Basisregeln beschreiben die schmale, lineare Ansicht.
• Zusätzliche Spalten erscheinen über Media Queries mit min-width.
• Komplexität und Abstände nehmen mit wachsendem Viewport zu.
• Größere Ansichten erweitern ein bereits funktionsfähiges Grundlayout.

Hinweise auf Desktop First:

• Die Basisregeln beschreiben die breite Mehrspaltenansicht.
• Media Queries mit max-width reduzieren oder überschreiben das Layout.
• Spalten, Abstände und Navigation werden für kleinere Breiten zurückgebaut.
• Mobile Regeln enthalten viele Korrekturen für zuvor gesetzte Desktopwerte.

Einzelne Regeln beider Art beweisen nichts, moderne Websites mischen beide Richtungen. Entscheidend ist, welche Ansicht die Basisregeln definieren und in welche Richtung die Mehrzahl der strukturellen Erweiterungen zeigt.

5. Ergebnis präzise formulieren

Eine belastbare Einordnung könnte so lauten:

Die Produktübersicht nutzt Column Drop, das Raster wechselt von vier auf drei, zwei und schließlich eine Spalte. Der Filter öffnet unterhalb der beobachteten Schwelle als Off-Canvas-Panel. Sichtbare Layout-Wechsel liegen ungefähr bei den gemessenen Viewportbreiten, die exakten Werte stehen in den Media Queries. Die grundlegenden Grid-Regeln sind Mobile First aufgebaut, da zusätzliche Spalten überwiegend über min-width ergänzt werden. Geprüft wurden Kategorie- und Detailseite, nicht die gesamte Domain.

Diese Form ist belegbar, die Aussage “die Seite ist responsive” nicht.

Fünf Fehleinordnungen, die den Befund unbrauchbar machen

• Textumbruch als Breakpoint zählen. Eine Überschrift, die eine zweite Zeile braucht, ist kein Layout-Wechsel. Ein Raster, das von drei auf zwei Spalten geht, schon.
• Nur zwei Breiten prüfen. Der interessanteste Wechsel liegt oft im Bereich zwischen Tablet und Laptop und wird von der Kombination Desktop plus Smartphone übersprungen.
• Die Website statt den Bereich etikettieren. Muster gelten pro Bereich, die Zusammenfassung entsteht aus mehreren Befunden.
• Jedes Hamburger-Menü als Off Canvas verbuchen. Entscheidend ist, ob eine Fläche einfährt und den Inhalt überdeckt, nicht ob ein Symbol drei Striche zeigt.
• Die Startseite als Beleg für die Domain nehmen. Prüfen Sie zusätzlich eine Listen- und eine Detailseite.

Kurzcheckliste für die Bewertung

• Bleiben zentrale Inhalte bei jeder Breite erreichbar und verständlich?
• Ist je Seitenbereich benannt, welches Muster gilt?
• Liegen die Layout-Wechsel an inhaltlich sinnvollen Punkten?
• Bleibt die Reihenfolge trotz verschobener Elemente logisch?
• Sind Navigation, Filter und wichtige Aktionen auch schmal auffindbar und ausreichend groß bedienbar?
• Passen Bilder und Medien sich dem verfügbaren Raum an, statt ihn zu sprengen?
• Lassen sich die beobachteten Schwellen in den Media Queries bestätigen?
• Ist Mobile First, Desktop First oder eine Mischform erkennbar?

Die stärksten Beispiele sind selten die spektakulärsten. Belastbar wird ein Beispiel erst, wenn Muster, Breakpoints und Entwicklungsrichtung getrennt benannt und im CSS nachgeprüft sind. Genau das unterscheidet eine responsive Analyse von einer Sammlung schöner Screenshots.