Labs

Wir haben eine Messehalle in eine Website gebaut - begehbar, im Browser

23. August 20267 Min. Lesezeit

Fast jede Agentur- und Handwerker-Website hat eine Referenzseite, und fast jede sieht gleich aus: ein Raster aus Kacheln, Bild, Titel, vielleicht ein Klick zur Galerie. Man überfliegt sie in zwanzig Sekunden und hat nichts behalten. Für einen Messebauer ist das besonders bitter - denn sein Handwerk ist Raum, und Raum lässt sich in einer Kachel nicht zeigen.

Für Messebau Franke haben wir deshalb etwas anderes gebaut: eine begehbare Messehalle, direkt in der Website.

Die Idee: Referenzen nicht zeigen, sondern betreten

Franke baut seit über 70 Jahren Messestände - Hirschvogel auf der IAA in Frankfurt, Berner auf der Analytica in München, FlavoLogic auf der Anuga FoodTec in Köln. Jahrzehnte an Projekten, die online in einer Liste lagen. Korrekt, aber austauschbar.

Wenn ein Kunde einen Messebauer sucht, will er eigentlich wissen: Wie fühlt sich das an, wenn die stehen? Genau das lässt sich in einer virtuellen Halle beantworten. Man steht im Gang, links und rechts die Stände, oben die Standschilder, hinten die Rückwand mit dem Firmennamen. Man geht vorwärts, schaut sich um, bleibt bei einem Stand stehen, klickt ihn an und sieht alle Fotos aus dem Projekt.

Eine Kachelgalerie wird überflogen. Eine Halle wird betreten - und da bleibt man länger.

Was drin steckt

  • 16 realisierte Messestände als Halle, jeder mit Standnummer, Kunde, Messe und Branche
  • Über 95 Projektfotos aus 9 Messestädten und 13 Branchen, von 2011 bis 2022
  • Umschauen per Maus oder Wischgeste, gehen per Scrollrad, Tastatur oder Buttons
  • Klick auf einen Stand öffnet alle Bilder des Projekts in einer Lightbox
  • Läuft im Browser - kein Plugin, kein Download, kein Extra-Programm

Technisch: echtes 3D, aber ohne Hürde

Die Halle läuft mit Three.js über WebGL - also echtes 3D, das die Grafikkarte des Besuchers rendert, direkt im Browserfenster. Keine Spiele-Engine, kein Unity-Export, keine App. Der Besucher klickt auf die Seite und ist drin.

Der spannendere Teil ist aber das, was passiert, wenn 3D nicht geht. Denn genau da scheitern die meisten solcher Spielereien.

Der Fallback ist kein Nachgedanke

Wer kein WebGL hat, wer in den Systemeinstellungen reduzierte Bewegung aktiviert hat oder wer mit Tastatur und Screenreader unterwegs ist, bekommt automatisch die vollwertige Listenansicht: dieselben 16 Referenzen, dieselben Bilder, dieselben Informationen - nur ohne 3D. Niemand landet vor einem schwarzen Rechteck.

Dazu hat jeder Stand eine saubere Beschriftung für Screenreader, und die Steuerung liegt zusätzlich auf echten Buttons statt nur auf der Maus. Das ist der Unterschied zwischen einer 3D-Demo und einem 3D-Feature, das man einem Kunden guten Gewissens auf die Website stellt. Mehr dazu in unserer Barrierefreiheits-Leistung.

Warum sich der Aufwand lohnt

Eine 3D-Halle ist kein Selbstzweck und auch nicht für jede Branche sinnvoll. Hier war sie es aus drei Gründen: Das Produkt ist räumlich, das Material war da (Jahrzehnte an Fotos), und die Konkurrenz zeigt dasselbe Material in derselben Kachelgalerie.

  • Verweildauer: Wer durch eine Halle geht, bleibt länger als jemand, der ein Raster scrollt
  • Erinnerungswert: Eine begehbare Halle erzählt man weiter, eine Bildergalerie nicht
  • Gesprächsanlass: Im Vertriebstermin lässt sich die Halle live vorführen
  • Bestandsmaterial neu genutzt: Es wurden keine neuen Fotos gebraucht, nur eine bessere Bühne

Was das für andere Branchen heißt

Dasselbe Prinzip funktioniert überall dort, wo das Produkt räumlich ist und Bestandsmaterial existiert: ein Ausstellungsraum für Küchen oder Möbel, eine Halle für Fahrzeuge oder Maschinen, ein Rundgang durch abgeschlossene Bauprojekte. Der Trick ist nie die Technik, sondern die ehrliche Frage vorher: Bringt der Raum dem Besucher etwas, oder ist es nur eine Spielerei?

Wenn die Antwort ja lautet, bauen wir es - inklusive dem unspektakulären Teil, der am Ende darüber entscheidet, ob es funktioniert: Ladezeit, Bedienbarkeit und ein Fallback, der niemanden ausschließt. Genau das gehört für uns zu gutem Webdesign.

Ihr habt räumliche Produkte und einen Berg an Projektfotos, der online untergeht? Erzählt uns davon - wir sagen ehrlich, ob sich 3D lohnt: hallo@caz.de.

Bastian Portes

Bastian Portes

Gründer & CEO, CAZ Labs

Unternehmer, der codet - und Krimis schreibt.

Wir haben eine Messehalle in eine Website gebaut - begehbar, im Browser | CAZ Labs