OnePager


OnePager sind Webseites, die aus einem HTML-Dokument bestehen und jegliche Inhalte für Nutzer auf einer Seite darstellen. Die Navigation erfolgt meist über Sprungmarken und Parallax Scrolling. Nutzer können dabei herunterscrollen oder entsprechende Sektionen mit klickbaren Links in Navigationsleisten erreichen, um die Inhalte zu konsumieren, die nicht Above the fold angezeigt werden. Oft werden OnePager auch als Single-Page-Application oder Single-Page-Webanwendung bezeichnet. Insbesondere dann, wenn interaktive Elemente, Animationen und CSS-Effekte sowie diedynamische Bereitstellung der Inhalte verwendet werden. OnePager können ein kohärentes und interaktives Nutzererlebnis erzeugen, indem das Webdesign das Storytelling in technischer Hinsicht ergänzt und die Möglichkeiten von Webtechnologien wie HTML5, CSS und den verschiedenen Skriptsprachen ausschöpft.

Allgemeine Informationen zum Thema

Webseiten, die nur aus einem HTML-Dokument bestehen, unterscheiden sich hinsichtlich der Infrastruktur deutlich von herkömmlichen Homepages mit Unterseiten – auch Multi-Page-Application genannt. Während Multi-Page-Webseiten Inhalte durch Unterseiten strukturieren, erfolgt dies bei OnePagern durch Sektionen und Events. Sektionen sind den Kapiteln eines Buches ähnlich. Durch Scrollen erreichen Nutzer diese Sektionen. Möglich sind auch Sprungmarken, die wie herkömmliche Hyperlinks funktionieren und die Nutzer direkt zu den für sie interessanten Inhalten leiten. Webdesigner können zudem Events definieren, die das Verhalten der Webanwendung beeinflussen. So können grafische Elemente, Animationen und Effekte integriert werden, um die User Experience mitzugestalten. Ein Klick auf einen Pfeil leitet den Nutzer beispielsweise zum nächsten Abschnitt, wo grafische Elemente die Erzählstruktur der Webseite unterstützen.

OnePager erlauben nicht nur eine clientseitige Architektur, sondern dadurch auch die Reduzierung der Client-Server-Kommunikation: Mithilfe von speziellen JavaScript-Frameworks wie Angular, Ember oder Backbone, der asynchronen Datenübertragung mit AJAX, Protokollen wie Websockets und Browser-Plugins wie Silverlight, Flash oder Java Applets können interaktive Webanwendungen entwickelt werden.[1] Diese Anwendungen oder Rich Internet Applications erfordern nicht immer einen Datenaustausch zwischen Client und Server, sodass auf bestimmte Events oder bei definierten Zuständen der Webseite das Verhalten der Webanwendung gesteuert und Inhalte dynamisch geladen werden können. Dies hat bei entsprechender Umsetzung eine verbesserte Usability zur Folge und kann ebenfalls die Performance von Webseiten beeinflussen.

Funktionsweise

OnePage-Webseiten sollen Nutzern eine kohärente User Experience bieten. Dies wird meist durch Leitprinzipien realisiert, die im Folgenden kurz umrissen werden.[2]

  • Parallax Scrolling: Scrollt ein Nutzer auf einer Webseite herunter, bewegen sich einzelne Ebenen der Webseite mit unterschiedlichen Geschwindigkeiten. Auf diese Weise entsteht ein Eindruck von Tiefe. Zum Beispiel bewegt sich das Hintergrundbild beim Scrollen langsamer als die Inhalte, die durch die Nutzerinteraktion in das Zentrum der Wahrnehmung gerückt werden.
  • Flat Design: Flat Design ist ein minimalistisches Gestaltungsprinzip, das die Funktionalität der Anwendung in den Vordergrund stellt und auf optische Verzierungen und Elemente wie Schatten oder Texturen verzichtet. Daraus ergeben sich Vorteile wie mehr Übersichtlichkeit, eine erhöhte Konzentration auf die Webseite-Inhalte oder bessere Performance-Eigenschaften (zum Beispiel Ladezeiten). Zudem können Nutzer leichter zu einer Action geführt werden, indem zum Beispiel ein Call-to-Action-Aufruf eingebunden wird, um die Konversionen zu erhöhen. Voraussetzung dafür sind jedoch gut sichtbare Call-to-Action-Elemente und eine korrekte technische Implementation.
  • Interaktivität: OnePage-Webseiten und Single-Page-Webanwendungen können durch die Einbindung von Skripten, Animationen und weiteren Effekten das Customer Engagement fördern. Nutzer können innerhalb des HTML-Dokuments mithilfe verschiedener Aktionen navigieren und die Webseite verwenden. Scrollen sie herunter, können grafische Elemente das Storytelling unterstützen und die Nutzer zum Call-to-action-Button führen. Durch Klicks auf ausgewählte Elemente können bestimmte Informationen ansprechender präsentiert werden, sodass die Interaktion zwischen Nutzer und Webseite einen sogenannten Joy of Use zur Folge hat. Die Präsentationslogik ist bei OnePage-Webseiten generell auf ein erhöhtes Maß an Interaktion ausgelegt.
  • Storytelling: Die technischen Möglichkeiten von OnePage-Webseiten begünstigen das Storytelling auf bestimmte Art und Weise. Da alle Inhalte auf einer HTML-Seite dargestellt werden, bekommt der Nutzer den Eindruck, dass es sich um inhaltlich zusammenhängende Informationen handelt. Entsprechend können Informationen so präsentiert werden, dass ein roter Faden erkennbar ist und die Botschaft ohne Umwege bei den Nutzern ankommt. Mithilfe von interaktiven Elementen und dem Parallax Scrolling bewegen sich die Nutzer förmlich durch die Geschichte der Webseite. Diese leitet den Besucher und lenkt seine Aufmerksamkeit auf die zentralen Informationen. Häufig wird der Nutzer so zu einer Handlung verleitet, wie das Ausfüllen eines Kontaktformulars oder die Bestellung eines Produktes.

