--- title: "Wer pflegt die Seite, wenn ich weg bin — und welche Karte lädt in China" description: "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." url: https://riteshkc.com.np/de/case-studies/marti-china source: https://riteshkc.com.np/de/case-studies/marti-china.md updated: 2026-07-01 site: "Ritesh KC" --- # Wer pflegt die Seite, wenn ich weg bin — und welche Karte lädt in 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. - Project: [Marti China](https://riteshkc.com.np/de/work/marti-china) - Year: 2026 - Role: Full-Stack-Entwickler - Stack: Next.js, React, TypeScript, Tailwind CSS, Strapi, Baidu Maps - Published: 2026-07-01 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. > Screenshot (home hero): Startseite von Marti China über einem Foto einer Besprechung, mit der Zeile Swiss Engineering Excellence und einem Button Explore Services. ## 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. > Screenshot (product catalogue): Produktseite: links eine mitlaufende Leiste mit fünf Kategorien, rechts das Raster der Tragrollen und ein Button zum Datenblatt-Download. — Fünf Kategorien, 49 Produkte, ein Template. Die Leiste ist ein Anker je Kategorie. Legt der Kunde das fünfzigste Produkt an, ist die Seite bereits geschrieben. > Screenshot (product page): Produktseite Carrying Idlers: links eine nummerierte Bildspalte, rechts Kategorie, Name und Beschreibung. — Die 49. Produktseite und die erste sind dieselbe Datei. ## 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. > Screenshot (project map): Projektseite: eine Baidu-Karte von Europa mit chinesischer Beschriftung, darüber ein Panel mit Referenzprojekten nach Land und Jahr. — Baidu statt Google. Die Leser sitzen zuerst in Festlandchina. 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. > Screenshot (project selected): Dieselbe Karte nach Auswahl der Referenz Follo Line: die Karte ist nach Norwegen geschwenkt, die Zeile in der Liste ist hervorgehoben. — Eine Referenz auswählen schwenkt die Karte. Liste und Karte sind eine Auswahl. 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. > Screenshot (language toggle): Die geöffnete Sprachumschaltung im Header, EN ausgewählt, SC daneben. — Englisch und vereinfachtes Chinesisch, pro Feld im CMS statt pro Seite. ## 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. > Screenshot (quality inspection): Abschnitt Quality Inspection: vier nummerierte Karten über einem Foto zweier Prüfer, von Wareneingang bis Prüfbericht. ## 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. > Screenshot (not found): Die 404-Seite der Website: die Ziffern 404, die Zeile Page Not Found und ein Button zurück zur Startseite. 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. > Screenshot (inquiry form): Kontaktseite: links E-Mail und Telefon, rechts ein technisches Anfrageformular nach Name, Firma, E-Mail, Standort, Projektart und Spezifikation. — Sechs Felder. Das letzte fragt nach Leistung, Gurtbreite, Steigung und Betriebsbedingungen. 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.