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. Sascha Fuchs
    18. August 2011 um 19:06 Uhr

    Ich muss zugeben früher habe ich Liquid und Fluid Designs gehasst, und Statischen Layouts den Vorzug gegeben. Was viele Agenturen auch heute noch machen „Nein wir können nicht flexibel sein, das passt ja nicht mehr zu unserer Photoshop Vorlage die der Kunde abgenommen hat“.

    Seit Einzug der Media Queries mag ich das flexible Layout – vielleicht auch deswegen weil ich selbst auf Full HD Monitoren arbeite jedoch gerne mit dem IPad oder mit meinem Smartphone durch das Netz wandere.

    Man kann den Platz wesentlich besser nutzen, ohne sich durch das Nutzerverhalten limitieren zu müssen. Ob groß ob klein, jeder bekommt das bestmögliche Layout das auch Sinn macht.

    Responsive ist in meinen Augen das beste Mittel das Medium Internet in alles Auflösungen und Endgeräten effizient zu nutzen – es zwar nicht das ultimative Heilmittel für alle Fragen, aber ein guter weg dort hin.

    • Christian Schulze
      18. August 2011 um 23:35 Uhr

      Genau so ging es mir auch. Flexible Layouts waren früher auch wirklich unschön.

      Das Thema „Responsive Webdesign“ bietet viel Potential und wird auch demnächst hier im Blog ausführlicher behandelt.

  2. Timo
    19. August 2011 um 11:17 Uhr

    Sehr interessant, dacht nicht dass es immernoch so viele mit niedriger Auflösung gibt. Für WordPress gibt es zum Glück spezielle Plugins für die Anzeige auf Mobilen Geräten.

    • Christian Schulze
      19. August 2011 um 16:28 Uhr

      Die Mobile-Theme-Plugins für WordPress sind in meinen Augen nur eine Notlösung. Viele Seiten sehen dadurch auf mobilen Geräten identisch aus und verlieren neben ihrer Individualität auch Usability. Ein Responsive Design ist da deutlich flexibler und angemessener. Aber wie schon gesagt: Zu dem Thema gibt es bald mehr 🙂

  3. Pixmac3Cmanager
    20. August 2011 um 11:06 Uhr

    Eins hast du noch vergessen zu erwähnen: Testen was das Zeug hält !
    Vergleichen verschiedener Auflösung auf gleichem Gerät, und Vergleich gleicher Auflösung auf verschiedenen Geräten.

  4. Nico
    28. August 2011 um 12:43 Uhr

    Ich habe bei meinem Blog den Haupteil auf 600px und die Seitenleiste auf 200px gesetzt. Dazwischen sond 30px Abstand. Also 830px. Das ganze ist aber auch responsive, so dass es sich auch auf kleineren Geräten betrachten lässt 🙂

  5. Toni
    29. August 2011 um 14:12 Uhr

    Die Nutzung von Browsern wird sehr oft durch das Design der Webseite bestimmt. Da spielen meine Vorlieben keine große Rolle, wenn der Inhalt ein „Zusammenrücken“ nicht möglich macht,…
    Oder wie oft rutschen Texte ins Endlose bei den breiten Bildschirmen. Eine Generalüberholung von 80% der Webseiten im Netz wäre für uns Webdesigner ein Traum, wenn denn alle Webseitenbesitzer die Notwendigkeit einsehen würden. Ich bin für eine Webseiten-Wartungspflicht!

  6. Björn Papenhagen
    2. September 2011 um 00:13 Uhr

    Hallo,

    ich hatte mir damals auch sehr viele gedanken über Auflösungen gemacht. Im endeffekt weiß ja jeder wie es geht, am besten für jede Auflösung, jeden Browser etc. eine andere Seiteneinstellung.. Ich finde das IE rumgefusche schon schlimm genug :). Da bleibt kaum Zeit für Auflösungsgedanken.

    Auf meiner Seite habe ich folgende Auflösungen:
    26% 1600×900,
    14% 1920×1080,
    10% 1680×1050,
    9% 1280×800

    Gruß Björn

  7. mkoetting
    28. Oktober 2011 um 08:56 Uhr

    Meiner Meinung nach sinkt die Fenstergröße im Moment wieder. Waren es damals noch 1280×1945 o.Ä., sollten heutzutage die Tabletuser nicht vernachlässigt werden.
    Da es meist nicht erforderlich ist eine neue Website für das Tablet zu erstellen, sollte die bisherige schlicht und einfach angepasst werden.
    Dies Beobachtung lässt sich auch nach der Auswertung von Webanalytics-Tools feststellen.

  8. Christian
    5. November 2011 um 15:35 Uhr

    Also eine generelle Contentgröße von 960 Pixeln halte ich immer noch für angebracht. Das Design sollte flexibel gestaltet werden so dass es auf kleinen wie großen Auflösungen angenehm anzusehen ist.

    Muss es denn auch immer eine Mobile Variante für eine Webseite geben? Es ist doch Sinnvoll das Design so anzupassen das es auf mobilen Browsern ebenfalls gut aussieht.

    Ganz wichtig ist: Die Usability darf nicht vergessen werden. Was nützt das schönste Design wenn es in der Bedienung zuviel Stress bei dem Benutzer erzeugt.

  9. Michael
    2. Dezember 2011 um 10:53 Uhr

    Als ich vor einigen Jahren mit Erstellung von Webseiten begonnen habe war ich wirklich erschrocken, welche schwerwiegende Unterschiede sich bei der Betrachtung von verschiedenen Browsern und Bildschirmen ergeben. Auf dem großen Widescreen Monitor entworfen hat die Webseite auf dem Netbook schrecklich ausgesehen.
    Auch jetzt in Zeiten in denen Tablets und mobiles Internet in der Hosentasche populärer werden muss umgedacht werden. Es nervt den User wenn er merkt das er nur mit dem Scroll-Balken beschäftigt ist. Nutzerfreundlichkeit wird also wichtiger. Ich selber gestalte oftmals lieber schmalere Webseiten die auch auf kleineren Displays gut abzulesen sind und gehe dabei lieber in die Länge. Wie oben beschrieben meine auch ich zu bemerken das die Fenstergröße wieder sinkt.

  10. trebax
    16. Dezember 2011 um 23:36 Uhr

    Simpelste Theorie….
    Und Agenturen die es nicht schaffen Layouts dynamisch, bzw. flexibel zu gestalten haben einfach kein Fachpersonal.

    Wobei, gerade bei den heutigen Browserversionen gibt es eigentlich kein Layout das von einem halbwegs begabten Programmierer nicht „flexibel“ bzw. Auflösungsunabhängig erstellt werden kann.

    Zugegeben, ein Grafikdesigner oder Mediengestalter mit Fachrichtung Print hat in puncto usability und user interface design nicht unbedingt sooo viel Plan, aber genau deshalb ist es ja auch nicht ihr Job.

    Back to the roots.
    Maximale Kompatibilität und mediale Unabhängigkeit sind absolute Primärattribute, das heißt eine Webseite muss Auflösungs unabhängig und unabhängig vom Gerät (Medium) zum Beispiel:“ PC, Apple, Smartphone…. Cyberbrille mit Irissensor (; “ immer gleich aussehen.

    Maximale Kompatibilität erreicht in dem man seine Webseite nach der Mindestanforderungen der sich aus dem Hauptteils der Benutzer, bzw. Webseitenbesuchern ergibt gestaltet. Hierbei geht man „noch“ von einer 4:3 Auflösung von 1024 x768 aus und abzgl. Browserleiste, Scrollbars und diversen Browsererweiterungen landet man bei einem guten Durchschnittswert von 1000 x 600 px der für den ersten bzw. Hauptanzeigebereich einer Webseite gilt.

    Okay, und ob ihrs nun glaub oder nicht, dabei hat man sich was gedacht….. Goldener Schnitt = 5:3 … blubb, blubb 16:9

    1024 / 16 *9 = 576px …..folglich ein Toleranzbereich von 24 px
    960° Grid System (muss für Fachleute und diejenigen die es gern wären)
    960 / 16 *9 =540……folglich ein Toleranzbereich von 40 px

    Aber was geht ab??? Voll alte Schule oder? Meine Webseite lege ich so an das sich der erste Bereich im Kinoformat von 21:9 ergibt. Also
    round about 960x410px Bild oder key-visual Bereich. In den restlichen 190 px kommt eine, sofern vorhanden horizontale Navigation und evtl. unter das key-visual die ersten wichtigen Infos.

    Nun wisst ihr etwas was eigentlich nur dem Obernerd auffällt. Nein, im Ernst…..Qualität bewährt sich unabhängig vom Produkt immer am meisten im Detail. Und jeder Fachmann erkennt den Unterschied sofort.

  11. Markus
    30. Dezember 2011 um 09:32 Uhr

    Bin er selben Meinung wie „mkoetting“, wie ich in sämtlchen Statistiken meiner Sites beobachten kann, steigen die Zugriffe über mobile Geräte schnell an.
    Noch hab ich zwar keine Site bei der mehr als 2% der User über iPhone & Co kommen, bin aber fest davon überzeugt, das die Mobilen-Geräte in kurzer Zeit einen wichtigen Teil der User bilden werden.
    Daher wird das Thema „Größe der Website“ wichtiger denn je.
    An einige oben beschriebene Punkte hab ich auch noch nicht gedacht, vor allem die Infografik von Google hat zum nachdenken angeregt, wenn man bedenkt das die User meiner best besuchten Seite im letzten Jahr folgende Auflösungen hatten:
    1024 x 768 = 14,00 %
    1280 x 1024 = 10,92 %
    1280 x 800 = 10,49 %
    1366 x 768 = 8,85 %
    1920 x 1080 = 8,35 %
    am Ende aber doch nur einen Teil davon für die Betrachtung der Websites genutzt haben. An einem flexiblen Layout kommt eigentlich kein Webmaster vorbei, selbst große Agenturen sollten das beachten.

  12. webdesign wien
    3. Juni 2012 um 01:35 Uhr

    Sehr interessantes Thema, wie markus erwähnt an flexiblen Layouts kommt kein Webmaster vorbei.

Trackbacks/Pingbacks