| | Webdesign, Website & Marketing

Smooth Page Transitions – Für Fans moderner, hochwertiger Websites

Smooth Page Transitions für alle Fans moderner, hochwertiger Websites

Smooth Page Transitions sind ein Phänomen. Von Website Besuchern zunehmend erwartet und von UX Designern geliebt. Für Webentwickler und SEO-Experten eine Herausforderung und für Unternehmer oft 2 Worte mit 7 Siegeln.

Wir zeigen Dir daher in diesem Artikel was ein Page Transition ist, welche es gibt und warum sie für das Erlebnis Deiner Besucher und Deinem Erfolg im Web relevant sind.

Dabei gehen wir auch darauf ein, warum es fließende Page Transitions derzeit noch kaum auf Website zu sehen gibt und welche Möglichkeiten und Chancen es auch für KMUs gibt Page Transitions für hochwertige Websites zu nutzen.

Was sind Page Transitions

Unter einer Page Transition versteht man den Übergang von einer Webseite zu einer anderen Webseite Deiner Website. Also z.B. wenn Deine Besucher auf Deiner Startseite stehen, dort auf einen Link zu Deiner „Über uns“ Seite klicken und dadurch auf Deine „Über uns“ Seite gelangen. Z.B. wie hier auf der Seite des BDA.

Soweit also etwas ganz Normales für Websites, die aus mehreren Seiten bestehen.

Warum sind Page Transitions für den Erfolg einer Website relevant

Leider sind die Seitenübergänge bei Websites jedoch in der Regel sehr abrupt. Das hat in den vergangenen Jahren bereits zu der Kritik geführt, dass Websites im Vergleich zu Web Apps „veraltert“ erscheinen und weniger Benutzerfreundlich sind.

In Ihren Beitrag zu animierten Page Transitions verdeutlicht Sarah Drasner, was passiert, wenn Besucher Deine Website anschauen und von einer zu nächsten Seite navigieren. Sie scannen Deine Seite und legen sich eine mentale Karte von der Seite an, auf der sie sich gerade befinden. So als ob Du gerade aus einem Auto, Zug oder Flugzeug gestiegen bist und Deine Umgebung scannst und Dir ein Bild davon machst, wo Du bist und ob Du da, wo Du bist, richtig bist.

Beim Seitenwechsel können dann 2 Situationen auftreten.

1. Der Seitenwechsel erfolgt abrupt

Der typische Fall ist, dass die Page Transition abrupt, als harter Absprung erfolgt. Vorherige und neue Seite können nicht zur gleichen Zeit gesehen werden und es kann sein, dass die neue Seite etwas Zeit braucht, um vollständig angezeigt zu werden.

Dabei sprechen wir hier von Millisekunden bis Sekunden, die das Benutzererlebnis, Dein Ranking und Deinen Umsatz laut Google beeinflussen.

Webseitenoptimierung 2021 – 10 kritische Fakten zu Design, SEO, Performance 6

Deine Besucher können hierdurch die Orientierung verlieren und müssen sich für die neue Seite eine komplett neue mentale Karte anlegen. Selbst bekannte Seitenelemente wie das Menü werden neu auf der Karte positioniert, eingeordnet und im Zweifel auch neu interpretiert und bewertet.

Das kann zu Irritationen führen. Stell Dir vor Du würdest gerade noch in Berlin sein und im nächsten Moment mitten in Köln. Selbst wenn das von Dir gewünscht ist, wirst Du Dich neu orientieren müssen.

Performance und User Experience gehen daher Hand in Hand und sind für Deine Websiteoptimierung und Deinen Erfolg im Web entscheidend.

2. Die Page Transition ist fließend

Erfolgt der Übergang mit einer Page Transition Animation, kannst Du im Rahmen der Animation dafür sorgen, dass der Übergang von A nach B fließend ist. Auf diese Weise wird eine Situation geschaffen, die wir aus dem echten Leben kennen und die wir gelernt haben.

