3 verschiedene Layouttypen im WebDesign und wann sie am besten geeignet sind

Im WebDesign unterscheidet man allgemein zwischen drei verschiedenen Layouttypen. Die wären Fixed, Fluid und Elastic.

Doch was genau bedeuten diese Begriffe, wie definieren sich die Designs und wann finden entsprechende Layouttypen Anwendung?

Im heutigen Beitrag werde ich euch die 3 unterschiedlichen Layouttypen im WebDesign näherbringen und erklären, was es damit auf sich hat und wie sich diese auszeichnen.

Dabei gehen wir auf einige Details ein und schaffen ein grundsätzliches Verständnis.

3 verschiedene Layouttypen im WebDesign

1. Fixed Layout

   Das Fixed Layout ist fix, also starr. Hier verändert sich demnach auch nichts, wenn das Browserfenster verschoben, verkleinert oder vergrößert wird. Das Layout der Website bleibt fest bestehen und beruht auf festgelegten Werten und Abmessungen. Wird das Fenster verkleinert, ist ein Teil der Website nicht mehr sichtbar, stattdessen muss gescrollt werden.

   Vorteile beim Fixed Layout sind, dass alles auf festen Pixelwerten beruht und die Darstellung entsprechend genau planbar wird. Das macht die Gestaltung einfach. Dafür muss ein Fixed Layout im Grunde an jeden Viewport einzeln angepasst werden, um keine Darstellungsfehler zu erzeugen.

2. Fluid Layout

   Beim Fluid Layout sieht die Sache schon etwas anders aus. Fluid meint flüssig, weil das Fluid Layout komplett auf Prozentangaben beruht und sich quasi fließend anpasst. Verkleinert ihr das Browserfenster, verkleinert sich die Website ebenfalls, da sie beispielsweise immer 50 Prozent des Browserfensters nutzt. Andersherum wird auf großen Monitoren mehr Platz verwendet, sodass weniger Freiraum verschwendet wird.

   Das Fluid Layout skaliert also mit, was praktisch sein kann, gestalterisch aber unweigerlich Probleme mit sich bringt, wenn bestimmte Elemente nicht groß genug vorliegen, um auf einen 4K Monitor über die gesamte Breite zu gehen. Damit es hier keine Schwierigkeiten gibt, wird meist ein Minimal- und Maximalwert angegeben. Online-Shops gehen gerne über die gesamte Breite einer Website und passen sich dann flüssig an.

3. Elastic Layout

   Handelt es sich um ein Elastic Layout wird alles sehr flexibel designt, weshalb hier keine Prozentwerte, sondern REM und EM zum Einsatz kommen. Diese hatte ich euch in meinem Artikel Px, Pt, Em oder Rem? Was diese Webdesign-Werte für Abstände, Maße oder Schriftgrößen bedeuten bereits erläutert. REM nutzt beispielsweise immer den Wert des Root-Elements als Grundlage. Dadurch basiert jede Größe auf dem Root-Element und passt somit jederzeit zu allen anderen.

   Das Elastic Layout ist richtig umgesetzt sicherlich am kompliziertesten, aber auch am mächtigsten. Weil es eben überall sehr gut aussieht und sämtliche Elemente aufeinander abstimmt. Persönlich mag ich elastische Layouts am liebsten, weil sie ziemlich gut skalieren können. Ändere ich einen Wert, ändern sich auch alle anderen Werte entsprechend. Einmal angelegt, lässt sich damit sehr gut arbeiten. Doch bis das so weit ist, muss viel bedacht und berücksichtigt werden.

Responsive Layout

Während es sich bei den oben genannten um verschiedene Layouttypen im WebDesign handelt, gibt es dann noch das sogenannte Responsive Layout. Das Responsive Layout setzt ein Elastic oder Fluid Layout voraus, welches zusammen mit den Media Queries dafür sorgt, dass sich das Layout an das jeweilige Endgerät anpasst.

Mit dem Responsive Layout und Media Queries ist es problemlos möglich, dass sich eine Website überall gleich anfühlt und doch wichtige Umbrüche wie beispielsweise in Bezug auf die Sidebar oder das Menü einhält. So könnte die Sidebar mobil ausgeblendet werden oder sie rutscht an eine andere Stelle.

Die meisten modernen WordPress-Themes bieten ein responsive Layout, wie mein Lieblingstheme GeneratePress.

Mobile First und Desktop First

Schlussendlich sollte jedem klar sein, dass Mobil und am Desktop unterschiedliche Ansprüche gestellt werden. Das fängt damit an, dass Buttons und Links mit der Maus viel filigraner geklickt werden können, während der Finger auf dem Smartphone das nicht so genau hinbekommt. Auch die Einbindung der Inhalte, beispielsweise Lazy Load und 2-Klick-Lösungen, sind auf mobilen Endgeräten wichtiger, als auf dem Desktop.

Deshalb ist es im Grunde so, dass sich WebDesigner immer zwischen Desktop First und Mobile First entscheiden müssen. Für manche Angebote macht eine App vielleicht mehr Sinn, als ein Responsive Layout. Für andere hingegen ist die Desktop Website überflüssig, weil die Zielgruppe dort nicht zu Hause ist.

Prinzipiell muss ich sagen, dass auf all meinen Projekten und auch bei den meisten Kunden die Desktop-Aufrufe stark rückläufig sind. Für gewöhnlich kommen weit über 50 Prozent Traffic von mobilen Plattformen.

Oft macht es daher keinen Sinn mehr, Desktop First zu gehen. Stattdessen wird Mobile First entwickelt, um eine gute Usability zu erreichen. Diese wird dann oft nicht perfekt, aber durchaus ausreichend, auf die Desktop-Version übertragen. Andersherum ist das kaum möglich.

Wie Websites heutzutage designt werden

Heutzutage erübrigt sich vieles hinsichtlich der Layouttypen, vor allem weil nur noch wenige Websites von Hand gebaut werden. Oft ist es eher so, dass auch Agenturen bestimmte Grund Designs oder Themes aufgebaut haben, die sie dem Kunden entsprechend anpassen können. Gerade wenn es um WordPress Websites geht, kommen häufig Page Builder zum Einsatz mit ein paar speziellen Anpassungen.

CSS Grids sind dabei meist die Grundlage für etwaige Gestaltungsraster. Im Grunde sind das mehrspaltige Layouts, die eine Gestaltung entsprechend flexibel machen, weil sich Grids zusammenschieben oder logisch sortieren lassen. Jedes WebDesign Element wird also erst einmal als Box gesehen, die sich dann nach belieben positionieren lässt.

Auch diese Art von Vorgehensweise hatte ich euch in meinem Artikel Container Design ein wenig erläutert. Websites müssen sich heutzutage sehr genau an die Nutzer und ihre Endgeräte anpassen. Es macht also Sinn, in Boxen bzw. Containern zu denken, um alle Elemente möglichst beweglich zu gestalten. Wenn diese sich dann noch elastisch an die Rahmenbedingungen anpassen, ist viel gewonnen.