Digitales Story-Telling

Onepager lassen Geschichten lebendig werden: Wir zeigen Ihnen, mit welchen Werkzeugen ein perfekter Onepager entsteht und wie Sie von einer Onepager-Website profitieren können.

Onepage-Websites im Überblick

Keine Unterseiten, keine unübersichtliche Navigation: Onepager sind die Antwort auf das Bedürfnis der User nach strukturiert aufbereiteter und auf das wesentliche konzentrierter Information. Sie präsentieren den gesamten Content auf einer einzigen, nach unten durchlaufenden HTML-Website. Durch das Zusammenspiel von Text, Animationen und Grafiken schaffen sie ein besonders genussvolles Leseerlebnis und eröffnet neue Wege der Kommunikation.

Technik

Onepager ermöglichen Story-Telling par excellence. Damit aus dem Besuch einer Onepage-Website ein unvergessliches Erlebnis wird, sind solides handwerkliches Geschick sowie der Einsatz verschiedener Werkzeuge gefragt.

Bild: Story Telling - Hupe

Story-Telling

Wenn Produkte lebendig werden

Onepager erzählen auf einfache, elegante Art die Geschichte eines Produkts, einer Anwendung oder einer Kampagne. Durch das Zusammenspiel von Text, Grafik und Animation entsteht ein ganz besonderes Leseerlebnis, welches nicht durch Unterseiten gestört wird.

  • Moderne und kurzweilige Produktpräsentation
  • Ungestörter Lesefluss
  • Intensive User Experience
Mehr erfahren

Story-Telling

Wenn Produkte lebendig werden

Onepager ermöglichen es auf einfache, elegante Art die Geschichte eines Produkts, einer Anwendung, einer Kampagne oder auch einer spannenden Reise mit dem Segelboot über den Atlantik zu erzählen. Für den User gibt es einen definierten Anfang und ein Ende, der Lesefluss wird nicht durch Unterseiten unterbrochen. Im Zusammenspiel von Text, Grafik und Animation entstehen definierte Passagen oder Kapitel, die alle Informationen optisch strukturieren und so ein ganz besonderes Leseerlebnis schaffen.

Nicht zu jeder Website und jedem Unternehmen passt das Konzept eines Onepagers. Dennoch: Bei genauerem Hinschauen liegen überall kleine, spannende Geschichten verborgen, die erzählt werden wollen. Mit dem nötigen Expertenwissen lassen sich einzelne Unterseiten einer Corporate Website als Onepager gestalten, die auch über eine eigene URL erreichbar sind. Diese Seiten bieten den nötigen Raum, um die Unternehmenshistorie oder auch die Entstehungsgeschichte eines einzelnen Produktes zu erzählen, ohne die Struktur der gesamten Unternehmenswebsite in Frage zu stellen.

Bild: Responsive Design - Zirkel

Responsive Design

Optimale Darstellung – nicht nur auf Mobile Devices

Eine optimale Performance, unabhängig vom verwendeten Endgerät, ist das Ziel des Responsive Webdesigns. Schon in der Konzeption werden Inhalte intelligent strukturiert, damit sie später immer perfekt dargestellt werden können.

  • Optimale Darstellung durch innovatives Interface Design
  • Keine Ladezeiten durch Scrollen statt Klicken
  • Sprungmarken ermöglichen Wechsel zwischen Kapiteln
Mehr erfahren

Responsive Design

Optimale Darstellung – nicht nur auf Mobile Devices

Responsive Webdesign ist nicht die pixelgenaue Anpassung einer Site an verschiedene Bildschirmgrößen. Es bedeutet vielmehr das intelligente Strukturieren von Inhalten für unterschiedliche Endgeräte wie Desktop-PCs, Tablets und Smartphones. Hier treffen sich Responsive Webdesign und Onepager und bilden ein starkes Team.

Beim Responsive Webdesign für Onepager geht es daher nicht darum, Inhalte für unterschiedliche Devices ein- oder auszublenden. Vielmehr werden diese bereits in der Konzeption so angelegt und strukturiert, dass das Nutzererlebnis stets das Gleiche bleibt. Kernelement ist dabei ein innovatives Interface Design, welches sich dem jeweiligen Endgerät automatisch anpasst.

Gleichzeitig werden Inhalte nicht durch klicken, sondern durch scrollen erreicht. Auf diese Weise entfallen lästige Ladezeiten, der Anwender bleibt immer auf derselben Seite und kann mittels Sprungmarken dennoch zwischen den Kapiteln wechseln.

Bild: Animation - Barometer

Animationen

Nutzer-Leitsystem statt technischer Spielerei

