M-Webentwicklung
DE – DeutschEN

Neugestaltung einer Unternehmenswebsite

Steindl Metallverarbeitung

Ein Zerspanungsbetrieb, der Einzelteile ab Stückzahl 1 fertigt – erklärt an einem Bauteil, das sich beim Scrollen in seine Bearbeitungsschritte zerlegt.

  • 3D-Bauteil, vollständig im Code erzeugt
  • Maschinenpark zum Filtern und Durchsuchen
  • Anfrageformular mit Zeichnungs-Upload
Startseite der Steindl-Website mit 3D-Drehteil und technischer ZeichnungStartseite der Steindl-Website auf dem Smartphone
Unternehmen
Steindl Metallverarbeitung GmbH
Branche
CNC-Fertigung
Ort
Durlangen bei Schwäbisch Gmünd
Stand
Lokal fertig entwickelt und getestet, noch nicht veröffentlicht

Ausgangslage

  • Die bisherige Website lief auf einem Baukastensystem und zeigte keine eigenen Aufnahmen aus der Fertigung.
  • Die meisten KI-Crawler waren per robots.txt ausgesperrt – der Betrieb konnte in KI-Suchen kaum vorkommen.
  • Die Aufgabe: Ein Einkäufer soll in Sekunden sehen, was gefertigt wird, und ein Teil samt Zeichnung anfragen können.

Konzept

Technische Präzision

  • Die Website spricht die Sprache der technischen Zeichnung: Schriftfeld, Maßlinien, scharfe Kanten, das Blau aus dem Firmenlogo.
  • Statt austauschbarer Stockfotos entstehen die zentralen Bilder im Code. Sie sind als Beispielgeometrie gekennzeichnet und behaupten nichts, was der Betrieb nicht belegt.
  • Jede Fachseite beantwortet zuerst die Frage eines Einkäufers: Können die das fertigen – und wie frage ich an?

Erlebnis

Maschinenpark-Seite der Steindl-Website mit Filter und Detailansicht
  • Ein Bauteil erklärt den Betrieb

    Im Einstieg dreht sich ein Dreh-Fräs-Teil, zeigt Bohren, Drehen, Fräsen und Gewinde, zerlegt sich in Schichten samt Werkzeugbahn und schließt sich wieder.

  • Reverse Engineering in sechs Schritten

    Vom vorhandenen Teil über 3D-Scan und CAD-Modell bis zum fertigen Nachbau – das 3D-Teil durchläuft die Schritte, und jeder lässt sich per Klick direkt ansteuern.

  • Maschinenpark zum Durchsuchen

    Zehn Maschinen und Verfahren in vier Kategorien, mit Detailansicht, Beispielteil und gezeichnetem Arbeitsraum.

  • Anfrage mit Zeichnung

    Das Formular nimmt bis zu fünf Dateien an (PDF, STEP, DXF, DWG und Bilder) und funktioniert auch ohne JavaScript.

Technik

  • Next.js 16 und React 19, öffentliche Seiten statisch gerendert
  • Three.js direkt, ohne Modell-Dateien – die Geometrie entsteht im Code
  • GSAP mit ScrollTrigger, erst bei Bedarf nachgeladen
  • Deutsch und Englisch mit übersetzten Adressen
  • Eigene, cookielose Statistik mit Verwaltungsansicht

SEO und GEO

  • Strukturierte Daten für LocalBusiness, Service, FAQ und Breadcrumbs
  • Eine /llms.txt, die aus denselben Daten entsteht wie die Seiten
  • KI-Crawler ausdrücklich zugelassen, Verwaltung und Schnittstellen gesperrt
  • Kurz-beantwortet-Blöcke auf den Leistungsseiten
  • Weiterleitungen von den alten Adressen

Geprüft

Für dieses Projekt liegen keine dokumentierten Messungen vor. Deshalb stehen hier keine Zahlen.

  • Playwright-Tests in Chromium, Firefox ohne WebGL, WebKit und mobil
  • Standbild statt Animation bei reduzierter Bewegung, Strichzeichnung ohne WebGL
  • Upload-Prüfung nach Dateiendung und Dateisignatur, Begrenzung der Anfragen pro Zeit

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.