struktur
Semantisches HTML, gelesen, bevor es gesehen wird
Informationshierarchie und Inhalte, die auch ohne visuelle Effekte verständlich bleiben. Struktur, Gestaltung und Verhalten, in dieser Reihenfolge der Wichtigkeit.
01
Websites, von Hand geschrieben
Im Web treffen Design und Code für mich am unmittelbarsten aufeinander. An vollständigen Konzeptprojekten untersuche ich Struktur, Typografie, responsives Verhalten, Barrierefreiheit und Interaktion als ein System.
- Umfang
- Eine Seite, oder fünf bis acht Abschnitte. Die Methode bleibt dieselbe.
- Vorgehen
- Vorher abgesteckt, unterwegs überarbeitet, fertiggestellt statt liegengelassen.
- Überarbeitungen
- In echten Runden überarbeitet, denn ein erster Entwurf ist selten das letzte Wort.
- Barrierefreiheit
- Ab dem ersten Commit nach WCAG 2.1 AA gebaut, nicht als Prüfung am Ende.
- Quelltext
- Jeder Build besteht aus drei lesbaren Dateien — öffne, starte und prüfe jede davon.
worum es geht
Eine Website — und was dieses Wort hier umfasst
Eine fertige, vollständige Site nach eigenem Entwurf, von Hand geschrieben. Kein gekauftes Template aus einem Marktplatz, kein Baukasten — jeder der zehn ist ein Projekt, das ich mir selbst gestellt und von vorn bis hinten durchgearbeitet habe.
Die meisten der zehn Builds auf dieser Website sind aus derselben Frage entstanden: Wie sähe das aus, wenn man es richtig machte? Ein Restaurant, eine Praxis, ein SaaS-Produkt — jedes eine Gelegenheit, ein echtes Problem von vorn bis hinten durchzuarbeiten, selbst gestellt statt zugewiesen.
layout
Komposition, die sich anpasst statt nur zu schrumpfen
CSS Grid, Flexbox, fluide Typografie. Die Spalten brechen in einer Reihenfolge um, die ich festgelegt habe, und die schmalste Fassung ist gestaltet und nicht bloß überstanden.
performance
Die Seite ist benutzbar, bevor die Zugaben ankommen
Unnötige Abhängigkeiten draußen halten, Medien sorgfältig laden und verstehen, was der Browser tatsächlich tut.
barrierefreiheit
Jedes Element ohne Maus erreichbar
Fokusverhalten, Kontrast, semantisches Markup, ARIA wo nötig — Interfaces, die nicht von Animation abhängen. Von Hand durchlaufen, Taste für Taste.
interaktion
Navigation, Formulare und Bewegung, die benutzbar bleiben
Akkordeons, Galerien und Formulare so gestaltet, dass sie per Tastatur bedienbar bleiben und Wünsche nach reduzierter Bewegung respektieren.
werkzeuge
Vanilla JavaScript — und ein Framework, wo es sich verdient
Die meisten der zehn sind von Hand geschriebenes HTML, CSS und JavaScript. Daneben arbeite ich auch mit React, Next.js und Vue — das Werkzeug folgt der Frage, nicht umgekehrt.
woraus ein Build besteht
Drei Dateien. Das ist die ganze Lieferung.
Keine Metapher und keine Vereinfachung. Jeder der zehn Builds im Portfolio besteht aus diesen drei Dateien plus seinen selbst gehosteten Schriften — öffne eine davon und lies den Quelltext, was der einzige Grund ist, warum dieser Absatz überhaupt etwas wert ist.
-
01
index.html — der Inhalt und seine Reihenfolge
Überschriften, die eine Ebene nach der anderen absteigen, Landmarken, die halten was ihr Name sagt, jedes Bedienelement ein echter Button oder ein echter Link. Das ist die Datei, die ein Screenreader liest und eine Suchmaschine indexiert — deshalb darf nichts Dekoratives darin wohnen.
-
02
styles.css — Farbe, Schrift, Abstand und Easing
Oben einmal als benannte Werte deklariert und dann überall verwendet. Ändere acht davon und die ganze Site wechselt die Stimmung. Wo eine Kontrastpaarung knapp ist, steht der gemessene Wert im Kommentar daneben.
-
03
script.js — Verhalten, das man entfernen kann
So geschrieben, dass ein fehlendes Element ein No-op ist statt ein geworfener Fehler, und dass jede Animation zuerst fragt, ob du deinem Gerät gesagt hast, dass du weniger davon willst. Die Seite funktioniert, wenn man einen beliebigen Teil dieser Datei entfernt.
Das ist der Sinn der Zahl drei: Die nächste Person, die das anfasst, muss mich nicht kennengelernt haben und kein Framework kennen, das ich zufällig gewählt habe.
worauf ich prüfe
Was Teil des Builds ist und was ich einem anderen Projekt überlasse
Beide Spalten sind absichtlich gleich groß. Zu wissen, wo die Grenzen eines Builds liegen, ist genauso eine Gestaltungsentscheidung wie alles innerhalb davon.
Teil des Builds
- Art Direction für das Projekt gemacht, nicht aus fünf Vorlagen gewählt.
- Text, der zum Design geschrieben wurde, nicht hinterher als Füllung eingesetzt.
- Jede Seite allein per Tastatur bedienbar, und von Hand so getestet.
- Bewegung, die aufhört, wenn das Gerät der Besucherin das sagt.
- Ein Performance-Budget, am Anfang gesetzt und am Ende erneut gemessen.
- Formulare mit echten Labels und Fehlern, die angesagt und nicht nur rot gefärbt werden.
- Struktur, die für eine zweite Sprache bereit ist, auch wo es noch keine gibt.
- Vollständiger Quelltext, von vorn bis hinten lesbar.
- Echte Iteration, kein erster Entwurf, der final genannt wird.
Außerhalb dieser Untersuchung
- Eigene Fotografie — wo ein Build sie braucht, wird sie separat beschafft oder lizenziert.
- Vollständiges Texten von Grund auf, im Unterschied zum Strukturieren und Einpassen vorhandenen Textes.
- Übersetzung in eine andere Sprache.
- Anbindungen an Dritte — ein Buchungssystem, ein CRM, ein Zahlungsanbieter — jede davon eine eigene Untersuchung.
- Laufende inhaltliche Änderungen, nachdem ein Build fertig ist.
- Suchmaschinenoptimierung als eigene Disziplin.
- Domain- und Hostingkosten sowie jede kostenpflichtige Schrift oder API.
- Jede Aussage über Rankings, Traffic oder Conversion. Das sind Konzept-Builds, keine gemessenen Kampagnen.
die fragen
Beantwortet statt ausgewichen
Lässt sich so eine Site ohne Code bearbeiten?
Standardmäßig nicht, und ich sage das lieber offen, als darum herumzureden. Eine von Hand gebaute Site wird als Dateien ausgeliefert; einen Satz zu ändern heißt also, eine Datei zu bearbeiten.
Es gibt eine echte Antwort, die es zu untersuchen lohnt: eine Bearbeitungsschicht über demselben statischen Build, sodass benannte Teile einer Site im Browser bearbeitbar werden, ohne Code anzufassen. Das ist ein eigenes kleines System — ein Editor, ein Login, ein Deploy-Schritt — drei weitere bewegliche Teile, die es wert sind, für sich verstanden zu werden.
Warum drei Dateien von Hand statt eines Frameworks?
Weil die Beschränkung der Punkt ist. Reines HTML, CSS und JavaScript zwingen jede Entscheidung, sichtbar zu sein — es gibt keine Abstraktion, die verbirgt, was eine Seite tatsächlich tut.
Es bedeutet außerdem, dass jede und jeder — auch eine spätere Version von mir — die Dateien öffnen und genau lesen kann, was dort steht. Keine Abhängigkeit, die aktualisiert werden muss, kein Build-Schritt, der kaputtgehen kann, nichts zwischen dem Quelltext und dem Browser, der ihn liest.
Woher weißt du, dass ein Build wirklich barrierefrei ist?
Indem ich es prüfe, was etwa neunzig Sekunden dauert und keine besonderen Werkzeuge braucht. Maus weglegen, Tabulator drücken und schauen, wohin der Fokusrahmen wandert.
Der Maßstab hier ist die Praxis von WCAG 2.1 AA — eine Beschreibung, wie die Arbeit gemacht wird, kein Abzeichen, denn ein Abzeichen ist kein Audit. Was ich stattdessen anbieten kann, ist eine Messung an einer echten Site, mit Datum und Methode daneben, damit sie überprüfbar ist und nicht geglaubt werden muss.
Die Methode ist jedes Mal dieselbe: ein automatischer Scan über jede Route bei zwei Viewports, dann ein Tastaturdurchgang mit echten Tastendrücken, bei dem nach jedem Halt das aktive Element zurückgelesen wird, dann Kontrast Paar für Paar gemessen, mit einer Liste der Durchfaller statt einer Zusammenfassung.
die arbeiten
Drei von zehn, nach Bandbreite ausgewählt
Alle zehn sind selbst initiiert, alle zehn laufen, und zu jedem gibt es einen Bericht, was es erreichen wollte und was sich gewehrt hat. Diese drei stehen hier, weil sie einander überhaupt nicht ähneln. Wenn eines davon zufällig deine Branche ist, ist das Zufall und nicht der Grund, warum es auf dieser Seite steht.
Architekturvermittlung, 2025
Arke Estates
Vier Farbwerte, drei Schriftschnitte und sehr viel bewusst leerer Raum. Zurückhaltung ist von den dreien am schwersten nachzumachen.
Restaurant, 2021
Ember & Oak
Ein editoriales Printmagazin, das zufällig Abendessen serviert. Rasterbestimmt, warm — und ungefähr so weit von der SaaS-Seite entfernt, wie dasselbe Paar Hände kommt.
Observability-SaaS, 2026
Signalform
Präzises Dunkel, kein einziges Foto im Build, und eine Befehlspalette, die eine echte ist — Fokus gehalten, Pfeiltasten, Escape.
Alle zehn Builds ansehen — jeder davon läuft in dem Browser, den du bereits offen hast.
websites
Sieh es in den zehn Builds
Jeder Grundsatz auf dieser Seite lässt sich leichter sehen als nachlesen. Die zehn Projekte zeigen dieselbe Disziplin auf zehn verschiedene Weisen — und wenn du lieber zu einem davon eine Frage stellen möchtest, als noch einen Absatz zu lesen, ist der zweite Link dafür da.