optimale Breite einer HTML Seite

Seitenstruktur / Seitenaufbau für eine optimale Breite einer Seite:
relativ, fest oder relativ fest

Wie man den prinzipiellen Aufbau von HTML-Seiten wählt, ist sicherlich eine Glaubensfrage. Jeder, der sich mit der Erstellung von benutzerfreundlichen Internetseiten beschäftigt, wird sich sicher schon einmal die Frage gestellt haben, welcher Seitenaufbau für sein Projekt am günstigsten ist. Das Ziel sollte stets sein, möglichst vielen Nutzern, bei unterschiedlichen Browsern, Bildschirmauflösungen und Browsereinstellungen, eine optimale Breite einer Seite zu bieten.

Hier einige Beispiele, wie dieses erreicht werden kann.

1. Relativer Seitenaufbau

Ein relativer Seitenaufbau zeichnet sich dadurch aus, dass den HTML-Elementen keine feste Breite zugewiesen wird, sondern dieses den jeweiligen Browsern überlassen wird. Nach diesem Prinzip gestaltet zum Beispiel der Usability-Experte Jakob Nielsen viele Dokumente seiner Website: useit.com.

Vorteile:
Die Internetseiten werden unabhängig von Bildschirmauflösung und Fenstergröße horizontal immer komplett dargestellt. Horizontales Scrollen wird somit ausgeschlossen!

Nachteile:
Bei zunehmend hohen Auflösungen werden Textzeilen sehr lang, was die Lesbarkeit deutlich erschwert. Diesen ungünstigen Effekt kann man durch abwechslungsreiche Textgestaltung (Illustrationen, Auflistungen, Absätze usw.) mindern. Dieses Vorgehen läßt sich anhand vieler Artikel auf Nielsens Website gut nachvollziehen. Achtet man nicht auf eine abwechslungsreiche Textgestaltung besteht die Gefahr, dass der Besucher dieser Seite von der Textmasse quasi erschlagen wird, gedanklich die weiße Fahne hißt und lieber auf das Lesen der Seite verzichtet.

2. Fester Seitenaufbau

Hier wählt man für das HTML-Dokument eine feste Breite, die zumeist über eine Tabellenstruktur festgelegt wird. Diese Art des Seitenaufbaus findet man im Web sehr oft. Als Musterbeispiel sei die Site des Usability-Experten Steve Krug sensible.com genannt.

Vorteile:
Durch die feste Breite man die horizontalen Positionen aller Elemente und auch die Zeilenlänge von Textkomponenten bestimmen und somit eine optimale Lesbarkeit einstellen. Wichtig ist, dass man die Breite nicht zu groß wählt, damit auch bei kleineren Bildschirmauflösungen nach Möglichkeit kein horizontales Scrollen notwendig wird. Häufig wird die Breite so angepasst, dass die Seite bei einer Auflösung von 800 x 600 Pixel horizontal genau passt. (bei voller Fenstergröße) Steve Krug wählt sogar eine noch niedrigere Breite (rund 600 Pixel), die auf eine Auflösung von 640 x 480 Pixel ausgelegt ist.

Nachteile:
Häufig läßt sich horizontales Scrollen bei sehr geringen Auflösungen nicht mehr verhindern. Außerdem entstehen bei höheren Auflösungen seitliche Leerräume, die optisch unschön wirken. Durch Zentrieren mittels einer umschließenden Tabelle verteilt sich dieser Leerraumeffekt auf beide Seiten, was optisch dann vorteilhafter aussieht.

3. Mischformen aus relativem und festem Seitenaufbau

Bei dieser Form wird sowohl mit festen als auch mit flexiblen Elementen für den horizontalen Seitenaufbau gearbeitet. Hier werden zumeist seitlich feste Breiten verwendet, während der mittige Hauptinhalt flexibel gehalten wird. Beispiel: php-center.de

Vorteile:
Da der Hauptinhalt eine flexible Breite hat, wirkt er als eine Art Puffer und die Seite wird unabhängig von Auflösung und Fenstergröße mit voller Breite im Browser dargestellt. Durch das mehrspaltige Layout werden Textzeilen auch bei hohen Auflösungen nicht unleserlich lang und bei sehr niedrigen Auflösungen hat der User zumindest die Möglichkeit sich spaltenweise durchzuarbeiten. (Horizontales Scrollen wird reduziert!)

Nachteile:
Die Gestaltung solcher Seiten erfordert etwas mehr Aufwand, da viele Tests zur Optimierung notwendig sind. Außerdem eignet sich diese Gestaltungsmöglichkeit nicht für alle Websites, da es für die seitlichen Bereiche auch sinnvolle Verwendungsmöglichkeiten wie Kolumnen, spezielle Artikel oder Themenbereiche geben muss.

Fazit

Bei der Planung einer Website sollte man sorgfältig auswählen, welche Gestaltungsart für diese spezielle Site am günstigsten ist und für eine möglichst hohe Prozentzahl der Benutzer eine optimale Darstellung garantiert. Hilfreich für solche überlegungen ist es, sich häufiger mit Statistiken über das Nutzerverhalten hinsichtlich der bevorzugten Bildschirmauflösung und des bevorzugten Browsers zu beschäftigen. Solche Statistiken findet man zum Beispiel unter:
http://www.webhits.de/deutsch/index.shtml?/deutsch/webstats.html

Diese Art von überlegungen sind zwar für viele Webmaster selbstverständlich, leider findet man im Web aber auch genügend Gegenbeispiele. Solche Websites werden meistens nur für den Browser und die Auflösung optimiert, die der Webmaster selber bevorzugt. Häufig findet auf den Startseiten solcher Sites auch noch Hinweise wie: „optimiert für Internet Explorer 6 und 1024 x 768 Pixel“. Solche Hinweise sind zwar gut gemeint, erwecken aber auch den Eindruck, dass Besucher (die nicht die Wunschkonfirugation des Webmasters benutzen) am besten gleich an der Eingangstür abgewimmelt werden sollen. Da Internetseiten für ein möglichst breites Publikum geschaffen werden sollten, hoffe ich, solche Websites in Zukunft immer weniger zu sehen.

Autor: Günter Dehne