Die Darstellung vieler Informationen in Form von Bildern und Grafiken auf nur einer Seite birgt stets die Gefahr der Unübersichtlichkeit. Per CSS oder JavaScript animierte Elementen schaffen Struktur und unterstützen den User.

  • Animationen und Grafiken unterstützen Orientierung
  • Smooth Scroll macht Navigation nachvollziehbar
  • Zeitverzögertes Einblenden von Elementen betont Inhalte
Mehr erfahren

Animationen

Nutzer-Leitsystem statt technischer Spielerei

In den Stärken eines Onepagers liegen auch seine Schwächen: Da alle Informationen auf nur einer Seite dargestellt werden, besteht immer die Gefahr, dass sie unübersichtlich wirken. Diese Kritik ist berechtig, wenn dem User bei der Orientierung nicht geholfen wird.

Das Animieren von Elementen auf einem Onepager, sei es per CSS-Animation oder JavaScript (z.B. jQuery), ist darum keine technische Spielerei sondern elementar für eine gute User Experience. Auch wenn es beim Betrachten nicht bewusst auffällt, dienen Animationen und Grafiken der Orientierung und unterstützen den Story-Telling-Ansatz.

Eine bekannte und äußerst beliebte Animation ist der "Smooth Scroll". Anstatt sich mühsam von einem Ende des Onepagers zum Anderen durchzuscrollen, klickt der Leser einfach auf den entsprechenden Link innerhalb der Navigation. Dank Smooth Scroll springt die Ansicht jedoch nicht einfach direkt an die betreffende Stelle, sondern animiert eine Scroll-Bewegung. Dies visualisiert dem User, dass er sich auf der Seite bewegt und nun einen oder mehrere Abschnitte übersprungen hat. Für ihn wird die Navigation so nachvollziehbar und der Kontext der Inhalte bleibt erhalten.

Ein weiteres empfehlenswertes Mittel ist das zeitverzögerte Einblenden von Elementen. Anstatt den Leser auf einmal mit dem gesamten Content zu konfrontieren, baut der Onepager die Inhalte Schritt für Schritt auf. Diese Methode führt den Blick des Lesers von Element zu Element und betont besonders relevante Absätze oder Grafiken.

Bild: Bookmarks - Lampe

Bookmarks

Wichtigen Content wiederfinden und teilen

Dank Bookmarks können bestimmte Informationen jederzeit schnell wieder abgerufen oder mit anderen geteilt werden. Je genauer Bookmarks gesetzt werden können, desto höher ist der Lese- und Bedienkomfort einer Website.

  • Direktes Ansteuern relevanter Passagen durch Bookmarks
  • Deeplink-Generierung durch Fragment Identifier
  • Generierung kapitelgenauer Bookmark-URLs
Mehr erfahren

Bookmarks

Wichtigen Content wiederfinden und teilen

Bookmarks sind nicht mehr wegzudenken. Sei es, um zu einem späteren Zeitpunkt eine bestimmte Information schnell wieder abrufen zu können oder um diese mit anderen zu teilen. 45 Prozent aller Social Media-User nutzen Soziale Plattformen, um Links mit ihren Followern schnell und unkompliziert zu teilen. Dieser Umstand verdeutlicht die Notwendigkeit, für Onepager eine Methode zu finden, möglichst genaue Bookmarks setzen zu können.

Auch hier liegt die besondere Herausforderung einmal wieder in der besonderen Struktur eines Onepagers: Eine Bookmark der URL (z.B. www.onepager.de) führt stets an den Beginn der Seite. Besser jedoch ist es, direkt bestimmte Passagen oder Abschnitte mit einem Lesezeichen versehen zu können, so dass der User ein bestimmtes Kapitel bei Twitter oder Facebook empfehlen kann.

Hierzu werden „Fragment Identifier" (Element der URL nach der Raute, auch Anker genannt) verwendet um Deeplinks zu erzeugen. Der User kann dann beispielsweise direkt den Link "www.onepager.de#bookmarks" empfehlen und der Aufruf dieser URL führt direkt und komfortabel zum entsprechenden Kapitel.

Um die Funktionsfähigkeit dieses Prinzips durchgehend zu ermöglichen, muss der Anker nicht nur beim Klick auf die Navigation, sondern auch beim Scroll angepasst werden. So konserviert die URL permanent den aktuellen Leseabschnitt und dem Leser eine optimale Usability geboten, ohne das er sich über das Thema Gedanken überhaupt machen muss.

Bild: SEO und Tracking - Mikroskop

SEO, Code und Tracking

Ein Blick unter die Haube: Über HTML-Semantik und Klick-Tracking

