Parallaxing beim Webdesign

Parallaxing ist eine effektive Methode im Webdesign, um die Aufmerksamkeit der User auf bestimmte Informationen zu lenken und ihre Informationsverarbeitung zu unterstützen. Meist im Storytelling eingesetzt, wirkt dabei die Scrollfunktion als Steuerung von Seitenelementen.

Parallaxing beim Webdesign – Ein nachhaltiger Trend?

Bei der Nutzung von Parallaxing Seiten, gibt es einige Kompromisse, die man in Kombination mit SEO eingehen muss. Wir zeigen Dir, was Du bei der Umsetzung von Parallaxing beim Webdesign beachten solltest und an welchen Stellen es ein gewisses Fingerspitzengefühl erfordert, um damit erfolgreich zu sein.

Was ist Parallax Design?

Ursprünglich kommt der interaktive Effekt aus dem Bereich der Videospiele. Dort wird er schon eine ganze Weile genutzt, um eine gewisse optische Tiefe auf dem Bildschirm zu erzeugen. Im Bereich von Webseiten war der Sportartikelhersteller Nike Im Jahr 2013 ein Vorreiter in diesem Bereich. Nike setzte schon früh auf den Effekt, um Tiefe auf seiner Webseite zu erzeugen und die Besucher zu faszinieren. Im Beispiel hat der Hersteller von Sportartikeln einen Turnschuh zuerst in seine Einzelteile zerlegt und anschließend wieder interaktiv auf der Webseite zusammengebaut. Das war ein relativ einfaches Beispiel, das von den Nutzern allerdings sehr gut aufgenommen wurde. Parallaxing hatte zwischen 2012 und 2015 einen regelrechten Boom.

Das Prinzip von Parallaxing beim Webdesign ist einfach: Sobald der Betrachter der Webseite scrollt, spielen sich auf der Webseite verschiedene Effekte ab. Die einzelnen Elemente im Vordergrund und Hintergrund bewegen sich dabei – je nach Scrollgeschwindigkeit des Users – unterschiedlich schnell. Zum Beispiel kann sich das Bild im Background langsamer bewegen, die Objekte im Vordergrund bewegen sich aber schneller. Beim Betrachter erzeugt das Zusammenspiel der Bewegung der Elemente den Eindruck von räumlicher Tiefe. Der Betrachter kann je nachdem, ob er langsamer oder schneller scrollt, die Effekte auf der Webseite selbst beeinflussen! Dabei können User Vögel zum Fliegen bringen, Autos durch die Gegend düsen lassen oder ein Einkaufszentrum virtuell erkunden.

Der Effekt des Parallaxing beim Webdesign

Parallaxing beim Webdesign arbeitet mit einem wahrnehmungspsychologischen Effekt: Der Bewegungsparallaxe. Dabei bewegt sich das Licht näherer Elemente schneller über die Netzhaut des menschlichen Auges als das Licht weiter entfernter Elemente. Dieses Erlebnis können Webdesigner nutzen und mit Relationen und Geschwindigkeiten von Objekten arbeiten. Die Objekte auf einer Webseite sind entweder bewegt oder unbewegt. Wenn sich der Betrachter parallel zu etwas bewegt, erscheinen die Objekte, als würden sie sich in unterschiedlichen Geschwindigkeiten bewegen. Der Betrachter denkt, dass sich weiter entfernte Objekte langsamer bewegen als näher liegende Objekte. Das führt bei ihm dazu, dass er eine gewisse optische Tiefe auf dem Bildschirm wahrnimmt. Denn durch das Parallaxing beim Webdesign entsteht so ein räumlicher Eindruck. Wir kennen das auch als 3D Effekt.

Im Webdesign soll Parallaxing neben dem räumlichen auch einen „interactive Effekt“ haben. Das soll auch dazu führen, dass sich die User gut an die vermittelten Informationen erinnern können. Im Fokus sollte aber besonders die Usability der Seite stehen. Und auch der Freude des Users, wenn er mit den Inhalten interagiert, solltest Du bei der Konzeption hohe Priorität einräumen.

