Bild vergrößern
937
467
http://img3.magnus.de/image-r937x466-C-f29b26de-37632014.jpg
© Internet Magazin
© Internet Magazin
Optimale Seitenanpassung
Webdesign für Breitbild-Monitore
Breitbildmonitore und die Bildschirme kleiner Geräte stellen Webdesigner vor eine Herausforderung. Lesen Sie, wie Ihre Website perfekt angezeigt wird.
Breitbildmonitore mit hohen Auflösungen wie 1920x1080 werden immer billiger und verdrängen zunehmend die alten Formate wie 1280x1024 und 1280x800 oder 1024x768. Webdesigner müssen sich heutzutage auf diese neuen Auflösungen einstellen, denn viele Webseiten sehen auf solchen Breitbildschirmen plötzlich hässlich aus, wenn der Platz auf dem Bildschirm entweder nicht voll ausgenutzt wird und ein Großteil des Fensters durch Weißraum oder einen uninteressanten Hintergrund dominiert wird. Es kann aber auch passieren, dass der Text über die gesamte Bildschirmbreite läuft und den Leser so zwingt, das angezeigte Browserfenster zu verkleinern.
Parallel sind aber auch immer mehr Benutzer mit kleinen, mobilen Geräten wie Netbook oder Smartphone unterwegs, die nach wie vor eine niedrige Auflösung haben und den Webdesigner dazu zwingen, auch diese Auflösung weiterhin zu berücksichtigen.
Cleverer Einsatz von Hintergrundbildern
Wir stellen Ihnen Kniffe vor, um Webseiten auch auf Breitbildmonitoren gut aussehen zu lassen und zeigen Ihnen, wie man es so weit wie möglich allen Clients recht machen kann. Die einfachste Methode, eine Seite auch auf Breitbildmonitoren gut aussehen zu lassen, ist die intelligente Wahl eines Hintergrundbildes.
Dieses Hintergrundbild muss so groß sein, dass es bei der maximalen Auflösung (wie 1920x1080) den gesamten Hintergrund ausfüllt und sich nicht wiederholt. Mit einer Auflösung von 1920x1200 Pixeln ist man auf der sicheren Seite.
Das Motiv muss so gewählt sein, dass es viel Fläche enthält und darin enthaltene Objekte so platziert sind, dass sie die Seite in verschiedenen Auflösungen gut einrahmen. Das Hintergrundbild sollte auf alle Fälle ein zum Thema der jeweiligen Seite passendes Motiv enthalten und nicht nur eine strukturierte Fläche, weil es sonst langweilig wirkt und an die Tapetenhintergründe von früher erinnert.
Auflösung 1024x768
Die Seite in unserem Beispielbild unten ist auch auf einem kleinen Display mit einer maximalen Auflösung von 1024x768 Pixeln gut lesbar. In dem Fall wirkt das Hintergrundbild wie eine Headergrafik.
Bild vergrößern
937
560
http://img3.magnus.de/image-r937x560-C-fb6e2012-42465959.jpg
Wie eine Header wirkt die Hintergrundgrafik bei der Auflösung 1024x768.
© Internet Magazin
© Internet Magazin
Wie eine Header wirkt die Hintergrundgrafik bei der Auflösung 1024x768.
Auf einem Notebook mit einer Auflösung von 1024x800 Pixeln wird erkennbar, dass es sich beim Foto um ein Hintergrundbild und nicht nur eine Headergrafik handelt. Hier wird zwar nicht das ganze Bild angezeigt, weil die Auflösung des Endgeräts dafür nicht ausreicht, die Darstellung ist aber auch als Teildarstellung ansprechend.
Auf einem Breitbildmonitor mit einer Fenster-Auflösung von 1920x1080 Pixeln wird das Hintergrundbild in der gesamten Breite dargestellt. Der strukturierte Bokeh- Hintergrund sorgt für Abwechslung und räumliche Tiefe.
Aber Achtung: damit die Bilddatei nicht zu groß wird, ist die Motivwahl und Nachbearbeitung wichtig. Hier bestehen große Teile des Bildes aus detailarmen Flächen, was bedeutet, dass in der Bildbearbeitung eine hohe Kompression des JPG-Bildes eingestellt werden kann. Im konkreten Beispiel ist die Hintergrunddatei 120 kByte groß – eine Dateigröße, die noch akzeptabel ist.
Auch im Zeitalter von DSL sollten Sie den Besuchern Ihrer Website keinesfalls 3 MByte große Hintergrundbilder zumuten. Welchen Kompressionsfaktor Sie wählen, hängt vom konkreten Motiv ab. Probieren Sie verschiedene Kompressionsfaktoren aus, bis Sie den besten Kompromiss aus Dateigröße und Bildqualität gefunden haben.
Variable Breiten und mehrere Spalten
Um Text dynamisch der jeweiligen Fensterbreite anzupassen, bietet sich die Möglichkeit an, die Breite der einzelnen Spalten über das Stylesheet variabel zu definieren. Auf www.cssliquid.com/ finden Sie dafür viele Templates und Anwendungsbeispiele.
Eines dieser Templates, Nautica (www. oswd.org/design/information/id/2828 ), nutzt den gesamten Bildschirmbereich aus und arbeitet mit Prozentwerten, das heißt die Breite des von Navigation, Kopfzeile, Inhaltsbereich und Fußzeile beträgt immer 85 Prozent des Browserfensters:
Codebeispiel:
/* Set the page width */
#wrapper-menu-top, #header, #wrappercontent,
#wrapper-footer {
width: 85%;
margin: 0 auto;
text-align: left;
}
