Ostohlo — unsere eigene Seite, nach demselben Standard gebaut

01Projektübersicht

ostohlo.com ist die eigene Website des Studios, und sie steht aus demselben Grund auf dieser Liste wie die anderen: Sie wurde so entworfen, gebaut und wird gewartet, wie wir es für unsere Kunden tun. Seiten leben in einer Datenbank und werden von unserer eigenen Engine gerendert; Vorlagen bleiben in Dateien; die Benutzeroberfläche ist ein von Grund auf neu geschriebenes Designsystem und kein irgendwo gekauftes Thema.

Es ist auch ein funktionierendes Produkt, keine Visitenkarte. Es gibt kostenlose Tools, die keine Anmeldung erfordern, einen Projektkalkulator, ein Partnerprogramm mit drei Ebenen und einem eigenen Dashboard sowie einen Blog, der sich in drei Sprachen von unserer Plattform speist.

02Warum eine Studio-Website schwierig ist

Eine Studio-Website hat keinen Eigentümer, der sich beschwert. Sie wird zwischen Kundenprojekten geschrieben, und jede Abkürzung darin überdauert Jahre: eine Sprache, die zurückgeblieben ist, eine Seite, die niemand wagt zu bearbeiten, weil sie handgeschriebenes HTML ist, eine Galerie von Arbeiten, die nicht mehr zu den Arbeiten passt.

Wir hatten genau diese Geschichte. Die Website begann als statische Dateien, und die erste Migration in eine Datenbank zeigte die Kosten dafür: Der Vergleich des sichtbaren Textes sagte, dass alles übereinstimmte, während Hunderte von Seiten stillschweigend ihr Stylesheet-Bündel verloren hatten. Seitdem ist hier die Regel, dass eine Änderung durch eine Messung nachgewiesen wird, nicht durch das Aussehen der Seite.

03Projektziele

• Inhalte in einer Datenbank und Vorlagen in Dateien, sodass eine Textänderung keinen Entwickler erfordert;
• drei Sprachen, die sich niemals unterscheiden: ein Schlüssel, der zu einer hinzugefügt wird, wird in derselben Aufgabe allen dreien hinzugefügt;
• ein eigenes Designsystem — Bewegung, WebGL-Szenen und Typografie, die zu dieser Marke gehören;
• Tools, die wirklich nützlich und wirklich kostenlos sind, ohne dass etwas serverseitig gespeichert wird;
• ein Partnerprogramm mit echten Zahlen in einem Dashboard, nicht ein Versprechen auf einer Landingpage;
• messbare Qualität: Layout bis zu 320 px, sauber strukturierte Daten, keine defekten Links.

04Die Engine: Seiten in einer Datenbank

Jede Seite — ein Dienst, eine Fallstudie, ein Artikel, ein rechtlicher Text — ist eine Zeile: Pfad, Sprache, Titel, Beschreibung, Text, strukturierte Daten, Veröffentlichungsflags. Ein Einstiegspunkt rendert es mit einer nach Art gewählten Vorlage, und der gemeinsame Kopf- und Fußbereich stammt aus Dateien, die ein Generator schreibt, sodass das Erscheinungsbild von dreihundert Seiten an einem Ort geändert wird.

Die Subtilität liegt im Dateisystem, nicht im Code: Der Webserver gibt jede Datei aus, die auf der Festplatte existiert, und fällt erst dann auf die Anwendung zurück. Eine Datei mit dem Namen einer alten Seite in das öffentliche Verzeichnis zu legen, würde diese Seite stillschweigend von der Datenbank abklemmen — genau das ist die Art von Fehler, die nirgendwo eine Fehlermeldung hinterlässt.

05Drei Sprachen, Englisch an der Wurzel

Englisch lebt im Wurzelverzeichnis, Russisch unter /ru/, Ukrainisch unter /uk/. Welche Sprache im Wurzelverzeichnis sitzt, ist an genau einer Stelle im Code vermerkt, und das Frontend kennt dieselbe Tatsache aus einer Konstante — ein Check vergleicht sie, denn zwei Antworten auf diese Frage sind, wie halbübersetzte Seiten entstehen.

