Layout-Pattern im Responsive Web Design

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.

mostly-fluid
Verhalten des »Mostly Fluid«-Layouts im responsive Design

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.

column-drop
Verhalten des »Column Drop«-Layouts im responsive Design

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.

Verhalten des »Layout Shifters« im responsive Design
Verhalten des »Layout Shifters« im responsive Design

Live-Beispiel dieses Layouts

Geschrieben von Jonas

Benutzerbild

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

Feedback & Ergänzungen – 2 Kommentare

  1. Karlsruhe Webdesign
    schrieb am 22.09.2017 um 21:03 Uhr:

    Sehr gelungener Beitrag – Kurz & Knapp, vor allem für Anfänger in diesem Bereich sicherlich sehr hilfreich.

    Liebe Grüße und weiter so!

    Antworten
  2. Fangzahn3
    schrieb am 17.10.2016 um 22:25 Uhr:

    Super Sache, tausendfachen Dank! Responsive Design ist ja wirklich cool, wenn man weiss, wie man damit umgehen muss. Ich werde euch auf jeden Fall weiterempfehlen!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →