Parallax Scrolling

Was ist Parallax Scrolling?

Das Parallax Scrolling stellt einen jüngeren Trend im Webdesign dar, der mit dem Phänomen der Bewegungsparallaxe arbeitet. Hierbei bewegen sich verschiedene Objekte in unterschiedlicher Art und Weise, sobald der Nutzer scrollt. Ähnlich wie in der Wahrnehmung in der realen Welt bewegen sich Elemente im Hintergrund langsamer, während vordergründige Objekte eine schnellere Bewegung zeigen. Optisch entsteht dadurch der Eindruck von Tiefe und Professionalität, ähnlich wie bei einer dreidimensionalen Animation. Einsatz findet das Parallax Scrolling insbesondere beim Storytelling. Diese Art des Scrollings stellt besondere Anforderungen an die Suchmaschinenoptimierung (SEO).

Überblick und Allgemeines zum Parallax Scrolling

Das Parallax Scrolling firmiert auch unter Begriffen wie Parallax-Webdesign oder Parallax-Webseite. Namensgeber und Grundlage des Parallax Scrollings ist das wahrnehmungspsychologische Phänomen der Bewegungsparallaxe. Der Effekt zeigt sich, wenn sich der Betrachter parallel zu unterschiedlich weit von ihm entfernten Objekten der realen Welt fortbewegt. Bei schneller Bewegung, etwa bei einer Bahnfahrt, scheinen sich nahe am Betrachter gelegene Objekte (etwa Bäume) deutlich schneller zu bewegen als weiter entfernte (beispielsweise Hügel am Horizont). Die besondere Tiefenwahrnehmung dieses Effekts macht sich das Parallax Scrolling zunutze. Auch die Reize, die sich durch bewegte Objekte am Bildschirm ergeben, lassen den Raum dreidimensional wirken.

Auch in der Fotografie, in der Astronomie sowie im Messwesen ist die Parallaxe von Bedeutung. Auf dem Bildschirm wurde sie bereits bei 2D-Spielen eingesetzt, damit Spieler den Eindruck eines 3D-Raums bekommen und der Eindruck von Tiefe entsteht. Seit einigen Jahren sorgt Parallax Scrolling als Webdesign-Trend dafür, dass die Nutzererfahrung steigt und Besucher einer Webseite die dort gezeigten Informationen besser aufnehmen können. Ein Ziel besteht darin, die Verweildauer auf der Webseite zu erhöhen.

Parallax Scrolling und seine Entwicklung

Während sich Videospiele schon vor Jahrzehnten einer Form der Bewegungsparallaxe bedienten, hält die Technik seit wenigen Jahren erst Einzug in das Webdesign. Ein wichtiger Vorläufer beziehungsweise Pionier dieses Trends war das Sportartikel-Unternehmen Nike. Schon bei Erstveröffentlichung bediente sich die Webseite Nike Better World des Effektes.

Eine wichtige Entwicklung, die zur Verbreitung von Parallax Scrolling beigetragen hat, waren die Techniken HTML5 sowie CSS3. Zwar sind diese nicht unbedingt erforderlich, um Parallax Scrolling zu realisieren. Doch stellen sie eine erhebliche Erleichterung dar, insbesondere was die Entwicklung von Übergängen, Animationen und anderen Details betrifft. Eine weitere wichtige Triebfeder für die Verbreitung ist das zunehmende Interesse an der Praxis des Storytellings. Insbesondere im Online-Marketing spielt das virtuelle Geschichtenerzählen um Produkte und Dienstleistungen eine zentrale Rolle.

Anwendungsbereiche

Besonders geeignet sind Parallaxen für Webseiten, die mit Storytelling arbeiten. Mit Parallaxen lässt sich das Storytelling besonders detailliert und reich an Effekten umsetzen. Eine zunehmende Anzahl an Webseiten setzt nicht mehr auf statischen Content sondern bereitet ihre Inhalte in Form von Geschichten auf. Hierbei kommen Elemente wie Grafiken und Animationen zum Einsatz, die sich durch Bewegungsparallaxen für User angenehmer und spannender gestalten. Webseiten können dem Nutzer auch die Möglichkeit geben, selbst Einfluss auf die Story zu nehmen. Dies betrifft etwa die Geschwindigkeit der Abfolge der Elemente, den Fluss der Story sowie die selbstgewählte Lesezeit. Typischerweise sind die Content-Bestandteile auf der Parallax-Webseite so angeordnet, dass die Story beim Scrollen nach unten erzählt wird. Hierbei werden verschiedene Formen der technischen Darstellung und Anzeigen miteinander verknüpft.

Funktion und Umsetzung

Die technische Realisation der Bewegungsparallaxe im Webdesign kennt mehrere Methoden. Typischerweise bewegen sich Besucher einer Webseite durch das Scrollen durch die Objekte und Elemente. Diese werden im Vordergrund und Hintergrund so angeordnet, dass der Parallax-Effekt zustande kommt. Hierbei kommt als Fixpunkt beziehungsweise Orientierungspunkt das Gesamtbild der Webseite zum Einsatz. Dieser auf den ersten Blick sichtbare Bereich wird auch als Viewport oder Above-the-Fold bezeichnet. Alle anderen Objekte bewegen sich von diesem Viewport ausgehend, einige dabei schneller als andere.

Die Bewegungen kommen durch verschiedene Effekte zustande, beispielsweise Fading, Slides oder fixierte Objekte. Durch die Anordnung und horizontale Bewegung der Elemente auf der Parallaxe erscheinen sie dem Nutzer dynamisch und dreidimensional.

Die Grundlage der Parallax Webseite ist zumeist ein so genannter OnePager, sprich eine auf einer einzigen Seite basierende Webseite (auch Single-Page genannt). Das heißt, dass sich Elemente, Skripte, aber auch Quellcode und CSS in einem Dokument befinden. Diese sind auf einem Server hinterlegt, Nutzer lösen ihre Ansteuerung durch Scrollen aus. Vermittelt wird dies über CSS-Tags, Skriptaufrufe sowie Selektoren. Eine hohe Anzahl aufwändiger Elemente führt in diesem Design zu einer erhöhten Ladezeit der Inhalte.

Stellenwert in der Suchmaschinenoptimierung

Im Zusammenhang mit der SEO geht das Parallax Scrolling mit einer Reihe zusätzlicher Herausforderungen einher. Grundsätzlich sind Parallaxen ein Problem für die Indexierung einer Seite. Dies hängt im Wesentlichen mit der Natur der Parallax-Webseiten als OnePager zusammen. Die Reduktion auf nur eine Seite führt zu Problemen in der Suchmaschinenoptimierung, die sich jedoch durch bestimmte Lösungsansätze minimieren lassen.

Eine der wesentlichen Herausforderungen betrifft die Fähigkeiten der Suchmaschinen, guten von schlechtem Content zu unterscheiden. Die meisten Internetseiten werden nur hinsichtlich Hauptseite und Impressum im Index einer Suchmaschine erfasst. Eine höhere Anzahl von Seiten im Index ist gleichermaßen nicht mit einer besseren Sichtbarkeit zu verwechseln. Da Parallaxen im Allgemeinen bei OnePagern zum Einsatz kommen, birgt dies die zusätzliche Herausforderung, dass sämtliche Inhalte auf einer URL zu finden sind. Dies erschwert die Suchmaschinenoptimierung für bestimmte Keywords. Erschwert sind zudem die Anwendung von Überschriften Tags sowie Meta-Angaben. Mangels Unterseiten fehlt eine interne Struktur von Links, die zu einer erhöhten Sichtbarkeit wichtiger Webseitenbereich führen könnte.

Ein Lösungsansatz für dieses Problem liegt in einer hybriden Struktur aus Parallaxen und Unterseiten. So kann das Parallax Scrolling nur für gewisse Bereiche genutzt werden, die für das Storytelling von besonderer Relevanz sind. Für Unterseiten empfehlen sich im Gegensatz dazu klassische Webdesign-Methoden. Seitenbetreiber können etwa von der Parallax-Landingpage auf reguläre Unterseiten verlinken. Eine Kombination aus Parallax Scrolling auf der Hauptseite und Unterseiten trägt sowohl der Nutzererfahrung als auch der Suchmaschinenoptimierung Rechnung. Das entstehende natürliche Link-Profil wird von Suchmaschinen als nutzerfreundlich eingestuft und hat einen positiven Effekt auf das Ranking der Webpräsenz.

Umgang mit Parallax Scrolling in Analytics

Eine weitere SEO-Herausforderung des Parallax Scrollings betrifft die Frage der Absprungrate. In den Analytics wird die Absprungrate bei OnePagern so aufgefasst, dass die Einstiegsseite der Ausstiegsseite entspricht. Hinzu kommt, dass auf Single-Page-Seiten keine als solche wahrgenommenen Interaktionen stattfinden, etwa Klicks auf Elemente oder Unterseiten. Dies wird von Suchmaschinen negativ eingestuft, die Webseite gilt als wenig nutzerfreundlich. Da nach der Einstiegsseite technisch keine weitere Seite aufgerufen wird, kommt es zum Ausweis einer hohen Absprungrate. Eine Lösung findet sich im Google Tag-Manager. Dieser ermöglicht ein realistischeres Tracking der Nutzeraktivität. So lassen sich etwa Scroll-Aktivitäten durch das Ereignis-Tracking erfassen und als Interaktionen ausweisen. Dies ermöglicht die Ermittlung der tatsächlichen Absprungrate.

Performance-Belastungen

Die Umsetzung einer Parallax-Webseite stellt hohe Anforderungen an die Performance. Der vielseitige Einsatz von großen Bildern und Graphiken, aufwändigen Skripten und Rendering führt zu langen Ladezeiten. Insbesondere wenn die Bilder bildschirmfüllend ausfallen sollen, bedarf dies des Vorladens sehr großer Bilder. Ebenso müssen die überdeckten Bereiche gefüllt sein, wenn das Scrollen jeweils einen neuen Bildbereich aufdecken soll. Die reibungslose Darstellung kann unter diesen aufwändigen Elementen leiden. Dies gilt insbesondere für die mobile Darstellung. Ebenso kann es durch den verschachtelten Quellcode der Parallax Seiten zu Kompatibilitätsproblemen mit Browsern kommen. Diese Seitenstruktur ist fehleranfälliger als statische Internetseiten, weshalb sie sich nur schwer für alle Browser optimieren lässt.

Daher empfiehlt sich eine Skalierung bei der Auslieferung der Bilder, damit jeweils nur die tatsächlich benötigte Auflösung geladen wird. Weiterhin empfehlen sich ein sparsamer Einsatz der Effekte sowie ein nicht zu aufwändiger Quellcode. Zur Verringerung der Ladezeiten eignen sich zudem Browser-Caching sowie ein reduzierter Einsatz von JavaScript und CSS. Templates sorgen für eine Anpassung der Inhalte an den Browser. Idealerweise ist das Parallax-Scrolling Bestandteil eines übergeordneten Webseiten-Konzepts, das auch weniger aufwändig designte Unterseiten beinhaltet.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenlose SEO Analyse


Weitere Inhalte

Kostenloses SEO Tool Performance Suite