Kayzen Web
Die Website der Agentur ist ihre erste Referenz: Sie wird strenger geprüft als die der Kunden.
- Jahr
- 2026
- Umsetzung
- kontinuierliche Verbesserung
- Stack
- React · Vite · Tailwind · TypeScript · Vercel
- Strategie
- Designsystem
- Entwicklung
- SEO
- Barrierefreiheit
- Texte
- Lighthouse-Barrierefreiheit
- 100/100
- Lighthouse-SEO
- 100/100
- beim Build vorgerenderte Routen
- 79
- dokumentierte Projekte, jedes mit eigener Fallstudie
- 37
Was gelöst werden musste.
Der Kontext
kayzen-lyon.com ist das Schaufenster der Agentur: 79 vorgerenderte Routen, darunter 21 Leistungsseiten, 4 Standortseiten, eine öffentliche Preisliste, ein Changelog, eine Seite zum Tech-Stack und ein offenes Designsystem.
Die Einschränkung
Eine Webagentur wird nach ihrer eigenen Website beurteilt, noch bevor man ihre Projekte ansieht. Der kleinste Mangel – ein mittelmäßiger Performance-Score, ein unzureichender Kontrast, ungültige strukturierte Daten – wird zum Argument gegen sie. Die Website musste also der technischen Prüfung eines anspruchsvollen Interessenten standhalten.
Die Antwort
Wir haben veröffentlicht, was Agenturen sonst verbergen: die Preise, den Stack, das Designsystem und ein Changelog, das die Korrekturen an der Website selbst auflistet. Die Transparenz dient zwei Zwecken – sie gibt Interessenten Sicherheit und verpflichtet uns, das Niveau zu halten.
Die Werte bei der Auslieferung.
Lighthouse-Werte der Live-Website. Wir veröffentlichen sie unverändert: Ist einer niedrig, stehen Ursache und Korrekturplan weiter unten, statt verschwiegen zu werden.
Jede gestalterische Entscheidung – und ihr Grund.
Ein dokumentiertes und öffentliches Designsystem
Farb-Tokens, fluide Schriftskala, vier Schattenstufen, ein einheitlicher vertikaler Rhythmus. Die Seite /design-system legt sie offen. Ein sichtbares System ist ein System, das nicht abdriftet.
Jeder Kontrast gemessen
Jedes Farbpaar wurde berechnet. Feldrahmen erreichen 3:1, der Fokusring ist von der Aktionsfarbe entkoppelt, damit er auch auf einem farbigen Button sichtbar bleibt, und Textverläufe wurden zugunsten von Volltonfarben entfernt.
Nur Einblend-Animationen
Keine Endlosschleifen außer bei Ladeindikatoren: dauerhafte GPU-Last, Akku, vestibuläre Beschwerden. Die Systemeinstellung für reduzierte Bewegung wird strikt respektiert.
Farbpalette des Projekts
Navy
#1F3B61
Titel, Struktur
Terrakotta
#B7481F
Handlung – 5,3:1 auf Weiß
Weiß
#FFFFFF
Seitenfläche
Kühles Grau
#F8FAFC
Abwechselnde Abschnitte
Typografisches System
Überschriften
Outfit 800
Fließtext
Plus Jakarta Sans 400
Zwei selbst gehostete variable Familien mit font-display: optional – keinerlei Layoutverschiebung beim Laden.
Was unter der Haube steckt.
- React
- Vite
- Tailwind
- TypeScript
- Vercel
Alle Routen beim Build vorgerendert
Eine SPA liefert für alle URLs dasselbe HTML aus: Die Metadaten pro Seite sind für jeden Bot unsichtbar, der kein JavaScript ausführt. Ein Prerender-Skript besucht jede Route und schreibt eine vollständige HTML-Datei – Titel, Description, Canonical, Open Graph, JSON-LD.
Der Build verweigert sich bei Mängeln
Der Build schlägt fehl, wenn einer Route Metadaten fehlen, wenn die 404-Seite ihr noindex verliert, wenn ein Bild 1440 px überschreitet, wenn die CSP veraltet ist oder wenn ein Platzhalter „à compléter“ („noch zu ergänzen“) ins erzeugte HTML gelangt. Schutzmechanismen sind besser als Wachsamkeit.
Aufteilung nach Route
Jede Seite ist ein eigener Chunk, auch die Startseite. Eine Impressumsseite hat keinerlei Grund, die Animationsbibliothek der Startseite herunterzuladen.
Wie die Website gefunden wird.
Ein Einstieg pro Suchintention
17 Leistungsseiten und 4 Standortseiten, jede auf eine eigene Suchanfrage ausgerichtet. Keine ist eine Keyword-Variante einer anderen: Es sind unterschiedliche Inhalte.
Stimmige strukturierte Daten
Organization, LocalBusiness, ProfessionalService, WebSite, WebPage und BreadcrumbList, alle über @id verknüpft. Widersprüchliche Duplikate wurden entfernt – zwei konkurrierende Breadcrumbs auf derselben URL sind besser als keine, aber nur knapp.
Keine selbst vergebenen Bewertungen
Das aggregateRating wurde entfernt: Bewertungen, die sich ein Unternehmen selbst vergibt, verstoßen gegen die Google-Richtlinien und setzen einen einer manuellen Maßnahme aus. Lieber verlieren wir den Stern als die Domain.
Für alle nutzbar.
Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.
100/100 bei Lighthouse – und ein manuelles Audit
Skip-Link, bei jedem Routenwechsel verschobener und angekündigter Fokus, Touch-Ziele mit 44 px, verstärkter Kontrastmodus, OLED-Modus und eine für Legasthenie angepasste Schrift, angeboten in einem eigenen Bedienfeld.
Was ausgeliefert wurde.
- Startseite
- 17 Leistungsseiten
- 4 Standortseiten
- Portfolio und 37 Fallstudien
- Preise, Förderungen, Quiz, Termin
- Stack, Designsystem, Changelog
- Rechtliche Seiten
Der Projektablauf.
Designsystem
Tokens, Kontraste, Schriftskala, Schatten.
Inhalte
17 Leistungen, 4 Gebiete, öffentliche Preise.
Technisches SEO
Prerendering, strukturierte Daten, Sitemap, Build-Schutzmechanismen.
Kontinuierliche Verbesserung
Aufeinanderfolgende Audits, im öffentlichen Changelog festgehalten.
Was man uns oft fragt.
Weitere Referenzen
DSGVO-Compliance & SaaSKonsent by Kayzen
Ein Banner-Anbieter, der Banner prüft, ist Richter in eigener Sache: Unabhängigkeit war das Produkt.
Offensive Cybersicherheit & SaaSSentinel by Kayzen
Ein Sicherheitsprodukt an Ingenieure verkaufen: Jede Aussage musste nachweisbar sein.
Daten & WetterdienstMétéo Climat France
358 indexierbare Seiten, eine animierte Karte über 72 Zeitpunkte – und keine einzige Zeile Framework.
Derselbe Anspruch, für Ihre Website.
Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.