Bildschirmauflösung

Bildschirmauflösung

Die reine Darstellung und Verlinkung von Texten und Bildern sind längst nicht mehr das A und O der Webseitengestaltung. Viel mehr wird auf ein ganzheiltiches Erscheinungsbild und Design gesetzt. Hier stellt sich dann schnell die Frage: Für welche Bildschirmauflösung soll ich meine Webseiten optimieren?

Im Rahmen dieses Artikels werden die folgenden Fragen erörtert:

• Für welche Auflösung soll ich meine Webseite designen?
• Welche Bildschirmauflösung verwenden die meisten Surfer?

Die Bildschirmauflösung wird in der Ausdehnung in horizontaler und vertikaler Richtung angegeben. Die Einheit heißt hierbei Pixel. Ein Pixel ist ein Punkt auf dem Bildschirm, also die kleinste darstellbare Einheit.

Im klassischen und am häufigsten vertretenen Format hat man hier ein Verhältnis von 4:3, also Auflösungen von z.B. 640x480, 800x600 oder 1024x768 Pixeln. Hochauflösende Bildschirme haben eine Ratio von 5:4, z.B. 1280x1024 Pixeln. Neuere Bildschirme, insbesondere bei Multimedia-Laptos, haben ein wesentlich breiteres Bild und kommen mit einem Verhältnis von 8:5 wie z.B. 1280x800 Pixeln.

Die folgende Tabelle zeigt eine aktuelle Auswertung der eingesetzten Ratios:

Seitenfaktor	Häufigkeit	Ratio	Beispiel für Auflösung
1,33	72,35%	4:3	640x480, 800x600, 1024x768
1,25	20,37%	5:4	1280x1024
1,6	6,02%	8:5	1280x800
1,5	0,30%	3:2	1152x768, 1280x854
1,67	0,30%	5:3	1280x768
1,78	0,15%	16:9	1280x720
2,67	0,10%	8:3	2048x768
1,32	0,10%		1152x870
1,43	0,10%		992x695, 1005x704
2,5	0,05%	5:2	2560x1024
1,26	0,05%		1280x1019
1,37	0,05%		1364x996
1,56	0,05%		1600x1024

Anhand der obigen Tabelle wird deutlich, das über 70% der Internetnutzer ein Seitenverhältnis von 4:3 verwenden. Dies sollte man dementsprechend berücksichtigen, dass ein Layout für eine breitere Darstellung dementsprechen bei der Mehrzahl der Surfer zu einer gegebenenfalls schlechteren Darstellung führt.

Wesentlich wichtiger als das Ratio ist jedoch die Berücksichtigung der Bildschirmbreite, bzw. Auflösung. Ein Design für eine hohe Auflösung führt zu einem "breiten" Bild, welches auf kleineren Bildschirmen nicht mehr sauber dargestellt werden kann. So muss der Besucher der Webseite horizontal scrollen um alles sehen zu können. Genau dies ist zu vermeiden.

In der folgenden Tabelle sind die verwendeten Auflösungen im einzelnen dargestellt und der Breite nach sortiert.

Auflösung	Häufigkeit	inv. Kum. Häufigkeit
640x480	0,15%	100%
800x600	6,42%	99,85%
992x695	0,05%	93,43%
1005x704	0,05%	93,38%
1024x768	57,9%	93,33%
1120x840	0,05%	35,42%
1152x768	0,05%	35,37%
1152x864	3,96%	35,32%
1152x870	0,1%	31,36%
1280x720	0,15%	31,26%
1280x768	0,3%	31,11%
1280x800	4,47%	30,81%
1280x854	0,25%	26,34%
1280x960	0,8%	26,09%
1280x1019	0,05%	25,29%
1280x1024	20,37%	25,24%
1364x996	0,05%	4,87%
1400x1050	1,61%	4,82%
1440x900	0,9%	3,21%
1600x1024	0,05%	2,31%
1600x1200	1,46%	2,26%
1680x1050	0,4%	0,8%
1920x1200	0,25%	0,4%
2048x768	0,05%	0,15%
2304x864	0,05%	0,1%
2560x1024	0,05%	0,05%

Von Bedeutung ist zunächst vorrangig die Bildschirmbreite. Aus der obigen Tabelle kann man entnehmen, dass fast 60% der Internetbenutzer eine Bildschirmauflösung von 1024 Pixeln in der Breite verwenden. Darüber hinaus kann man an der invers kummulierten Häufigkeit erkennen, dass mit dieser Breite über 90% der Surfer problemlos klar kommen sollten, da sie diese Breite oder eine größere verwenden.

Aus diesem Grund ist es nach wie vor sinnvoll eine Webseite im Layout auf eine Breite von 1024 Pixeln auszurichten. Mit noch geringerer Breite erzielt man keine erhebliche Verbesserung im Sinne der Nutzerzahlen, hat allerdings deutlich mehr Einschränkungen in den Gestaltungsmöglichkeiten.

Die Bildschirmabmessungen entsprechen natürlich nicht der verfügbaren Fläche im Browser. Hier sind die Startleiste sowie Menu- und Symbolleisten des Browsers noch abzuziehen. Damit gehen in der Höhe mind. 25% verloren, in der Breite gehen durch Scroll- und ggf. Sidebars auch bis zu 25% verloren. Effektiv bleibt somit oft nur eine Fläche von 800x600 Pixeln übrig.

Die Bildschirmhöhe ist nachrangig von Bedeutung, sollte allerdings auch nicht außer acht gelassen werden. Insbesondere bei Verwendung von Bildern sollte man dies im Auge behalten. Wichtig im Sinne des Surfers ist, dass mit der Darstellung der Seite alle Informationen mit möglichst wenig scrollen sichtbar sind. Wird z.B. bei einer Höhe von 800 Pixeln in der effektiven Darstellungsfläch ein Logo mit einer Höhe von 400 Pixeln verwendet, verbleiben also für weitere Inhaltselemente wie Text, etc. nur noch 400 Pixel übrig.

Im folgenden sehen Sie zwei Screenshots von Jaegers.Net bei einer Bildschirmauflösung von 800x600, bzw. 1024x768 Pixeln. Die effektive Höhe für die Darstellung des Inhalts im Browser beträgt dabei mit 429, bzw. 594 Pixeln nur ca. 72, bzw. 77%.