Responsive Layouts

Eine Website wird heute auf Bildschirmen zwischen etwa 360 und weit über 2000 Pixeln Breite betrachtet – auf Smartphones im Hochformat, Tablets, Laptops und großen Monitoren. In den meisten Branchen kommt inzwischen mehr als die Hälfte der Besuche von mobilen Geräten. Eine Seite, die nur auf dem großen Bildschirm im Büro gut aussieht, verfehlt damit einen großen Teil ihres Publikums. Responsive Layouts passen sich an die verfügbare Breite an: Spalten stapeln sich, Navigationen klappen ein, Bilder werden neu zugeschnitten. Der Begriff geht auf den Webentwickler Ethan Marcotte zurück, der das Prinzip 2010 beschrieben hat.

1. Wie sich ein Layout anpasst

Ziehen Sie den Regler und beobachten Sie, wie sich die Beispielseite verändert. Achten Sie darauf, an welchen Stellen die Umbrüche passieren und was jeweils mit Navigation, Einstiegsbereich und Karten geschieht.

Zwischen den Umbruchpunkten ist das Layout fließend: Spalten werden breiter oder schmaler, Bilder skalieren mit. An den Umbruchpunkten ändert sich die Struktur. Früher wurden Umbruchpunkte an bestimmten Geräten ausgerichtet, etwa am iPhone oder iPad. Da es heute unzählige Bildschirmgrößen gibt, gilt die bessere Regel: Ein Umbruch wird dort gesetzt, wo der Inhalt ihn braucht – etwa wenn drei Karten nebeneinander so schmal werden, dass ihr Text nicht mehr gut lesbar ist.

2. Mobile First

Der Webdesigner Luke Wroblewski hat 2009 das Prinzip „Mobile First“ geprägt: Eine Seite wird zuerst für den kleinsten Bildschirm gestaltet und dann für größere erweitert. Das klingt nach einer technischen Detailfrage, verändert aber die Arbeitsweise grundlegend. Auf dem Handy ist der Platz knapp, und man muss sich entscheiden, was wirklich wichtig ist. Diese Priorisierung kommt dann auch der Desktop-Version zugute, die fokussierter und klarer wird. Wer dagegen vom großen Bildschirm aus startet, muss später Inhalte zusammenquetschen oder verstecken, und die mobile Version wirkt wie ein Kompromiss.

3. Mehr als nur stapeln

Die einfachste Form responsiver Gestaltung ist das Stapeln: Was auf dem Desktop nebeneinandersteht, steht auf dem Handy untereinander. Das funktioniert oft, aber nicht immer. Manchmal ändert sich beim Stapeln die Reihenfolge ungünstig, etwa wenn ein Bild vor dem erklärenden Text landet oder die wichtigste Handlung ganz unten verschwindet. Gute responsive Gestaltung überlegt für jeden Bereich, welche Reihenfolge auf dem kleinen Bildschirm sinnvoll ist. Manche Inhalte werden auf dem Handy gekürzt, etwa lange Einleitungen, andere werden anders dargestellt, etwa Tabellen als Liste von Karten. Bilder werden nicht nur verkleinert, sondern bei Bedarf neu zugeschnitten, damit das Motiv auch im Hochformat erkennbar bleibt.

Besondere Aufmerksamkeit verdienen Bedienelemente. Auf dem Touchscreen gibt es keinen Mauszeiger, und Finger sind ungenauer. Knöpfe und Links brauchen deshalb ausreichend große Zielflächen und Abstände zueinander. Inhalte, die nur beim Überfahren mit der Maus erscheinen, sind auf dem Handy nicht erreichbar. Und Formulare sollten die passende Bildschirmtastatur aufrufen, etwa die Zifferntastatur für Telefonnummern.

4. Moderne Techniken

Technisch ist responsive Gestaltung heute deutlich einfacher als noch vor einigen Jahren. CSS Grid und Flexbox ermöglichen Layouts, die sich weitgehend selbst anpassen, etwa Kartenraster, die automatisch so viele Spalten bilden, wie Platz ist. Mit fließenden Größen lassen sich Schriften und Abstände stufenlos zwischen einem Minimal- und einem Maximalwert skalieren. Container Queries erlauben es, dass eine Komponente auf die Breite ihres Elternelements reagiert statt auf die Breite des ganzen Bildschirms – eine Karte sieht dann in einer schmalen Seitenleiste anders aus als im breiten Hauptbereich, ohne dass dafür eigene Varianten gepflegt werden müssen. Für Gestalter bedeutet das: Sie entwerfen nicht mehr drei feste Seiten, sondern Regeln, nach denen sich Inhalte anordnen.

5. Responsive prüfen und beauftragen

Geprüft wird auf echten Geräten und im Browser. Die Entwicklerwerkzeuge aller großen Browser bieten eine Geräteansicht, in der sich beliebige Breiten simulieren lassen. Wichtig ist, nicht nur die typischen Größen zu prüfen, sondern den Regler langsam von schmal nach breit zu ziehen – so fallen Zwischengrößen auf, in denen Texte umbrechen, Bilder abgeschnitten werden oder Elemente sich überlappen. Ergänzend gehört ein Test auf mindestens einem echten Smartphone dazu, denn Bedienung mit dem Finger, Bildschirmhelligkeit und Ladezeit im Mobilfunknetz lassen sich am Schreibtisch nur begrenzt nachstellen.

Wer eine Website beauftragt, sollte die mobilen Entwürfe nicht als Nachtrag behandeln. Lassen Sie sich die wichtigsten Seiten in der mobilen Version zeigen, bevor die Desktop-Version abgenommen wird, und prüfen Sie, ob die wichtigste Handlung auch auf dem Handy ohne langes Scrollen erreichbar ist. Google bewertet Websites seit einigen Jahren überwiegend anhand der mobilen Version. Eine schwache mobile Seite schadet deshalb nicht nur den Besuchern, sondern auch der Sichtbarkeit in der Suche. Mit dieser Lektion endet das Modul Layout und Raster. Im nächsten Modul geht es um Bild und Marke: Bildsprache, Icons, Logo und das kleine Designsystem, das alles zusammenhält.

Ein Tipp für die Abnahme: Gehen Sie die wichtigsten Seiten einmal auf dem eigenen Handy durch und versuchen Sie, die zentrale Aufgabe zu erledigen – eine Anfrage senden, ein Produkt finden, eine Telefonnummer anrufen. Wo Sie zögern, zoomen oder suchen müssen, besteht Handlungsbedarf, ganz gleich, wie gut die Seite auf dem großen Bildschirm aussieht.

Responsive Gestaltung ist damit kein Zusatz, sondern die Grundform jeder Website. Wer sie von Anfang an mitdenkt, spart spätere Umbauten und erreicht seine Besucher dort, wo sie tatsächlich sind: meist unterwegs, mit dem Smartphone in der Hand und wenig Zeit. Eine gute mobile Seite ist deshalb oft der wichtigste digitale Kontaktpunkt eines Unternehmens überhaupt.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.