M-Webentwicklung
DE – DeutschEN

Relaunch einer Werkstatt-Website

MK Karosserie

Eine Werkstatt, die Blech bearbeitet, statt nur Teile zu tauschen – gezeigt an einer Rohkarosserie, die beim Scrollen repariert wird.

  • 3D-Rohkarosserie auf der Richtbank
  • Vorher/Nachher als Prüflampe
  • Anfrage in Schritten mit Foto-Upload
Startseite der MK-Karosserie-Website mit Karosserie-Zeichnung und markierter ReparaturzoneStartseite der MK-Karosserie-Website auf dem Smartphone
Unternehmen
MK Karosserie + Fahrzeugtechnik
Branche
Karosseriebau
Ort
Lorch im Remstal
Stand
Lokal fertig entwickelt und getestet, noch nicht veröffentlicht

Ausgangslage

  • Die bisherige Website basierte auf WordPress mit einem Baukasten-Theme, die Referenzseite war leer.
  • Das Kontaktformular verlangte eine Rechenaufgabe, bevor man eine Anfrage abschicken konnte.
  • Öffnungszeiten und Angaben in Verzeichnissen widersprachen sich.

Konzept

Handwerk am Blech

  • Die Werkstatt repariert, wo es möglich ist, und ersetzt, wo es nötig ist. Genau das zeigt die Website – am Blech, nicht in Werbesätzen.
  • Ruhige, schwere Bewegung: nichts federt. Rot ist der Reparaturzone, dem aktiven Zustand und der Anfrage vorbehalten.
  • Vier Anliegen, vier Einstiege: Unfall, Rost, Oldtimer, Service. Jeder führt in dieselbe Anfrage, vorausgefüllt.

Erlebnis

Anfrage-Assistent der MK-Karosserie-Website
  • Die Reparatur als Geschichte

    Beim Scrollen läuft eine Schweißreparatur ab: Rost am Radlauf, Außenhaut ab, Blech freigelegt, Reparaturblech geformt und eingesetzt, Schweißpunkte, geschlossen.

  • Prüflampe statt Schieberegler

    Das Schadensfoto liegt im Halbdunkel. Ein Lichtkegel folgt dem Zeiger und legt das reparierte Fahrzeug frei.

  • Eine 3D-Szene für die ganze Website

    Die Rohkarosserie wandert in den jeweils sichtbaren Abschnitt, statt mehrfach geladen zu werden. Ohne WebGL bleibt eine Strichzeichnung derselben Karosserie.

  • Anfrage mit Fotos

    Ein Assistent in Schritten, mit Prüfung pro Schritt und bis zu sechs Fotos vom Schaden.

Technik

  • Next.js 16 und React 19 mit Content-Security-Policy pro Aufruf
  • Three.js mit einer prozedural erzeugten Karosserie aus eigenen Konturen
  • GSAP mit ScrollTrigger, nachgeladen
  • Eingabeprüfung mit Zod, Versand per SMTP
  • Schriften und Bilder selbst gehostet, keine Anfragen an Dritte

SEO und GEO

  • Strukturierte Daten für AutoBodyShop, Service, FAQ und Breadcrumbs
  • Einzugsgebiet Lorch, Remstal und Ostalbkreis im Datenmodell
  • Such- und KI-Crawler namentlich zugelassen, eine /llms.txt
  • Weiterleitungen von zehn alten WordPress-Adressen
  • Öffnungszeiten stehen erst in den strukturierten Daten, wenn sie bestätigt sind

Gemessen

Performance Startseite, Desktop
100
Performance mobil, je nach Seite
88–96
Barrierefreiheit, alle Seiten
100
Best Practices, alle Seiten
100
SEO, alle Seiten
100

Lighthouse 13.5, lokaler Produktions-Build, simulierte Drosselung, 03.10.2026. Keine Messung der Live-Website.

  • 26 Unit-Tests für Prüfung, Upload, Begrenzung und Schema
  • Playwright in Chromium, Firefox, WebKit und mobil
  • Uploads nach Endung, Typ und Dateisignatur geprüft, SVG abgelehnt

So etwas möchten Sie auch für Ihr Unternehmen?

Schreiben Sie mir, was Sie vorhaben – oder schicken Sie einfach die Adresse Ihrer jetzigen Website. Ich melde mich persönlich bei Ihnen.