Mögliche Anwendungsfälle für das Parallaxing beim Webdesign sind deswegen:

  • Scrollen auf einer Seite in mehrere Richtungen gleichzeitig
  • Cursor Bewegungen
  • Veränderungen beim Fenster des Browsers
  • Verschiedene Animationen

Die beste Möglichkeit die Zukunft vorherzusagen ist, sie zu erfinden.

Alan Kay

Wie funktioniert Parallaxing genau beim Webdesign?

Das Website Design basiert meist auf einem Onepager. Dabei ist dieser Onepager zweigeteilt. Dabei gibt es die Bereiche „Background“ und „Foreground“. Das Zusammenspiel von Hintergrundelementen und Objekten im Foreground führt dann zu dem Setup und eine visuelle Tiefe entsteht. Dabei können Objekte frei beweglich oder fest fixiert sein. Der sichtbare Bereich ist dabei der Dreh- und Angelpunkt für das weitere Erleben der Webseite und deren Elemente.

Entwickler können zwischen vier verschiedenen Möglichkeiten wählen: Rastermethode, Layermethode, Spritemethode oder sich wiederholende Muster und Animationen. Parallaxing beim Webdesign basiert nicht auf einer einzigen Methode oder einem einzigen Framework. Es sind einige Methoden denkbar, um die besonderen Effekte zu erzielen. Das kann HTML5 in Kombination mit CSS3 sein. Aber auch JavaScript, jQuery oder spezielle Module oder Plugins erleichtern die Arbeit. Es ist allerdings zu empfehlen, mit möglichst wenig Skripten zu arbeiten, um die Seite nicht unnötig langsamer zu machen.

Denn oft werden im Rahmen des Parallaxing Webdesigns hochauflösende Grafiken, große Bilder und Skripte eingesetzt. Das allein kann die Website Performance negativ beeinflussen und die Ladezeiten enorm verlängern. Hier musst Du bei der Programmierung deswegen besonders vorsichtig sein. Mache Dir vorab Gedanken über Deine Architektur und stelle ein vollumfängliches Online Marketing Konzept auf, bei dem Du alle Bereiche berücksichtigst. Das erspart Dir später böse Überraschungen und langwierige (und teure) Mehrarbeit.

Welche Vorteile hat Parallaxing beim Webdesign?

Wie gesagt, Du musst beim Parallaxing einiges beachten, um damit erfolgreich zu sein. Wenn Du dies aber bei der Umsetzung beherzigst, kannst Du Die vielen Vorteile für Dich und Dein Unternehmen nutzen. Parallaxing beim Webdesign bietet Unternehmen die Möglichkeit zu zeigen, was sie im Bereich des Webdesigns draufhaben. Die Webdesigner können mit den Elementen in Foreground und Background spielen und eine eigene Welt für die Nutzer erschaffen. Die Erregung von Aufmerksamkeit ist dabei garantiert. Gerade Agenturen oder Unternehmen, die Marketing oder Programmierung als Dienstleistung verkaufen, nutzen ihre Webseite sozusagen als Showroom und Credential. Ist die Seite gut umgesetzt und bietet eine tolle Usability, hinterlässt das einen bleibenden ersten Eindruck beim (potentiellen) Kunden. Außerdem können auch komplexe Inhalte gut auf einer einzigen Seite dargestellt werden. Wie erwähnt, musst Du dabei immer sowohl die Optimierung der Ladezeiten als auch die Usability im Blick haben.

Auf der anderen Seite entsteht für den User ein besonderes Erlebnis. Das Unternehmen schafft es, dem User viele Informationen zu vermitteln. Und der User hat gleichzeitig das Gefühl, dass er die Kontrolle über seine Aktionen hat. Eine sonst relativ starre Seite, kann auch durch den Effekt der Tiefe, auf einmal lebendig und „fancy“ wirken. Und Du schaffst es Informationen, die sonst auf vielen einzelnen Seiten verstreut werden, auf einer einzigen Seite zu bündeln. Parallaxing spricht vor allem jüngere Zielgruppen an. Gerade junge Menschen sind von der optischen Tiefe und den Möglichkeiten zur Interaktion auf der Webseite begeistert.

