Line

Scrollytelling ist schon länger in Mode.  Das türkische Programm Line verbindet eine scrollbare Zeitleiste mit einbettbaren Medien,  minimalistisches Design und simpler Bedienung.
(Update: 10.04.2015)

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

Line ist ein großartiges Programm. Edel im Design, leicht in der Bedienung und für Journalisten von nicht geringem Wert. Schwächen offenbart es bei der Individualisierung und der Einbettbarkeit in die eigene Webseite. Trotzdem: ausprobieren!

Es gibt einige Zeitstrahlprogramme auf dem Markt. TimelineJS aus der Knight Lab Schmiede ist wohl eines der Bekanntesten. Andere wie das Karten-Zeitleisten-Programm Timemapper haben wir bereits vorgestellt.

Fakten & Daten

Preis
Sprache

Lernzeit
Arbeitszeit
Ausspielart

Support

|
|

|
|
|

|

kostenlos
englisch, türkisch,
französisch, spanisch
10 Minuten
1 Stunde
URL, Embed-Code,
Twitter, Facebook
Mail


zum Tool

Doch eine Zeitleisten zum Scrollen fehlt uns bisher, zumal es derzeit im Trend liegt. Line.do ist ein solches. Und es ist eines der Guten. Obwohl es mit seinem mininmalistischem Design edel aussieht, ist es erstaunlich leicht zu bearbeiten. Zumal es sogar in der hier eingebetteten Version responsiv ist. Egal auf welchem Gerät Sie die Timeline betrachtet, sie passt sich den Erfordernissen des benutzten Browsers automatisch an. Da kann man nicht meckern.

Anschauungsbeispiel

 

Bedienung: Simpel und einfach

Öffne für eine neue Timeline Line.do und erstelle dir ein Konto. Bereits fertige Timelines von anderen Usern können dir einen ersten Eindruck der Möglichkeiten geben. Hast du dich sattgesehen, klicke auf Create und füllen Sie entsprechenden Felder (Titel, Titelbild, Kategorie) aus. Danach gelangst du in ein übersichtliches Content Management System. In der linken Spalte kannst du neue Zeit-Ereignisse hinzufügen. In der mittleren entscheidest du über Datum, Überschrift, Begleittext und die einzubettenden Medien. Zur Auswahl stehen dir hier unter anderem Bilder, die du lokal hochlädst. Das Programm unterstützt übrigens auch GIFs, sodass du beispielsweise bewegte Infografiken einbauen kannst. Eine Anleitung wie du solche erstellst, findst du hier. Desweiteren sind natürlich auch Videos am Start. Du kannst Youtube-, Vine-, Vimeo- und Dailymotion-Tubes einbauen.

Für Audios kannst du nur auf den Marktführer Soundcloud zurückgreifen. (Update: Mittlerweile ist es auch möglich Spotify-Links einzupflegen.) Auch ist es möglich Tweets einzubinden. Leider erschöpfen sich hier Lines Social Media-Fähigkeiten. Accounts einzubinden, ist uns nicht gelungen und andere Netzwerke sind ganz ausgeschlossen. (Update: Hier haben die Entwickler ebenfalls nachgebessert. Das Programm unterstützt nun auch Instagram, Tumblr, Flickr und kurioserweise auch Line-Links. Zudem gibt es die Option weitere nicht normierte Links einzufügen, wie wir es ganz unten in der Beispiel-Timeline gemacht haben. Wenn du mit deiner Domain eine Bilddatei verknüpft hast, wird diese standardmäßig geladen. So erscheint als Bild von "Bleiwüsten" ganz von alleine. Zudem können alle Medien mit einem Google- oder Foursquare-Standort verknüpft werden.)

Line passt sich dem Display an

In der rechten Spalte siehst du nach dem Ausfüllen der Felder einen Preview deines jeweiligen Ereignis-Posts. Wichtig sind zudem noch jene unscheinbaren grünen Buttons unten in der mittleren Spalte, mit denen du bestimmst, wie groß dein Medium im Post angezeigt werden soll. In der kleinen Vorschau wirkt sich die Einstellung nicht aus. Erst wenn du die Gesamtvorschau öffnest, siehst du die Größe der Darstellung. Ist der Bildschirm Ihres Users zu klein, werden deine Eingaben zuweilen überschrieben (was gut ist), für Großformate aber kannst du dich zwischen einer kleinen und einer maximierten Ansicht entscheiden. Vor allem Bilder konnen hierdurch großformatig ihre Schönheit entfalten, während verpixelte Vorschauen von Videos dank dieser Einstellung kleiner und ästhetischer dargestellt werden.

