Brossmann Webpublishing

Tipps für Selbermacher

Falle Bildschirmauflösung

Natürlich liegt es nahe, Webseiten so zu gestalten, dass sie auf dem eigenen Bildschirm schick aussehen. Sich auf diese Vorgehensweise zu verlassen, birgt allerdings verschiedene Gefahren.

Laut verlässlichen Statistiken ist die Mehrheit der Websurfer mit einer Bildschirmauflösung von 1024×768 Bildpunkten im Netz unterwegs. Über sechzig Prozent nutzen diese Darstellung. Aber immerhin jeder fünfte sieht nur 800×600 Pixel, also Bildpunkte, auf seinem Schirm. Weitere fünfzehn Prozent erleben im Gegensatz dazu sogar hoch auflösende Darstellung mit 1152×864 oder gar 1280×1024 Pixeln. Wer derartig hohe Auflösungen benutzt, hat andererseits das Browserfenster oftmals nur auf der Hälfte oder auf zwei Dritteln der Bildschirmbreite stehen, so dass dann auch wieder nur 640, beziehungsweise 850 Pixel in der Breite sichtbar sind.

Dazu kommt ein unangenehmer Effekt bei stark textlastigen Seiten: Je breiter das Browserfenster, desto schwieriger ist es, den einzelnen Zeilen zu folgen und beim Zeilenwechsel tatsächlich auch die korrekte Textstelle zu finden.

Wer also zumindest 95 Prozent aller Besucher die eigenen Seiten so zugänglich machen will, dass sie möglichst nicht seitlich hin- und herzuscrollen brauchen, dem Fließtext ohne Probleme folgen können, andererseits aber auch keine weiten Leerflächen zu Gesicht bekommen, muss sich etwas einfallen lassen.

Lösungsvorschlag

Man kann die Angelegenheit dem Zufall überlassen: Legt man keine spezifische Breite des Inhalts fest, dann bricht der Browser Text und Bild automatisch um, so dass alles in der gewählten Breite des Fensters dargestellt wird. Viele Webseiten geraten dann aus allen Fugen: Bilder stehen nicht mehr dort, wo sie hingehören, Textabsätze werden so breit, dass beim Lesen der nächste Zeilenanfang nicht mehr gefunden wird. Man muss schon sehr weitblickend kodieren und seine Seiten unter verschiedenen Bildschirmauflösungen testen, um solche negativen Effekte ausschließen zu können.

Eine andere Möglichkeit besteht darin, die Auflösung des Bildschirmes per Javascript abzufragen und danach auf jeweils eigenständige Seiten weiterzuleiten. Diese Lösung ist allerdings sehr aufwändig, da zu jeder Seite drei oder mehr Versionen codiert und getestet, oder zumindest eigenständige Style Sheets gepflegt werden müssen. Außerdem lässt nicht jeder Surfer das Ausführen von Javascript auf seinem Rechner zu.

In vielen Fällen löse ich das Problem, indem ich die Breite des Inhalts durch eine alles umschließende Tabelle oder Breitenangaben für Abschnitte in Style Sheets fest vorgeben. Wer auf Nummer sicher gehen möchte, legt die Inhaltsbreite auf 620 Pixel fest. Dabei sind dann allerdings bei hohen Auflösungen und Anzeige des Fensters auf der gesamten Breite des Bildschirmes ungenutzt leer stehende Ränder zu sehen. Daher verwende ich oftmals Breitenangaben zwischen 750 und 780 Pixel als Kompromiss zwischen Raumausnutzung und Formatierung.

Ein Trick, der die Breitenbeschränkung nicht allzu deutlich werden lässt, besteht darin, bestimmte Bereiche der Seite so zu gestalten, dass sie in jedem Fall auf die gesamte Breite des Bildschirms gedehnt werden können. Zum Beispiel Kopf oder Fuß einer Seite bieten sich dafür an. Sie können sich diesen Effekt an der ersten Version eines meiner Projekte ansehen: d.e-script.iv

Ergänzendes

Zum Abschluss möchte ich noch erwähnen, dass auch die Gestaltung der Schriftgröße in Zusammenhang mit der Bildschirmauflösung eine wichtige Rolle spielt. Detailliert gehe ich auf diesen Punkt in einem anderen Kapitel der Tipps und Tricks ein.