Das ganz normale Chaos, täglich frisch auf den Tisch. Direkt aus der hintersten Provinz in die Metropolen von Groß-Blogistan.


Webseiten mit Hintergrund

Wed, 29 Jul 2009 15:03:44 +0200

Bei Kulando gibt es ein Photoshop Tutorial darüber, wie man einen interessanten graphischen Webseitenkopf gestaltet. Ihc will hier jetzt nicht meine Gedanken zu dem Tutorial als solches breit treten, dazu habe ich von Graphik zu wenig Ahnung. Aber etwas Anderes habe ich dann doch dazu anzumerken.

Ich habe selbst viel mit graphischen Hintergründen für alles Mögliche auf Webseiten experimentiert. Es kann durchaus sehr hübsch aussehen. Aber die allermeisten graphischen Hintergründe, auch das Beispiel von Kulando, haben einen entscheidenden Nachteil: Sie sind nicht flexibel. Sie passen sich nicht den verschiedenen Medien an. Und auch bei Kulando steht:

Zunächst müsst Ihr die Größe für Euer Seitenlayout wählen. Im folgenden Tutorial wird daher mit einer Dokumentengröße von 1300 x 1200 Pixeln gearbeitet.

Und genau das ist das Problem. Eine Seite mit einer festen Breite von 1300 Pixeln sieht nun mal auf einem Handy-Bildschirm mit 320 Pixeln Breite einfach nur scheisse aus. Und auf großen Bildschirmen mit 1900 Pixeln oder mehr Breite sieht das auch nicht so toll aus. Aus diesen Gründen bin ich weitgehend von graphischen Hintergründen abgerückt. Es hat einfach zu gravierende Nachteile. Natürlich, Jemand, der für einen bestimmten Bildshcirm "designt" der sieht diese Nachteile erst mal nicht. Sehen werden diese Nachteile die Besucher, die diese Seite mit Medien nutzen, die sich vom Medium des Designers gründlich unterscheiden. Doch oft genug merkt der Designer nie Etwas davon.

Auf Rorkvell gibt es hier und da noch graphische Hintergründe. Im Standard-Stil gibt es zum Beispiel dieses bearbeitete Photo des Teton Nationalparks. Doch worin liegt der Unterschied zu dem bei Kulando vorgestellten Hintergrundbild? Nun, dieses Photo wurde dahingehend bearbeitet, dass es horizontal nahtlos aneinanderreihbar ist. Auch das bei Rorkvell verwendete Hintergrundbild skaliert also nicht (das ist bei CSS nicht vorgesehen), aber es passt sich durch Aneinanderreihung an verschiedene Bildschirmgrößen an. Jedenfalls in der Breite. Und was ist mit der Höhe? Nun, auch hier passt sich der Hintergrund an. Der Hintergrund ist zunächst mal nach unten fixiert und wird vertikal nicht wiederholt. Ergänzend dazu ist die Hintergrundfarbe der Seite die gleiche, wie die Farbe des Himmels auf dem Bild. Genau genommen habe ich dazu auf dem originalen Photo den Himmel so retuschiert, dass dieser eine einheitliche Farbe bekommen hat. Sämtliche Wolken sind weg retuschiert worden. Wenn nun auf großen Bildschirmen der Hintergrund weit genug nach unten rutscht, dass oben ein Streifen frei wird, dann hat dieser Streifen die selbe Farbe wie der obere Bereich des Bildes. Man sieht diesen Streifen also nicht. So passt sich dieser Hintergrund also auch auf sehr große Bildschirme an. Theoretisch kann es passieren, dass der Hintergrund weitgehend einheitlich blau wird, und nur am unteren Rand ein Streifen Nationalpark zu sehen ist. Aber damit kann ich gut leben.

Ich hatte früher deutlich mehr Hintergrundgraphiken. Aber nachdem meine Sehkraft drastisch nachgelassen hatte, und ich mir deshalb einen großen Bildschirm besorgt hatte, stellte ich fest, dass einige der alternativen Stile eben wegen nicht skalierender Hintergründe einfach nur noch mies aussahen. Diese Stile habe ich komplett entfernt. Was übrig geblieben ist, passt sich auf jede Bildschirmgröße an. Früher hatte ich auch mal graphische Hintergründe für die Navigationsbuttons. Doch die passen sich nicht an Veränderungen der Schriftgröße an. Also ebenfalls gestrichen. Alles, was sich nicht den Gegebenheiten flexibel anpasst, wurde bei Rorkvell entfernt. Konsequent.

Ich kann die Versuchung verstehen, graphisch eine Seite "aufzupeppen". Doch oft genug sind diese Versuche eher kontraproduktiv für Webseiten. Eine Webseite ist nun mal kein Gemälde.


0 Kommentare