Die einzige Arbeit hier, die du selbst prüfen kannst.
Diese Seite — statisch, ohne Build-Schritt, mit einem CMS, das die Texte ins Markup zurückschreibt. Gebaut mit Claude Code.
Die Ausgangslage
Zwölf Fallstudien über Konzepte, die andere umgesetzt haben. Eine Lücke.
In den meisten Fallstudien hier steht ein Satz wie „Die Umsetzung habe ich nicht mehr begleitet“. Das stimmt und gehört dazugesagt — es lässt aber eine Frage offen, die berechtigt ist: Kommt am Ende auch etwas heraus, das läuft?
Diese Seite ist die eine Arbeit, bei der die Antwort nicht behauptet werden muss. Sie liegt offen: Quelltext ansehen, Farbmodus umschalten, JavaScript abschalten und nachsehen, ob sie noch bedienbar ist.
Die Vorgabe an mich selbst war entsprechend eng. Kein Framework, kein Build-Schritt, keine Abhängigkeiten — was im Verzeichnis liegt, ist das, was ausgeliefert wird. Das ist unbequemer, als es klingt, und macht jede Entscheidung nachlesbar.
Was ich beigetragen habe
Konzept, Gestaltung, Umsetzung und Texte. Gebaut mit Claude Code.
- Rolle
Konzept, Gestaltung, Umsetzung und sämtliche Texte
- Werkzeug
gebaut mit Claude Code — Entscheidungen und Ton von mir
- Zeitraum
2026, laufend
- Bausteine
Der Weg dorthin
Acht Schritte. Drei davon sind Korrekturen an dem, was vorher falsch war.
-
.01
Ohne Build-Schritt bauen
HTML, CSS und JavaScript, sonst nichts. Kein Bundler, keine Pakete, keine Übersetzung vor dem Hochladen. Der Preis dafür ist echt: Inhalte stehen doppelt, einmal im Markup und einmal als Daten. Wie das zusammengehalten wird, ist der Rest dieser Fallstudie.
-
.02
Eine Quelle für Farben und Maße
Alle Farben, Schriften und Abstände stehen in einer einzigen Datei. Kein Hex-Wert steht anderswo, und eine Suche im Projekt muss leer bleiben. Der Dunkelmodus belegt ausschließlich diese Werte neu — kein einzelnes Bauteil bekommt eine Sonderregel. Die Signalfarbe wechselt dabei von Orange auf ein Grüngelb, weil Orange auf dunklem Grund seine Leuchtkraft verliert.
-
.03
Ein CMS, das ins Markup zurückschreibt
Ich wollte Texte ändern können, ohne im Quelltext zu arbeiten — die Seite sollte trotzdem statisch bleiben. Also rendert das CMS nicht beim Aufruf, sondern schreibt die Änderung in die HTML-Datei zurück. Der Rundlauf Markup zu Daten und zurück ist byte-identisch, sonst wäre er nicht zu gebrauchen.
-
.04
Merken, dass die Hälfte fehlte
Der Rückschreiber kam später als der Rest. Vorher gab es eine API, die brav gespeichert meldete, während die Website unverändert blieb — die Änderung landete in der Datenhaltung und kam dort nie wieder heraus. Aufgefallen ist das erst beim Nachsehen auf der echten Seite. Eine erfolgreiche Antwort ist kein Beleg dafür, dass etwas passiert ist.
-
.05
Das Überschreiben absichern
Ein Rückschreiber, der Markup ersetzt, kann Struktur zerstören. Deshalb verweigert er das Speichern, wenn im Zielfeld etwas steht, das im neuen Wert fehlt. Beim ersten Lauf hat die Sperre sechsmal angeschlagen und dabei zwei echte Fehler im Markup gefunden, die sonst beim ersten Speichern verschwunden wären. Beim Filtern der erlaubten Auszeichnung kam dazu, dass die naheliegende Funktion Attribute an erlaubten Tags stehen lässt — ein Klickfänger in einem Textfeld wäre durchgekommen.
-
.06
In der richtigen Maschine messen
Zwei Fehlermeldungen kamen aus Safari, gemessen wurde in Chromium, und beide Male sah dort alles richtig aus. Seitdem gibt es ein kleines Werkzeug, das eine Seite in derselben Maschine lädt wie Safari. Der Fall, für den es gebaut wurde: Eine Rasterspalte ergab dort 124 Pixel statt 32, und die Menütaste auf dem Handy war entsprechend breit.
-
.07
Saubere Adressen wieder aufgeben
Adressen ohne Dateiendung waren gebaut und mussten zurückgebaut werden. Der Server sucht sich bei einer Anfrage selbst eine passende Datei und wählte dabei zwischen der Seite und ihrer Datendatei — mal kam der Rohtext, mal ein Fehler. Abschalten ließ sich das beim Hoster nicht. Die Daten liegen seitdem in einem eigenen Ordner, und die Seiten behalten ihre Endung.
-
.08
Den Ton zweimal verwerfen
Die erste und die zweite Fassung der Fallstudien klangen nach Manifest: Jeder Absatz endete mit einem Merksatz, acht Aufmacher begannen mit der Formel nicht X, sondern Y, und mehrfach stand behauptete Wirkung ohne Messung dahinter. Beim dritten Durchgang wurden 69 Stellen ersetzt. Der Ton ist an dieser Seite der Teil, der am längsten gebraucht hat — länger als das CMS.
Aus der Arbeit
Bilder folgen. Bis dahin: Die Seite selbst ist der Beleg.
-
Bild folgt — dieselbe Sektion in hell und dunkel, nur andere Token · vergrößern -
Bild folgt — das Backend mit den Inhaltsfeldern einer Fallstudie · vergrößern -
Bild folgt — die Struktursperre, die ein Überschreiben verweigert · vergrößern -
Bild folgt — die WebKit-Messung mit dem Wert, der in Chromium anders aussah · vergrößern -
Bild folgt — die Seite ohne JavaScript · vergrößern
Was sich geändert hat
Läuft. Und ist an den Stellen nachprüfbar, an denen andere Fallstudien nur behaupten könnten.
Die Seite ist unter ken.kiwi online: statisch, in hell und dunkel, ohne JavaScript bedienbar, mit einem Backend, über das sich jeder Text ändern lässt. Was hier steht, lässt sich am Gegenstand prüfen — anders als bei den Konzepten, deren Umsetzung ich nicht begleitet habe.
Gebaut habe ich das mit Claude Code. Das steht hier aus demselben Grund, aus dem bei Sammlermodelle die Kollegin genannt ist und bei Hundefutter der Kollege: Wer an einer Arbeit beteiligt war, gehört hinein. Konzept, Gestaltung, Struktur und sämtliche Texte sind meine Entscheidungen — die Umsetzung ist im Gespräch entstanden.
Was sich dadurch verschoben hat, ist die Reihenfolge. Weil eine Änderung schnell gebaut ist, wird die Frage wichtiger, ob sie überhaupt richtig ist. Die drei Stellen, an denen es hier schiefging, waren keine Tippfehler, sondern nicht zu Ende gedachte Annahmen: dass eine erfolgreiche Antwort ein Beleg ist, dass zwei Browser dasselbe rechnen, dass der Server sich an eine Einstellung hält. Keine davon hätte ein Werkzeug für mich beantwortet.
Offen ist einiges. Impressum und Datenschutz lassen sich nicht über das Backend ändern, Einträge kann man dort bearbeiten, aber nicht hinzufügen, und ein Vorschaubild für geteilte Links fehlt bis heute. Das steht hier, weil eine Fallstudie über die eigene Seite sonst genau die Politur bekäme, die sie bei allen anderen vermeidet.
- Abhängigkeiten
- 0kein Framework, kein Build-Schritt, keine Pakete
- Quelle für Farben und Maße
- 1eine Datei — nirgends sonst steht ein Hex-Wert
- Ohne JavaScript nutzbar
- jader Farbmodus folgt dann der Systemeinstellung
So erreichst du mich
Fragen zu meiner Arbeit beantworte ich gern — eine Mail genügt.