Smooth Page Transitions – Für 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 „veraltet“ 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.
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 Deinen Erfolg im Web entscheidend. Ob Website Redesign oder die Konzeption, Gestaltung und Entwicklung einer komplett neuen Website – beide Aspekte haben ihren festen Platz.
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
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.
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.
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.
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!“.
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 der 100% eigenen Programmierung, kannst Du weiche Übergänge auch mit Hilfe von Bibliotheken realisieren. Genauer genommen mit modernen JavaScript Bibliotheken. Diese nehmen Dir viele der komplexen Arbeiten rund um das Thema AJAX bzw. PJAX ab. Auf diesem Weg kannst Du mehr Zeit auf den kreativen Prozess und die Ausgestaltung der Animationen verwenden.
Ein Beispiel für eine solche PJAX Webseite mit Page Transition ist unser Webdesign Showcase Edeldark. Bei Benutzung der Seitennavigation oder interner Links feuern die JavaScript getriebenen Page Transitions. Sie sorgen für eine visuelle Kontinuität des Nutzererlebnisses. Die Umsetzung setzt technologisch auf die wundervollen AJAX Bibliothek Barba.js.
Bibliotheken lohnen sich in drei Fällen für smoothe Page Transitions.
- 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.
- 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.
- 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 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. Diese Kombination erfreut sich gerade unter den international preisgekrönten Webentwicklern und Designern großer Beliebtheit.
Auf diese Weise sind den Animationen für Deine Page Transition quasi keine Grenzen gesetzt.
Highway.js
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
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, Swup oder…?
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
Page Transitions können im Rahmen moderner Webdesigns auf verschiedenste Art und Weise kreiert und realisiert werden und dadurch die Seitenübergänge angenehm, einprägsam oder z.B. auch lustig gestalten. Gerne stellen wir Dir hier ein paar Varianten beispielhaft vor.
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.