Parallaxing als Trend beim Storytelling

Die Technik des Parallaxing ist vor allem für Webdesigns, die den Zweck des Storytellings verfolgen, beliebt. Beim Storytelling können die verschiedenen Elemente die aufmerksame Informationsverarbeitung der Besucher durch ihre Interaktivität sinnvoll unterstützen. Sie bewegen sich auf der Seite, können angeklickt und verschoben werden.

Wichtig ist, dass die Loading Time (engl. Page Speed) durch die vielen Elemente auf der Seite nicht negativ beeinflusst werden. Und auch die Usability ist zu beachten, während der Betrachter sich beim Parallaxing auf der Seite bewegt. Denn nichts strafen Nutzer heutzutage mehr ab, als langsame Seiten, die umständlich zu navigieren sind.

In einer kostenlosen Erstberatung analysieren unsere Experten gemeinsam mit Dir Deine Website und decken Optimierungspotenziale auf. Kontaktiere uns gerne:

Am Online Marketing arbeitet das Team von Kundenwachstum bestehend aus Lukas.
Am Online Marketing arbeitet das Team von Kundenwachstum bestehend aus Lukas.
Lukas Wojtke

Die Pandemie hat uns so deutlich wie noch nie gezeigt, dass die digitale Welt das Leben der potentiellen Kunden bestimmt. Deswegen ist es umso wichtiger, eine moderne und zielgerichtete Webseite zu haben.

Welche Auswirkungen hat Parallaxing beim Webdesign auf Dein SEO?

Webdesigner und kreative, experimentierfreudige Denker freuen sich über die Möglichkeiten, die Ihnen Parallax im Bereich des Webdesigns bietet. SEO Experten stehen der Methode zumindest teilweise kritisch gegenüber. Jeder SEO Experte wird für ein Webdesign SEO Konzept plädieren, wenn es um Parallaxing beim Webdesign geht. Denn Parallaxing beim Webdesign hat enorme Auswirkungen auf die Suchmaschinenoptimierung. Da Websites in der Regel als One Pager aufgesetzt sind, sind alle Inhalte auf einer einzigen URL zu finden. Aus diesem Grund kann in der URL nur ein Keyword gepusht werden. Und nicht mehrere, wie das bei unterschiedlichen URLs der Fall ist. Das gleiche trifft auch für die verschiedenen Überschriften und Metadaten zu. Auch diese wichtigen Parameter können nur für eine einzige Seite optimiert werden. Zudem fallen wichtige interne Verlinkungen weg, da viele Inhalte auf einer einzigen Seite dargestellt werden.

Und im Gegenzug fallen – wie mehrfach erwähnt – bei Parallax Webseiten in der Regel längere Ladezeiten an. Auch das straft Google bei der Berechnung im Ranking ab. Denn für Google ist der Page Speed ein enorm wichtiger Faktor. Genauso ist das beim Verhältnis von Code zu Text. Die so genannte „text to code ratio“ fällt bei Parallax Webseiten schlechter aus, als bei „herkömmlichen“ Webseiten. Das wertet Google ebenfalls negativ, da Seiten „leicht“ und aussagekräftig sein sollen. Außerdem straft Google ab, dass sich bei einer Parallax Website Inhalte nicht eindeutig im sichtbaren Bereich „above the fold“ befinden. Denn das Konzept einer Parallax Webseite ist es, dass sich der User bewusst nach unten bewegt und auf der Seite umher navigiert.

Zu guter Letzt wird es Dein Webanalytics Team etwas schwerer in seinen Auswertungen haben, wenn Du Parallaxe nutzt.
Beim Einsatz von Parallaxing innerhalb des Webdesigns musst Du also immer abwägen, ob Dir Dein Ranking auf Google oder das Storytelling und eine tolle visuelle Aufbereitung der Webseite wichtiger ist.

Parallaxing auf mobilen Endgeräten

Dass Responsive Design enorm wichtig ist, sollte im Jahr 2021 jeder Marketingexperte verstanden haben. Auch wenn Deine Parallax Website responsive ist, kann es auf Mobilgeräten allerdings zu Problemen kommen. Meist ist der Parallax Effekt mobil nicht gut darstellbar. Und die Tiefe kommt auf den mobilen Endgeräten gar nicht oder nicht so gut rüber, wie am großen Bildschirm.

