Baut uns doch mal eine Referenz City

Unser Kunde Xella Deutschland stellt massive Bausteine her, aus denen Häuser aller Art und Größe gebaut werden. (Hier haben wir schon einmal darüber berichtet, wie es in einem Xella-Werk zugeht.) Was liegt für ein solches Unternehmen also näher, als über 25 Referenz-Gebäude seiner Marken Ytong, Silka und Multipor zu einer Referenz City zusammen zu stellen, die sich aus den Referenz-Objekten im OpenText CMS generiert.

Xella-Multipor-Referenz-City

Damit war die Idee zur Referenz City geboren.

Zunächst einmal war eine sorgfältige Anforderungsanalyse notwendig. Bei Elementen, die nicht zum Standard-Baukasten einer Website gehören, ist das besonders wichtig. Wir mussten genau definieren, was bei welchem Klick passieren sollte und wie das alles aussehen musste. Ohne eine solche Analyse kann es schnell passieren, dass der Kunde bildlich gesprochen vom einem Pudel spricht, aber einen Dackel geliefert bekommt.

Basierend auf der Anforderungsanalyse konnte ich dann die Umsetzung konzipieren und abschätzen, wie lange ich dafür brauchen würde oder wo wir noch genauere Informationen benötigten.

WAGA, unser Kreativpartner in diesem Projekt, hat verschiedene Möglichkeiten der Darstellung konzipiert und wir haben deren Umsetzung evaluiert.

Technologische Herausforderungen einer Panorama-Anwendung

Die Schwierigkeit lag darin, dass es sich hier nicht um einen “normalen” Slider handelte, sondern eine individuell steuerbare Panorama-Anwendung. Für diesen speziellen Fall konnte ich daher kein passendes Plugin finden, dass genau den Anforderungen des Kunden entsprach. In Folge dessen musste ich selbst etwas programmieren, das in allen modernen Browsern funktioniert und nebenbei auch noch responsives Verhalten an den Tag legt.

Die “Referenz City” habe ich dann mit Hilfe von HTML, CSS und JavaScript (jQuery) umgesetzt. Die Nutzung der JavaScript-Bibiothek jQuery hat mir an manchen Stellen zwar geholfen, aber die Logik für die Benutzung konnte sie leider nicht liefern. Somit habe ich nahezu die komplette Panorama-Anwendung selbst programmiert.

Die Features der Referenz City im OpenText CMS

Momentan setzt sich die “Referenz City” aus 4 verschiedenen Bereichen zusammen: Es gibt den Einleitungs-/Intro-Bereich, die Referenzen der Marke Ytong, die Referenzen der Marke Silka und die Referenzen der Marke Multipor.

  1. Unter der City befinden sich die verschiedenen Markennamen. Klickt man auf einen der Namen, fährt die Ansicht der City direkt zu dem Bereich in dem sich Häuser (Referenzen) dieser Marke befinden. Die Markennamen, zu denen dann Referenzen in der City sichtbar werden, werden dann farblich hervorgehoben (in diesem Fall grau).
  2. Neben den Markennamen sieht der Nutzer auf größeren Geräten auch noch 2 Pfeil-Icons. Mit Hilfe der Pfeile kann der Besucher ebenfalls durch die City navigieren. Auf mobilen Geräten (z.B. iPhone) sind die Pfeile nicht sichtbar. Stattdessen kann der Nutzer hier über die Stadt wischen. Je nach Wischrichtung bewegt sich die Stadt entweder nach links oder rechts.
  3. Desweiteren kann der Besucher der Website auch per Druck auf die Pfeiltasten seiner Tastatur (sofern vorhanden) die City nach links und rechts bewegen.
  4. Sobald man dann ein Haus in der City gefunden hat, über das man mehr erfahren möchte, kann man mit dem Maus-Cursor übers Gebäude fahren und es erscheint ein gelber Kreis, in dem sich der Titel dieser Referenz befindet.
  5. Klickt man dann auf den Kreis oder das Haus, öffnet sich ein Pop-Up auf der Seite. Dieses Pop-Up beinhaltet ein Foto der Referenz, einen Titel, einen kurzen Text über die Referenz und einen Button, über den man auf eine andere Seite weitergeleitet wird. Diese Seite enthält dann Detailinformationen zu der Referenz.
  6. Öffnet man die “Referenz City” auf mobilen Geräten (z.B. iPhone) so kann man nicht mit einem Maus-Cursor über die Häuser fahren. Stattdessen erscheinen über allen Referenzen kleine gelbe Kreise mit Pfeil nach unten, die sich über dem Gebäude auf und ab bewegen. Sie zeigen dem Besucher der Seite so, dass dieser auf die Gebäude klicken/touchen kann um so mit der City zu interagieren.
  7. Die Integration ins OpenText hat keine besondere Schwierigkeit dargestellt. Eigentlich hätten wir das auch mit jedem beliebigen anderen CMS realisieren können. Wir mussten nur pro Referenz die Pflege der Bilder und Texte im CMS ermöglichen.
  8. Aus der Liste der Referenzen wird die “Referenz City” generiert. Kommt eine neue Referenz hinzu, muss lediglich die entsprechende Grafik im Panorama angepasst werden.

 Welche Einsatzszenarien wären noch möglich?

