Parallaxing beim Webdesign wird seit einigen Jahren für den Bau bestimmter Webseiten eingesetzt. Es bezeichnet eine Art, Webseiten zu bauen, bei der die Scrollfunktion als Steuerelement genutzt wird. 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.

In unserem Artikel erfährst Du:

Was ist Parallax Design?

Parallaxing im Webdesign – Tatsächlich nur eine Modeerscheinung?Das Prinzip von Parallaxing beim Webdesign ist einfach: Sobald der Betrachter der Webseite scrollt, geschehen auf der Webseite verschiedene Effekte. Die einzelnen Elemente im Foreground und Background 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 Elemente aus Background und Vordergrund den Eindruck von räumlicher Tiefe. Und 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 besonderen 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 (im Background) langsamer bewegen, als näher entfernte 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 nach oben und unten oder sogar seitlich
  • Cursor Bewegungen
  • Veränderungen beim Fenster des Browsers
  • Verschiedene Animationen

    Wie funktioniert Parallaxing genau  beim Webdesign?

Das Website Design basiert meist auf einem Onepager. Dabei ist dieser Onepager zweigeteilt. Und zwar gibt es den Bereich von „Background“ und den Bereich von „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/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änglichesOnline 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?

Parallaxing im Webdesign – Welche Vorteile bietet es?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. Auch die jüngere Zielgruppe spricht auf Parallax 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 sich auf der Webseite bewegen, angeklickt oder verschoben werden können, sinnvoll unterstützen.
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 beim Webdesign auf der Seite bewegt. Denn nichts strafen Nutzer heutzutage mehr ab, als langsame Seiten, die umständlich zu navigieren sind.

Gratis-Download

Hilfreiche Anleitungen und Checklisten für Dein Onlinemarketing.

Gratis-Sichtbarkeitsanalyse

Entdecke welches Potential in Deiner Webseite schlummert.

Kontakt

Du hast Fragen zum Onlinemarketing oder speziell zu diesem Thema?

Welche Auswirkungen hat Parallaxing beim Webdesign auf Dein SEO?

Parallaxing beim Webdesign für eine gute Optik Deiner optimierten WebsiteWebdesigner und kreative und 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 2018 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)

Wann kann man Parallaxing beim Webdesign am besten einsetzen?

Parallaxing beim Webdesign – Nur ein Trend im Online Marketing?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 interactive 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 ein „Aha Erlebnis“ 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 verlorengeht 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 fancy 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.

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.

Gratis-Download

Hilfreiche Anleitungen und Checklisten für Dein Onlinemarketing.

Gratis-Sichtbarkeitsanalyse

Entdecke welches Potential in Deiner Webseite schlummert.

Kontakt

Du hast Fragen zum Onlinemarketing oder speziell zu diesem Thema?

MEHR LESEN ÜBER: "Marketing"

KOMMENTARE