Schlagwort-Archiv: Flowtype

Werkstattbericht: Wie unsere Web-Reportage zum Mauerfall-Jubiläum entstanden ist

Vor einem Monat haben wir mit „Die Narbe der Stadt“ unter mauerweg.morgenpost.de eine umfangreiche Web-Reportage veröffentlicht. Hier wollen wir nun kurz beschreiben, wie wir die Geschichte umgesetzt haben.

Web-Reportage "Die Narbe der Stadt"

Screenshot der Web-Reportage „Die Narbe der Stadt“

Die Web-Reportage besteht aus zwei Abschnitten. Zuerst können unsere Leser erstmals Luftbilder vom April 1989, kurz vor dem Fall der Mauer, interaktiv erkunden. So kann sich der Betrachter ganz nah ins geteilte Berlin zoomen und bewegen, ähnlich wie bei „Google Maps“. Dem Nutzer zeigt sich eine nie dagewesene Perspektive auf die Stadt kurz vor dem Fall der Mauer.Dann beschreibt Reporterin Uta Keseling, was sie auf ihrer zehntätigen Radwanderung auf dem rund 160 Kilometer langen Mauerweg erlebt hat.

Was ist von der Mauer geblieben? Sind die Folgen der Teilung noch spürbar? Wie geht es den Menschen an der „Narbe der Stadt“? Das sind die Fragen, die die Reportage beantwortet. Etwa drei Wochen lang haben wir die rund 11.000 Wörter umfassende Geschichte fürs Web umgesetzt – aufbereitet in Text, Fotos, Karten und Videos.

Das Feedback auf die zehnteilige Reportage war überaus positiv. Sie wurde häufig geteilt und war mehrere Tage der meistabgerufene Artikel auf morgenpost.de. Gerade wurden wir damit für den Deutschen Reporterpreis nominiert.

Im Fokus: Text und Navigation

Von Anfang an haben wir den Fokus auf den Text gelegt. Er sollte von allen Elementen absolut im Zentrum stehen und maximal gut lesbar sein – auf Smartphones, Tablets, Laptops und Desktop-Rechnern. Dafür haben wir das Photoshop-Design von David Wendler per CSS im Code umgesetzt. Ein kleiner Trick: Um den Text auf manchen Browsern feiner darzustellen, haben wir die CSS-Regel -webkit-font-smoothing: antialiased; genutzt.

Flowtype sorgt für eine optimale Text-Darstellung

Flowtype sorgt für eine optimale Text-Darstellung

Um auf allen Bildschirmgrößen eine gut zu lesende Schriftgröße anzubieten, haben wir das Plugin „Flowtype.js“ benutzt. Damit werden immer zwischen 45 und 75 Zeichen pro Zeile – laut webtypography.net die ideale Anzahl von Zeichen – und die Schriftgröße responsive angepasst.

Da es sich um eine sehr lange Reportage handelt, geben wir dem Leser eine mit Leaflet umgesetzte Navigations-Karte und einen „Kilometerstand“ an die Hand. Die Berlinkarte zeigt dem Leser beim Scrollen immer genau an, von welcher Stelle die Reporterin gerade berichtet – und wie viele Kilometer noch vor ihr liegen. Jeder Abschnitt kann als Lesezeichen gespeichert und geteilt werden.

Begleitelemente: Fotos und Videos

Die Reporterin brachte jede Menge Instagram-Fotos von ihrer Reise mit. Da die Geschichte in der Ich-Perspektive geschrieben ist und viele persönliche Eindrücke und Anekdoten enthält, wollten wir unsere Fotoredaktion nicht zum Nachfotografieren schicken. Die Handy-Fotos waren authentisch und unterstrichen unserer Meinung nach die sehr persönliche Reportage. Um zu sehen, wie es an den jeweiligen Orten früher aussah, haben den Fotos der Reporterin Archivaufnahmen an die Seite gestellt. Video-Reporter Max Boenke steuerte Stills und Interviews bei. Letzte zeigten etwa die emotionalen Reaktionen von Zeitzeugen.

Technisch gesehen war es wichtig, dass nicht alle Elemente auf einmal laden, wenn der Nutzer die Seite aufruft. Vor allem mobil muss die Größe von Geschichten beschränkt werden. Alle Multimedia-Elemente sollten also dynamisch nachgeladen werden, sobald sie im Blickfeld des Nutzers erscheinen. Das Konzept nennt sich Lazy-Loading und es gibt etliche Plugins für Javascript, die sich darum kümmern. Wir haben uns für Lazy Load XT“ entschieden.

Interaktive Karte aus Luftbildern

Von Anfang an war uns klar: Wir brauchen einen außergewöhnlichen Einstieg in das Thema. Bei der Recherche entdeckten wir im Berliner Geodaten-Verzeichnis „FIS-Broker“ Luftbilder vom Mauerstreifen, die der West-Berliner Senat im April 1989 aus einem Flugzeug aufnehmen ließ. Seit etwa einem Jahr stehen Geodaten in Berlin als Open Data zur Verfügung. Die Daten (insgesamt 90 GB, mehr als 700 hochauflösendem TIFF-Dateien) haben wir persönlich mit einer Festplatte bei der Berliner Senatsverwaltung für Stadtentwicklung abgeholt.

Luftbilder gab's per Festplatte von der Berliner Behörde

Luftbilder gab’s per Festplatte von der Berliner Behörde

Mit dem Image Composite Editor von Microsoft (Danke für den Tipp, Achim Tack und Patrick Stotz von mappable.info) haben wir die vielen Luftaufnahmen zu einem großen Bild zusammengestitcht. Das dauerte beinahe 48 Stunden. Um aus diesem Bild eine interaktive Karte zu erstellen, musste es erst georeferenziert, also bestimmten Pixeln Koordinaten (in unserem Fall 50 willkürlich gewählte Punkte innerhalb West-Berlins) zugewiesen werden. Das wiederum haben wir mit der Open-Source-Software QGIS gemacht.

Auch dieser Rechenvorgang dauerte mehr als einen Tag. Als Ergebnis erhielten wir eine zwölf Gigabyte große GeoTIFF-Datei. Aus dieser wiederum mussten wir einzelne Kacheln, sogenannte Tiles, für verschiedene Zoomstufen erstellen, da ja nicht immer die gesamte Datei geladen werden kann. Dafür nutzten wir die Software Tilemill.

Dem zusammengefügten Luftbild werden Koordinaten mitgegeben

Dem Luftbild werden Koordinaten mitgegeben

Die Schwierigkeit dabei: Bei Tilemill dürfen lediglich 4GB große Dateien hochgeladen werden. Wir mussten unser GeoTIFF also vierteilen. Dafür nutzten wir das Command-Line-Tool GDAL. Bsp.: gdal_translate -srcwin 0 0 40933.5 16531.67 luftbild-original.tif luftbild-1.tif .

In Tilemill setzten wir diese vier Daten wieder zusammen und exportierten sie im .mbtiles-Format nach Mapbox. Von dort kommen auch die aktuellen Satellitenbilder, mit denen die Luftbilder verglichen werden können. Eingebaut in die Anwendung haben wir die Karte dann mit Leaflet.

Über Kritik, Hinweise, Anregungen, Fragen zu den einzelnen Arbeitsschritten freuen wir uns hier in den Kommentaren, per Mail, bei Twitter oder Facebook

Ein Beitrag von Julius Tröger und Moritz Klack