Genauso wie wir nicht plötzlich an einem anderen Ort sind, sind wir durch die Page Transition Animation nicht plötzlich auf einer anderen Seite. Stattdessen wird die neue Seite visuell immer klarer, größer, detaillierter – während die alte Seite kleiner, unsichtbarer wird, bevor sie ganz verschwindet.

Smooth Page Transition – Beispiel PANTHEONE

Die animierte Page Transition hilft Deinen Besuchern sich wohl zu fühlen. Sie stärkt das Vertrauen in Dich und die Qualität Deiner Leistungen. Und die Page Transition Animation sorgt dafür, dass sich Deine Besucher schneller zurecht und die gewünschten Informationen finden.

Smoothe Page Transition und ihre aktuelle Verbreitung

Auch wenn es an kreativen Ideen für schöne Seitenübergänge nicht scheitert, begegnen uns weiche Page Transitions derzeit vorrangig in 2 Bereichen. Doch darauf ist sie nicht beschränkt. Daher stellen wir kurz beide bekannte Bereiche vor und komplementieren sie für Dich im Anschluss um eine dritte Realisierungsmöglichkeit mit sehr viel Potenzial.

Mobile Apps und Page Transition

Fließende Übergänge sind insbesondere für mobile Apps typisch. Ähnlich wie animierte Page Transitions bei Websites sind auch hier die animierten Übergänge dafür da, dass der Benutzer versteht, was in der App gerade passiert.

Mobile App Beispiel Instagram

Mobile App Beispiel Instagram

Die Animation erleichtert die Navigation durch die App und zeigt dem Benutzer, wohin er innerhalb der App geht.

So navigieren wir oft von einer Seite zur Unterseite, in dem die Unterseite von der rechten Seite des Displays reingeschoben wird. Ein einfacher Übergang, der es trotzdem sehr gut ermöglicht, die Orientierung beizubehalten.

SPAs und Transitions

Aber auch im Web sind weiche Übergänge seit ein paar Jahren in Rahmen von SPAs zu finden. Eine SPA (Single Page Application) ist eine als webbasierte App realisierte Website, die nur aus einer einzigen HTML-Datei besteht. Neue oder veränderte Daten werden mit JavaScript dynamisch nachgeladen.

Viele verwenden SPAs ohne zu wissen, dass es sich dabei um ein Single Page Application handelt und nicht um eine Website. Zu den typischen Beispielen zählen hier z.B. Gmail, Google Maps, Netflix, Paypal oder GitHub.

Wie t3n darstellt, wird so z.B. beim Öffnen einer neuen Mail in Gmail kein neues HTML-Dokument vom Server geladen. Stattdessen wird nur der Inhalt des aktuellen Dokuments im Browser des Besuchers verändert, ohne die Seite neu zu laden.

Single Page Application Beispiel Gmail

Nachteile von SPAs als Lösung

Durch SPAs kann zwar ein App-Feeling hergestellt werden, jedoch eignen sich SPAs oft für typische Business Websites nicht. Die Gründe hierfür sind u.a.:

SPA & SEO

Die Suchmaschinenoptimierung von Single Page Applications ist nach wie vor eine echte Herausforderung für SEO-Experten. Zwar kann Google inzwischen SPAs besser indexieren und erst recht, wenn die von Google herausgegebenen Tipps verfolgt werden.

Laut John Mueller – Webmaster Trends Analyst bei Google – kann es jedoch einige Zeit dauern, bis der komplette Inhalt einer SPA indexiert ist.

Zudem indexiert Google einzelne Seiten. Während bei Websites mit mehreren Webseiten daher jede einzelne Seite für Suchmaschinen optimiert und indexiert werden kann, ist dies bei SPAs nur für die eine existierende Seite möglich.

Sicherheit

SPAs sind weniger sicher. Aufgrund von Cross-Site Scripting (XSS) ermöglicht es Angreifern, clientseitige Skripte durch andere Benutzer in die Webanwendung zu injizieren.

Problematisch wird dieses Sicherheitsproblem erst recht, wenn über die SPA sensible Daten übertragen werden (z.B. im Rahmen von Zahlungen). In der Regel sind nicht alle Inhalte einer SPA sichtbar, so dass es sein kann, dass sich Besucher sicher fühlen, obwohl sie es nicht sind.

