Website-Relaunch für eine Kreativagentur

Die Herausforderung

Eine Kreativagentur wird an ihrem eigenen Auftritt gemessen. Der bestehende war über Jahre gewachsen, und dieses Wachstum hatte zwei Spuren hinterlassen: Der Bestand an Cases und Beiträgen ließ sich nicht mehr sauber pflegen, und jedes neue Layout bedeutete Arbeit an der Vorlage statt Arbeit am Inhalt.

Der Anspruch an den Relaunch war deshalb nicht nur ein neues Design. Die Redaktion sollte einen Case aus Bausteinen zusammensetzen können, ohne dass für jede Variante ein Entwickler gebraucht wird, und der vorhandene Inhalt sollte vollständig mitkommen statt in einem Archiv zu enden.

Unser Ansatz

Das Frontend ist eine Astro-Anwendung mit serverseitigem Rendering, Vue für die interaktiven Teile, und bewusst ohne CSS-Framework. Die Layouts aus Figma skalieren proportional über vw und calc() aus der Designbreite, und die Komponenten reagieren über Container Queries auf ihren eigenen Platz statt auf die Fenstergröße. Das ist der Unterschied zwischen einer Komponente, die überall im Raster funktioniert, und einer, die nur an ihrem vorgesehenen Ort passt.

Die Inhalte liegen in Directus. Cases sind dort keine festen Vorlagen, sondern eine Folge von Blöcken über eine Many-to-Any-Beziehung: Text, Text mit Bild, einzelne Medien, Galerie. Die Redaktion stellt daraus zusammen, was der jeweilige Case braucht. Ein neuer Blocktyp ist eine neue Collection plus eine Astro-Komponente, kein Eingriff in bestehende Seiten.

Die Migration der über 80 Beiträge lief skriptbasiert statt von Hand, damit sie nach jeder Schemaänderung wiederholbar blieb. Das war nötig, weil die alten Inhalte nicht eins zu eins passten: Über 300 Text-über-Bild-Kombinationen wurden in getrennte Text- und Medienblöcke zerlegt, Elemente mit mehreren Bildern zu Galerien zusammengefasst. Eine einmalige Handmigration hätte nach der ersten Modellkorrektur von vorne begonnen.

Die Ergebnisse

Ausgeliefert wird über drei Umgebungen: Entwicklung, Demo und Produktion, jeweils als eigener Kubernetes-Namespace, mit Helm ausgerollt und über GitLab-Pipelines gebaut. Dev und Demo liegen hinter Basic Auth, sodass Zwischenstände mit dem Kunden abgestimmt werden können, ohne öffentlich zu sein.

Der eigentliche Gewinn zeigt sich nicht am Launch-Tag, sondern danach: Ein neuer Case entsteht in der Redaktion aus vorhandenen Blöcken, und ein neues Layout ist ein zusätzlicher Baustein statt ein Umbau. Genau das war der Grund, warum der alte Auftritt schwer zu pflegen war.