Best Practices für die SEO Usability und Paralallax

SEO und Parallaxing schließen sich nicht vollständig aus. Einige Dinge solltest Du dennoch beachten, wenn Du erfolgreich sein willst:

  • Nutzung von Parallaxing beim Webdesign auf einer einzigen Seite, für die besonderes Landing Page SEO betrieben wird
  • Einbau eines (versteckten) Menüs, um Unterseiten per separater URL anwählen zu können
  • Verschiedene URLs für verschiedene Sektionen, die sich beim Scrollen ändern (Umsetzung per jQuery möglich)

Bring Deine Website 2021 eine Ebene weiter!

90 Minuten gratis Beratung

Landingpage
erstellen

Durch ein überarbeitetes Webdesign Stammkunden begeistern und Neukunden gewinnen!

Website
erstellen

Präsentiere Dein Unternehmen noch professioneller und für Google optimiert!

Onlineshop
Website

Steigere Deine Onlineumsätze und gewinne neue Kunden dazu!

Wann kann man Parallaxing beim Webdesign am besten einsetzen?

Wie erwähnt, wird Parallaxing beim Webdesign vor allem im Rahmen von Storytelling eingesetzt. Durch die geschickte Kombination aus Technik und Inhalt können auch komplizierte Sachverhalte interaktiv vermittelt werden. Denn beim Storytelling geht es nicht ums Geschichten erzählen im klassischen Sinne. Vielmehr geht es darum, komplexer Sachverhalte einfach zu vermitteln und den menschlichen Faktor einzubeziehen. Während sich der User sich durch Scrollen auf der Seite nach unten bewegt, kann ihm der komplexe Sachverhalt erzählt bzw. vermittelt werden. Dabei unterstützen großflächige Infografiken oder aussagekräftige Bilder, die in den Kontext eingebettet sind. All das kann positiv auf die Usability einzahlen und durch die optische Tiefe einen Aha-Effekt beim User auslösen.

Worauf musst Du dabei unbedingt achten?

Deswegen setzen viele Agenturen und Freelancer, aber auch Werbekampagnen, auf Parallaxe. Oft passiert es allerdings, dass Parallax Websites zu „überladen“ sind und zu viele Effekte auf einmal auf die User einströmen. Natürlich zeigen Entwickler gerne was sie draufhaben und bauen viele tolle Effekte in die Webseite ein. Aber zu viel ist zu viel – gerade bei Parallax. Denn Du hast nichts davon, wenn der Inhalt auf Deiner Seite verloren geht und der Nutzer sich überfordert fühlt.

Um den Effekt der Bewegungsparallaxe optimal zu nutzen, solltest Du auf folgende Dinge achten:

  • Setze Parallaxe minimalistisch ein (Stichwort: Flat Design)
  • Nutze visuelles Storytelling und setze Dein Projekt konsequent um
  • Der Spaß des Users bei der Nutzung der Seite sollte im Vordergrund stehen
  • Sorge mit einem Call to Action dafür, dass der User etwas tun kann (Kontakt aufnehmen, Produkt bestellen etc.)
  • Achte im Sinne der Usability darauf, dass die Seite mit allen Browsern (Chrome, Safari, Firefox, Internet Explorer etc.) kompatibel ist
  • Achte darauf, dass Deine Seite auch mit mobilen Geräten kompatibel ist.

Auch wenn Parallax auf den ersten Blick kompliziert zu sein scheint, es ist machbar. Für WordPress gibt es zum Beispiel etliche Themen, die Parallax unterstützen.