Eisberg - gefährliche Sicherheit bei SPAs

Knowhow

Die Realisierung von SPAs erfolgt mit JavaScript Frameworks wie Vue, React, Angular oder Backbone. Die Suche nach guten Webentwicklern, die das entsprechende Knowhow mitbringen ist weltweit enorm. Entsprechend können sich die Entwickler die Jobs aussuchen.

Kosten

Nicht nur die Ressourcen-Knappheit lässt die Kosten steigen. Auch Serverkosten können hierbei deutlich teurer sein als bei einem normalen Website-Hosting.

Langsamkeit

Das erstmalige Laden der für den Browser schweren Frameworks kann einige Zeit in Anspruch nehmen. Einmal geladen sollte die SPA natürlich sehr schnell sein, was sie normalerweise auch auszeichnet. Trotzdem kann es durch Speicherproblem in JavaScript dazu kommen, dass selbst leistungsstarke Systeme langsamer werden.

Folge

In der Folge werden SPAs insbesondere von großen Unternehmen wie Google, Facebook, Twitter und Co verwendet. Dabei gerne für Anwendungen wie Gmail, die nicht SEO relevant sind bzw. deren Inhalt nicht in den Suchmaschinen gefunden werden soll.

Seltener ist der Einsatz für Landingpages. Fast gar nicht für normale Business Websites.

Single Page Application Verwendung

Doch zum Glück sind SPAs nicht die einzige Möglichkeit smooth Page Transitions im Web zu realisieren.

 

Page Transition für hochwertige Websites mit und ohne WP

Wie versprochen stellen wir Dir hier noch eine dritte Möglichkeit für fließende Übergänge vor. Technisch ist die Implementierung dieser Page Transitions durchaus für jede Website machbar. Dafür sind weder mobile Apps, noch SPAs, noch Frameworks nötig.

Gut, auch hierfür sind sehr gute JavaScript Kenntnisse gefragt. Doch die Nachteile der SPA hinsichtlich SEO, Sicherheit, Server und zum Teil auch der Kosten, lassen sich deutlich verringern oder sogar ganz beseitigen. Zudem ist eine Kombination mit einem CMS wie WordPress so realisierbar, dass die Vorteile, die ein solches System mit sich bringt, erhalten bleiben.

So realisierst Du schöne Page Transitions für Deine Website

Die Herausforderung von fließenden Übergängen zwischen Webseiten ist, dass sie nicht der normalen Logik für Websites entsprechen. Klicken wir auf einen Link auf einer Webseite, um auf eine andere Seite der gleichen Website zu gelangen erfolgt normalerweise eine neue Serveranfrage und die Seite lädt komplett neu. Wir haben keine natürliche, einfache Möglichkeit smooth Page Transitions für Websites zu realisieren.

Doch hier gilt das Motto „Gewusst wie!“.

Smooth Page Transitions - gewusst wie

Manuelle fließende Seitenübergänge

Weiche Übergänge können einerseits 100% manuell gecodet werden. Ein Weg der für erfahrene Entwickler machbar und zu empfehlen ist, wenn ein längerer, holpriger Weg mit jede Menge Kopfschmerzen als Herausforderung angenommen wird.

Schließlich gilt es die native Funktionalität der Browser zu stoppen, zu verändern und das ist per se nicht immer so einfach. Im Wesentlichen geht es um folgende Punkte:

  • Das normale Browserverhalten für Klicks auf Links verhindern
  • Seitenübergreifend das Laden und Ersetzen von Inhalten zu kontrollieren und zu individualisieren
  • Laden von Inhalten via JavaScript
  • Dem Lebenszyklus von JavaScript und den vorhandenen Inhalten managen
  • Veränderung der URL auf die Ziel-URL ohne das die neue Seite vom Server neu geladen wird
  • Preloading: Inhalte ggf. vorzeitig laden um Schnelligkeit zu gewinnen (z.B zwischen Hovern und Klicken Deines Website Besuchers)
  • Caching für statische Seiten
  • Und ganz wichtig: Animation zur Gestaltung der Übergänge