Natürlich können Onepager auch für Suchmaschinen optimiert (SEO) werden. Eine Suchmaschinen-Optimierung ist aber nur dann erfolgsversprechend, wenn sich alle Inhalte um ein Thema drehen, so dass sich automatisch eine hohe Keyword-Dichte und damit eine hohe Relevanz ergibt.

  • Fokussierung auf ein Thema unterstützt hohe SEO-Relevanz
  • Besondere HTML-Struktur für optimale SEO-Performance
  • Tracking-Tools für detaillierte Besucher-Auswertung
Mehr erfahren

SEO, Code und Tracking

Ein Blick unter die Haube: Über HTML-Semantik und Klick-Tracking

Immer wieder kommt die Frage auf, ob Onepager auch für Suchmaschinen optimiert (SEO) werden können. Die klare Antwort ist: "Ja, aber…". Eine Suchmaschinen-Optimierung ist immer dann erfolgsversprechend, wenn der Onepager für seinen eigentlichen Zweck eingesetzt wird, nämlich dem Erzählen von EINER Geschichte, dem Vorstellen von EINEM Produkt oder dem Bewerben von EINEM Event. Da sich alle Inhalte um ein Thema drehen, ergibt sich automatisch eine hohe Keyword-Dichte und damit eine hohe Relevanz.

Abgesehen vom Content spielt aber natürlich auch die HTML-Struktur eine bedeutende Rolle. Die Verwendung von H-Tags (<h1>, <h2>, usw.) in hierarchischer Reihenfolge sowie das Abgrenzen von einzelnen Sektionen durch HTML5 Tags (<article> und <section>. usw.) unterstützen nicht nur die optische Strukturierung eines Onepagers. Sie signalisieren vor allem auch den Suchmaschinen, dass sich die Einzelseite aus mehreren, unabhängig voneinander auszuwertenden Kapiteln oder Passagen zusammensetzt, was wiederum entscheidend für die SEO-Performance einer Seite ist.

Zuletzt ist die Suchmaschinenoptimierung natürlich auch stets eng mit dem Tracking von Besucherdaten verbunden. Um eine detaillierte Auswertung von Onepagern mit z.B. Google-Analytics zu ermöglichen, gibt es Mittel um die Seiten anzupassen. Mit Tools wie Event-Tracking oder Custom Tracking ist es mögliche, detaillierte Daten zu erfassen, zu erkennen, dass ein User die Seite besucht hat und auch welche Sektionen er besonders häufig ansteuert.

Best Practice

Genug der Theorie, nun zur Wirklichkeit: Nachfolgend haben wir unser Meinung nach starke Beispiele gesammelt, die das Prinzip Onepager gestalterisch und technisch überzeugend umsetzen und so zu einem völlig neuen Surferlebnis führen.

Atterwasch − a scroll doc

Bild: Screenshot atterwasch.net

Ein herausragendes Beispiel für Story-Telling im modernen Webdesign. Eine Dokumentation über die Geschichte des Dorfes Atterwasch als interaktive Onepage-Website.

World of Swiss

Bild: Screenshot world-of-swiss.com

Die schweizerische Fluggesellschaft bietet mit einem ungewöhnlichen, höchst innovativen Onepager einen Blick hinter die Kulissen.

BrightMedia

Bild: Screenshot brightmedie.pl

Onepager der in Warschau ansässigen Agentur BrightMedia, der vor allem durch seine tollen Animationen und die farbliche Gestaltung für sich einnimmt.

Die Experten

Die helllicht medien GmbH ist eine Agentur, spezialisiert auf Interface Design und Web Development. Wir sind die Macher von onepager.de. Für unsere Auftraggeber aus Industrie, Mittelstand und der Kreativbranche konzipieren und realisieren wir digitale Produkte.

Die helllicht medien GmbH bietet für Onepager:

Beratung & Strategie

Sind Sie neugierig, ob ein Onepager auch im Rahmen Ihrer Kommunikationsstrategie einsetzbar ist? In einem persönlichen Beratungsgespräch nehmen wir Ihre Zielsetzungen gerne genauer unter die Lupe und erarbeiten mit Ihnen ein erfolgsversprechendes Modell.

Konzept, Struktur & Content

Nicht jedes Konzept funktioniert und nicht jeder Content überzeugt auch den User. Wir sehen es als unsere Aufgabe als Agentur gemeinsam mit unseren Auftraggebern Onepager zu entwickeln, die Inhalte und Botschaften direkt zum Zielgruppe transportieren.

Interface Design & Umsetzung

Ein Onepager ist mehr als nur eine lange HTML-Seite. Es ist das perfekte aufeinander abgestimmte Zusammenspiel aus Konzepten, Techniken und Content, das einen Onepager ausmacht. Einige der grundlegenden Konzepte haben wir Ihnen vorgestellt, einen Großteil unseres Knowhow behalten wir uns für unsere Auftraggeber vor.

Sie haben Interesse an einem Onepager?

Nehmen Sie Kontakt mit uns auf!