Praxisbezug

OnePage-Webseiten eignen sich nicht für jede Art von Webseite. Onlineshops sind zum Beispiel auf mehrere Inhaltsebenen angewiesen, um Produkte aus verschiedenen Kategorien darzustellen. Thematisch breit gefächerte Webseiten verwenden ebenfalls eher Multi-Page-Konzepte, um verschiedene Inhalte und Themen abzudecken. OnePager eigenen sich lediglich für klar abgrenzbare Themen sowie eine begrenzte Menge an Informationen. Zum Beispiel:[3]

  • Werbekampagnen
  • Produkteinführungen
  • Veranstaltungen und Projekte
  • Online-Visitenkarten für Freiberufler, Selbstständige und kleinere Firmen
  • Landing Pages für einzelne Produkte und Dienstleistungen

Je nach Nutzungsszenario können die Überlegungen zum Design, zur Interaktivität und dem Storytelling unterschiedlich ausfallen. Grundsätzliche strategische und konzeptionelle Überlegungen sollten sich deshalb an den Inhalten orientieren, die präsentiert werden sollen: Wie können die Inhalte zielführend dargestellt werden, sodass Nutzer eine gewünschte Aktion durchführen? Inhalte und technische Implementierung können sich in diesem Kontext gegenseitig ergänzen. Empfehlenswert ist zudem ein Responsive Design, um die Inhalte für unterschiedliche Endgeräte verfügbar zu machen.

Bedeutung für das Online Marketing

Wie bei herkömmlichen Webseites sind bei OnePagern viele verschiedene SEO-Richtlinien und Tipps zu beachten. OnePager zeichnen sich durch ein klar abgegrenztes Thema aus. Diese Abgrenzung hat zur Folge, dass bestimmte semantische Aspekte von vorneherein ausgeschlossen werden müssen. So werden OnePager in der Regel nur auf wenige Suchphrasen hin optimiert; Midtail- und Longtail-Keywords können häufig nicht abgedeckt werden. Nichtsdestotrotz müssen alle Inhalte für Crawler erreichbar sein – Crawlability und Accessibility müssen wie bei anderen Webprojekten auch gegeben sein.[4]

Die Länge des Contents ist ebenfalls relevant: Das Storytelling ist nur erfolgreich, wenn Nutzer nicht mit Inhalten überladen werden. Die Inhalte selbst sollten gut strukturiert werden, indem das Markup von HTML5 und die Selektoren von CSS zum Einsatz kommen. Inhalte können zum Beispiel durch Überschriften und Sektionen strukturiert, und mit CSS-Selektoren und Tags benannt werden. Fraglich in der SEO-Branche ist nach wie vor die Nutzung mehrerer H1-Überschriften. Manche Entwickler raten dazu, sie bei OnePagern zu verwenden.[5] Gleiches gilt für Sprungmarken: Sie sollten klar bezeichnet werden, sodass sowohl Crawler als auch Nutzer genau wissen, wo eine Sprungmarke hinführt.

Wenn Single-Page-Webanwendungen gut umgesetzt sind, können sie unter Umständen einige KPIs erhöhen. Verweildauer, Nutzerinteraktion oder das Scrollverhalten zum Beispiel. Voraussetzung dafür ist laut Google allerdings eine einwandfreie Umsetzung: Der Erfolg von Single-Page-Anwendungen hängt vom Thema, Design und der generellen Implementierung ab. Mit JavaScript und CSS-Effekten hätten die Crawler von Google mittlerweile keine Probleme mehr, sagte Matt Cutts. Er rät jedoch zu ausgiebigen Tests, bevor eine OnePage-Webseite online geht und womöglich eine Multi-Page-Webseite beerbt.[6]

Einzelnachweise

  1. ↑ Single-page Webanwendungen w3l.de. Abgerufen am 07.01.2016
  2. ↑ Onepager: Die Allzweckwaffe für erfolgreiche Kampagnen mosaiq.com. Abgerufen am 07.01.2016
  3. ↑ Should I Have a One-Page Website? webinsation.com. Abgerufen am 07.01.2016
  4. ↑ Single Page Websites & SEO searchengineland.com. Abgerufen am 07.01.2016
  5. ↑ SEO Tricks for One Page Websites awwwards.com. Abgerufen am 07.01.2016
  6. ↑ Matt Cutts über Single-Page-Websites seo.at. Abgerufen am 07.01.2016

Weblinks


Abgerufen von „https://de.ryte.com/wiki/index.php?title=OnePager&oldid=15844“

Kategorie