Webstandard & Webdesign - CSS, HTML

 

Grosse Hintergrundbilder - Anmerkungen zur User Experience, Performance und Umsetzungsvarianten

Groß- und vollflächig skalierbare Hintergrundbilder die den gesamten zur Verfügung stehenden Viewport eines Browsers unabhängig vom Endgerät ausnutzen, ohne dabei Scrollbalken zu erzeugen, ein mittlerweile gern verwendetes Gestaltungsmittel um Webseitenbesucher auch über diese emotionale Komponente zu einem längeren Verbleib oder einer gezielten Konversion auf der Webseite bewegen zu können. Auf den ersten Blick scheint eine solche Umsetzung keine große Herausforderung darzustellen, allerdings müssen Webseiten heutzutage auch responsiven Layouts standhalten können, was dazu führt, dass mittlerweile eine Großzahl an verschiedenen Herangehensweisen existieren. Warum man sich im Sinne der User-Experience, der Performance und der Suchmaschinenoptimierung für Bilder damit ausgiebiger beschäftigen soll, wird im weiteren Verlauf dieses Artikels näher beleuchtet.

Steigerung der User-Experience und des Joy of Use mit großflächigen Bildern!

Gestalterische Möglichkeiten sollten nicht allein aufgrund der Tatsache implementiert werden, dass sie funktionieren und unter Umständen dem eigenen Empfinden nach schön aussehen, sondern weil sie im Idealfall bei der Zielgruppe der Webseite eine verbesserte User-Experience aufgrund der geweckten Bedürfnisse (Essen, Familie, Freunde, Sex, Erfolg, Kreativität) zur Folge haben. Dieser Aspekt wird sich dann unter anderem im sogenannten Joy of Use des Webseitenbesuchers im Umgang mit der Webseite wiederspiegeln. Je mehr ein Webseitenbesucher von den Bildmotiven "emotionalisiert wird" und je mehr der eigenen Bedürfnisse in dem Online-Angebot (wieder-)erkannt werden, desto einfacher kann man diese Emotionen gezielt transportieren und für den Verkauf von Produkten im Onlineshop nutzen, wie im folgenden Beispiel des brasilianischen Onlineshops Biamar.

Abb.01: Biamar - Inverno 2012 - Tablet im Landscape Modus

Bei stark visuell geprägten Inhalten wie Onlineshops mit großflächigen Produktabbildungen, Immobilien- oder Reiseportalen, hat der Kontext der Nutzung einer Webseite durch den Webseitenbesucher einen oftmals nicht unerheblichen Einfluss, auf den Joy of Use. Die Suche, der darauf folgenden Suchergebnisse oder jeweiligen Landingpages mit großflächigen (Hintergrund-)Bildern ausgestattet, ergeben interessante und je nach Angebot attraktive Angebote zu den Suchanfragen. Das Suchergebnis kann somit zum Sucherlebniss werden und somit emotionalisiert werden. Hört sich nicht messbar an, ist es aber anhand von Werten wie der Verweildauer, der durchschnittlichen Aufenthaltsdauer, der Anzahl besuchter Seiten und unter Umständen daraus folgend auch einer stärkeren Verbreitung der Inhalte über Social Media Plattformen, wie bspw. den stark an Bildern ausgerichteten Dienst Pinterest. In Bezug auf Full Size Background-Images gilt dies zumindest dann, wenn das sich das Bild im HTML-Code befindet und nicht als Background-Image mittels CSS zugewiesen wird.

Wie man mit großflächigen Bildern SEO-Vorteile geltend macht!

Ein Vorteil der auch aus dem Aspekt der Suchmaschinenoptimerung von Bildern nicht ganz uninteressant ist, ist der das Bilder die HTML-Code eingebetet sind, auch über Suchmaschinen gefunden und indexiert werden können. Ein Vorteil solch großer Bilder gegenüber kleiner Bilder ist der, dass diese in der Regel besser ranken. Womit man sich insbesondere bei sehenswertem Bildmaterial eine Traffic-Quelle erschliessen kann, die man nicht verschenken sollte.

Großflächigen Bilder und das Problem mit der Performance!

Ein großer Nachteil großflächiger Bilder ist der, dass sie aufgrund der oftmals hochwertigen Qualität unabhängig des Bildformates eine nicht unerheblich Anzahl an KiloByte, im schlimmsten Fall sogar MegaByte, benötigen. Der daraus resultierende Nachteil - ein großflächiges Bild benötigt oftmals eine nicht unerhebliche Zeit zum Laden. Und Warten macht alles, nur keinen Spaß! Neben der Dateigröße und der Anzahl an geladenen Ressourcen, sollte man je nach Zielgruppe und insbesondere bei mehrsprachig und somit international angelegten Projekten, immer auch die Ladezeit für verschiedene Serverstandorte analysieren.

Abb.02: Untersuchung des Ladeverhaltens großflächiger Bilder

Dieses Ladeverhalten im Sinne der Besucher umzusetzen und somit eine positive User-Experience zu erlangen, führte in letzter Zeit zu einer Vielzahl an unterschiedlichen Herangehensweisen, sich dieser Problematik anzunehmen. Denn ganz ehrlich, wer möchte auf seinem Smartphone schon mehrere "Hintergrundgrafiken" mit mehreren Hundert Kilobyte laden, wenn man für diese Endgeräte optimierte "Hintergrundgrafiken" nachladen kann. Das heißt eine Herangehensweise ganz auf CSS basierend kann zwar sehenswert sein, allerdings nicht sehr alltagstauglich. Wenn die Zielgruppe Desktop-User sind, mag dies noch in Ordnung gehen, doch wenn auch mobile Anwender zur Zielgruppe gehören, sollte dieser Ansatz im Sinne der Webseitenbesucher ad acta gelegt werden. Die folgenden verschiedenen technischen Ansätze zur Umsetzung eines großflächigen (Hintergrund-)Bildes, stellen Euch eine kleine Auswahl zur Verfügung, derer ihr Euch je nach Anforderungen bedient könnt.

Grosse vollflächige Hintergrundbilder - Verschiedene technische Ansätze zur Umsetzung

Einer der Ansätze großflächigen Bilder für Designs umzusetzen stellen die CSS-Eigenschaften background-image und background-size dar. Diese CSS Eigenschaften ermöglichen es Bildern, die mittels CSS als Hintergrundbilder eingebunden wurden, diese unabhängig des Endgerätes, der Ausrichtung und des Viewports des Browser zu skalieren. Nachteil - jedes Endgerät lädt die gleiche Ressource. Ob sie diese in den vorliegenden Ausmaßen benötigt oder nicht. Ein andere Ansatz der allerdings zum selben Fazit kommt, nicht immer die gleiche sondern optimierte Ressourcen zu benötigen, basiert auf dem Einbinden des "(Hintergrund-)Bildes" in den HTML-Code. Allerdings ergibt sich bei diesem Ansatz der bereits oben beschrieben Vorteil der Indexierung des Bildes, auch wenn eine solch eingebundenes Bild in Bezug auf CSS keine Hintergrundgrafik mehr darstellt, sondern lediglich hinter alle anderen Elemente gelegt wird. Wer als Zielgruppe Desktop-User hat, kann also durchaus auf diesen Ansatz zurückgreifen. Der alltagstauglichste Ansatz meiner Meinung nach ist der, großflächige Bilder nicht nur mittels CSS oder JavaScript zu skalieren, sondern mittels JavaScript auf Basis des Viewports des Anwenders ein entsprechend der vorhandenen Ausmaße relevantes Bild auszuwählen und dem Anwender anzubieten.

• 1. Hintergrundgrafik mittels CSS (bspw. mit CSS Background-Size zum Fullsize Background-Image)
• 2. im HTML-Code eingebettete Grafik und mittels CSS positioniert und skaliert
• 3. im HTML-Code eingebettete Grafik und mittels CSS positioniert und JavaScript skaliert (bspw. Redux, Backstretch),
• 4. im HTML-Code eingebettete Grafik wird mittels CSS positioniert und JavaScript durch größere bzw. kleinere Abbildungen des Motivs, je nach Viewportgröße ersetzt (bspw. bgStretcher, Adaptive Images)

Wie man anhand der hier beschrieben Kriterien erkennen kann, gibt es viele Aspekte die man bei der Verwendung großflächiger (Hintergrund-)Bilder berücksichtigen kann und im Sinne einer guten User-Experience auch sollte. Und wer möchte kann eine der oben genannten verschiedenen Ansätze gern ausprobieren oder sich von einem der folgenden sehenswerten Umsetzungen inspirieren lassen.

Grosse vollflächige Hintergrundbilder - Beispiele aus dem Web als Inspiration

Zur Inspiration in Sachen großflächiger (Hintergrund-)Bilder wird hiermit der "theoretische Teil" abgeschlossen, womit wir zum "praktischen Teil" übergehen, in Euch ein paar denke ich recht sehenswerte Webseiten, zwecks Inspiration, vorgestellt werden.

Abb.03: New Zealand 100% Pure

Abb.04: OwlConcept - Webdesign & Design Grafico

Abb.05: COOCCI - Web Interactive Agency

Abb.06: The official 7 Diamonds Clothing Online Store

Abb.07: One Million Trees

Abb.08: Björn Dunkerbeck | The Windsurfer's Official Website

Abb.09: TeleTech - Creating Value through the Customer Experience

Merkliste für die Verwendung großflächiger (Hintergrund-)Bilder

Um die ganzen Informationen dieses Artikels auf ein mehr oder weniger kurzes Fazit zusammen zu fassen, abschließend eine Art Merkliste bzw. Aspekte die bei der Umsetzung großflächiger (Hintergrund-)Bilder Beachtung finden sollten.

• unter Berücksichtigung der Performance, qualitativ ansprechendes Bildmaterial verwenden (zu stark komprimierte Bilder will niemand sehen!)
• emotional wirkende Bilder verwenden, die und Bedürfnisse wecken
• Bilder idealerweise im HTML-Code einbinden (Potential in Bezug auf Bilder-SEO hat niemand zu verschenken!)
• Skalierungsverhalten in allen relevanten Viewportgrößen testen (zerquetschte Abbildungen will niemand sehen!)

Ich hoffe dieser kleine Ausflug in die Welt großflächigen Hintergrund-Bilder hat Euch gefallen und im Idealfall sogar noch ein paar neue Informationen oder Inspirationen verschafft. Urpsrünglich sollte der Artikel lediglich ein paar Inspirationen in Bezug auf vollflächige Hintergrundbilder (full size background-image) enthalten, da bei vielen Webseiten mit diesem Ansatz allerdings immer noch eine Menge Potential verschenkt wird, wurde der Artikel dann doch ein wenig ausführlicher.

Artikel zum Thema Bilder als Gestaltungsmittel im Webdesign

• Bilder im Blog-Layout optimieren - Abstand und Rhythmus
• Ladezeit von Webseiten verbessern - Bilder mit Dateikomprimierung optimieren
• Website Psychologie - Warum der erste Eindruck so wichtig ist