Schnittstellenstrings sind ein Wörterbuch mit sprachspezifischen Bündeln, und die Regel ist absolut: Ein Schlüssel, der einer Sprache hinzugefügt wird, wird in derselben Aufgabe allen drei hinzugefügt. Ein fehlender Schlüssel löst keinen Fehler aus, er zeigt dem Leser die falsche Sprache – die teuerste Art von Stille.

06Ein eigenes Designsystem

Die aktuelle Schnittstelle ist die vierte Generation dieser Seite und wurde von Grund auf neu geschrieben: Tokens, Typografie, Komponenten, Bewegung und eine Reihe von WebGL-Szenen, die hinter den Hero-Blöcken sitzen. Quellen leben an einem Ort und werden in gehashte Bündel kompiliert; das manuelle Bearbeiten der kompilierten Datei würde einfach beim nächsten Build verloren gehen, also gibt es nichts, worüber man streiten könnte.

Bewegung ist hier immer aktiv – kein reduzierter Bewegungsmodus – was eine bewusste Entscheidung des Eigentümers ist, und es kommt mit einer Pflicht: Alles muss bei 320 px weiterhin lesbar und erreichbar sein, und jede Erscheinungsanimation muss tatsächlich abgeschlossen werden. Beides wird von einer Probe überprüft, die die Seite zweimal scrollt und auf die Enthüllung wartet, denn ein Block, der nie erscheint, ist unsichtbar für einen Screenshot, der zu früh aufgenommen wird.

07Kostenlose Tools, die nichts speichern

Sieben kleine Werkzeuge: ein Passwortgenerator und ein Leak-Check, ein QR-Generator, ein UTM-Builder, ein Slug-Maker, ein Zeichen-Zähler und ein Telefon-Checker. Keine Anmeldung, kein Konto, und – der Teil, der zählt – keine serverseitige Speicherung. Was ein Werkzeug sich merkt, merkt es sich im eigenen Browser des Besuchers, und nur die Einstellungen, niemals den Inhalt.

Der Leak-Check ist das klarste Beispiel: Er sendet das Passwort niemals. Nur ein kurzer Präfix seines Hashes verlässt den Browser, und die Antwort wird lokal zusammengestellt, was den Unterschied zwischen einem nützlichen Werkzeug und einer schön gestalteten Möglichkeit zur Sammlung von Passwörtern ausmacht.

08Partnerprogramm mit echtem Dashboard

Drei Ebenen von Empfehlungen: Ein Partner verdient an den Kunden, die er bringt, an den Partnern, die diese Kunden bringen, und an der Ebene darunter. Das Dashboard zeigt, was tatsächlich passiert ist — Klicks nach Kampagne, Registrierungen, Accruals — und es ist über einen Link mit einem Token erreichbar, anstatt über ein Passwort, das sich niemand merken würde.

Der Token wird aus der Adresse entfernt, bevor die erste Anfrage gesendet wird, die Anfragen tragen keine Anmeldeinformationen und keinen Referrer, und der Demomodus berührt niemals den Server. Ein Partnerbereich ist ein Ort, an dem Geld angezeigt wird; es sollte nicht der Ort sein, an dem ein Link das Konto leckt.

09Ein Blog, der sich selbst füllt

Artikel kommen von Astrina — unserer eigenen Plattform — über einen signierten Endpunkt: ein Material, drei Sprachversionen, jede landet in ihrem eigenen Sprachbaum mit wechselseitigen Alternativen. Bilder werden lokal abgerufen und gespeichert, anstatt hot-linked zu sein, und die Blog-Indexkarte für diesen Artikel wird im gleichen Durchgang geschrieben.

Automatisierung wie diese ist der Ort, an dem leiser Schaden entsteht, daher normalisiert der Intake, was er erhält: interne Links werden in die Sprache des Artikels umgeschrieben, und Links, die als rohes Markdown belassen werden, werden in echte umgewandelt. Die Regel ist einfach — ein Leser der russischen Version darf niemals über einen Link, der im Quelltext nur gut aussieht, zur englischen Seite geschickt werden.

10SEO, GEO und die Maschinenleser

Jede Seite trägt einen Titel, eine Beschreibung, eine kanonische Adresse, wechselseitige Alternativen für alle drei Sprachen plus eine Standardversion, Open Graph und strukturierte Daten — und all dies wird von einem Ort aus gedruckt, denn Seiten, die für ihre eigenen Metatags verantwortlich sind, sind Seiten, die sie vergessen.

