Scrollytelling mit WordPress

Aus MittelstandsWiki
Wechseln zu: Navigation, Suche

Luft holen und in die Welt der Longstory eintauchen

Florian Strohmaier, MittelstandsWiki

Von Dirk Bongardt

Im Internet lesen die Surfer nicht, sie scannen Websites bloß. Das ist eine der Erkenntnisse einer Studie von Jakob Nielsen aus dem Jahr 1997, die Studien in späteren Jahren immer wieder bestätigten. Daraus zu schlussfolgern, es sei sinnlos, Online-Beiträge mit langen Textpassagen zu veröffentlichen, wäre jedoch ein fataler Fehler.

So belegte eine Studie des Marketing-Unternehmens BuzzSumo aus dem vergangenen Jahr, dass die Häufigkeit, mit der ein Artikel über soziale Netzwerke geteilt wird, proportional zu seiner Länge ansteigt: Die am häufigsten geteilten Artikel hatten eine Länge von mehr als 3000 Wörtern (!), aber auch Artikel mit einer Länge zwischen 2000 und 3000 Wörtern schnitten noch vergleichsweise gut ab. Zu ganz ähnlichen Ergebnissen kommt SEOmoz.

Scrollytelling erzählt, zeigt und bewegt sich

Freilich ist es nicht damit getan, den Leser durch ermüdende Bleiwüste scrollen zu lassen. Wer sich mit den wortgewaltigen, wirklich guten Langstücken beschäftigt, von denen die Journalistin Sonja Kaute mehr als vierzig in einem Blog-Beitrag gesammelt hat, entdeckt schnell, wieso die Langform des „Scrollytelling“ nicht zu Nielsens Erkenntnis im Widerspruch stehen muss. Es sind eben nicht bloß lange Texte, sondern extrem gut erzählte Geschichten, die mit Bewegt- und Standbildern, mit O-Tönen und interaktiven Elementen medial angereichert sind. Oft standen den Autoren dabei ganze Teams von Programmierern zur Seite – aber solche Geschichten lassen sich meist auch mit kleineren Budgets erzählen.

Selbst anlaufende Audio-Einschübe, Videos über die volle Breite des Browser-Fensters, Umgebungskarten der Schauplätze, von Text umflossene Galerien und dergleichen mehr sind auch mit WordPress realisierbar – z.B. mit Plugin Aesop. Zusätzlich zu dieser kostenlos erhältlichen „Story Engine“ benötigt der Seitenbetreiber ein dazu kompatibles Theme. Die meisten für Aesop entwickelten Themes sind kostenpflichtig; für erste Versuche – die durchaus sehenswerte Resultate zeitigen können – eignet sich aber auch das Gratis-Theme Longform.

Story-langform-editor.jpg Longform-Funktionen: Komponente einfügen, Layout type und die Kartenansicht unter dem Editor. (Bild: Dirk Bongardt)

Beispiel Longform: die Langform in WordPress

Sind beide installiert, findet der Nutzer beim Erstellen eines Beitrags drei neue Elemente vor: Oberhalb des Editors hat sich zu der Schaltfläche „Dateien hinzufügen“ eine zweite gesellt, die „Komponente einfügen“ heißt. Außerdem findet sich unterhalb des Editors eine Kartenansicht, außerdem eine Layout-Auswahl, über die der Nutzer sich für eine Darstellung mit oder ohne Sidebar entscheiden kann.

Das wichtigste neue Element ist die Schaltfläche „Komponente einfügen“. Mit ihr lässt sich an der Cursor-Position eines von dreizehn Elementen in den Beitrag einfügen. Zunächst etwas irritierend sind die vielen Möglichkeiten, Bilder einzufügen:

  • Image fügt ein Bild in einer vom Nutzer festgelegten Breite in den Text ein. Bei einer Bildbreite von 100 % wird das Bild genau so breit dargestellt wie der Text.
  • Character fügt ein schmales Bild (im Theme Longform oval eingefasst) in den Text ein und soll etwa dazu dienen, Protagonisten der Reportage – oder den Autor des Beitrags – zu präsentieren.
  • Parallax fügt ein Bild ein, das die gesamte Breite des Browser-Fensters in Anspruch nimmt und sich beim Scrollen leicht gegenläufig bewegt.
  • Chapter fügt ein Bild – wahlweise auch ein Video – ein, das die gesamte Breite des Browser-Fensters in Anspruch nimmt, von einem Schriftzug überlagert wird und zugleich den Beginn des nächsten Kapitels markiert.
  • Gallery fügt kein einzelnes Bild ein, sondern eine individuelle Zusammenstellung von Fotos. Um eine Galerie einfügen zu können, muss man sie zuvor über den Menüpunkt „Galerien/Galerie hinzufügen“ zusammengestellt und benannt haben.

