Layoutbreite einer Website begrenzen

Wo liegt das neue Problem?

Waren es vor wenigen Jahren noch die kleinen Monitore mit 15 Zoll Auflösung, die dem Webdesigner Probleme (z.B. wegen der hässlichen horizontalen Scrollbalken) bereiten konnten, so sind es heute die neuen Widescreen-TFT-Monitore mit einer über 22 Zoll weiten Bildschirmdiagonalen. Und der Trend zu höheren Bildschirmauflösungen hält an.

Damit steigen die erreichbaren Auflösungen von ehemals 1024x768 Pixel (17 Zoll) über 1280x1024 Pixel (19 Zoll = Standard bis 2008) auf jetzt 1680x1050 Pixel (22 Zoll) oder sogar 1920x1200 Pixel (24 Zoll). Viele ältere Websites sind hinsichtlich der Layoubreite total flexibel und ohne Begrenzung programmiert, sei es über eine entsprechende Frameset-Definition, deren Breite über alle Frames z.B. 100% ergibt oder sei es über ein Tabellen- oder div-Container-Layout mit einer width-Angabe von z.B. 100% für die Tabelle bzw. den Container.

Auf den Widescreen-Monitoren ziehen sich die ursprünglich bei 17 oder 19 Zoll noch attraktiven flexiblen Layouts derart in die Breite, dass die Webseite für den Besucher unleserlich bzw. unattraktiv wird, weil sich z.B. eine Textzeile im ungünstigsten Fall fast über den gesamten Widescreen erstreckt.

Besteht der Auftraggeber unbedingt auf einem flexiblen Layout, so bietet sich die so genannte Variante "elastisches Layout" an, das auch bei großen Auflösungen nicht extrem verzerrt wird. Damit lässt sich nicht nur die maximale Breite auf z.B. 1250 Pixel begrenzen sondern auch die minimale Breite z.B. auf 980 Pixel. Letzteres verhindert auch, dass bei zu kleinen Monitoren das schöne div-Container-Layout völlig zusammenbricht.

Eine Beispielseite mit einem elastischen Layout finden Sie auch hier: www.freunde.uni-freiburg.de

Derartige Probleme tauchen nicht auf, wenn man von vorne herein ein festes Layout verwendet, wie z.B. bei der Site www.f2chem.de, die zudem noch mittig im Browserfenster zentriert ist.

Bei Verwendung der in die Jahre gekommenen Frame-Technik ist eine Anpassung an die neuen Widescreen-Auflösungen nicht so leicht möglich. Je nach Ausgangssituation muss u.U. ein weiterer Frame zur Frameset-Definitions-Datei hinzugefügt werden. Dieses neue Frame würde dann beispielsweise den Bereich rechts mit einem Prozentsatz von z.B. 20% der Gesamt-Breite ausfüllen.

Ein Beispiel zur Problematik der Darstellung bei großen Monitorauflösung zeigt die in 2004/2005 mittels Frametechnik erstellte 2. Auflage der Website des Schweizerischen Vereins für Schweisstechnik SVS . Der Screenshot unten wurde Ende März 2009 auf einem 22-Zoll-Monitor aufgenommen.

Diesen Screenshot in voller Auflösung (1680x1050 Pixel) direkt im Browser öffnen (170 kB, als .jpg)

Die aktuelle 3. Auflage der SVS-Homepage erhielt ein elastisches Layout, das ab Monitorauflösungen von z.B. 17 Zoll darstellbar ist, aber sich nur bis auf maximal 19 Zoll ausdehnen kann. Somit werden Zeilen mit Text nicht extrem in die Länge gezogen und die Proportionen stimmen wieder.