Parallaxing beim Webdesign Design ist eine tolle Methode für das Storytelling und hinterlässt – gut umgesetzt – einen bleibenden Eindruck. Auf einer einzigen Landingpage kann ein Unternehmen seinen Usern viel Inhalt auf interaktive und technisch raffinierte Weise bieten. Ohne Zweifel: Parallax ist schick und eine perfekte Methode für das Storytelling Marketing. Allerdings solltest Du es gut durchdacht einsetzen und im Sinne des Users und der Usability einsetzen. Wichtig ist, dass Du Deinen Besucher beim ersten Eindruck nicht überforderst, wenn er sich auf der Webseite bewegt. Jage ihn nicht von Effekt zu Effekt. Da Parallax auch einige Nachteile hinsichtlich SEO mit sich bringt, musst Du auch hier vorsichtig sein.

Fazit – Wer sollte Parallaxing beim Webdesign nutzen?

Hast Du das Glück, nicht auf SEO Marketing angewiesen zu sein, kannst Du Parallaxe ohne Probleme einsetzen. Kleinere Unternehmen, für die der Google Traffic allerdings eine große Bedeutung hat, sollten erst einmal alle Vorteile und Nachteile abwägen.

Hast Du Interesse am Parallaxing für Deine eigene Webseite? Wir sind ein Consulting-Unternehmen und beraten Dich gerne. Wir zeigen Dir Möglichkeiten auf, wie Du Parallaxing sinnvoll einsetzen kannst. Dabei gehen wir auf SEO genauso ein wie auf Usability.

Detaillierte Auswertung und direkte Optimierungs-
vorschläge, komplett kostenlos und unverbindlich.

Detaillierte Auswertung und direkte Optimierungsvorschläge, komplett kostenlos und unverbindlich.

Du hast Fragen zum Parallaxing beim Webdesign?
Hier findest Du passende Antworten!

Da eine Parallaxing Website meist aus nur einem Onepager besteht, befinden sich Dein gesamter Content auf einer URL. Dies hat die Auswirkung, dass Du nur wenige Keywords pushen kannst. Auch die SEO relevanten Überschriften und Metadaten sowie interne Links sind so nur begrenzt einsetzbar. Parallax Scrolling hat ebenso eine negative Auswirkung auf den Page Speed und suggeriert Google, dass sich die „text to code ratio“ nicht in einem ausgewogenen Verhältnis befindet.

Der Parallax Effekt hat im Webdesign also einen starken Einfluss auf die Performance Deiner Website und damit auch auf Deine Suchmaschinenoptimierung. Doch dies heißt nicht, dass sich Parallax Scrolling und SEO komplett ausschließen. Durch einige Methoden kannst Du den Parallax Effekt verwenden und trotzdem erfolgreiche Suchmaschinenoptimierung betreiben – beispielsweise mit intensivem Landing Page SEO und verschiedenen URLs, welche sich beim Scrollen verändern.

Beides ist also vereinbar. Doch mach Dir im Vorfeld trotzdem immer klar, wo Dein Hauptfokus liegt: im Google Ranking, im Storytelling oder im visuellen Design Deiner Website?

Es gibt zahlreiche unterschiedliche Möglichkeiten, Parallax Scrolling in Deinem Webdesign zu verwenden. An technischen Designs gibt es beispielsweise die Layermethode, die Rastermethode, die Spritemethode oder einen Parallax Effekt aus sich wiederholenden Bildern, Videos und Animationen. Mit all diesem Methoden soll eine tiefere Welt simuliert werden, indem die einzelnen Ebenen so konzipiert sind, dass sich die Elemente unterschiedlich schnell bewegen. Dies erzeugt den einzigartigen Parallax Effekt.

Um diese Eindrücke beim Parallax Scrolling zu erreichen, kannst Du eine Kombination aus HTML 5 und CSS 3 einsetzen. Doch auch eine Einbindung von JavaScript und jQuery ist möglich. Mittlerweile gibt es auch einige Plugins und Module, welche den Einsatz von Parallax Scrolling ermöglichen – auch ohne professionelle Programmierkenntnisse. Mach Dir aber unbedingt bewusst, dass all diese Methoden die Performance Deiner Page negativ beeinflussen, was wiederum einen Einfluss auf das Thema Google Ranking haben wird.

Du möchtest noch mehr Wissen?

Weitere Tipps und interessante Artikel findest Du in unserer Ratgeber-Übersicht.

Beginnen Sie mit der Eingabe und drücken Sie Enter, um zu suchen