Fallstudie
So ist diese Website gebaut
Wer noch keine Kundschaft hat, kann keine Referenzen zeigen. Darum habe ich diese Website so gebaut, dass Sie sie prüfen können: die Entscheide dahinter, wie sie entstanden ist, und die Testergebnisse, sobald sie online ist.
- Kundschaft
- Ich selbst. Das ist meine eigene Geschäftswebsite.
- Art
- Geschäftswebsite, Deutsch und Englisch
- Seiten
- 18 pro Sprache
- Technik
- Astro 7 · TypeScript · reines CSS
- Gebaut mit
- Claude Code, einem KI-Programmiertool, unter meiner Leitung
Der Auftrag
Eine Website für drei Leistungen, in zwei Sprachen. Inhaberinnen und Inhaber kleiner Betriebe sollen sie in fünf Sekunden verstehen, Entwicklerinnen und Entwickler sollen sie prüfen können, ohne auf Abkürzungen zu stossen. Jede Aussage darauf musste überprüfbar sein.
Rahmenbedingungen
- Keine Cookies und kein Werbe-Tracking, also kein Cookie-Banner.
- Zwei Sprachen mit gleichwertigen Seiten, nicht nur eine übersetzte Startseite.
- Keine KI-generierten Bilder. Jede Grafik ist im Code gezeichnet.
- Neben der Schule gebaut, also musste sie einfach zu pflegen sein.
Wie sie entstanden ist
Ich habe diese Website geplant und die Arbeit geleitet: was sie sagt, wie sie aussieht, was sie nie behaupten darf und welche Tests sie bestehen muss.
Claude Code, ein KI-Programmiertool, hat einen grossen Teil der Umsetzung nach diesen Plänen übernommen.
Jede Seite wird mit automatisierten Tests auf Barrierefreiheit und Layout geprüft, auf Deutsch und Englisch, im hellen und im dunklen Design.
Kein Bild auf dieser Website ist KI-generiert.
Warum ich das sage
So arbeite ich auch für Kundinnen und Kunden. KI-Tools beschleunigen das Bauen. Ich entscheide, was gebaut wird, und prüfe, ob es stimmt. Ihre Dateien oder Kundendaten gebe ich nicht ohne Ihre Zustimmung in KI-Tools.
Technik
- Framework
- Astro 7, statische Ausgabe: Jede Seite ist eine einfache HTML-Datei, ohne Server im Betrieb.
- Sprache
- TypeScript im Strict-Modus.
- Styles
- Reines CSS mit Design-Tokens. Kein CSS-Framework.
- Schriften
- Geist, Geist Mono und Archivo, selbst gehostet und auf die verwendeten Zeichen reduziert: insgesamt 43’736 Bytes.
- Sicherheit
- Eine Content Security Policy auf jeder Seite.
- Cookies
- Keine.
Schriftgrösse gemessen beim Erstellen der Schriftdateien am 8. November 2026.
Entscheide und Gründe
Eine statische Website mit Astro
Jede Seite ist einfaches HTML, bevor sie bei Ihnen ankommt. Es gibt keinen Server, der laufen muss, und keine Plugins, die Updates brauchen. Darum brauchen auch meine Kundenwebsites so wenig Wartung.
Reines CSS, kein Framework
Ein einziges Set von Farb- und Abstands-Tokens steuert das helle und das dunkle Design. Es wird nichts geladen, was die Seite nicht braucht.
Selbst gehostete, reduzierte Schriften
Die Schriften laden von dieser Website, nicht von Google. So gehen keine Besucherdaten an Dritte. Enthalten sind nur die Zeichen und Schriftschnitte, die ich verwende.
Grafiken im Code gezeichnet
Tabellen, Wireframes und Diagramme sind SVG oder HTML. Sie sind auf jedem Bildschirm scharf, wechseln mit dem Design, wiegen fast nichts und zeigen die echte Arbeit statt Stockbilder.
Ein Gratis-Tool statt Referenzen
Kundenbewertungen kann ich noch keine zeigen. Darum können Sie meine Arbeit mit dem CSV-Checker direkt testen. Er läuft in Ihrem Browser, Ihre Datei wird also nie hochgeladen.
Bewegung nur, wo sich etwas ändert
Die Tabelle auf der Startseite rastet einmal pro Besuch ein und wiederholt sich nie. Haben Sie in Ihrem System «Bewegung reduzieren» aktiviert, sehen Sie sofort den fertigen Zustand.
Design-Entscheide
- 01
Klare Raster, kräftige Titel
Ich habe mehrere Designrichtungen verglichen und zwei gemischt: klare Haarlinien-Raster und ruhige Abstände aus der einen, kräftige, schmale Titel und starken Kontrast aus der anderen.
- 02
Eine Farbe: mein Signatur-Blau
Blau markiert den nächsten Schritt und das, was am richtigen Platz ist: Buttons, das blaue Band, die letzte Zelle im Logo. Text darauf ist immer weiss, mit einem Kontrast von 5,88:1.
- 03
Gestrichelt heisst: noch nicht echt
Fiktive Projekte und Zahlen, die ich noch nicht gemessen habe, erhalten einen gestrichelten Rahmen. Durchgezogen heisst echt. Sie sehen es auf dieser Seite: Die Testergebnisse unten bleiben gestrichelt, bis ich sie gemessen habe.
Testergebnisse
Ich veröffentliche die Zahlen nach dem Launch, gemessen auf der Live-Website, mit Datum, Tool und Einstellungen. Bis dahin keine Schätzungen.
| Messgrösse | Tool | Ergebnis |
|---|---|---|
| Performance-Score, mobilLighthouse | Lighthouse | Noch nicht gemessen |
| Barrierefreiheits-ScoreLighthouse | Lighthouse | Noch nicht gemessen |
| Best-Practices-ScoreLighthouse | Lighthouse | Noch nicht gemessen |
| SEO-ScoreLighthouse | Lighthouse | Noch nicht gemessen |
| Largest Contentful PaintLighthouse, Labor | Lighthouse, Labor | Noch nicht gemessen |
| Cumulative Layout ShiftLighthouse, Labor | Lighthouse, Labor | Noch nicht gemessen |
| Total Blocking TimeLighthouse, Labor | Lighthouse, Labor | Noch nicht gemessen |
| Verstösse gegen Barrierefreiheitaxe | axe | Noch nicht gemessen |
| Übertragene Datenmenge der StartseiteBrowser-Entwicklertools | Browser-Entwicklertools | Noch nicht gemessen |
| JavaScript und CSS auf der StartseiteBrowser-Entwicklertools | Browser-Entwicklertools | Noch nicht gemessen |
| Anfragen auf der StartseiteBrowser-Entwicklertools | Browser-Entwicklertools | Noch nicht gemessen |
| Anfragen an DrittanbieterBrowser-Entwicklertools | Browser-Entwicklertools | Noch nicht gemessen |
| Gesetzte CookiesBrowser-Entwicklertools | Browser-Entwicklertools | Noch nicht gemessen |
Performance-Budget
Ein Ziel, das ich vor dem Bauen gesetzt habe, kein Ergebnis: Schriften insgesamt höchstens 70 KB. Die Schriftdateien messen 43’736 Bytes.
Prüfen Sie die Cookies selbst
Möchten Sie eine Website, die so gebaut ist?
Gleich gebaut, für Ihr Unternehmen: Business-Website ab CHF 390, Komplette Website ab CHF 690.