Die Beiträge enhance your web page transitions und page transitions for everyone  bieten für diesen Weg einen guten Einstieg.

Smoothe Page Transitions mit Bibliotheken

Neben dem 100% eigenem Coden, kannst Du weiche Übergänge auch mit Hilfe von Bibliotheken realisieren. Genauer genommen mit modernen JavaScript Bibliotheken.

JavaScript Bibliothek

Bibliotheken lohnen sich in drei Fällen für smoothe Page Transitions.

  1. Du möchtest Zeit sparen, in dem Du die oben skizzierten Techniken nicht jedes Mal neu implementieren und durchdenken musst. In dem Fall lohnt es sich eine widerverwendbare Bibliothek zu verwenden. Sie gibt Dir die Möglichkeit, Dich auf die Übergangseffekte selbst konzentrieren und nicht so sehr auf den dafür nötigen Rahmen.
  2. Du willst das Rad nicht neu erfinden, sondern auf dem Wissen – und Code – anderer Experten aufbauen. Mentoren, die Du schätzt und von denen Du lernen und eine Community, mit der Du Dich austauschen und Fragen klären kannst.
  3. Für die Realisierung von Projekten arbeitest Du mit anderen Entwicklern gemeinsam. Der Rahmen und die Vorgehensweise sollen einheitlicher und dadurch effizienter erfolgen.

Bibliotheken für Deine Page Transitions

Inzwischen gibt es eine Hand voll JavaScript Bibliotheken, die es Dir ermöglichen eine weiche Page Transition zu realisieren. Hierzu zählen u.a.:

Barba.js

barba,js - barba js

Barba ist mit ihren nur 9kb eine kleine JavaScript Bibliothek, die speziell für die Animation von Page Transitions entwickelt wurde. Ihr Ziel ist es Dir dabei zu helfen flüssige und weiche Übergänge zwischen den Seiten Deiner Website zu realisieren.

Seit 2015 hilft sie, Verzögerung zwischen Deine Seiten zu reduzieren, die HTTP-Anfragen des Browsers zu minimieren und das Web-Erlebnis des Benutzers zu verbessern.

Barba wurde in TypeScript geschrieben. Für die eigentliche Animation kann sowohl JavaScript als auch CSS verwendet werden. Typisch für starke Animationen ist auch die Kombination von Barba.js und GSAP. GSAP ist eine stabile und hoch-performante JavaScript-Animations-Bibliothek, die u.a. auch von Google empfohlen wird.

Auf diese Weise sind den Animationen für Deine Page Transition quasi keine Grenzen gesetzt.

Highway.js

Highway.js - Page Transition Bibliothek von Dogstudio

Highway.js wurde 2018 von Dogstudio als moderner JavaScript Transition Manager entwickelt. Nicht grundsätzlich als Ersatz für Barba, sondern vielmehr als eigne Lösung für das gleiche Problem, die Dogstudio mit der Community teilen wollte.

Die JavaScript Bibliothek basiert auf ES6. Für optimale Browserkompatibilität sind die Features auch für ES5 übersetzt, so dass neben Google Chrome, Firefox, Edge und Safari auch der letzte Internetexplorer IE11 unterstützt wird.

Highway ist mit seinen 2.5kb ein Leichtgewicht, das für eine leicht zu verwendende und anzupassende Bibliothek steht. Grund hierfür ist insbesondere die Basis. Die ES6 Klassen können von erfahrenden Entwicklern gut erweitert werden und die gesamte Bibliothek durch weitere Features ergänzt werden. Für die Animationen ist JavaScript, GSAP und WebGL angedacht.

Gleichzeitig hat Dogstudio versucht sich auf Features zu konzentrieren, die von der Community regelmäßig gebraucht werden. Im Vergleich zu Barba gilt es daher als weniger komplex.

SWUP

swup - Bibliothek für Page Transitions

Georgy Marchuk entwickelte SWOT 2017 für statische Websites mit dem Fokus auf Flexibilität und Benutzerfreundlichkeit.

