Screenshotx Website Relaunch

Viebrockhaus, einer der größten deutschen Hersteller für Massivhäuser, zählt schon seit einiger Zeit zu unseren Kunden. Nach einem ersten Relaunch 2012 hat networkteam die Website nun erneut überarbeitet und in enger Zusammenarbeit eine neue Seite entwickelt, die das moderne Konzept des Bauunternehmens ebenso vermittelt, wie die individuelle und persönliche Betreuung des Bauherrn. Auf Basis von TYPO3 CMS wurde dabei in erster Linie das Frontend erneuert und mit einem frischen, neuen Design versehen. Aber auch im Backend gibt es grundlegende Veränderungen.

Bereits im September 2014 haben wir erste Änderungen im Zuge eines Soft-Relaunch vorgenommen, die sich dem neuen Design annäherten. Besonderes Augenmerk lag dabei auf den Inhalten der Startseite. Texte wurden gekürzt und die Inhalte neu angeordnet. Dadurch wurde der Besucher besser abgeholt und der Fokus auf die wesentlichen Inhalte gesetzt. Um den Besucher stärker emotional anzusprechen, haben wir darüber hinaus den bereits vorhandenen Slider vergrößert und mehr Bildmaterial zu den einzelnen Informationen hinzugefügt. Ein neuer Breakpoint für große Desktops schaffte zusätzlichen Freiraum und gab den einzelnen Inhaltselementen mehr Platz.

Mit dem Relaunch 2015 haben wir schließlich ein neues Design für die gesamte Website entwickelt. Zwar war die Website bereits vorher responsiv gestaltet, die Menge an Informationen hat Benutzer mit kleinen Bildschirmen aber häufig überfordert. Um dem entgegenzuwirken haben wir die neue Website nach dem Mobile-First-Prinzip umgesetzt und so ein optimales Ergebnis auch für mobile Endgeräte erzielt. Dazu musste zunächst die sehr umfangreiche Navigation verschlankt werden. In enger Zusammenarbeit mit dem Kunden haben wir deshalb eine Lösung entwickelt, die die Übersichtlichkeit der Navigation verbessert aber gleichzeitig auf keines der bisherigen Navigationselemente verzichtet. Der Nutzer findet sich auf der Seite nun schneller zurecht und kann gezielt die Inhalte finden, die er benötigt.

Für eine optimale und vor allem schnelle Darstellung auf mobilen Geräten mit geringer Bandbreite haben wir bereits in der Konzeptionsphase der Performance der Website  Aufmerksamkeit geschenkt. So haben wir die Ladereihenfolge der Seite optimiert: Javascript wird z.B. (soweit möglich) erst im Footer der Seite geladen und initialisiert, um den Seitenaufbau nicht unnötig zu blockieren. Die verwendeten Webfonts werden asynchron nachgeladen und der Aufbau der Website für den Besucher beschleunigt. Der Einsatz von modernen Frontend-Technologien, wie etwa Grunt, Bower, SASS und dem CSS Authoring Framework Compass ermöglichen dabei auch zukünftig eine gute Erweiterbarkeit und Pflege der Website.

Eine zusätzliche Verbesserung des Nutzererlebnisses gerade auf mobilen Geräten konnten wir durch den Einsatz von Off-Canvas-Lösungen für den Merkzettel und die Navigation erzielen. Die beiden Elemente sind ausgeblendet, wenn sie nicht benötigt werden, lassen sich aber bei Bedarf über die entsprechenden Buttons aufrufen.

Als Basis für den Relaunch dient das bereits eingesetzte TYPO3 CMS, sodass vorhandene Inhalte weiterhin genutzt werden konnten. Um dem neuesten Stand der Technik Rechnung zu tragen, haben wir jedoch das bisherige Templating-System TemplaVoila durch Grid-Elements und Fluid-Content-Elemente ersetzt. Die Herausforderung bestand darin, die bereits vorhandenen Raster-Inhaltselemente entsprechend in diese neuen Technologien zu portieren. Im Zuge dessen haben wir gleichzeitig die Funktionalität einzelner Elemente erweitert. Die bereits bestehenden Teaser der Startseite konnten wir beispielsweise um eine zusätzliche Teasernavigation erweitern und so die Benutzerfreundlichkeit der Website weiter verbessern. 

KundeViebrockhaus AG
Websitehttp://www.viebrockhaus.de
Launch

Highlights & Features

  • Responsive Website nach dem Mobile-First-Prinzip
  • Neues, frisches Design
  • Performance-Steigerung durch moderne Frontend-Technologie und Methoden
  • Verbesserung der Usability mit Hilfe von Off-Canvas-Lösungen
  • Eigenständige Verwaltung und Pflege komplexer Inhalte mit TYPO3 CMS
  • Portierung auf aktuelle Templating-Systeme
  • Asynchrones Nachladen von Webfonts
  • Umfassendes Update der Javascript Bibliotheken

Mehr zum Fokusthema TYPO3 CMS

Sie interessieren sich für das TYPO3 CMS? Hier erfahren Sie alles zu diesem Thema

Weitere Referenzen

Viebrockhaus AG