🚀 Buche dir jetzt deine unverbindliche und kostenlose Marktplatz Tour 📅

OnePager

Timo Gierse

Wiki

Kategorie

3 Kommentar(e)

Diskussion

OnePager sind Internetseiten, die ihre Inhalte für den Besucher auf nur einer einzelnen Seite darstellen und in der Regel aus einem HTML-Dokument aufgebaut sind. Zum Navigieren werden in der Regel Parallax Scrolling und Sprungmasken genutzt. So kann der Besucher der Seite entsprechende Abschnitte durch in der Navigationsleiste untergebrachte Links erreichen oder einfach nach unten scrollen. Weitere Bezeichnungen für den OnePage sind auch Single-Page Webanwendung oder Single-Page-Application.

Definition und Allgemeines

Internetseiten, die als Basis nur ein einzelnes HTML-Dokument aufweisen, unterscheiden sich stark von herkömmlichen Websites. Dies gilt vor allem bezüglich ihrer Infrastruktur und Informationsarchitektur. Die herkömmlichen Internetseiten werden als Multi-Page Applications bezeichnet.Hier erfolgt eine Strukturierung der Inhalte durch Unterseiten. Dies wird bei den OnePager durch Events und Sektionen übernommen. Sektionen können mit den unterschiedlichen Kapiteln eines Buches verglichen werden. Die einzelnen Sektionen werden von Besuchern durch das Scrollen erreicht. Sprungmarken, deren Funktion denen von normalen Hyperlinks in der internen Linkstruktur entspricht, können ebenfalls genutzt werden, damit der Besucher direkt den für ihn interessanten Inhalt erreichen kann. Das Verhalten innerhalb der Anwendung kann durch Events beeinflusst werden.

OnePager

Dies entspricht beispielsweise der Integration von Effekten, Animationen oder grafischen Elementen, durch welche die User Experience aktiv geprägt wird. So kann ein Pfeil den Nutzer zum Beispiel zum nächsten Themenabschnitt führen. Die Erzählstruktur der Internetseite wird durch die grafischen Elemente so unterstützt.

Ein OnePager macht die clientseitige Architektur in der Regel wesentlich komplexer, da hierfür spezielle Java Script Frameworks genutzt werden. Bekannte Single Page Frameworks sind beispielsweise

  • React
  • Vue
  • Angular

Mithilfe dieser Frameworks, sowie mit asynchronen Übertragungen von Daten können die interaktiven Anwendungen im Web entwickelt werden.

Die Rich Internet Applications benötigen nicht zwingend einen Austausch der Daten zwischen Server und Client. So können das Verhalten und bestimmte Events der Webanwendung bei vorher definierten Zuständen gesteuert werden und das dynamische Laden von Inhalten realisiert werden. Die Konsequenz ist eine gesteigerte Usability, sowie teilweise eine bessere Webseitenperformance.

Wie funktioniert ein OnePager?

Das Ziel eines OnePager ist, eine kohärente User Experience zu ermöglichen. Es gibt verschiedenen Leitideen, die dafür verfolgt werden müssen. Diese werden im Folgenden erläutert:

  • Das Parallax Scrolling: Wenn der Besucher auf der Webseite nach unten scrollt, ist die Geschwindigkeit, mit der sich die verschiedenen Ebenen der Seite bewegen, unterschiedlich. So entsteht ein Tiefeneindruck. Das Bild im Hintergrund bewegt sich während des Scrollens langsamer. Die Inhalte werden so in das Wahrnehmungszentrum des Nutzers gerückt.
  • Das Flat Design: Hierunter wird ein Gestaltungsprinzip verstanden, das sehr minimalistisch ist. Auf optische Verschnörkelungen wie Texturen, Schatten oder Verzierungen wird verzichtet und die Funktionalität wird in den Fokus gerückt. Vorteile, die dadurch entstehen sind beispielsweise eine höhere Übersichtlichkeit, eine Hervorhebung der Inhalte und verbesserte Ladezeiten der Webseite. Außerdem wird es dadurch einfacher, den Besucher zu einer Action zu führen. Der Call-To-Action kann unkompliziert eingebunden werden und so zu einer Erhöhung der Conversions beitragen.
  • Die Interaktivität: Wenn Animationen, Skripte oder andere Effekte in die Single-Page Anwendungen und OnePager eingebunden werden, kann so das Customer Engagement gefördert werden. Innerhalb des HTML-Dokumentes können die Nutzer durch unterschiedliche Aktionen die Internetseite nutzen und durch diese navigieren.

