Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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 »Layout-Pattern«. Die meistgenutzten Layout-Muster zeigen wir in diesem Beitrag anhand von Beispielen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Seminar: Modernes Web Design für Grafik und Corporate Design

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

Links / Quellen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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 →