Story-langform-elemente.jpg Longform-Komponenten einfügen: 13 Elemente stehen zur Verfügung. (Bild: Dirk Bongardt)

Das Beitragsbild, das Sie in solchen Beiträgen festlegen, dient als Titelbild, wird ebenfalls in voller Fensterbreite dargestellt und vom Beitragstitel überlagert. Beim Scrollen des Beitrags blendet Aesop das Titelbild nach Weiß aus.

Audio, Video, interaktive Karten, Zeitleisten und mehr

Über die Komponente „Audio“ kann Aesop Audiodateien mit, aber auch ohne sichtbaren Player in einen Beitrag einbinden. Wird auf einen sichtbaren Player verzichtet, beginnt die Audiowiedergabe, sobald der Nutzer im Beitrag an die entsprechende Stelle gelangt, und sie verstummt, wenn die Datei komplett wiedergegeben wurde oder der Nutzer weitergescrollt hat.

Ähnliche Möglichkeiten bietet die Videowiedergabe. Damit lassen sich Videos von YouTube, Vimeo und anderen Plattformen einbinden, aber auch in der WordPress-Mediathek gespeicherte eigene Videos. Letztere lassen sich auf Wunsch automatisch starten, wenn sie sichtbar werden, und automatisch beenden, sobald der Nutzer sie aus dem sichtbaren Bereich scrollt.

Praktischer Tipp
Wer tiefer in die Longstory-Welt eintauchen will, wird sich nach und nach einige Fähigkeiten draufschaffen müssen. Gutes Scrollytelling erfordert nicht nur so viel Journalismus, dass eine gute Geschichte entsteht, sondern ein Gefühl dafür, wie sie im Zusammenspiel von Text, (Bewegt-)Bild und User-Interaktion funktioniert. Dazu braucht man ordentliche Kenntnisse in der Bild- und Videobearbeitung und irgendwann auch einen besseren Begriff davon, was eine passende Software dazu beitragen kann. Der beste (deutschsprachige) Start ist Matthias Eberls Blog Rufposten – der Freie Journalist gibt selbst regelmäßig Kurse zu Scrollreportagen, bleibt laufend am Thema dran und hat einen eigenen Scrollytelling-Tool-Test im Web.

Neben einer Kapiteleinteilung bietet Aesop auch die Möglichkeit, den Text unter zeitlichen Aspekten zu gliedern und entsprechende Markierungen einzufügen. Am Fuß des Beitrags erscheint dann eine Zeitleiste, über die der Nutzer die einzelnen Markierungen direkt anspringen kann.

Nicht ganz so viel Interaktivität bieten die Karten, die sich in den Text integrieren lassen. Immerhin kann der Nutzer die Kartenansicht skalieren und bewegen; es gibt aber keine korrespondierenden Textmarken, die sich über die Karten anspringen lassen.

Fazit: WordPress, das Lust auf mehr macht

Mit dem Plugin Aesop lassen sich Langstrecken gestalten, die einen bleibenden Eintrag hinterlassen – trotz der notorischen Ungeduld der meisten Websurfer. Dramaturgisch gesehen besteht Scrollytelling aus lauter interessanten Einstiegspunkten. Der Trick besteht darin, die Textstrecke mit Videos, Parallax-Bildern und interaktiven Elementen so abwechslungsreich aufzubauen, dass der Leser sie neugierig und mit Genuss „scannen“ kann.

Nützliche Links