Wer pflegt die Seite, wenn ich weg bin — und welche Karte lädt in China
part of Marti China
Zwei Monate an Unternehmensseite und Produktkatalog für die China-Tochter eines Schweizer Tunnelbau-Zulieferers. Entschieden haben das CMS, das Katalog-Template und der Kartenanbieter.
- problem
- Marti China brauchte eine Seite, die das eigene Team in Zhongshan pflegen kann — Produktkatalog, Referenzprojekte und Leistungsseiten, auf Englisch und Chinesisch, ohne Entwickler.
- meine rolle
- Full-Stack-Entwickler
- ergebnis
- Eine Next.js-Seite über selbst gehostetem Strapi. Das Team legt ein Produkt, ein Projekt oder eine Leistung an, und die Seite existiert. Die Projektkarte läuft auf Baidu und lädt in Festlandchina.
- stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Strapi
- Baidu Maps
Marti China ist die China-Tochter der Marti Technik AG, Teil einer Schweizer Baugruppe, die seit 1922 in Familienbesitz ist. Das Unternehmen fertigt Förderanlagen und Stahlbauteile für den Tunnelbau — Trag- und Rücklaufrollen, Rollenstationen, Fördermodule, Stahlbau — in einem Werk in Zhongshan, Guangdong. Die Seite hatte vier Aufgaben: sagen, was das Unternehmen verkauft, sagen, was es kann, zeigen, wo die Bauteile bereits laufen, und eine technische Anfrage entgegennehmen.
Das Design lag fertig vor. Zwei Monate, ein Entwickler, Frontend und CMS.
Warum Strapi, und wogegen es sich durchsetzen musste
Die erste Anforderung war kein Feature. Sie lautete: Niemand soll anrufen müssen, um ein Produkt anzulegen, eine Spezifikation zu korrigieren oder einen Tippfehler zu beheben. Das entscheidet über den Stack, bevor irgendetwas anderes es tut.
Vier Dinge mussten gleichzeitig gelten. Das Team in Zhongshan pflegt alles selbst. Jedes Feld existiert zweimal, einmal auf Englisch und einmal auf Chinesisch. Der Katalog ist relational — ein Produkt gehört zu einer Kategorie, ein Projekt trägt Land und Koordinate —, er braucht also Content-Types und keinen Page Builder. Und alles davon muss aus Festlandchina erreichbar sein.
Die letzte Bedingung streicht die gehosteten Optionen. Contentful und Sanity könnten diese Inhalte sauber modellieren. Ihre APIs und ihre Bild-CDNs stehen außerhalb des Landes, und ich kann einem Einkäufer in Shenzhen nicht zusichern, dass sie antworten. Antworten sie nicht, rendert die Seite mit Löchern.
Markdown-Dateien im Repository scheitern an der ersten Bedingung: Ein korrigierter Tippfehler wird zu einem Pull Request und einem Deployment, also genau zu dem, was der Kunde vermeiden wollte. WordPress könnte die Inhalte tragen, aber das Frontend ist Next.js. WordPress wäre damit ein zweiter Rendering-Stack, den man nur wegen seiner Admin-Oberfläche am Leben hält, mit der zweiten Sprache als Plugin obendrauf.
Strapi läuft selbst gehostet auf der Maschine des Kunden: Die API sitzt hinter nginx auf einer eigenen Subdomain, direkt neben der Seite, die sie beliefert. Die Lokalisierung ist ein Kernfeature pro Feld, kein Plugin. Und die Admin-Oberfläche ist ein schlichtes Formular. Genau das gibt man jemandem, der die Dokumentation nie lesen wird.
Neunundvierzig Produktseiten, die niemand geschrieben hat
Fünf Kategorien: Tragrollen, Rollenstationen, Fördermodule, allgemeiner Stahlbau, Sonderanlagen. Neunundvierzig Produkte darunter.
Niemand baut neunundvierzig Seiten von Hand. Es gibt einen Content-Type und ein Template: Bilderserie, Kategorie, Beschreibung und verwandte Produkte aus derselben Kategorie. Die Katalogseite stapelt alle fünf Kategorien mit einer mitlaufenden Leiste links und einem Anker je Kategorie, damit ein Link auf Fördermodule zeigen und auch dort landen kann. Jeder Kategoriekopf trägt einen Datenblatt-Download, weil der Leser ein PDF für den Einkauf weiterreichen will.
Legt der Kunde das fünfzigste Produkt an, ist die Seite bereits geschrieben.
Die Karte muss Baidu sein
Die Projektseite ist das Verkaufsargument. Marti-Bauteile laufen in siebzehn Tunnelprojekten in zwölf Ländern — Gotthard, Brenner, Follo Line, Grand Paris Express, Changi Terminal 5, Coca Codo Sinclair. Als Liste gelesen ist das eine Wand aus Namen. Auf einer Karte ist es eine Aussage über Reichweite.
Google Maps ist keine verlässliche Wahl für eine Seite, deren Leser zuerst in Festlandchina sitzen. Die Karte läuft deshalb auf Baidus BMapGL. Ein Panel mit Referenzen schwebt darüber; wählt man eine aus, schwenkt die Karte und die Zeile wird hervorgehoben. Liste und Karte sind eine Auswahl und nicht zwei Widgets, die sich zufällig eine Seite teilen.
Baidu bringt zwei Kosten mit, die man benennen sollte. Die Kacheln sind chinesisch beschriftet, was für den ersten Leser richtig ist und für den europäischen eine Kuriosität. Und Baidu nutzt ein eigenes Koordinatensystem: Ein aus Google kopiertes Koordinatenpaar sitzt ein paar hundert Meter neben dem gemeinten Punkt. Koordinaten sind hier Inhalt — sie gehen mit dem Projekt nach Strapi —, sie müssen also bei der Eingabe stimmen und nicht im Browser korrigiert werden.
Die Kontaktseite zeigt dieselbe Karte mit einer Nadel auf dem Werk in Zhongshan.
Zwei Sprachen, und der Umschalter sagt EN und SC
Chinesisch ist keine Übersetzungsschicht über einer englischen Seite. In Strapi ist es ein zweiter Wert auf jedem lokalisierten Feld. Die Seite existiert damit zweimal, und beide Sprachrouten sind heute live.
Die chinesischen Einträge schreibt der Kunde. Das ist der Zuschnitt der Arbeit: Ich habe die Oberfläche für beide Sprachen gebaut, die Worte darin gehören ihm.
Ein Stylesheet, keine Komponentenbibliothek
Das Design stand vor dem ersten Commit fest. Die CSS-Arbeit bestand also darin, es zu benennen, nicht es zu erfinden: eine Typo-Skala, eine feste Palette — Anthrazit, Cloud White, eine Haarlinie in Grau, Marti-Blau — und Tailwind-Utilities, die aus diesen Namen entstehen. Kein Komponenten-Kit. Eine Bibliothek hätte bedeutet, auf jedem Screen fremde Defaults zu überschreiben, um bei einem Design anzukommen, das längst entschieden war.
Die Seiten, die nicht im Briefing stehen
Ein Briefing listet die Startseite und die Produktseiten. Der Rest ist das, was daraus eine Seite macht, in der jemand arbeiten kann. Eine 404-Seite, die den Weg zurück anbietet. Datenschutz und AGB. Ein Footer, der den ganzen Katalog wiederholt, weil dort sucht, wer bis nach unten gescrollt hat. Ein Kontaktband am Fuß jeder Route, damit die Anfrage nie mehr als einen Scroll entfernt ist.
Das schwebende Kontakt-Widget ist ein WeChat-QR-Code und keine Chat-Blase aus einem westlichen SaaS — aus demselben Grund, aus dem die Karte Baidu ist.
Wo es gelandet ist
Neun Seiten-Templates, dazu 404, Datenschutz und AGB. Neunundvierzig Produktseiten, vier Leistungsseiten, siebzehn Referenzprojekte, zwei Sprachen und ein Kontaktformular, das nach Gurtbreite und Steigung fragt statt nach einer Nachricht.
Ein Produkt, eine Referenz oder eine Leistung anzulegen ist heute ein Formular und kein Deployment. Alles oben ist der Preis für diese eine Anforderung.