Layout-Typen bestimmen die Struktur und das Verhalten einer Website, aber was genau ist eigentlich der Unterschied zwischen einer Responsive und einer Adaptive Website und was wird unter einem Fixed, Fluid und Elastic Layout verstanden? Wir geben eine nützliche Übersicht.
Bevor die verschiedenen Layout-Typen erläutert werden, wird zuerst zwischen zwei Website Typen unterschieden: der Responsive und Adaptive Website. Diese beschreiben das grundsätzliche Verhalten des Layouts einer Website.
Adaptive Website
Bei der Adaptive Website wird das Layout durch verschiedene Breakpoints für verschiedene Auflösungen charakterisiert. Breakpoints (Umbrüche) definieren bis wann ein Layout funktioniert und ab wann das Layout seine Größe ändern muss. Für jeden Breakpoint wird ein neues, statisches Layout geladen. Der Übergang von einer Layout-Größe zur nächsten erfolgt somit ruckartig und nicht fließend, da die Größe eines Layout bis zum Erreichen des Breakpoints auch bei vergrößern oder verkleinern des Browserfensters unverändert bleibt. Bei der Adaptive Website wird gewöhnlich mit Fixed Layouts gearbeitet.
Diese Lösung ist nicht perfekt, aber durchaus verbreitet.
Vorteile
- Da das Layout fest abgemessen ist, kann gut mit klassischen Mockups, Wireframe und Skizzen gearbeitet werden
- Viel gestalterischer Freiraum
- Die technische Komplexität ist gering.
- Inhalte müssen nur für klar definierte Abmessungen optimiert werden, aber nicht vollkommen flexibel sein
- Zeitsparendere Umsetzung
Nachteile
- Es wird nur für bestimmte Viewports (Anzeigebereich einer Website) bestimmte Geräte optimiert
- Häufige Fehldarstellungen auf abweichenden Endgeräten
- Aufwändige Zielgruppenanalyse um die relevanten Viewports zu bestimmen
- Häufig mehr CSS-Code als notwendig
Responsive Website
Bei Responsive Websites passt sich das Layout dem verfügbaren Platz fließend an, bis ein Breakpoint erreicht wird. Im Gegensatz zu der Adaptiv Website wird der zur Verfügung stehende Platz somit stets optimal genutzt da sich das Layout fließend mit vergrößert sowie verkleinert. Hier wird meist mit Fluid oder Elastic Layout-Typen einer Website gearbeitet.
Vorteile
- Jede Displaygröße wird optimal berücksichtigt
- Es wird kein Platz verschenkt
- Die Information steht im Vordergrund
- Zukünftige mobile Endgeräte werden automatisch mit abgedeckt
Nachteile
- Mockups, Wireframes und Skizzen stoßen an ihre Grenzen. Häufig muss mit Prototypen gearbeitet werden um Kunden das Verhalten der Website zu zeigen
- Komplexer in der Gestaltung und technischen Umsetzung
- Zeitintensivere Umsetzung
Responsive und Adaptive Websites werden meist anhand eines der drei geläufigen Website-Layouts designed: dem Fixed, Elastic oder Fluid Layout.
Fixed Layout
Das Fixed Layout hat fest in Pixel definiert Längen und Höhenangaben und passt sich nicht an das Browserfenster an. Wird das Browserfenster verkleinert bzw. reicht das Layout über das Browserfenster hinaus, enstehen Scrollbalken. Füllt das Layout, das Browserfenster nicht aus, entstehen weiße Ränder. Die Website nimmt somit einen festgelegten Bereich im Browser ein.
Vorteile
- Unkomplizierte Planung des Gestaltungsrasters
- Große gestalterische Freiheit
- Unkompliziert in der technischen Umsetzung
Nachteile
- 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
Fluid Layout
Im Gegensatz zu dem Fixed Layout, passt sich das Fluid Layout der Breite des Browserfensters an, und nutzt so den zur Verfügung stehenden Platz optimal aus. Ein fluid Design lässt sich nicht so einfach gestalten wie ein fixed Design und auch die technische Umsetzung ist komplizierter. 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.
Vorteile
- Optimale Platznutzung
- Es können häufig mehr Inhalte dargestellt werden
Nachteile
- 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
Elastic Layout
Das Elastic Layout ist technisch und gestalterisch der komplexeste Layout-Typ einer Website und daher wohl auch am seltensten. Hier sind die Seiten-Elemente nicht nur in der Breite (wie bei dem Fluid Layout) sondern auch in der Höhe skalierbar und können sich somit stets proportional der Bildschirmgröße anpassen.
Ein Elastic Layout bietet sich besonders dann an, wenn ein Layout den Bildschirm immer vollständig ausfüllen soll, ohne dass die Seite gescrolled werden muss.
Vorteile
- Perfekte Platznutzung
- Inhalte werden proportional und so groß wie möglich abgebildet
Nachteile
- Komplex in der Planung des Rasters
- Komplex in der Gestaltung des Layouts und der technischen Umsetzung
- Komplex in der Anpassung der Seiteninhalte
Die verschiedenen Layout-Typen haben somit jeweils Vor- und Nachteile in ihrer Anwendung. Welcher Layout-Typ für die eigene Website geeignet ist, hängt stets von den Vorstellungen/Wünschen des Kunden ab. Jedoch geht der Trend der Zukunft in die Richtung der Responsive Websites, da diese mehr Gestaltungsmöglichkeiten bieten. Wir beraten gerne bei der Findung des optimalen Webdesigns!