Onepager

Was ist ein Onepager?

Ein Onepager ist ein grundlegendes Einzelseitendokument, das einen detaillierten Überblick über ein Produkt oder einen Service anbietet. Ein OnePager dient als eine Art von Broschüre und hat in der Regel keine Navigation.

Was ist eine OnePage-Website?

Bei OnePagers handelt es sich um Internetseiten, bei denen die Inhalte für den Besucher lediglich auf einer Seite zusammengefasst sind. Normalerweise sind sie aus einem HTML-Dokument aufgebaut. In der Regel werden Sprungmasken und Parallax Scrolling zum Navigieren genutzt. Auf diese Weise kann der Besucher bestimmte Abschnitte erreichen, bei denen Links in der Navigationsleiste untergebracht sind, oder er scrollt einfach nach unten. Andere Bezeichnungen für OnePage sind Single-Page-Application oder Single-Page Webanwendung.

OnePager Definition

Internetseiten, welche nur ein HTML-Dokument als Basis haben, sind sehr unterschiedlich zu den herkömmlichen Websites. Dies ist vor allem bei ihrer Informationsarchitektur und ihrer Infrastruktur der Fall. Herkömmliche Internetseiten bezeichnet man als Multi-Page Applications.

Die Strukturierung der Inhalte erfolgt hier durch Unterseiten. Bei den OnePager wird dies durch Sektionen und Events übernommen. Sektionen sind wie die verschiedenen Kapitel eines Buches.

Die Besucher können die verschiedenen Sektionen durch das Scrollen erreichen. Sprungmarken entsprechen den normalen Hyperlinks bei der internen Linkstruktur und können von dem Besucher auch dazu genutzt werden, um direkt zu den, für ihn interessanten, Inhalt zu gelangen. Events können das Verhalten in der Anwendung verändern.

Das entspricht zum Beispiel der Integration von Animationen, Effekten oder grafischen Elementen, welche die User Experience aktiv prägen. Ein Pfeil kann beispielsweise den Nutzer zum folgenden Themenabschnitt führen. Die grafischen Elemente unterstützen so die Erzählstruktur der Internetseite.

Der Einsatz von OnePagern reduziert sowohl die clientseitige Architektur als auch die Client-Server-Kommunikation. Es werden dafür spezielle Java Script Frameworks verwendet, wie zum Beispiel

• Angular
• Backbone
• Ember

Mit diesen Frameworks und asynchronen Übertragungen der Daten können im Web die interaktiven Anwendungen entwickelt werden.

Die Rich Internet Applications brauchen nicht unbedingt einen Austausch der Daten zwischen Client und Server. Es können vorher Zustände definiert werden und bestimmte Events und das Verhalten der Webanwendung gesteuert werden. So wird das dynamische Laden von Inhalten ermöglicht. Die Konsequenzen sind eine erhöhte Usability sowie teils eine bessere Webseitenperformance.

Wie ein OnePager funktioniert

Ein One Pager will eine nachvollziehbare User Experience ermöglichen. Hierfür werden unterschiedliche Leitideen verfolgt. Im Folgenden werden diese erläutert:

• Das Parallax Scrolling: Die Geschwindigkeit, in der sich die unterschiedlichen Ebenen der Seite bewegen ist unterschiedlich, wenn der Besucher nach unten scrollt. Dadurch entsteht ein Tiefeneindruck. Während des Scrollens bewegt sich das Bild im Hintergrund langsamer. Die Inhalte gelangen auf diese Weise in das Wahrnehmungszentrum des Besuchers.

• Das Flat Design: Dies ist ein Gestaltungsprinzip, das ziemlich minimalistisch ist. Es gibt keine optischen Verschnörkelungen wie Schatten, Texturen oder Verzierungen. Dafür wird die Funktionalität in den Fokus gerückt. Die Vorteile davon sind eine Hervorhebung der Inhalte, eine höhere Übersichtlichkeit sowie verbesserte Ladezeiten der Seite. Zudem erleichtert dies, den Besucher dazu zu bringen, eine Aktion durchzuführen. Der Call-To-Action kann leicht eingebunden werden, was zu einer Erhöhung der Conversions beiträgt.

• Die Interaktivität: Das Customer Engagement kann dadurch gefördert werden, dass Animationen, Skripte und weitere Effekte in OnePager und Single-Page Anwendungen eingebaut werden. Die Nutzer können in dem HTML-Dokument durch verschiedene Aktionen durch die Internetseite navigieren und diese nutzen.

