Webdesign-Layouts im Überblick

Unter Static-Webdesign wird ein statisches und vor allem unbewegliches Layout verstanden, das Websites mit festgelegter Breite und fixem Content nach sich zieht. Die Ansicht der Website ändert sich demnach nicht, wenn die Grösse des Browser-Fensters variiert oder mit einem anderen Endgerät darauf zugegriffen wird. Ist das Fenster zu klein, muss - vertikal oder horizontal - gescrollt werden, um den gesamten Umfang des Contents betrachten zu können. Für mobile Endgeräte gibt es bei diesem Design meist einen Verweis auf eine Extra-Site, die dann für die entsprechende Bildschirmgrösse angepasst ist.

Die Bezeichnung Liquid- oder Fluid-Webdesign beschreibt Websites, bei denen für die Breite der einzelnen Bestandteile Prozentwerte als Massstab genutzt werden, die sich auf die jeweilige Bildschirmgrösse beziehen. Damit ist die Grösse der Bestandteile zueinander und zum Browser relativ, sodass sich die Grösse der Bestandteile stufenlos verändern lässt, wenn sich die Grösse des Browser-Fensters ändert.

Die Besonderheiten des Adaptive-Webdesigns lassen sich für eine bestimmte Anzahl von definierten Layouts für unterschiedliche, definierte Bildschirmauflösungen respektive Geräte herunterbrechen. Wird dabei die Auflösung einer Seite unter einen festgelegten Wert gesenkt, ändert sich das Layout der Seite. Das funktioniert in etwa so, als seien verschiedene statische Websites für unterschiedliche Endgeräte entwickelt worden - allerdings mit dem Vorteil, nur eine Seite verwalten zu müssen.

Unter dem Begriff Responsive-Webdesign versteht man eine Mischung aus Liquid- und Adaptive-Webdesign. Die Website-Bestandteile passen sich on-the-fly der verfügbaren Bildschirmauflösung an.

Responsive-Layouts können auch als eine Reihe von miteinander verknüpften Liquid-Layouts verstanden werden. Solche Websites werden auf einem fluiden Grid (Vernetzungsstruktur) erstellt und verwenden Media Queries, um die Bildschirmgrösse zu ermitteln und damit das Design und die Inhalte anzupassen. Der Umfang der dargestellten Elemente zwischen den verschiedenen Auflösungen kann abweichen, das heisst Funktionen können auf kleinen Auflösungen ausgespart werden.

Welcher der möglichen Design-Grundsätze verwendet wird, ist dabei abhängig vom jeweiligen Anwendungsfall. Neben gründlicher Analyse und dem Abwägen der Vor- und Nachteile ist insbesondere auch das bestehende Design einer Website ausschlaggebend für eine objektive Kosten-Nutzen-Analyse.