Wenn nach unten gescrollt wird, kann das Storytelling durch grafische Elemente unterstützt werden. Werden ausgewählte Elemente angewählt, ist eine ansprechendere Präsentation von Inhalten und Informationen möglich. Die Folge ist der sogenannte Joy of Use zwischen der Webseite und dem Besucher. Die Logik der Präsentation folgt bei den OnePagern der Fokussierung auf eine gesteigerte Interaktion.

  • Das Storytelling: Das Storytelling profitiert auf eine bestimmte Art und Weise von den Möglichkeiten, welche die OnePager in technischer Hinsicht bieten. Auf einer einzelnen HTML-Seite werden alle Inhalte dargestellt. Dadurch entsteht der Eindruck bei dem Besucher, dass die vermittelten Informationen inhaltlich zusammenhängen. So ist bei den Informationen immer ein roter Faden auszumachen, sodass die Nutzer die Botschaft schneller verinnerlichen.

Die Geschichte der Internetseite wird durch den Benutzer über das Parallax Scrolling und die interaktiven Elemente Stück für Stück erforscht. Handlungen, wie die Produktbestellung oder das Ausfüllen des Kontaktformulars, werden so eher von dem Besucher ausgeführt.

Wo werden OnePager eingesetzt?

Nicht für alle Webseiten ist ein OnePager geeignet. Beispielsweise sind Onlineshops darauf angewiesen, dass sie mehrere Ebene von Inhalten bieten, damit unterschiedliche Produktkategorien dargestellt werden können. Webseiten, welche thematisch sehr breit aufgestellt sind, bedienen sich ebenfalls besser Multi-Page Designs, damit sie die unterschiedlichen Themen und Inhalte abdecken können. Geeignet sind OnePager für Themen, die klar abgegrenzt sind und nur begrenzte Informationen bieten. Dazu zählen beispielsweise:

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

Abhängig von dem jeweiligen Szenario, können die Konzepte des Storytellings, der Interaktivität und dem Design verschiedenen gestaltet werden. Wichtig ist, dass sich die konzeptionellen und strategischen Überlegungen stets am Inhalt der Seite orientieren. Die technische Implementierung und die Inhalte können sich dabei gut ergänzen. Ebenfalls sollte ein responsive Design bedacht werden, damit die Seite auf allen Endgeräten optimal dargestellt wird.

Bedeutung für das Online Marketing

Auch bei OnePagern gibt es bezüglich SEO ein paar Dinge zu beachten. Es müssen einige Aspekte der Semantik von Beginn an ausgeschlossen werden. Die Optimierung von OnePagern beschränkt sich normalerweise nur auf wenige Phrasen, die Abdeckung von Longtail- oder Midtail-Keywords ist in der Regel nicht voll umfänglich möglich. Trotzdem müssen Crawler die Inhalte erreichen können. Deshalb muss die Accessibility und die Crawlability genauso gegeben sein, wie bei anderen Projekten auch.

Relevant ist auch die Länge des Contents. Erfolgreich ist das Storytelling nur dann, wenn die Inhalte den Nutzer nicht überfordern. Eine gute Strukturierung der Inhalte ist ein Muss. Dafür können Selektoren von CSS und das Mark-Up von HTML5 genutzt werden. So können Inhalte beispielsweise durch Sektionen und Überschriften strukturiert werden. Die Benennung erfolgt durch Tags und CSS-Selektoren. Sprungmarken sollten immer eine klare Bezeichnung tragen, damit Nutzer und Crawler genau erkennen können, wohin diese verweist.

Fazit

Findet eine optimale Umsetzung von OnePagern statt, dann können die KPIs unter Umständen erhöht werden, wie das Scrollverhalten, die Interaktion der Nutzer und die Verweildauer. Laut Google muss dafür aber die Voraussetzung gegeben sein, dass der OnePager einwandfrei umgesetzt ist. Abhängig ist der Erfolg vor allem von der generellen Implementierung, dem Design und dem Thema. Bevor ein OnePager online gestellt wird, sollten ausgiebige Tests bezüglich dem Crawling von Google durchgeführt werden.

3 Kommentare

Thomas Pagebach

Danke

Tim Weber

Super

Thomas Pagebach

Hae? Die CLIENTseitige Architektur wird durch eine ONEPAGE "reduziert"?? Das Gegenteil ist der Fall!
icon

Jan

Hallo Thomas, da hast du natürlich vollkommen Recht. Wir haben die entsprechende Passage korrigiert. Vielen Dank!

Leave a Reply to Thomas Pagebach Cancel reply

Your email address will not be published.

icon
icon

Jetzt kostenlos registrieren!

DEBUG
Ausschließlich für Geschäftskunden (B2B). Mit Absenden deiner E-Mail Adresse stimmst du unseren AGB und Datenschutzbestimmungen zu. Die Registrierung ist durch reCAPTCHA geschützt. Es gelten die Google Datenschutzerklärung und Nutzungsbedingungen.