06.05.2014

Pageflow: Storytelling für jedermann

Multimedia-Reportagen sind in – aber auch aufwändig zu machen. Um so praktischer, dass der WDR sein selbst gebautes Reportage-Werkzeug „Pageflow“ jetzt als Open-Source-Code zur Verfügung stellt.

Viel Bild, dezent eingesetzter Text, Navigation durch die Kapitel am rechten Rand: So sehen die Pageflow-Reportagen des WDR aus

Viel Bild, dezent eingesetzter Text, Navigation durch die Kapitel am rechten Rand: So sehen die Pageflow-Reportagen des WDR aus

Die Stage D platzt aus allen Nähten, mehr als 150 Leute wollen auf der re:publica mehr „Aus dem Arbeitsalltag moderner Geschichtenerzähler“ erfahren. Inspiriert von Multimedia-Reportagen wie Snowfall, keine Zeit für Wut und vor allem Firestorm hat die Online-Redaktion des WDR zusammen mit der Kölner Web-Agentur Codevise ein eigenes Storytelling-Tool für solche Reportagen entwickelt: Pageflow. Die Philosophie dahinter:

Jede Geschichte hat unterschiedliche Facetten, die es wert sind, unterschiedlich erzählt zu werden: Bilder, die beeindrucken. Zitate, die nachdenklich machen. Klänge, die bewegen. Worte, die es auf den Punkt bringen. Wenn all das zusammenfließt, entsteht eine völlig neue Form des Erzählens.

So steht es auf http://reportage.wdr.de/, der Seite, auf der fast alle Multimedia-Reportagen des WDR versammelt sind. Darunter auch  das Pionierstück: das Haldern-Pop-Festival, an dessen Beispiel die WDR-Redakteure Stefan Domke und David Ohrndorf die Funktionen von Pageflow demonstrieren. Geschichten werden hier in multimedial angereicherten Kapiteln erzählt. Vom Vorbild Firestorm inspiriert stehen großflächige Bilder oder (Hintergrund-)Videos im Zentrum jeder Seite, der begleitende Text ist am linken Rand angebracht. „Der User pickt sich das raus, was ihn interessiert, geht durch einzelne Kapitel“, erklärt Stefan Domke.

„Bei Videos ist HD Pflicht, nicht Kür“

Blick ins Backend von Pageflow: Links die Vorschau, wie der Text läuft, rechts die Editierfenster

Blick ins Backend von Pageflow: Links die Vorschau, wie der Text läuft, rechts die Editierfenster

Das Backend ist ziemlich intuitiv zu bedienen, wie es sich für ein gutes Web-CMS gehört. Per Knopfdruck kann man neue Seiten anlegen. Die wiederum lassen sich leicht mit Dachzeile, Titel und Text beschriften und editieren. Ein weiterer Button erlaubt den Upload von Bildern, Videos, Videoloops oder Grafiken. „Bei Videos ist HD Pflicht, nicht Kür“, sagt David Ohrndorf, „da es um eine bildschirmfüllende Darstellung geht.“

Von vornherein war WDR und Codevise wichtig, dass das Tool responsive ist, damit es auch auf mobilen Geräten gut nutzbar ist. Das haut wirklich gut hin, die Navigation ist als kleiner Icon rechts oben eingebaut und legt sich über die Startseite, sobald sie angeklickt wird.

so sieht  die Startseite einer Pageflow-Reportage auf einem Smartphone-Screen aus. Die Navigation ruft man über das Icon rechts oben auf.

so sieht die Startseite einer Pageflow-Reportage auf einem Smartphone-Screen aus. Die Navigation ruft man über das Icon rechts oben auf.

Auch die Bildausschnitte lassen sich im Backend konfigurieren: 16:9 für die breite Desktop-Darstellung oder 4:3 für hochformatige mobile Screens.

Da der WDR bislang erst neun Reportagen mit Pageflow gebaut hat, fehlt es noch an belastbaren Erfahrungswerten, gerade, was die Usability angeht. Versteht der User den Scrollmechanismus? Funktioniert die Navigation besser per Klick am PC oder per Wischen am Tablet? Wie lange verweilt der Nutzer wo, welche Elemente ziehen die stärkste Aufmerksamkeit auf sich? Fragen wie diese sollen mit einer Usability-Studie geklärt werden.