In der Header-Leiste ist es dir möglich, die gesamte Timeline als Preview zu sehen. Allerdings öffnet sich die Voransicht im selben Tab. Das ist leicht unpraktisch, aber erträglich. Den Rückweg must du aber wahrscheinlich erst suchen. Um zurück in den Bearbeitungs-Modus zu gelangen, gilt es, auf den kleinen Bleistift oben rechts zu klicken. Das ist nicht ganz intuitiv zu finden.

Es ist vollbracht, was nun?

Hast du alle Einträge fertig geschrieben – Änderungen können selbst nach der Veröffentlichung und späteren Einbettung in Webseiten noch gemacht werden –, klicke auf Publish. Nun ist die Zeitleiste online. Du kannst sie nun über Facebook oder Twitter direkt in die Sozialen Medien einspeisen. Interessanter für Journalisten sind jedoch die anderen beiden Optionen. So werden dir nach einem Klick auf die entsprechenden Button die URL bzw. ein Einbettungscode ausgespruckt.

Tricks für Pros
Jede URL einer fertigen Timeline endet auf "/horizontal". Tauschst du dies durch "/vertical" aus, erhältst du eine vertikale Zeitleiste, die du genauso einbetten kannst. Wahrscheinlich handelt es sich dabei um ein noch geheimes Entwicklerprojekt.

Ich empfehle hier die Advanced-Variante, da die Basic-Option bei uns in Firefox und Chrome unerklärlicherweise von alleine nach unten scrollte. Diesen Code kopierst du an die gewünschte Stelle deines Artikels. Willst du den kleinen Rahmen um Ihre Timeline loswerden, ändere die Rahmenbreite auf 0px oder pass seine Farbe deinem Hintergrund an (Weiß ist beispielsweise #ffffff). Empfehlenswert ist es zudem, das Fenster, in dem deine Timeline erscheint, exakt so groß zu machen, wie dein Zeitstrahl lang ist.

So scrollt der User nicht innerhalb der Seite. Ändere hierfür den Wert height. Um die exakte Pixelzahl herauszubekommen, wirst du sicher ein wenig probieren müssen. Für die obige Timeline "Das große Sterben" lag sie bei 8000. Zudem ist es sinnvoll die Zeitleiste auf der gesamten Breite Ihrer Webseite darzustellen. Hierfür stellst du die width auf 100%.

Pro

Nun, das Ergebnis spricht für sich selbst. Das Programm ist nicht nur leicht zu bedienen, sondern sieht am Ende auch gut aus. Es ist minimalistisch, lenkt nicht vom Inhalt ab und wird sich in das Layout der meisten Seiten gut einfügen. Die wichtigsten Medien können über die großen Plattformen eingefügt werden und bisher hat es uns auch nicht gestört, dass den Machern Facebook scheinbar zu unbedeutend ist. Anders als beispielsweise TimelineJS erledigt man seine Arbeiten innerhalb des Programms und nicht in einem externen Google Spreadsheet. Das spart Zeit und ist sicherer, zumal Sie die eingebetteten Medien nicht auf Ihrem Server hosten müssen, um sicher zu gehen, dass sie nicht eines Tages gelöscht werden.

Kontra

So weit so gut. Viel zu meckern gibt es nicht. Dafür sieht das Programm auf den ersten Blick einfach zu gut aus. Auf den zweiten melden sich jedoch leichte (!) Zweifel. Denn Möglichkeiten seine Zeitleiste ein wenig zu layouten gibt es nicht. Nada. Keine Farben kann man ändern, keine Styles auswählen. Gegenüber Line.do sind Instagramm-Filter eine Eruption an Individualität. Das schmerzt.

Bleiwüsten abonnieren:

Fazit & Alternativen

Zeitleisten bieten sich für die tägliche Arbeit von Journalisten erstaunlich oft an. Ob zum 70. Geburtstag der CDU oder einer Chronologie zur Fertigstellung des BER im Jahre 2034.

coole Beispiele

Doch jede Line-Zeitleiste ist nur so gut, wie die in ihr eingebetteten Medien. Diese aufzubereitetn kostet Zeit. Umso erfreulicher, dass das Erstellen der eigentlichen Timeline dann schnell von der Hand geht. Einen Wunsch an die Entwickler hätten wir dann aber doch noch: Besser als die Zeitleiste über einen Embed-Code in die Seite einzufügen, wäre ein echter Export, der es dem User gestattet seine Line direkt in die Seite einzubauen.

Andere vertikale Timelines haben wir bisher noch nicht getestet. Aber wer eine horizontale Version in Betracht zieht, sollte sich Timemapper oder StoryMap JS anschauen. Beide legen den Fokus zusätzlich zur Zeitleiste auf Karten bzw. Gigapixel-Hintergründe. Vor allem StoryMap JS ist ein mächtiges, aber auch anspruchsvolles Programm.