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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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.

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 – 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 (Autor)
      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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: