melon|media Blog

Internetagentur Blog

melon|media Blog
Aktuelle Seite: Startseite / Usability / Usability: Browser Size und Seitenlayout

Usability: Browser Size und Seitenlayout

27. Februar 2010 by melonmedia Team 1 Kommentar

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.

Ähnliche Beiträge:

  1. E-Mails im Browser abrufen

Kategorie: Usability Stichworte: Actual Browser Size, Bildschirmauflösung

Kategorien

  • Allgemein
  • Online Marketing
  • Online Recht & Datenschutz
  • Online Shop
  • Responsive Webdesign
  • Suchmaschinenoptimierung
  • TYPO3
  • Usability
  • Webhosting & E-Mail
  • WordPress

Newsletter

Bleibe immer informiert mit unserem melon|media Newsletter.

Zusätzliches

  • Startseite
  • Impressum
  • Datenschutzerklärung

Neueste Beiträge

  • WooCommerce vs. Shopware: Ein Vergleich
  • DSGVO-Konform ein YouTube Video einbinden
  • WordPress Hack-Welle: Redirect auf unseriöse Webseiten
  • EuGH-Urteil: Keine Cookies ohne Zustimmung
  • Google Analytics: Zielvorhaben erfolgreich messen

Lieblinks

  • t3n Magazin
  • TSref
  • TYPO3 Bugtracker
  • TYPO3 Internetagentur aus Hamburg

© 2023 melon|media Blog » Internetagentur für TYPO3 und WordPress Webentwicklung und Online Marketing aus Hamburg