Der Gesamteindruck wird entscheidend vom Layout und Design Ihrer Website beeinflusst. Und das Layout ist auch für die grundsätzliche Nutzbarkeit Ihrer Website entscheidend – sowohl hinsichtlich Usability, als auch Barrierefreiheit und Suchmaschinenoptimierung. Während Aspekte, die hauptsächlich für Suchmaschinen relevant sind, in diesen Tipps zur Usability nur nebensächlich benannt werden, soll es an dieser Stelle vorrangig um die Usability gehen. Der Barrierefreiheit wird ein eigener Abschnitt gewidmet.

Wie breit soll das Design ausgelegt werden?

Die Frage stellt sich bei der Auswahl des Layouts ganz am Anfang. Beide Kandidaten haben Vor- und Nachteile und es gibt verschiedene Varianten und Mischformen, die die Auswahl nicht erleichtern.

Ganzer Bildschirm

Für die Ausnutzung der kompletten Breite des Browsers spricht der Wegfall evtl. notwendiger horizontaler Scrollbalken, wenn der Viewport (der Anzeigebereich) des Browsers nicht noch unter die Maße der größten verwendeten Grafik oder sonstiger Elemente „fester“ Breite (Tabellen etc.) verkleinert wird. Da aber in der Regel ein Browserfenster maximiert wird und moderne Bildschirme selbst an Notebooks recht hohe Auflösungen vertragen, bedeutet ein entsprechendes Layout oft, dass der Inhaltsbereich Ihres Designs „unangenehm“ breit ist. Grafiken wirken verloren, Textzeilen werden zu lang, bei mehreren Spalten wirkt oft gerade die wichtige Spalte in der Mitte schlecht formatiert. Nebenbei verlieren Sie auch die Kontrolle über den Gesamteindruck, wenn Sie z. B. mit grafischen oder in der Farbe kontrastreich gestalteten Umrahmungen und Gruppierungselementen arbeiten. Zu allem Überfluss zeichnen sich zudem nicht wenige Seiten, die inhaltlich den ganzen Bildschirm ausnuzten, durch lange Wege aus. Eine rechtsbündige Zusatznavigation oder gar Bedienflächen zum Absenden eines linksbündig formatierten Formulars werden so schnell übersehen und sorgen für unnötigen Ärger beim Anwender… oder dazu, dass dieser die Seite nach eigenem Empfinden gar nicht mehr „richtig“ bedienen kann.

Wäre es nicht so weit verbreitet, könnte man fast darüber lachen: Auch Sites, die auf extrem häufige Interaktion zwischen Seite und Anwender angewiesen sind – wie z. B. Umfrageportale – scheren sich wenig um diese Problematik und muten den Bedienern oft sehr lange „Mauswege“ zu, welche besonders deswegen ärgerlich sind, weil nicht ein Formular, sondern je nach Dauer der Nutzung viele Formulare auf die gleiche uneffiziente Weise ausgefüllt werden müssen.

Damit das nicht zu negativ klingt: Aus Usabilitysicht ist dennoch für viele Sites die Ausnutzung des ganzen Bildschirms, gepaart mit einer Minimalbreite für einzelne Bereiche – die beste Lösung. Es ist kein Zufall, dass speziell im eCommerce-Bereich viele Sites möglichst den ganzen Bildschirm nutzen. Neben der Tatsache, dass so möglichst gut verschiedenste Auflösungen bedient werden können, ist vor allem die Ausnutzung des gesamten Platzangebots ein schlagendes Argument, wenn man bedenkt, dass oft der Hauptanteil der Besucher nicht scrollt, sondern zur Entscheidung, ob er mehr sehen will oder nicht, nur das von Ihrer Site berücksichtigt, was er auf einer einzelnen Seite ohne Scrollen zu sehen bekommt. Mit der zunehmenden Vergrößerung der typischen Auflösung eines Monitors oder Notebooks wird also in einem festen Design bei recht vielen Usern regelrecht Platz verschwendet. Und dies ist „teurer Platz“, wenn man bedenkt, dass hier Inhalte stehen könnten, die der User derzeit wegen der Anordnung unterhalb der Falz (sprich: der Scrollgrenze) nicht sehen kann, aber vielleicht zur Entscheidungsfindung braucht. In einem Shop möchten Sie diesen Platz also möglicherweise ausnutzen, auf einer eher textlastigen Site  hingegen die Zeilenlänge besser kontrollieren…. bevor Sie sich entscheiden, also zunächst noch ein paar Argumente für die feste Breite oder entsprechende Mischformen:

Definierte Seitenbreite

In einem Design mit fester Breite, wobei „fest“ durchaus flexibel anhand der eingestellten Schriftgröße des Browsers orientiert werden kann, bleibt die Kontrolle über die Darstellung weitestgehend erhalten und bis auf die Tatsache, dass hier ggf. Platz verschenkt wird oder kleinere Auflösungen horizontales Scrollen erfordern, sind die oben genannten Probleme hiermit in den Griff zu bekommen. Die Argumente „Platzverschwendung“ und „Scrollen“ sind aber ggf. echte Killer – seien Sie daher vor allem wegen des zweiten Punkts auf der Hut, wenn Sie sich für eine feste Breite entscheiden.

Speziell die Gefahr, einfach viel zu viel „ungenutzen Raum“ bei hohen Auflösungen zu erzeugen, spricht für die oft eingesetzte Mischform aus einem Design, dass den ganzen Bildschirm umfasst, und einem Inhaltslayout, dass an (zumeist zentriert dargestellten) ein bis drei Spalten vorgegebener Breite orientiert ist. Ob Sie hierbei eine zentrieter oder linksbündige Darstellung wählen, ist schlussendlich Geschmackssache, denn auch hier gibt es wieder zahlreiche Argumente (z.B. kürzere Wege zur „Zurück“-Schaltfläche vs. „klare beideitige Trennlinien“) für und gegen beide Prinzipien. Wozu Sie sich entscheiden, wird aber den Krieg nicht gewinnen oder verlieren – konzentrieren Sie sich besser auf echte Usability-Probleme und testen Sie solche Kleinigkeiten lieber später einfach aus.

Wenn Sie sich für ein Layout fester Breite entscheiden haben, müssen Sie allerdings noch die Frage nach der Breite beantworten. Welche Variante zur Definition Sie auch wählen; Sie sollten darauf achten, dass der Großteil der Besucher ohne horizontales Scrollen auskommt, wenn eine Standardschriftgröße im Browser aktiviert ist. Derzeit heißt das, dass ein Design mit einer Breite von 800 Pixel mehr oder weniger wasserdicht für alle, dafür aber für einen Großteil der Besucher unangenehm schmal ist. Wenngleich es keine optimale Breite gibt, so ist eine Minimalbreite von 1024 Pixel derzeit als Standard anzusehen. Wenn Sie also 1024 Pixel als Orientierungspunkt nehmen und noch ein wenig „Reserve“ für vertikalen Scrollbalken und Fensterrahmen abziehen, dann ist eine Breite von „ca. 1000 Pixel“ derzeit ein guter Richtwert zur Bestimmung der Breitenangabe, die per CSS definiert entweder absolut oder auch relativ bzw. prozentual zur Schriftgröße gewählt werden kann. Testen Sie Ihr Design aber unbedingt in mehreren Browsern und stellen Sie sicher, dass nicht hier und da ein Pixel zu viel für die Anzeige eines Scollbalkens sorgt, der wiederum Platz in der Höhe kostet und die nutzbare Anzeigefläche des Browsers unnötig verkleinert. 990 Pixel ist daher ein oft anzutreffender Wert.