Die wahre Browsergröße – Wieviel Platz bleibt für die Webseite?

Auf der Suche nach der perfekten Webseiten Größe.

  • von Christian Schulze

Wie groß ist die durchschnittliche Browsergröße meiner Besucher? Diese Frage ist nicht leicht zu beantworten und zieht einige wichtige Designentscheidungen nach sich. Neben der Ästhetik können Konversionsraten und Werbeeinnahmen dadurch beeinflusst werden. Dabei ist das Browserfenster nicht mit der Bildschirmauflösung gleichzusetzen. Ließ weiter und du erfährst an was du alles denken musst, wenn es um die Größe einer Webseite geht.

Wenn ich mir die Statistik “Bildschirmauflösung” ansehe, teilen sich 1680×1050 Pixel und 1920×1080 Pixel mit jeweils 15% die Spitzenposition. Soll ich meine Webseiten zukünftig besser für diese Auflösungen optimieren? Nein! Nichts überstürzen. Denn wenn du mal genau darüber nachdenkst gibt es viele Dinge, welche die Größe der angezeigten Webseite beeinflussen.

Versuchen wir uns mal der tatsächlich angezeigten Fläche zu nähern.

Theoretische Auflösung

Die Bildschirmauflösung ist unter Webdesignern ein beliebter Wert. Nahezu jede Analysesoftware erhebt Daten über die Auflösung. Ãœber die letzten Jahre konnte man beobachten wie die Auflösung im Durchschnitt immer größer wurde und insgesamt an Varianten zugenommen hat. Die Zeiten von 800×600 und 1024×786 als einzig relevante Größen sind lange vorbei.

Als Richtwert ist die Auflösung brauchbar, aber nicht als tatsächlicher Wert. Denn es gibt noch einige Faktoren, welche die angezeigte Fläche beeinflussen.

Das Browserfenster

Jeder Browser nutzt schon von Haus aus einige Pixel für den Rahmen und die Scrollbar rechts. Der Flächenverlusst ist in diesem Fall marginal, sollte aber nicht vergessen werden.

Beispiel: Google Chrome (unter Mac OSX Lion) verbraucht 15 Pixel Breite für die Scrollbar. 72 Pixel gehen in der Höhe für Tabs und Adressleiste drauf. Und da ist Chrome deutlich sparsam, andere Browser verbrauchen noch mehr Platz.

Vom Benutzer gewählte Browsergröße

Faustregel: Je größer die Auflösung, desto unwahrscheinlicher ist es, dass der Browser im Vollbildmodus benutzt wird. Bei einer Auflösung von 1920 x 1080 Pixel habe ich meinen Browser meist nur als 1300 x 800 Pixel Fenster offen.

Persönliche Angewohnheiten gehen hier weit auseinander. Einer mag zwei Browserfenster nebeneinander positionieren. Ein anderer macht den Browser recht klein um ihn mit anderen Fenstern umgeben zu können.

Abhilfe schaffen hier spezielle JacaScript Lösungen oder die CSS Media Queries, mit deren Hilfe spezielle Styles nur ab einer festgelegten Browserbreite angezeigt werden.

Plugins, Menüleisten etc.

Es gibt noch einen weiteren Faktor der nicht unterschätzt werden darf. Zusätzliche Menüleisten, Browserplugins und Statusleisten. Das Firefox Plugin Gutscheincode Finder beispielsweise, zeigt eine Benachrichtigung an wenn es für den Onlineshop, den man aktuell besucht, einen Gutschein gibt. Die Höhe der Statusmeldung ist 28 Pixel, die wiederum als Anzeigefläche fehlen. Ein ungünstig platzierter “Jetzt Kaufen” Button könnte somit aus dem Sichtfeld rücken.

Dabei habe ich auch schon viel schlimmere Dinge gesehen. Browser, bei denen so ziemlich jede verfügbare Zusatzleiste installiert war.


Traurige Realität: Mit Menüleisten überladener Browser. Screenshot von fsse8info.

Richtlinie für Browsergrößen

In dem Beispiel auf der Grafik ist ein Spendenknopf etwa bei 550 x 500 Pixel positioniert. Die Feststellung hier: 30% der Besucher können diesen Button nicht sehen, ohne zu scrollen. Es ist nicht schwer vorherzusagen, dass die Abschlussrate wohl merklich steigen würde, wenn der Button weiter links oben platziert wäre.

Google stellt diese Infografik unter http://browsersize.googlelabs.com/ zur Verfügung.

Den Bereich in Lila sehen etwa 99% der Benutzer. Den Bereich in Hellgrün nur noch 98% und so weiter. Auffällig ist, dass ab einer Breite von ca. 950 Pixel die Sichtbarkeit immer schneller sinkt. Eine Breite von 150 bis 1200 Pixel kann nur noch von jedem Zweiten Nutzer angezeigt werden.

Diese Grafik solltest du beim Gestalten einer Webseite immer im Hinterkopf haben. Denn wenn ein wichtiges Element aus dem sichtbaren Bereich rückt, kann das spürbar negative Auswirkungen auf das Ziel der Seite haben.

Fazit

Keine Panik, du brauchst von nun an nicht jedes Pixel einzeln zählen. Aber an die folgenden Punkte solltest du beim Webdesignen denken:

Wichtige Dinge oben platzieren.
Die Navigation, das Logo und wichtige Buttons sollten so weit wie möglich oben auf der Seite platziert werden. Dadurch wird sichergestellt, dass die Aufmerksamkeit von so vielen Benutzern wie möglich darauf gelenkt wird.

Bildschirmauflösung nie als absoluten Wert betrachten
Die Auflösung ist ein sehr grober Richtwert und sollte von dir nicht als maßgebende Einheit herangezogen werden. Ausnahme: Bei Smartphones und Tablets läuft der Browser fast ausschließlich im Vollbildmodus.

Webseiten flexibel bauen
Mit modernen Techniken wie den CSS Media Queries kannst du eine Webseite so gestalten, dass sie vom größten Fernseher bis zum kleinsten Smartphone immer die sinnvollste Menge an Informationen anzeigt. Aber Achtung: nicht einfach nur die Elemente mit Prozentangaben für die Breite ausstatten. Denn je länger beispielsweise eine Textzeile, desto unlesbarer wird sie.

Lesetipp: Sind 960 Pixel zu eng für einen Blog? Ein zum Thema passender Blick speziell auf die Breite von Blogs.

Und jetzt bist du dran. Für welche Browsergrößen optimierst du deine Webseiten?

15 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.