Beim Nach unten Scrollen können grafische Elemente das Storytelling unterstützen. Eine ansprechendere Präsentation von Informationen und Inhalten ist möglich, wenn bestimmte Elemente ausgewählt werden. Dies hat den sogenannten Joy of Use zwischen dem Besucher und der Webseite zur Folge. Nach der Logik der Präsentation fokussieren sich die OnePager auf eine erhöhte Interaktion.

• Das Storytelling: Das Storytelling gewinnt durch die Möglichkeiten, welche die OnePager in Hinblick auf die Technik bieten. Auf den einzelnen HTML-Seiten werden sämtliche Inhalte dargestellt. Der Besucher erhält dadurch den Eindruck, dass die Informationen inhaltlich zusammenhängen. Bei den Informationen ist ein roter Faden auszumachen, wodurch der Besucher die Botschaft schneller verinnerlicht.

Der Benutzer erforscht die Geschichte der Internetseite Stück für Stück durch die interaktiven Elemente und das Parallax Scrolling. So führt der Besucher eher die Handlungen, wie das Ausfüllen des Kontaktformulars oder die Produktbestellen, aus.

Wo OnePager eingesetzt werden

OnePager sind nicht für sämtliche Webseiten geeignet. Onlineshops müssen zum Beispiel mehrere Ebenen von Inhalten bereitstellen, um verschiedene Produktkategorien darstellen zu können. Zudem sollten Webseiten, welche thematisch breit aufgestellt sind, besser Multi-Page Designs nutzen, um verschiedene Inhalte und Themen abdecken zu können. OnePager können für Themen, welche lediglich begrenzte Informationen bieten und klar abgegrenzt sind, genutzt werden. Hierzu zählen unter anderen:

• Einführungen von Produkten
• Landingpages für einzelne Produkte und Dienstleistungen
• Online Visitenkarten für Freiberufler, kleine Firmen und Selbstständige
• Projekte und Veranstaltungen
• Werbekampagnen

Die Konzepte des Storytellings, dem Design und der Interaktivität, können abhängig vom Szenario unterschiedlich gestaltet werden. Wichtig dabei ist, dass sich die strategischen und konzeptionellen Überlegungen immer nach dem Inhalt der Seite richten. Die Inhalte und die technische Implementierung können sich gut ergänzen. Zudem sollte ein responsives Design bestehen, damit die Seite auf den unterschiedlichen Endgeräten optimal dargestellt wird.

Bedeutung im Online Marketing

Es gibt auch bei OnePagern bezüglich SEO einige Sachen zu berücksichtigen. Ein paar Aspekte der Semantik müssen von Anfang an ausgeschlossen werden. Bei OnePagern können in der Regel nur wenige Phrasen optimiert werden. Normalerweise ist es nicht möglich, Midtail- oder Longtail-Keywords vollständig abzudecken. Crawler müssen die Inhalte dennoch erreichen können. Die Crawlability und die Accessibility müssen daher, wie bei anderen Projekten, gegeben sein.

Die Länge des Contents ist ebenfalls relevant. Das Storytelling ist nur erfolgreich, wenn die Nutzer nicht durch die Inhalte überfordert sind. Die Inhalte müssen deshalb gut strukturiert sein. Hierfür können das Mark-Up von HTML5 und Selektoren von CSS verwendet werden. Inhalte können zum Beispiel durch Überschriften und Sektionen strukturiert werden. Die Benennung erfolgt durch CSS-Selektoren und Tags. Die Sprungmarken sollten immer klar bezeichnet werden, damit die Crawler und Nutzer wissen, wohin diese verweisen.

OnePager Beispiel

Ein gelungenes OnePager Beispiel findest du auf der Seite von „Urban Walks“. Dies ist eine App, welche Entdeckungstouren für New York anbietet. Die App wird auf der Webseite auf ansprechende und kreative Weise vorgestellt. Die Nutzer werden zum Call to Action geführt, bei dem der User die App herunterladen, die Seite auf soziallen Plattformen teilen und sich für den Newsletter eintragen kann.

Fazit zur Frage: Was ist ein Onepager?

Wenn OnePager optimal umgesetzt werden, können KPIs, wie die Interaktion der Nutzer, das Scrollverhalten und die Verweildauer eventuell erhöht werden. Laut Google muss dafür aber der OnePager tadellos umgesetzt sein. Der Erfolg ist hauptsächlich von dem Design, der generellen Implementierung und dem Thema abhängig. Bevor ein OnePager online geht, sollten umfangreiche Tests bezüglich dem Crawling stattfinden.