Große Hintergrundbilder sieht man immer öfter und das ist doch ein Grund, sich mit dem Thema ein wenig genauer auseinanderzusetzen. Die heutigen Bandbreiten ermöglichen es, tolles Bildmaterial in Webseiten zu integrieren und wir als Webdesigner können davon Gebrauch machen.
Allerdings gibt es dabei einiges zu beachten und man sollte nicht allzu leichtfertig mit den neuen Möglichkeiten umgehen. Deswegen gibt es in diesem Beitrag Tipps zu dem Thema, die ich euch an Beispielen veranschauliche.
Kommentare würden mich natürlich sehr freuen. Viel spaß mit dem Beitrag.
Die oben gezeigten Beispiele gehen teilweise mit ihren Hintergründen komplett verschieden um und daran kann man auch die Probleme erkennen, die einem bei der Arbeit mit großen Hintergrundbildern im Weg stehen.
Die Hintergrundbilder dürfen natürlich gewisse Dimensionen nicht überschreiten, damit man den Besuchern die Ladezeit noch zumuten kann. Irgendwann ist jedes Hintergrundbild zu Ende und hat dann hässliche harte Rändern.
Man kann an dieses Problem auf verschiedene Weise herangehen. Entweder man lässt das Hintergrundbild automatisch auf die Größe des Monitors des Betrachters vergrößern oder verkleinern (http://www.hillsanddales.org/) oder man nimmt das Radiergummi Werkzeug in Photoshop und macht die harten Rändern etwas angenehmer (http://anidea.com/).
Ich empfehle die zweite Möglichkeit. Lässt man das Hintergrundbild automatisch vergrößern oder verkleinern, sieht das häufig ziemlich furchtbar aus. Denn wenn die eigentliche Breite und Höhe des Bildes überschritten ist, wird daraus ein Pixel Salat. Dann nehme ich lieber ein Hintergrundbild mit 1920px Breite und radiere die Ränder weg.
Bei Webseiten mit wenig Inhalt ist das nicht so das Problem, aber beispielsweise bei Blogs sollte man sich fragen, ob ein großes Hintergrundbild nicht zu sehr ablenkt. Meiner Ansicht nach ist das ein sehr wichtiger Punkt. Wenn das Hintergrundbild schlecht gewählt wurde, kann man sich schwerer auf den Inhalt konzentrieren.
Wie wählt man also das beste Bild oder wie sorgt man dafür, dass die Bilder weniger ablenken?
Habt ihr eine Seite, die Nutzer bindet und auch mit iPhones und ähnlichen mobilen Endgeräten besucht wird, schaltet das Hintergrundbild für diese ab! Das vergessen sehr viele Webdesigner und man kann keine viel größeren Fehler machen. Es kostet eine Menge Ladezeit und der iPhone Besitzer wird euch nicht dafür danken, dass ihr seinen kostbaren Traffic für ein Hintergrundbild verschwendet, dass er auf Grund der Auflösung meistens eh nicht sehen kann.
Auch wenn hohe Bandbreiten Standard sind, solltet ihr die Bilder so gut wie möglich optimieren. Diese Sammlung von 8 Tools für die Bildoptimierung könnte hilfreich sein. Beim Smashing Magazine findet ihr außerdem clevere Optimierungstricks für jpg und png Dateien.
Mal wieder der Kulturbanause 😀 Hier ist der Hintergrund nicht nur ein Hintergrund sondern geht auch in Vordergrund über. Die Seite selber ist in die Landschaft integriert und das ist natürlich noch etwas besser, als einfach nur ein Bild in den Hintergrund zu packen. Gleichzeitig steigt aber auch der Schwierigkeitsgrad stark an und man sollte sich seiner Sache wirklich sicher sein. Lieber darauf verzichten als am ende eine halbgare Lösung präsentieren.
Die meisten Seiten benutzen zwei Hintergründe: Einmal das große Bild und dann noch einen Hintergrund, meist weiß, für den Text. Das muss nicht sein. Wenn man einen Hintergrund hat, der Farbflächen bietet, kann man den Text auch direkt darauf platzieren.
Gleichzeitig wurde hier der Hintergrund noch animiert. Bin ich kein Fan von. Mir erschließt sich nicht, warum man die Aufmerksamkeit auf das Schiff lenken sollte und das very new steht so oder so schon im Vordergrund. Wenn eine Animation aber wirklich sinnvoll ist, kann man das machen.
46 Kommentare