Wie breit sollte eine Webseite heute sein?

Wie viel Platz habe ich für mein Layout?

veröffentlicht am: 07.09.12, Autor: Peter Scheel

Wie breit sollte eine Webseite heute sein Heutzutage ist eine heftige Diskussion darüber entbrannt, ob es noch zielführend ist, Layouts mit fixen (festen) Pixelwerten zu designen. Als Alternative hierzu wäre ein sogenanntes flüssiges Layout notwendig, in denen sich die Inhalte der Website stufenlos, oder in mehreren Stufen an die Browserbreite, bzw. Bildschirmauflösung anpassen.

Hierbei müssen sie nicht nur einen Gerätetyp, wie zum Beispiel Desktop Monitore berücksichtigen, sondern auch mobile Geräte, wie zum Beispiel auch Smartphones und Laptops (Responsive Design). Schnell erkennt man, dass hier beim Layout ein vielfacher Aufwand entstehen kann.

Egal wie Sie sich entscheiden, folgende Fragen gehen Ihnen wahrscheinlich bereits durch den Kopf:

  • Wie breit darf mein (Web-) Design heute sein?
  • Welche Inhalte sind im Browser noch sichtbar, ohne dass der Benutzer scrollen muss?
  • Wie viele Pixel hat ein Standardbildschirm heute?
  • Wie viele unterschiedliche Arten von Bildschirmen gibt es heute?
  • Welche davon sollte ich bei meinem Layout berücksichtigen?

Ich versuche, Ihnen diese Fragen nach und nach zu beantworten.

Heutige Standard-Bildschirmgrößen

Eine gute Nachricht: bereits mit vier Auflösungen decken Sie mehr als 85% aller benutzen Bildschirmgrößen ab (Stand 05.09.12):

  • 1680x1050
  • 1280x800
  • 1280x1024
  • 1024x768

(Quelle: www.webmasterpro.de/portal/webanalyse-systeme.html)

Wenn Sie zusätzlich Mobile Endgeräte berücksichtigen wollen, wird es etwas schwieriger. Für die nachfolgenden Betrachtungen klammere ich diese Geräte erst einmal aus. Die Vorgehensweise ist aber immer die gleiche, so dass sie auch für diese Geräte entsprechende Berechnungen anstellen können.

Browser "klauen" Ihnen Platz

Browser beanspruchen Platz auf dem Bildschirm, der Ihnen beim Layouten nicht zur Verfügung steht. Besonders im Header- und Footerbereich beansprucht ein Browser Platz. Aber auch auf der rechten Seite, wenn ein Slider eingeblendet wird. Leider hängen diese Größen besonders im Headerbereich von individuellen Einstellungen jedes Benutzers ab. Dennoch kann man für die jeweiligen Browser eine circa Angabe machen. Doch welche Browser werden am häufigsten verwendet?

Welche Browser sind Marktführer?

Auch hier hilft wieder eine Statistik. Wenn Ihre Kunden überwiegend aus Deutschland stammen, so decken 3 Hersteller ca. 80% des Marktes ab:

  • Firefox
  • Internet Explorer
  • Chrome

(Quelle: www.webmasterpro.de/portal/webanalyse-aktuell.html)

Auf diese drei möchte ich mich momentan beschränken und liste Ihnen nun für diese 3 Browser meine am Bildschirm gemessenen Werte:

Viewport der Browser

  • Firefox 15.0: Native Bildschirmauflösung: 1920x1200; Innenfläche Browser: 1903x1014
  • IE 8: Native Bildschirmauflösung: 1920x1200; Innenfläche Browser: 1899x995
  • Chrome 21.0: Native Bildschirmauflösung: 1920x1200; Innenfläche Browser:1903x1085

Ihre eigene, momentane Auflösung können Sie hier sehen:

Ihre Native Bildschirmauflösung: x

Ihre Innenfläche Browser: x

Wenn Sie selbst einmal ein Gerät bewerten bzw. wissen wollen, wie viel der Browser an ihrer Bildschirmauflösung verwendet, habe ich Ihnen ein kleines Tool zur Verfügung gestellt mit dem Sie dies leicht selbst überprüfen können (Browsertool zur Bestimmung der eigenen Bildschirmgröße und des Viewports im Browser).

Im schlechtesten Fall beansprucht der Browser (IE) bei mir also horizontal maximal 41 Pixel, vertikal maximal 205 Pixel.

Die maximale Breite Ihres Layouts

Wenn Sie die oben genannten 4 Standard-Bildschirmgrößen unterstützen wollen, müssen Sie sich an der kleinsten der 4 Auflösungen orientieren, hier also 1024x768. Wir ziehen die Werte ab, die ein Browser maximal benötigt (bei mir also 41x205 Pixel). Es bleiben horizontal also nur noch 983 Pixel übrig! Das bedeutet Ihr Layout sollte nicht breiter als 983 Pixel sein! 960 Pixel, bzw. 980 Pixel haben sich als gute Größe etabliert.

Die Höhe Ihres Layouts

Die meisten Seiten werden so ausgerichtet, dass sie nach unten wachsen können. Dennoch ist es wichtig beim Layout wichtige Teile im oberen Bereich anzusiedeln, die ein Benutzer ohne scrollen lesen kann. Viele Pixel haben Sie da? Bei mir wären es nur 563 Pixel! (768 - 205). Das ist sehr wenig. Das heißt, hat jemand einen Monitor mit einer Bildschirmauflösung von 1024x768 Pixel sieht er erst einmal nur 563 Pixel vertikal von Ihrem Layout. Das sollten Sie unbedingt inhaltlich berücksichtigen!

 

Anmerkung (Mai 2013)

Wirklich moderne Internetauftritte berücksichtigen heutzutage alle Gerätetypen (Smartphones, Tablets, Laptops und Desktop PCs). Legen Sie also Ihren Schwerpunkt nicht nur auf die Desktopvariante, sondern überlegen Sie, wie Sie auch alle anderen Gerätetypen in Ihrem Layout berücksichtigen können.

Viel Spaß beim Layouten!

 

Blogverzeichnis - Blog Verzeichnis bloggerei.de Bloggeramt.de