Denkbare Alternativen wären

  • Präsentation einer Produktpalette
  • Darstellung einer Wertschöpfungskette
  • Präsentation einer Customer Journey
  • Firmenhistorie als Zeitstrahl
  • usw.

Generell lassen sich Daten aus Content Management Systemen heraus im Web auf viele verschiedene Arten darstellen. Ob als Diagramm, Tabelle, Weltkarte oder eben ein interaktives Panorama. Dabei ist die Darstellung der Informationen prinzipiell unabhängig vom CMS. Zu bedenken sind aber technische Grenzen wie die Browserkompatibilität oder auch das Verhältnis von Aufwand und Nutzen.

Hier kommen Sie direkt zur Referenz-City von Multipor.

“Intelligenz ist der beste Baustoff” – comspace Exkursion zu Xella

5.Ytong-Wirtschaftlichkeit-1000Px
(c) Xella

Die Produkte, mit denen wir arbeiten und die wir herstellen sind anspruchsvoll, umfangreich und komplex, aber leider nie “zum Anfassen”. Deswegen freuen wir uns immer wieder, wenn wir einen unserer Kunden besuchen können und vor Ort sehen und verstehen, wie dort Industrie-Produkte entstehen. Einerseits können wir uns so besser in die Bedürfnisse unserer Kunden hinein versetzen – andererseits ist es für uns immer eine willkommene Abwechslung, von der Tastatur weg zu kommen und dort reinzuschnuppern, wo in diesem Fall aus natürlichen Rohstoffen, gigantischen Maschinen und Industrie-Know-how innovative Baumaterialien geschaffen werden.

“Intelligenz ist der beste Baustoff” lautet einer der Werbeclaims unseres Open-Text Kunden Xella, der aber auch durchaus zu uns passen würde 🙂

Ytong-Steine

Umso spannender war für uns letztens der Besuch in zwei Xella-Werken. Wer schon einmal an einem größeren Bau-Projekt beteiligt war, dem sind sicherlich die Marken Ytong Porenbeton, Silka Kalksandstein und Multipor Dämmplatten ein Begriff, mit denen Xella Marktführer in Deutschland für hochwärmedämmende und massive Wandbaustoffe ist.
Xella ist mit 7.227 Mitarbeitern rund um den Erdball vertreten und hat 2012 einen Umsatz von 1,3 Milliarden Euro erwirtschaftet. Die Unternehmensgruppe betreibt insgesamt 98 Werke in 20 Ländern und ist in rund 30 Ländern mit Vertriebsorganisationen präsent.

Im Ytong-Werk Köln-Porz startete auch unsere Betriebsbesichtigung mit vollzähligem Projektteam und der WAGA GmbH, unserem Kooperationspartner für User Experience und Visual Design.

Xella-comspace

Dort zeigte uns der Werksleiter zwischen Riesen-Silos und gigantischen Brennöfen auf einer 90-minütigen Führung, wie aus den umweltfreundlich abgebauten Rohstoffen Sand, Kalk, Zement, Wasser und Luft die Porenbeton-Steine hergestellt werden. Der Porenbeton wurde 1923 vom schwedischen Architekten und Forscher Axel Eriksson in Yxhults erfunden (daher der Name Ytong – von „Yxhults Anghärdade Gasbetong“).

Xella: Vom Sand zum Stein
Xella: Vom Sand zum Stein

Bei der Porenbeton-Produktion wird den o.g. natürlichen Grund-Bestandteilen noch Aluminium als Treibmittel hinzugefügt. Dadurch entsteht in der Betonmasse Wasserstoffgas, das die feinen Poren bildet, in denen nach dem Härten und Austrocknen Luft übrig bleibt. Diese feinen mit Luft gefüllten Poren sorgen zum einen dafür, dass die Steine im Verhältnis zu massivem Beton deutlich leichter sind und andererseits erhalten sie hervorragende Dämm-Eigenschaften. Durch das formgebende Planblock-System konnten Bauzeiten deutlich verkürzt und durch die günstige Herstellung Baukosten deutlich gesenkt werden.

Silka-Silo

“Ytong herstellen ist ein bisschen wie backen mit Backpulver” nannte es mein Kollege Markus Plauschinn. – Klar, in der Dr. Oetker-Stadt Bielefeld kennen wir uns mit Backpulver aus 🙂

Nach den leichten und hochdämmenden Ytong-Steinen schauten wir uns die Silka Produktion an. Diese Kalksandsteine kommen seit Jahrzehnten als Baumaterialien zum Einsatz und erste Anwendungen gehen auf das Jahr 1898 zurück. Sie werden aus den natürlichen und regionalen Rohstoffen Kalk, Sand und Wasser hergestellt und enthalten keine giftigen Stoffe. Außerdem ist der Baustoff hoch belastbar, sodass auch tragende Wände mit hohen Lasten daraus gebaut werden können. Diese sorgen dann zusätzlich für ein gutes Raumklima, da Kalksandstein Temperaturschwankungen ausgleichen kann und dabei hoch schalldämmend wirkt.

Silka-anfassen

Besonders beeindruckend war die schiere Größe der einzelnen Maschinen und Öfen:

Xella-Ofen-Arbeiter-2

Wie auch die Lagerfläche – Steine für bis zu 1000 Häuser lagern hier:

Xella-Lager

Der größte Stein der Ytong-Produktfamilie wiegt 22 Kilogramm – bei Silka sind es für den größten Vertreter dann schon 364 Kilo.

Xella-Rechner

Xellas Anspruch ist es, in seinen Online-Kanälen die höchsten Anforderungen an umfassende Produktinformationen und Verarbeitungsempfehlungen zu erfüllen und seine Leistungen als Taktgeber und Innovator zu kommunizieren. Nachdem wir bei unserem beeindruckenden “Firmen-Ausflug” nun die Produktion und Ausführungsqualität live erleben durften, sind wir noch ein gutes Stück mehr in der Lage, unseren Kunden hierbei zu unterstützen.

Silka-Kran

Vielleicht führt uns unsere nächste Exkursion zum Xella Forschungszentrum in der Nähe von Berlin. Gemeinsam mit der Fraunhofer-Gesellschaft forscht Xella an der Stadt der Zukunft. Das könnten wir dann prima mit einem Besuch eines anderen Kunden im Otto Bock Science Center verbinden.

Silka-Lager-2

Danke an Xella für die interessante Führung und an unsere Kollegen Martin Freisen und Johannes Tappmeier für die ausführliche Foto-Dokumentation.