Wie Highway und Barba ist Swup ebenfalls eine Transitions-Bibliothek, die jedoch im Kern auf CSS Transitionen aufgebaut ist. Erweiterte Page Transition Animationen mit JavaScript sind mit einem zusätzlichen Plugin möglich.

Die Verwendung von Swup scheint als Einstieg daher gerade für Designer, die weniger mit JavaScript vertraut sind, aber bereits Erfahrungen mit CSS mitbringen, einfacher zu sein.

Ein weiteres Merkmal von SWUP ist es, dass auf einfache Weise so viele Container definiert werden können, wie Du willst. Auf diese Weise ist es leichter selbst kleinste Teile Deiner Seite zu ersetzen.

smoothState.js

Als 4 Möglichkeit möchte ich gerne noch smoothState nennen. Es wurde bereits 2014 von Miguel Pérez entwickelt basiert auf jQuery. jQuery ist eine JavaScript Bibliothek, die von sich aus vieles mitbringt, um JavaScript Operationen zu vereinfachen. Leider auch an Gewicht (kb), weshalb viele heutzutage versuchen darauf zu verzichten und jQuery nur einzusetzen, wenn es nötig ist.

Nichtsdestotrotz hält sich smoothState und wird nach wie vor gerne verwendet.

Barba, Highway, SWOT oder…?

Page Transition Bibliotheken im Vergleich

Im Diagramm siehst Du die stetigen Downloads der Bibliotheken im Jahresverlauf. Doch ob Barba, Highway, SWUP oder eine ganz andere Bibliothek für Dich besser ist? Das hängt wie Anthony Du Pont klarstellt, davon ab, welche besser zu Deinen Bedürfnissen passt.

Wie gut bist Du z.B. in JavaScript? Wie schnell soll Deine Website später sein? Welche Animationen hast Du Dir für Deine Seiten vorrangig im Sinn? Hast Du bereits jQuery mit an Bord Deines Webprojekts?

Varianten von Page Transitions

Weiche Überblendungen der ganzen Seite oder Seitenelementen

Page Transition mit Slide-Effekt

Page Transition mit Branding

Galerie- oder Schlussbild der Seite wird zum Startbild der neuen Seite

Special Page Transitions

Fazit

Page Transitions im Web erfolgen normalerweise sehr abrupt. Ein Klick auf einen Link, die aktuelle Seite verschwindet und die neue erscheint so schnell es geht. Das ist zwar schon ein guter Anfang, doch Deine Website Besucher sind durch die mobilen Apps heutzutage ein besseres Benutzererlebnis gewöhnt.

Zum Glück gibt es inzwischen Möglichkeiten, eine Page Transition so zu animieren, dass sie sehr smooth und natürlich erfolgt. Und das, ohne dafür eine Single Page Application zu erstellen oder ein Framework zu verwenden.

So kannst Du mit sehr guten JavaScript Kenntnissen fließende Seitenübergänge zu 100% selbst coden oder mittels einer Bibliothek und der gewünschten CSS und JavaScript Animationen realisieren. Beispiele hierfür hast Du oben kennengelernt. Falls Du Fragen hierzu hast oder Dir Unterstützung wünschst, nimm gerne mit uns Kontakt auf.

Das schöne ist, dass Du so nativ-like Page Transitions für Websites selbst für Websites entwickeln kannst, die mit einem CMS wie WordPress kombiniert werden und somit die Vorteile von Apps und typischen CMS Business Websites zusammenbringen.

Deine Besucher können hierdurch ein schöneres Benutzererlebnis genießen, dass an natürliche Übergänge und Ortswechsel im echten Leben erinnert. Es gibt ihnen Orientierung, Sicherheit und erhöht den Spaßfaktor. Zugleich gewinnt Deine Website an Qualität, Deine Marke an Ansehen und Du wirst entsprechend hochwertiger repräsentiert.

Zu schön, um wahr zu sein? Nein, das sicher nicht. Die besten Websites machen es vor und es wird Zeit die Zukunftsmusik schon heute zu spielen.