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

Die Layout-Typen einer Website: Fixed, Fluid & Elastic

Bei der Konzeption einer Website müsst ihr entscheiden, wie sich das Layout im Browser verhalten soll. Soll die Website immer gleich breit sein? Sollen sich die Elemente der Breite des Browserfensters anpassen? Soll sich das Layout gar proportional verkleinern? In diesem Artikel erfahrt ihr welche Vor- und Nachteile die verschiedenen Layout-Typen haben und welche Auswirkungen eure Entscheidung auf die mobile Variante einer Website hat.

Fixed Layout (starres Layout)

Layouts mit einem starren Gestaltungsraster, also einem Raster das auf festen Pixelwerten basiert, nennt man „fixed“. Die Website arbeitet dabei mit festgelegten Abmessungen, die sich auch dann nicht verändern, wenn das Browserfenster größer oder kleiner wird. Die Website nimmt einen festgelegten Bereich im Browser ein. Ist das Browserfenster kleiner, wird die Seite nicht vollständig angezeigt und es werden Scrollbalken angezeigt. Im ungünstigsten Fall entstehen sogar Darstellungsfehler. Ist das Browserfenster größer als die Website, entsteht ein Freiraum um die Seite herum. Dieser Freiraum sollte vom Webdesigner ebenfalls möglichst ansprechend gefüllt werden.

Exemplarischer Aufbau eines fixed Layouts.
Exemplarischer Aufbau eines fixed Layouts.

Der Layouttyp „fixed“ war vor der Erfindung von Responsive Design am stärksten verbreitet – ist heute jedoch kaum noch anzutreffen.

Vorteile eines starren Layouts

Nachteile eines starren Layouts

Demo anschauen

Fluid Layout (flüssiges Layout)

Bei einem fluid Layout passt sich die Website der Breite des Browserfensters an, und nutzt so den zur Verfügung stehenden Platz optimal aus. Auf großen Monitoren können also mehr Inhalte abgebildet werden als auf kleinen Monitoren. Um die notwendige Flexibilität zu erreichen, müssen einige (oder alle) Spalten des Gestaltungsrasters variabel sein. Diese Spalten basieren auf Prozentwerten und nicht auf Pixelwerten. Die Website ist normalerweise nur in der horizontalen Ausrichtung flexibel, die vertikale Ausrichtung bleibt starr. Häufig wird auch eine Obergrenze für die maximale Ausbreitung des Designs festgelegt.

Exemplarischer Aufbau eines fluid Layouts
Exemplarischer Aufbau eines fluid Layouts

Ein fluid Design lässt sich nicht so einfach gestalten wie ein fixed Design und auch die technische Umsetzung ist komplizierter. Alle Gestaltungselemente die in einer flexiblen Spalte untergebracht sind, müssen in der Breite skalierbar sein. Prozentwerte sind in Layoutprogrammen jedoch üblicherweise nicht möglich. Der Desiger muss daher im Hinterkopf haben welche Bereiche flexibel sind, und die Grafiken entsprechend vorbereiten.

Ein fluid Layout wird bei inhaltsschweren Seiten wie Online-Shops, Magazin-Seiten oder Foren verwendet. Es ist auch die Grundlage eines „echten“ responsive Designs.

Vorteile eines fluid Layouts

Nachteile eines fluid Layouts

Demo anschauen

Elastic Layout (elastisches Layout)

Bei einem elastic Layout sind die Seitenelemente sowohl in der Breite, als auch in der Höhe variabel. Das Design skaliert sich proportional zur Größe des Browserfensters; das Gestaltungsraster wird so aufgebaut, dass Spalten und Zeilen auf Prozentwerten, auf em oder rem basieren.
Technisch und gestalterisch ist dieser Layouttyp am komplexesten und daher wohl auch am seltensten. Grafiken und Seiteninhalte müssen extrem flexibel sein. Das Layout lässt sich nicht 1:1 in einem Layoutprogramm umsetzen, der Webdesigner muss also genau wissen wie sich die Elemente verhalten, wenn das Browserfenster sich verändert. Auch der Einsatz von Pixelgrafiken kann evtl. zu Problemen führen.

Exemplarischer Aufbau eines elastic Layouts
Exemplarischer Aufbau eines elastic Layouts

Ein elastic Design bietet sich besonders dann an, wenn ein Layout den Bildschirm immer vollständig ausfüllen soll, ohne dass die Seite gescrolled werden muss. Dieser Layouttyp wird häufig bei Websites mit großen Foto- oder Videoelementen verwendet. Architektur-Websites, Microsites für Kinofilme oder Videospiele sind einige typische Beispiele. Häufig werden nur wenige Inhalte abgebildet.

Vorteile eines elastic Layouts

Nachteile eines elastic Layouts

Demo anschauen

Mischformen

Neben den klassischen Layouttypen existieren verschiedene Mischformen. Ein flüssiges Raster ist häufig nach oben hin durch eine maximale Ausbreitung begrenz. An diesem Punkt wird aus dem flüssigen Layout also ein starres Layout. Ähnliches gilt für das elastic Layout. Hier werden häufig nur einige Inhalte (z.B. große Fotohintergründe) elastisch gestaltet. Seitenelemente wie die Navigation oder der Inhalt sind dann fluid oder sogar fixed.

Video: Fixed-, Fluid-, Elastic-Webdesign

Die folgende Lektion aus unserem Video-Training erklärt den Unterschied zwischen den verschiedenen Layouttypen.

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 – 12 Kommentare

  1. Johanna
    schrieb am 24.07.2014 um 23:20 Uhr:

    Ich finde statische Websites gar nicht so schlecht.
    Ein bisschen Raum links und rechts sorgt für Übersichtlichkeit,
    und wenn die Seiten schlank gehalten werden, sehen sie sogar
    in kleinen Endgeräten gut aus. Jedenfalls immer noch besser als die vielen responsiven Seiten, die schlecht funktionieren oder unendlich lange brauchen bis sie geladen sind.
    Da geht auch jeder Smartphone-Benutzer auf und davon. Auf welche Prozente will ich nun eher verzichten? Oder womit kommt der Kunde des Kunden auf seine Website? Es gibt Branchen, da braucht es meines Erachtens keine responsive Website.

    Antworten
  2. Andrea
    schrieb am 30.03.2014 um 18:51 Uhr:

    Vielen, vielen Dank! Ich bin Anfängerin und bringe mir gerade Webdesign mittels Fernstudium bei. Diese Seite hat mir sehr geholfen, super verständlich und nett erklärt!:)

    Antworten
  3. Miriam
    schrieb am 26.01.2014 um 21:00 Uhr:

    Super verständlich dargestellt. Danke :)

    Antworten
  4. Herbert
    schrieb am 01.10.2013 um 13:51 Uhr:

    Sehr interessante Infos! Als Anfänger in Sachen Weblayout und WordPress-Nutzer interessiert es mich besonders, wie sich auf der Basis von WordPress Internetseiten generieren lassen, die sich unterschiedlich großen Browserfenstern anpassen (d.h. ihre Layoutstruktur in kleineren Fenstern nicht verändern). Gibt es dazu irgendwo nachvollziehbare Anleitungen? Bin dankbar für jeden klaren Hinweis.

    Antworten
  5. Starre Layouts in flüssige Layouts umwandeln – Responsive Webdesign Basics | kulturbanause blog
    schrieb am 18.01.2013 um 15:09 Uhr:

    […] Fixed-, Fluid- & Elastic- Layouts […]

    Antworten
  6. Responsive Webdesign: Grundlagen, Technik, Workflow, Inhalte – Meine Slides vom Vortrag in Bremen | kulturbanause blog
    schrieb am 29.11.2012 um 10:41 Uhr:

    […] Fixed-, Fluid- & Elastic- Layouts […]

    Antworten
  7. Die Layout-Typen einer Website: Fixed, Fluid & Elastic | Web-CMS | Scoop.it
    schrieb am 06.11.2012 um 21:11 Uhr:

    […] Bei der Konzeption einer Website müsst ihr entscheiden, wie sich das Layout im Browser verhalten soll. Soll die Website immer gleich breit sein? Sollen sich die Elemente der Breite des Browserfensters anpassen?  […]

    Antworten
  8. Adaptive Website vs. Responsive Website | kulturbanause blog
    schrieb am 06.11.2012 um 11:57 Uhr:

    […] einer Adaptive Website ist, welche Vor- und Nachteile die Varianten haben und in welcher Form der Layouttyp wichtig […]

    Antworten
  9. Marcos
    schrieb am 30.10.2012 um 13:19 Uhr:

    Danke sehr Informativ. Kannst du was für die Smilies machen? habe bis jetzt nur „Plug ins“ und wenn man an Code etwas macht ist bei naeschte Upgrade fusch! oder so ;)

    Antworten
  10. CaptainCannabis
    schrieb am 30.10.2012 um 09:33 Uhr:

    Schöner Artikel – für jedermann verständlich geschrieben. Das Template gefällt mir auch sehr gut. Ich denke das ist ein Bookmark wert ;-)

    Antworten
  11. Piet
    schrieb am 25.10.2012 um 10:57 Uhr:

    Schöner Beitrag, immer wieder ein spannendes Thema und nicht wirklich einfach nur mit Worten zu erklären.

    Kleiner Tippfehler: „Ist der Vierport größer, wird Platz verschenkt, […]“

    Antworten
    • Jonas Hellwig
      schrieb am 25.10.2012 um 11:08 Uhr:

      Danke! Ist korrigiert.

      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 →