Responsive Background

Responsive Design: Interessante Hintergründe für Websites

Vorgeschichte

Das Design einer Webseite definiert sich durch viele Punkte. Neben gestalterischen Punkten wie bspw. sauberer Typografie, Layouting und Stringenz im Design zählen dazu genauso „physikalische“ Anforderungen der Marke Ladegeschwindigkeit und Responsiveness.
Im Design hatte ich in der letzten Zeit sehr stark damit zu kämpfen, dass mir meine Hintergründ Probleme bereitet haben. Dabei gibt es vorallem seit CSS3 zahlreiche Möglichkeiten und Sünden diesen Punkt zu gestalten. Vollfarben sind oftmals wenig interessant, ähnliches gillt für Farbverläufe. Bilder sind meistens groß, beeinflussen die Ladezeit gerade für mobile Geräte massiv und skalieren als Hintergründ nicht effektiv. Kommen also für Responsive Design nur eingeschränkt in Frage.

Was also tun?

Mein Mitbewohner Robin hat sich dazu eine sehr gute Technik ausgedacht, welche sowohl interessante Hintergründe bietet, als auch die Ladezeit schont. Mithilfe einer 300 × 300 Pixel Grafik und geschicktem Missbrauch Gebrauch des Kompressionsalgorithmus JPEG ist es ihm gelungen, genau diesen Effekt zu erzielen.

Anleitung

1. Passende Fotografie aussuchen

Jeder Fotograf, Grafiker, Designer, Künstler oder anderer Kreativer hat in seiner Sammlung gefühlte 13*1025 Bilder, die zu allerlei Anlässen fotografiert wurden. Um einen interessanten Hintergrund zu gestalten ist es jetzt notwendig sich genau hier ein Bild herauszusuchen. Hierbei ist zu beachten, dass das Bild sowohl die gewünschte Farbtemperatur (Grundfarbe) als auch einige schöne Farbübergänge besitzt. Dieses ist vorallem bei Porträtaufnahmen der Fall. Ich habe mich an dieser Stelle für eine Fotografie von Maik entschieden (genau genommen, wurde sie gestern genau hierfür gemacht. Danke Maik!)

Aufnahme von Maik O.

Aufnahme von Maik O.

2. Fotografie nachbearbeiten

Diese Aufnahme ist nur etwas nachbearbeitet und nicht sauber kadriert – das macht aber in diesem Fall garnichts. Das Bild selber besitzt als Grundfarbe weiß und hat einige Rot/Gelb-, sowie Grün-Verläufe. Da die Grundfarbe Geld etwas uninteressant ist, habe ich in Lightroom die Farbtemperatur noch um 15 Kelvin erhöht, damit ein warmer Ton vorherrscht. Dasselbe geht nach Bedarf natürlich auch in Richtung der kalten Farben.

Maik O. + 15K

Maik O. + 15K

3. Vorarbeit in Photoshop

Anschließend wird in Photoshop eine neue Datei mit den folgenden Einstellungen erstellt:

Einstellungen in Adobe Photoshop

Einstellungen in Adobe Photoshop

Je nachdem, auf welcher Kontrastfarbe der Fokus liegt, sollte hier entweder eine schwarze oder weiße Hintergrundebene gewählt werden. In unserem Beispiel bewege ich mich mit einem hellem Bild – wähle also weiß.

Als nächstes platziere ich mein gewähltes Bild und skaliere es auf die Fläche. Hier ist es unvermeidbar, dass sich dabei die gesamte Abbildung verzerrt.

Skalierung

Skalierung

Danach wird auf das Smartobjekt, was ein platziertes Bild standardmäßig sein sollte, ein Gaußscher Weichzeichner angewendet (Filter→Weichzeichnungsfilter→Gaußscher Weichzeichner). Ich habe hier als Effektstärke 50 Pixel gewählt. Allerdings ist hier jeder Wert erlaubt – je nachdem, welchen Effekt man erzielen möchte.

Gaußscher Weichzeichner

Gaußscher Weichzeichner

4. This is where the Magic happens

Anschließend muss das erstellte Hintergrundbild für das Web exportiert werden. Hierbei sind ein paar Tweaks notwendig, damit es bei einer Skalierung nicht zu unschönen Artefakten kommt, bzw. diese weitestgehend vermieden werden können. Dies geschieht mit dem Werkzeug „Für das Web speichern“ (Datei→Für Web speichern). Hier wird oben rechts die Kompressionsqualität auf 100 und der Weichzeichnungswert auf 2 gesetzt. Die Qualität unter Bildgröße unten rechts muss „Bikubisch Glatter“ sein.

Für Web speichern

Für Web speichern

5. Einbindung im Web

Das Ergebnis ist ein kleines Hintergrundbild um die 15KB mit sehr guten Skalierungseigenschaften.
Die Einbindung funktioniert jetzt über folgenden CSS-Code:

1
2
3
4
5
6
body{
	background-color: rgb(220,220,220);
	background-image:url(Pfad/zur/Datei/ResponsiveBackground.jpg);
	background-size: 100% 100%;
	background-position: fixed;
}

Hier ist noch zu beachten, dass trotz dem Hintergrund eine Farbe gesetzt wird, da das Laden des Hintergrundes trotz der schmalen Größe, gerade bei mobilen Geräten mit schlechtem Empfang über EDGE oder sogar GPRS, noch etwas dauern kann (Danke an Christian für den Hinweis!). Anschließend kann man die Arbeit im Browser beurteilen. Das Hintergrundbild von MultiGeneris wurde übrigens auf dem selben Weg aus einem Foto vom interkulturellen Kunstprojekt „Verstehen durch Begegnung“ erstellt.

Fazit

Die Technik von Robin ermöglicht ansehnliche, gute skalierbare und sehr schmale Hintergrundbilder für die mobiloptimierte Webseiten. Die Projektdateien inklusive einer Beispielimplementation sind hier als Download zu finden 1.

1 Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung 3.0 Unported Lizenz.

Posted in Blog and tagged , , .

Sven Bischoff

Sven Bischoff, Jahrgang 1990, hat an der Hochschule Harz in Wernigerode Medieninformatik studiert und mit seiner Arbeit "Die fragile Präsenz des Autors in der Fotografie" als Bachelor of Science abgeschlossen. Er arbeitet zur Zeit als Softwareentwickler im Bereich Web-Frontend bei der ab-in-den-urlaub.de Betriebsgesellschaft mbH in Leipzig.

One Comment

  1. Pingback: Responsive Design: Interessante, animierte Hintergründe für Websites « Sven Bischoff: MultiGeneris

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.