OnePager

Ein OnePager, auch One Pager, "Einseiter" oder Single Page Website, ist eine Webseite, die Inhalte auf einer einzigen Seite anzeigt.

Was ist ein OnePager?

OnePager sind Internetseiten, die ihre Inhalte für den Besucher auf nur einer einzelnen Seite darstellen. In der Regel bestehen sie aus einem HTML-Dokument. 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 "Einseiter" sind auch Single-Page Webanwendung oder Single-Page-Application.

Hintergrund

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 beim OnePager durch Events und Sektionen übernommen. Sektionen sind mit den unterschiedlichen Kapiteln eines Buches vergleichbar. Die einzelnen Sektionen können Besuchern durch Scrollen erreichen. 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.

Dies entspricht beispielsweise der Integration von Effekten, Animationen oder grafischen Elementen, die sich positiv auf die User Experience auswirken können. So kann ein Pfeil den Nutzer zum Beispiel zum nächsten Themenabschnitt führen. Die grafischen Elemente unterstützen somit die Erzählstruktur der Internetseite.

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 ist ein "Einseiter" aufgebaut?

Weil ein OnePager die Infos in reduzierter Form parat hält, ist sowohl bei der inhaltlichen Gestaltung als auch bei der grafischen Umsetzung Sorgfalt angebracht. Schließlich soll der Unique Content leicht verständlich sein.

Inhaltliche Gestaltung

Der begrenzte Platz eines OnePagers erfordert es, sich auf die wesentlichen Aspekte zu konzentrieren. Dazu gehören ein Überblick über das Thema, wichtige Fakten und Statistiken, zentrale Begriffe und Konzepte sowie eine Zusammenfassung der wichtigsten Erkenntnisse und Schlussfolgerungen. Oft werden auch prägnante Zitate und Literaturhinweise eingebunden. Verzcihte auf überflüssige Informationen - vor allem in Textform.

Um die Informationsaufnahme so einfach wie möglich zu gestalten, sollte die Sprache leserfreundlich und verständlich sein. Eine lernerzentrierte Sprache mit kurzen, übersichtlichen Sätzen und ohne komplexe Satzkonstruktionen ist empfehlenswert. Die direkte Ansprache des Lesers mit "du", "Sie" oder "wir" kann ebenfalls hilfreich sein. Außerdem sollte die Sprache möglichst konkret und bildhaft sein, z.B. durch den Einsatz von Metaphern oder Vergleichen.

Darüber hinaus ist es wichtig, die Zielgruppe des OnePagers im Blick zu haben. Das verwendete Vokabular sollte den Nutzern vertraut sein, dagegen haben unnötige Fachbegriffe keinen Platz. Sofern relevante Fachbegriffe nötig sind, solltest du sie kurz erklären.

Die Reihenfolge spielt ebenfalls eine entscheidende Rolle, weil sie die User Experience wesentlich beeinflusst. Der Aufbau deiner Inhalte sollte strategisch, intuitiv und logisch sein. Der "über uns"-Bereich oder das Impressum mit den Kontaktdaten des Unternehmens gehören entweder an den Anfang oder aber ganz ans Ende deiner One Page Webseite. Dazwischen kommen dein Produkt/Service, ein Call-to-Action (CTA), Testimonials, ein FAQ-Bereich und/oder eine Fotogalerie einsetzten.

Optische Gestaltung

OnePager werden in der Regel im Format DIN A4 oder Letter gestaltet und können sowohl im Hoch- als auch im Querformat ausgeführt werden. Bei der Anordnung der Inhalte sollte die Leserichtung berücksichtigt werden, sodass wichtige Informationen im oberen Bereich platziert werden.

Da das Design maßgeblich das Verständnis der Leser beeinflusst, gelten die grundlegenden Prinzipien der Multimedia-Gestaltung. Dazu gehört die Strukturierung der Seite durch thematische Blöcke, die optisch voneinander getrennt werden, z.B. durch Weißraum, Linien oder Umrahmungen. Wichtige Informationen wie Überschriften oder Kernbegriffe sollten visuell hervorgehoben werden, etwa durch Farbgestaltung, Schriftgröße oder Textfettung. Das Design sollte generell minimalistisch und gut strukturiert sein.

Bei der Farbwahl ist es wichtig, aufeinander abgestimmte und thematisch passende Farben zu verwenden. Innerhalb eines OnePagers oder einer Sammlung thematisch zusammengehöriger OnePager sollten die gleichen Farben für identische Elemente genutzt werden.

Das Zusammenspiel von geschriebenem Text und Visualisierungen kann den Informationstransfer deutlich verbessern. Daher sollten Icons, Grafiken und Diagramme zur prägnanten Veranschaulichung von Informationen eingebunden werden. Bekannte und eindeutig interpretierbare Symbole sind dabei hilfreich.

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, können grafische Elemente das Storytelling unterstützen. 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 kommen OnePager zum Einsatz?

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 Webcrawler 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

Mit einem guten OnePager kannst du deine KPIs steigern - das Scrollverhalten, die Nutzer-Interaktion und die Verweildauer legen im Idealfall zu. Laut Google muss dafür aber die One Page Website einwandfrei umgesetzt sein. Abhängig ist der Erfolg vor allem von der generellen Implementierung, dem Design und dem Thema.