Bildschirmauflösung

Manchmal ließt man beim Betreten einer Webseite einen Hinweis wie "Diese Webseite ist optimiert für den Internet Explorer© bei einer Auflösung von 800x600". Leider bedeutet das, das sie für alle anderen Browser und alle anderen Bildschirmauflösungen möglicherweise nicht optimal angezeigt werden.

Mit dieser Statistik vom Juli 2009 (knapp 10.000 Befragte) bekommt man ein grobes Bild, mit welcher Auflösung die meisten Surfer unterwegs sind:


(Quelldaten: http://www.webhits.de/deutsch/index.shtml?webstats.html)

Endlosbild

Ein Trick, um das Design unabhängig von der Bildschirmauflösung zu machen, sind die Endlosbilder. Die Bildschirmauflösung kann sich von Bildschirm zu Bildschirm in der Breite und in der Höhe unterscheiden. Daher kann man links und rechts ein Bild mit einer fixen Breite verwenden und dazwischen ein Bild, das sich auf der x-Achse wiederholt. Außerdem kann man oben und unten ein Bild mit fixer Höhe verwenden und dazwischen ein Bild, das sich auf der y-Achse wiederholt. Hier ein Beispiel:
niedere Bildschirmauflösung hohe Bildschirmauflösung
Beispielseite
(verändern Sie die Fenstergröße um eine unterschiedliche Bildschirmauflösung zu simulieren)

In diesem Beispiel wurde eine Tabelle verwendet. Die mittlere Zeile hat in der linken und rechten Spalte ein Hintergrundsbild, das ein einfaches "x" ist. Durch diesen Code wird das "x" immer wieder auf der y-Achse wiederholt:

<td background="rahmen_-_mitte.png" style="background-repeat:repeat-y; background-position:center">

Die Tabelle selbst hat keine absolute Höhe in Pixel sondern eine relative in Prozent.

Bild spiegeln

Manchmal bietet es sich auch an, ein Bild zu spiegeln, um das Design unabhängig von der Bildschirmauflösung zu machen. Im oberen Beispiel sind bereits die Blätter vertikal gespiegelt. Manchmal bietet sich auch eine horizontale Spiegelung an.

In diesem Beispiel wurde das selbe Bild, lediglich gespiegelt, auf der linken und der rechten Seite verwendet. In der Mitte war ein anderes Bild notwendig. Zusammen gibt es ein Gesamtbild, das beispielsweise immer so hoch und breit wie das Browserfenster sein kann.

Beispielseite