2.2 Wahl des Grundlayouts

Mittlerweile haben sich diverse Webseiten-Layouts bei den Nutzern durchgesetzt, aber dennoch gibt es einige grundlegende Gestaltungsmerkmale mit denen Sie arbeiten können. Warum Sie dies tun sollten ist eigentlich ganz einfach: Sehr bekannte Seiten wie etwa Google, Amazon, eBay usw. haben dafür gesorgt, dass sich die Nutzer an gewisse Anordnungen von Elementen gewöhnt haben. Sicherlich ist es nicht immer notwendig sich an diese "Richtlinien" zu halten, jedoch sollten Sie zumindest wissen warum Sie dagegen verstoßen. Ein Grund dafür könnte etwa sein, dass Sie die Aufmerksamkeit des Besuchers auf ein ganz bestimmtes Element Ihrer Seite lenken möchten.

Möchten Sie Ihre Webseite also an die Erwartungsnorm anpassen, so sind Sie sicherlich ein Stück in der Gestaltung eingeschränkt, haben aber dennoch essentielle Stellschrauben, über die Sie Ihr Design an Ihre Anforderungen anpassen können.

Relativ oder absolut

Wie Ihnen sicherlich bereits aufgefallen ist, passen sich manche Webseiten an die Breite Ihres Browsers und somit mehr oder weniger an die Auflösung Ihres Monitors an. Andere hingegen haben eine feste Breite und sind in der Regel mittig oder linksbündig ausgerichtet, verändern aber ihre Breite nicht, wie es beispielsweise auch bei dieser Seite der Fall ist.

Das relative Layout

Relativ bedeutet in diesem Kontext, dass sich das Layout an die Breite des Browserfensters anpasst. Dies bedeutet nicht, dass die Seite unendlich schmal werden kann, aber dass Sie sich zu einem gewissen Grad in der Breite anpasst. Abbildung 1 zeigt den exemplarischen Aufbau einer solchen Seite, bei der die gepunkteten Linien den gleich bleibenden Abstand zum Fensterrand des Browsers verdeutlichen sollen. Dieser Abstand ist selbstverständlich optional.
Ein gutes Beispiel für ein relatives Layout ist die Seite Amazon.de, die sich immer über die volle Breite des Browsers erstreckt. So haben Sie etwa die Möglichkeit, wesentlich mehr Inhalte auf Ihrer Seite zu platzieren, vorausgesetzt die Nutzer verwenden größere Monitore in entsprechend hohen Auflösungen. Ein weiterer Vorteil dieses Layouts ist es, dass Sie niemals leere Flächen an den Seiten der Webseite haben, da diese somit oftmals ungenutzt bleiben.
Bedenken Sie jedoch, dass die relative Positionierung von Elementen und deren Breiten oftmals aufwändiger ist. Stellen Sie sich dazu einen Nutzer vor, der einen 30"-Monitor verwendet. Texte, die normalerweise in 10 Zeilen dargestellt werden, würden somit eventuell in drei Zeilen passen, was die Lesbarkeit deutlich verschlechtert. Zu lange Zeilenlängen sorgen dafür, dass das menschliche Auge die nächste Zeile nicht korrekt erfasst und wir somit in der falschen Zeile weiter lesen.
Sollten Sie sich also für dieses Layout entscheiden, so bedenken Sie unbedingt, dass Ihre Webseite auch in höheren Auflösungen gut dargestellt werden muss.

Das absolute Layout

Im Gegensatz zu dem zuvor beschriebenen Layout verwenden Sie in diesem Fall absolute Zahlen. Das heißt, dass Sie beispielsweise eine feste Breite für Ihre Seite definieren. Die Webseite wird somit in allen Auflösungen, mit Ausnahme einer zu niedrigen Auflösungen, exakt gleich breit dargestellt, was Abbildung 2 zusätzlich verdeutlichen soll. Der gepunktete Abstand zum Rand des Browsers ist somit variabel, da dieser den freien Bereich neben dem eigentlichen Inhalt der Webseite auffüllt.
Bei diesem Layout bietet es sich an, die Webseite mittig oder linksbündig zu positionieren. Auf eine rechtsbündige Ausrichtung würde ich Ihnen aufgrund des Erwartungswertes der Nutzer abraten.
Eine feste Breite mag zunächst nicht so dynamisch klingen, wie dies etwa bei relativen Breitenangaben der Fall ist, aber auch hier haben Sie einen entscheidenden Vorteil: Sie wissen recht genau, wie die Seite bei den Nutzern Ihrer Seite dargestellt wird. Sie können somit Grafiken und Texte optimal an Ihr Design anpassen ohne sich dabei Gedanken darüber machen zu müssen was passiert, wenn die Seite wesentlich breiter dargestellt wird. Die Freiräume neben der eigentlichen Webseite könnten sicherlich auf großen Monitoren als Platzverschwendung angesehen werden, aber oftmals sorgen diese Abstände dafür, dass die Seite geordnet und somit übersichtlich wirkt.
Wie Sie sicherlich bereits bemerkt haben, tendiere ich persönlich eher zu absolut definierten Webseiten. Dies würde ich Ihnen, vorausgesetzt Sie sind ein Anfänger auf diesem Gebiet, ebenfalls empfehlen, da die Umsetzung oftmals weniger Sonderfälle mit sich bringt und somit einfacher ist.

Ein- und Mehrspaltenlayouts

Webseiten mit nur einer Spalte sind eher die Ausnahme und machen besonders dann Sinn, wenn Sie sehr viel Inhalt oder größere Bilder auf Ihrer Webseite darstellen möchten. Sobald Sie viele verschiedene Inhalte (besonders Texte) auf einer Seite positionieren möchten empfiehlt es sich, dafür mehrere Spalten zu verwenden. Somit können Sie Inhalte wesentlich leichter und offensichtlicher kategorisieren bzw. anordnen und laufen nicht in Gefahr, die Zeilenlänge von Textblöcken zu lang und somit schlechter lesbar zu machen. Alternativ oder zusätzlich dazu können Sie natürlich auch eine Spalte für das Navigations-Menü der Seite verwenden.

Abbildung 3 und Abbildung 4 zeigen ein paar Beispiel-Layouts, die mit einer verschiedenen Anzahl an Spalten möglich sind. Dabei geht es lediglich um mögliche Anordnungen von Elementen, die nicht zwingend so deutlich von einander getrennt werden müssen.