Layout-Pattern im Responsive Web Design

Von: Jonas

In diesem Beitrag zeigen wie die bekanntesten Layout Pattern im responsive Webdesign.

Aktualisiert von 2014 – 2023 2 Kommentare

Um eine Webseite für verschiedene Geräte und Bildschirmgrößen zu optimieren gibt es unterschiedliche Konzepte nach denen sich der Inhalt einer Seite verhalten kann. Um auf allen Größen eine gute Figur zu machen verschiebt sich der Inhalt nach gewissen »Responsive Layout-Pattern«. Die meistgenutzten Layout-Muster zeigen anhand von Beispielen. Auch Google und Microsoft haben responsive Layouttechniken detailliert in ihren Developer-Websites beschrieben.

Mostly Fluid

Das »Mostly Fluid«-Layout nutzt das Standardverhalten von Elementen. Boxen die in einer Zeile rechts nicht mehr passen, rutschen nach unten weg.

Live-Beispiel dieses Layouts

Column-Drop

Das sog. »Column Drop«-Layout ist etwas komplexer aufgebaut als »Mostly Fluid«. Zwar rutschen ebenfalls die Spalten nach unten weg, aber in einer anderen Reihenfolge. Der Inhalt steht in der Desktop-Ansicht in der Mitte, die Spalten rutschen zuerst rechts, dann links weg.

Live-Beispiel dieses Layouts

Layout-Shifter

Der sog. »Layout-Shifter« verwendet in der Desktop-Ansicht eine Spalte die links angeordnet ist, der Inhalt befindet sich rechts daneben. In kleineren Layout-Varianten rutscht diese Spalte dann nach oben über den Inhalt.

Live-Beispiel dieses Layouts

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing