kulturbanause Blog

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

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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“ ist (noch) mit Abstand am häufigsten anzutreffen. Das liegt unter anderem daran, dass sich ein Design mit festen Abmessungen am einfachsten gestalten und technisch umsetzen lässt. Auch der Gestaltungsfreiraum ist am größten, da die verschiedenen Elemente starr sind und daher nicht flexibel gestaltet werden müssen.

Vorteile eines starren Layouts

  • Unkomplizierte Planung des Gestaltungsrasters
  • Viel gestalterische Freiheit
  • Unkomplizierte technische Umsetzung
  • Für den Kunden leicht verständlich

Nachteile eines starren Layouts

  • Es wird nur für einen bestimmten Viewport gestaltet. Ist der Viewport größer, wird Platz verschenkt, ist der Viewport zu klein, wird die Seite abgeschnitten.
  • Auf Basis eines starren Rasters kann kein „echtes“ responsive Design erstellt werden, sondern nur ein sog. adaptive Layout (die Begrifflichkeiten sind kontrovers diskutiert).

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

  • Optimale Platznutzung
  • Es können häufig mehr Inhalte dargestellt werden
  • Mit einem flüssigen Raster ist ein „echtes“ responsive Design realisierbar, so wie Ethan Marcotte den Begriff „responsive“ einst definiert hat.

Nachteile eines fluid Layouts

  • Komplexere Planung des Gestaltungsrasters
  • Der Designer wird gestalterisch eingeschränkt, da Bereiche flexibel gestaltet werden müssen
  • Die technische Umsetzung ist etwas komplexer als bei einem starren Layout
  • Aufwändige Anpassung der Seiteninhalte

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 neuerdings 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

  • Perfekte Platznutzung
  • Inhalte werden proportional und so groß wie möglich abgebildet
  • Auf Basis eines elastic Layouts lässt sich ein „echtes“ responsive Design entwickeln.

Nachteile eines elastic Layouts

  • Komplex in der Planung des Rasters
  • Komplex in der Gestaltung des Layouts
  • Komplex in der technischen Umsetzung
  • Komplex in der Anpassung der Seiteninhalte. Diese sind häufig nicht flexibel genug.

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

In diesem kurzen Video könnt ihr anhand dreier Praxisbeispiele die Unterschiede zwischen den verscheidenen Layouttypen erfahren.

Adaptive & Responsive Websites

Wenn euch die Unterschiede zwischen fixed, fluid und elastic klar sind, solltet Ihr euch mit den mobilen Varianten beschäftigen. Hier gibt es responsive Websites und Adaptive Websites.

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

8 Kommentare

  1. Piet

    Verfasst am 25. Oktober 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, […]“

  2. CaptainCannabis

    Verfasst am 30. Oktober 2012 um 9: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 ;-)

  3. Marcos

    Verfasst am 30. Oktober 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 ;)

  4. Herbert

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

  5. Miriam

    Verfasst am 26. Januar 2014 um 21:00 Uhr.

    Super verständlich dargestellt. Danke :)

  6. Andrea

    Verfasst am 30. März 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!:)

  7. Johanna

    Verfasst am 24. Juli 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.

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.