Für Maschinenleser gibt es eine Zusammenfassungsdatei, die die Abschnitte, die Produkte und die Sprachen auflistet, die aus der Datenbank zusammengestellt wurden, anstatt von Hand geschrieben zu werden: die handgeschriebene hatte monatelang die falsche Anzahl an Produkten angegeben. Sitemaps — Seiten und Bilder — werden jede Nacht neu erstellt, und alles, was sich geändert hat, wird den Suchmaschinen im gleichen Durchlauf angekündigt.

11Formulare, Mail und die Außenwelt

Das kurze Formular ist der einzige Ort auf der Website, an dem Geld beginnt, daher ist es der am stärksten geschützte: eine Methode zur Zulassungsliste, ein Honeypot, pro Adresse und globale Ratenlimits, Größenprüfungen für jedes Feld und ein Anhang, der nach seinem tatsächlichen Inhaltstyp und nicht nach seinem Namen akzeptiert wird. Die Anfrage wird in die Datenbank geschrieben, bevor etwas gesendet wird, denn ein verlorener Brief darf nicht einen verlorenen Kunden bedeuten.

Alles, was die Seite nach außen sendet — E-Mails, Benachrichtigungen, externe Anrufe — geht über einen Proxy und schlägt fehl, wenn dieser Proxy nicht verfügbar ist. Die eigene Adresse des Servers erreicht keine Dritten, und Briefe werden von einem Postfach gesendet, das die Aufzeichnungen der Domain tatsächlich autorisieren.

12Technologie-Stack

• PHP 8.4 und MariaDB: Seiten in der Datenbank, Vorlagen in Dateien, ein Einstiegspunkt;
• ein eigenes Designsystem — Tokens, Komponenten, Bewegung, WebGL-Szenen, kompiliert in gehashten Bundles;
• drei Sprachen mit sprachspezifischen Wörterbuch-Bundles und einer Paritätsprüfung;
• kostenlose Tools, die im Browser geschrieben sind, ohne dass etwas serverseitig gespeichert wird;
• eine Partner-Engine mit drei Empfehlungsstufen und einem tokenbasierten Dashboard;
• ein unterzeichneter Intake für Artikel von Astrina, unsere eigene Analyse, unser eigenes Werbenetzwerk nur im Blog.

13Das Ergebnis

Eine Seite, auf der eine Textänderung eine Bearbeitung in einem Panel ist, nicht ein Deployment; wo drei Sprachen auf dem gleichen Niveau bleiben, weil die Regel in der gleichen Aufgabe durchgesetzt wird; wo der Arbeitsbereich aus einem Register generiert wird, sodass das Hinzufügen eines Falls nicht dazu führen kann, dass die Hälfte der Seite eine alte Anzahl angibt.

Und eine Seite, die wie ein Kundenprojekt gemessen wird: jede veröffentlichte Adresse beantwortet, interne Links ohne Weiterleitungen oder Fehler, ein Titel und eine Beschreibung pro Seite, Bilder in ihrer eigenen Sitemap deklariert und das Layout bis zu 320 px in allen drei Sprachen überprüft.

14Erkenntnisse

Eine eigene Seite nach dem Standard zu erstellen, den man verkauft, ist unangenehm, und das ist der Punkt: jede Abkürzung, die man hier genommen hätte, ist eine, die man für einen Kunden nehmen könnte. Unsere hat uns drei Dinge beigebracht.Setzen Sie den Inhalt dorthin, wo die Menschen, die ihn schreiben, ihn erreichen können. Machen Sie die Sprachen zu einer Regel, nicht zu einer Absicht — alles andere driftet innerhalb eines Monats.Beweisen Sie Änderungen mit Messungen: diese Seite hat einmal einen visuellen Vergleich bestanden, während Hunderte ihrer Seiten ihre Stile verloren hatten.

Wenn Sie eine Website möchten, die ein Produkt und kein Prospekt ist — mit Werkzeugen, einem Dashboard, mehreren Sprachen und einer Benutzeroberfläche, die Ihnen gehört — genau das machen wir.