Pageflow funktioniert nicht für jedes Thema gleich gut. Das Umbauen von TV-Reportagen in Pageflow-Reportagen kann schwierig sein, besser funktionieren laut Domke Geschichten, die speziell für Pageflow konzipiert sind wie die Mountainbike-Story „Rasant durch den Wald„. Damit man nicht in den Wald kommt, „empfiehlt es sich bei der Planung, mit einem Storyboard zu arbeiten und dort festzulegen, welcher Inhalt auf welchen Seitentyp kommt“, sagt Stefan Domke. Die Abwechslung aus Foto, Text, Audio und Video macht eine gelungene Web-Reportage aus.

In Zukunft sollen auch noch Daten dazu kommen: Codevise arbeitet daran, dass sich auch Datawrapper-Grafiken einbauen lassen. Weitere Features, die in der Pipeline stecken:

  • Vorher-Nachher-Fotovergleich: Zwei Fotos, die im Abstand von einigen Jahren, von der exakt gleichen Perspektive aus aufgenommen worden sind, werden übereinander gelegt und lassen sich per Schieberegler direkt miteinander vergleichen
  • 360 Grad-Fotos, bei denen sich bestimmte Punkte markieren und mit einem Mehrwert-Link versehen lassen.

Der WDR will nun jedermann von der Entwicklung von Pageflow profitieren lassen, schließlich wurde das Programm mit Gebührengeld finanziert. Seit dem 5. Mai steht der Sourcecode unter www.pageflow.io zum Download zur Verfügung. Man sollte sich dazu allerdings mit der Programmiersprache Ruby auskennen und mit Servern umgehen können. Es kann lizenzfrei für eigene Websiten angepasst werden, „besonders interessant ist das kostenlose Werkzeug für Blogger und kleinere Web-Projekte von Initiativen, Verbänden oder Studenten“, schreibt der WDR in der zugehörigen Pressemitteilung. Und die Kölner haben auch nichts dagegen, wenn die Community Pageflow weiterentwickelt und eigene Features programmiert. Willkommen in der schönen neuen Reportagen-Welt!

Dieser Eintrag wurde veröffentlicht in: JOURNALISMUS & TECHNIK, NEU, Neue Formate
  • Über Bernd Oswald

    Bernd Oswald, Jahrgang 1974, ist Autor und Trainer für digitalen Journalismus. Mich fasziniert es, wie die Digitalisierung (nicht nur) den Journalismus verändert: mehr Quellen, mehr Transparenz, mehr Interaktion, ganz neue Möglichkeiten des Geschichtenerzählens, vor allem visuell und mit Daten. Über diese Phänomene schreibe, blogge, twittere und lehre ich seit 2009.

    Alle Beiträge von

0 Kommentare zu diesem Artikel


  1. Ich möchte das so gerne ausprobieren, kriege es aber nicht zum Laufen. Gibt es irgendwo eine Installations-Anleitung?

  2. Hi Inke, t3n gibt Tipps zur Installation: http://t3n.de/news/pageflow-interaktives-storytelling-543440/
    Die Installationsanleitung steht auf der Github-Seite von Pageflow:
    https://github.com/codevise/pageflow

    Viel Erfolg

    Bernd

  3. Page flow — eine super Sache!

  4. Vielen Dank Bernd für deine interessante Einführung ins PageFlow – einem gelungenen Beispiel für Multimedia-Storytelling! Was mich vor allem dabei überzeugt, ist die „mobile friendliness“. Ich habe mir gerade die Seite des Haldern-Pop-Festivals angeschaut: Schönes Design und sehr benutzerfreundliche Navigation. Welche Ziele digitales Storytelling verfolgt, verdeutlicht Social Media Manager Christian Spließ im Rahmen einer mehrteiligen Serie bei mir im Blog: http://socialmedia-blog.net/deutschland/der-homo-narraticus-warum-storytelling-kein-hype-ist/ Ich werde ihn fragen, ob er Interesse hat, im nächsten Beitrag auf das Thema „PageFlow“ einzugehen.


6 Trackbacks/Pingbacks

  1. Multimedia-Storytelling leicht gemacht – wenn man weiß wie… #r14 | weckenblog 07 05 14
  2. torial Blog | Structured Journalism: Journalisten als Bibliothekare 12 05 14
  3. Structured Journalism: Journalisten als Bibliothekare - Netzpiloten.de 14 05 14
  4. Medium | Marcus Bösch 28 06 14
  5. Video als Rich Media Inhalt | Rich Media auf WordPress.com 21 02 15
  6. Storytelling: Pageflow-Hosting ab 69 Euro pro Monat 10 02 18