kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

2 Kommentare

  1. Fangzahn3

    Verfasst am 17. Oktober 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!

  2. Karlsruhe Webdesign

    Verfasst am 22. September 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!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.