KATAPULT-Magazin & KATAPULT-Verlag

In meinen ersten Wochen bei KATAPULT wurden die frisch gedruckten Hefte der aktuellen Ausgabe ins Büro geliefert, damals in die gemieteten Räume im Biotechnikum Greifswald. Alle KATAPULTis packten an: Heft und Versandzettel in einen Umschlag, Umschläge mit Schnur zu Bündeln, Bündel auf die Palette. Am Ende des Tages standen ein Dutzend Paletten im Foyer.

So lernte ich KATAPULT und sein Magazin kennen, das die Welt in Karten und Infografiken erklärt. Gegründet hatte es 2015 Benjamin Fredrich. Ich betreute den Shop über die Agentur, bei der ich damals arbeitete. Eine Stellenausschreibung gab es nicht. Von der Stelle bei KATAPULT erfuhr ich über Benni.

Ich war der erste Frontend-Entwickler bei KATAPULT. Es gab kein Designsystem, keine Komponenten, kein Stück wiederverwendbares CSS. Für mich war das eine spannende Ausgangslage: kein Altbestand, gegen den ich hätte arbeiten müssen. Mein erstes Projekt kam schon in der ersten Woche: eine Spendenseite für den KATAPULT-Wald. Sie war zugleich der Anlass, Styles zu schreiben, die über diese eine Seite hinaus gelten sollten.

Von Print ins Web – das Designsystem

Den Stil, den ich ins Web übersetzen wollte, hatte sich KATAPULT im gedruckten Raum erarbeitet: acht Farben, Oswald in den Überschriften. Auf dem Papier war das etabliert, es gab jedoch kein Äquivalent im Browser.

Also übersetzte ich das Vokabular des Magazins in Gestaltungswerte und zentralisierte sie: dreizehn JSON-Dateien mit Farben, Typografie, Abständen und Breakpoints. Ein Generator baute daraus SCSS-Maps, CSS Custom Properties, JSON und JavaScript. Dort lag auch die Grundschriftgröße: 16 Pixel bei 320 Pixeln Fensterbreite, 18 bei 1280, dazwischen linear – und weil alle Maße in rem standen, skalierte das Layout mit.

Mit jeder Website – der Spendenseite für den Wald, einem Linktree für Instagram, später der Verlagsseite – kamen Bausteine hinzu, die ich nicht zweimal bauen wollte. Unter der Haube wuchs aus dem Vokabular so ein Framework: Buttons, Tabellen, Akkordeons, Formulare, ein Layout-Raster aus Containern und Spalten, dazu Utility-Klassen für die Feinarbeit – Sass-Module, die zu einer einzigen CSS-Datei kompilierten.

Die acht KATAPULT-Farben lagen dort genau einmal. Änderte ich eine, zogen alle Websites nach.

Der Buchverlag für Sachbücher, Romane und Übersetzungen

Im September 2020 gründete KATAPULT einen eigenen Verlag. Die Website dazu baute ich aus demselben Designsystem: die Programmliste mit den Covern links, Beschreibungen und Bestellbuttons rechts. Sie sah vom ersten Tag an nach KATAPULT aus – katapult-verlag.de.

Die neue Magazin-Website

Die alte Website abzulösen war von Anfang an mein Hauptanliegen. Sie lief auf TYPO3 – genauer: zwei Websites, eine für mobile Geräte, eine für den Desktop, sodass Artikel doppelt verfasst werden mussten. Auf die Redaktion war davon nichts zugeschnitten. Das Designsystem stand inzwischen, es fehlte „nur“ noch die neue Website – die Inhalte migrieren, das Design entwerfen, das Ganze umsetzen.

Für mich bedeutet ein gutes CMS für eine Redaktion vor allem eines: Editor Experience. Ein solches CMS ist für Menschen gemacht, die täglich Artikel anlegen, Bilder setzen, Texte umbauen. Kirby CMS lässt sich genau darauf ausrichten.

Etwa die Hälfte der Entwicklungszeit floss in die Migration. Jeder Artikel musste aus dem WYSIWYG-Feld von TYPO3 in das Blockformat von Kirby, und was dort über die Jahre gewachsen war, hatte jede denkbare Form: verschachtelte Tags, halb geschlossenes HTML, dieselbe Auszeichnung auf mehreren Wegen. Mit regulären Ausdrücken sammelte ich die Fälle einzeln ein, bis die Konvertierung durchlief – für rund 1.200 Artikel, der älteste vom März 2015. Alte Links mussten weiter funktionieren; für Artikel, Kategorien und Bilder schrieb ich Weiterleitungen.

Die größte Herausforderung war gleichzeitig die größte Freude: das Design. Die Balance zwischen dem KATAPULT-Stil und einem modernen Onlinemagazin zu finden, brauchte Zeit. Als ich in den Flow kam, stand das Layout in etwa zwei Wochen.

Mockups gab es dabei keine. Benni und ich entschieden uns für eine agile gestalterische Entwicklung: Der technische Prototyp wuchs in Feedback-Zyklen zum fertigen Produkt. Dass ich so arbeiten durfte, lag an Benni – er gab mir die Freiheit, autonom zu entscheiden, und vertraute mir und meinen Fähigkeiten.

Ein Detail, das mir besonders am Herzen lag, war die Schrift für den Fließtext: Spectral, eine elegante und leserfreundliche Serifenschrift. Am Ende trug sie jede KATAPULT-Website.

Barrierefreiheit war dabei keine Nacharbeit. Im Designsystem lag neben den acht KATAPULT-Farben ein zweiter, kontrastkorrigierter Satz derselben Farben, als Theme umschaltbar. Und den Fokusrahmen zeigte die Website nur dem, der per Tastatur navigierte.

In der Instagram-Bio ließ sich nur ein Link teilen. Also baute ich katapult.link, eine kleine Linktree-Alternative im KATAPULT-Design: ein quadratisches Raster aus Kacheln. Sie lief in derselben Kirby-Installation wie das Magazin – im Artikelformular saß ein Schalter „Auf katapult.link“, standardmäßig an. Damit erschien jeder veröffentlichte Artikel automatisch als Kachel. Daneben ließen sich eigene Posts anlegen, für alles, was kein Artikel war.

Im Mai 2021 ging die neue Website live, wenige Monate, bevor ich schweren Herzens KATAPULT verließ. Aus der gUG war inzwischen eine gGmbH mit über dreißig Menschen geworden, dazu kamen eine Regionalzeitung und ein Café. Den Versand hatte da längst die Druckerei übernommen – fürs gemeinsame Anpacken im Büro war die Auflage zu groß geworden.

Mein einziges Foto von Angela Merkel

Am 4. Februar 2020 legte Bundeskanzlerin Angela Merkel den Grundstein für das Zentrum für Life Science und Plasmatechnologie in Greifswald – direkt neben dem Biotechnikum, in dem KATAPULT damals seine Büros bezog. Bei dieser Gelegenheit besuchte sie auch einige Firmen aus der Nachbarschaft, darunter KATAPULT.

Benni überreichte ihr das erste KATAPULT-Buch „100 Karten, die deine Sicht auf die Welt verändern“. Ich stand daneben – und schoss mein einziges Foto von der damaligen Bundeskanzlerin.