Für welche Bildschirmauflösung muss die Website des Kunden optimiert werden? Und welche Browser-Fenstergröße sollte dann berücksichtigt werden, um die Zielgruppe des Kunden nicht zu vergraulen? Dies sind wichtige Web Usability Fragen, die vor der Erstellung einer Website unbedingt beantwortet werden müssen.
Der Usability-Experte Jacob Nielsen schrieb vor mehr als 3 Jahren in seiner Alertbox über das Thema „Screen Resolution and Page Layout“ und stellte hier heraus, dass man „heutzutage“ seine Website für eine Bildschirmauflösung von 1024×768 optimieren sollte. Welche Bildschirmauflösung derzeit die Aktuelle ist, kann sehr gut an öffentliche Statistiken und natürlich an den Web-Statistiken des Kunden abgelesen werden. Letzteres sollte natürlich vorgezogen werden. Die Grundaussage in Nielsen’s Artikel ist, dass die Website fehlerfrei dargestellt werden muss, auch wenn diese mit einer kleinen Bildschirmauflösung betrachtet wird. Das Layout der Website muss sich also an die Bildschirmauflösung anpassen.
Kriterien nach J. Nielsen für das Seitenlayout
Doch allein mit der Wahl der richtigen Bildschirmauflösung ist es nicht getan. Es gibt nach Jacob Nielsen drei wesentliche Kriterien, die für die Darstellung unbedingt sichergestellt werden sollten:
- Initial visibility: Dies ist der sichtbare Bereich auf dem Bildschirm des Besuchers, in dem alle Schlüsselinformationen der Website bereitgestellt werden müssen. Das bedeutet im Klartext: Surfen ohne horizontales Scrollen.
- Aesthetics: Ist die Darstellung und das Layout der Website gewahrt, wenn die Auflösung stark variiert? Ist die grundlegende Gestaltungsästhetik sichergestellt? So darf zum Beispiel der Abstand zwischen Bild und Text oder der Abstand zwischen zwei Spalten nicht variieren.
- Readability: Ist der Text, trotz variierender Auflösung noch gut lesbar? Ist beispielsweise bei Spalten der „width“ Parameter definiert?
Richtige Betrachtung der „Auflösung“
Was Nielsen hier richtigerweise gut ausformulierte, stellt allerdings nicht genügend das eigentliche Problem heraus oder gibt Handlungsempfehlungen, wie die obigen Kriterien sichergestellt werden können. Denn im Grunde muss bei Betrachtung der Auflösung unterschieden werden nach:
- Bildschirmauflösung,
- Browser-Fenstergröße (actual browser size) und
- Content Area
Jasper Rønn-Jensen formulierte diese wichtige Feststellung in seinem Artikel „Design for Browser Size — Not Screen Size„. Ferner verdeutlicht er, dass für die Gestaltung einer Website die Bildschirmauflösung weniger bedeutend ist (ganz im Gegensatz zu Nielsen). Aus seiner Sicht ist die Browser-Fenstergröße entscheidend, was aus meiner Sicht auch die richtige Betrachtung ist.
Jasper begründet dies damit, dass die Größe des Browserfensters meistens geringer ist als die tatsächliche Bildschirmauflösung des Users. Mac-User wissen, was er meint, denn auf dem Mac gibt es keine Funktion zum Maximieren der Fenster, wie bei Windows. Somit ist zum Beispiel mein Browser Fenster beim Surfen bei einer Auflösung von 1440×900 px nie maximiert. Weiterhin müssen von der Browser-Fenstergröße die horizontale und vertikale Scrollbar sowie die Symbolleiste des Browsers abgezogen werden. Erst danach erhält man die Content Area, für die die Website gestaltet werden muss.
Content Area bzw. Actual Browser Size
Und an diesem Punkt wird es interessant! Wie kann man nun die Content Area bei den vielen verschiedenen Browsern ermitteln? Jasper Rønn-Jensen hat Durchschnittswerte für Scrollbar, Statusleiste und Symbolleiste ermittelt und auf dieser Basis die Content Area berechnet. Die folgende Tabelle zeigt – neben der Content Area pro Bildschirmauflösung – dass immer seltener das Browserfenster bei steigender Bildschirmauflösung maximiert wird:
| Bildschirmauflösung | Maximiertes Fenster | Content Area |
|---|---|---|
| 640×480 | Immer | 618×310 |
| 800×600 | Immer | 778×430 |
| 1024×768 | Häufig | 1004×598 |
| 1200×1024 oder mehr | Selten | 1259×853 oder mehr |
Zusammenfassung
Im Grunde ist es aus meiner Sicht wichtig sicherzustellen, dass sich eine Website an die Fenstergröße der Browser anpasst und der User nicht nachhelfen muss, um alles lesen zu können (durch Maximieren des Fensters oder durch Scrollen). Um hier das Optimum sicherzustellen, sollte man sich an obige Tabelle von Jasper orientieren.