Webdesign

AVATHERM Referenzbericht

Im Überblick

Avatherm


Kunde
: AVATHERM GmbH
Branche: Transportsysteme
Sitz: Maisach-Gernlinden
Zeitraum: Jan. – Okt. 2013
Umfang: Redesign CI + Website
 
 
 
 

“AVATHERM – Der Spezialist für isolierte Transportbehälter
im Familienbetrieb”

 

Das Unternehmen

Avatherm ist ein Familienunternehmen, das seit nun mehr als 20 Jahren auf die Herstellung von isolierten Transportbehältern für unterschiedliche Branchen spezialisiert ist und sich neben den wenigen weltweit führenden Herstellern marktführend behauptet. Besonders wichtig ist dem Unternehmen dabei der hygienische, sichere, temperaturbeständige und umweltfreundliche Transport unterschiedlichster Waren. Kein anderer Hersteller kann durch ein besseres Preisleistungsverhältnis und größere Innovationskraft überzeugen.

Die Kunden von Avatherm kommen aus den Bereichen Gastronomie, Lieferservice, Medizin und Militär. Entsprechend vielfältig ist das angebotene Produktportfolio. Es umfasst sowohl die verschiedenen Thermoboxen selbst, als auch Trolleys zu deren leichtem Transport und unterschiedliche Ersatz- und Zubehörartikel wie Taschen und Tabletts. Diese Produktvielfalt ansprechend und strukturiert im Rahmen eines neuen Internetauftritts darzustellen, war unsere Aufgabe.

Die Herausforderung

Mit Projektstart im Januar 2013 begann die erste Phase der Anforderungsanalyse und Konzeption. Auf Basis der im Rahmen der Ausschreibung erstellten Teilschritte und Anforderungen an einzelne Funktionen entstand die grobe Vorstellung des Internetauftritts. Dabei bestand die besondere Herausforderung zunächst darin, die beiden bisherigen Internetauftritte für Deutschland und die Türkei sinnvoll zu vereinen und dem Ganzen eine einheitliche Struktur zu verleihen.

Im Anschluss an die Konzeptionsphase entwickelten wir die ersten Designs sowie parallel die neue Struktur des Internetauftritts. Dabei mussten wir sowohl die vielen, teils doppelt vorhandenen Inhalte für die Enduser ordnen als auch ein Konzept vorlegen, wie es möglich ist, die jeweiligen Produktgruppen für spezifische Branchen als eigene Familienmarken herauszuarbeiten. Im Ergebnis entstand das Design des Internetauftritts mit einer zugrundeliegenden Struktur, die allen Anforderungen gerecht wird. Nach zwei aufeinanderfolgenden Designiterationen hatten wir im Sommer 2013 das finale Design gefunden, das alle Projektverantwortlichen überzeugte.

Nach der Konzeption und der Designphase ging es wie geplant weiter. Als nächstes wurden alle Designs als HTML-Templates umgesetzt. Der HTML-Prototyp entstand auf Basis von HTML5, CSS3 und jQuery. Ein zugrundegelegtes individuelles Raster war nötig, um dem Prototypen die Flexibilität zur Anzeige auf mobilen Endgeräten zu ermöglichen. Das Ergebnis kann sich sehen lassen: Ein responsive Webdesign basierend auf HTML5, CSS3 (SaSS) und jQuery, mit den mobilen Ansichten für kleine Endgeräte wie iPhones sowie größeren mobilen Endgeräten wie iPads. Mit der Abnahme des Prototypen war die Phase der Template-Entwicklung abgeschlossen.

Anforderungsprofil

Im Anforderungsprofil des Kunden war die Integration eines OpenSource CMS festgelegt. Als Spezialisten für Content Management Systeme haben wir uns gemeinsam mit dem Kunden für das offene und freie CMS Typo3 entschieden. Als langjährige Integratoren und Typo3-Experten war uns von Anfang an klar, dass wir mit Typo3 alle Anforderungen des Kunden mindestens erfüllen, in weiten Teilen auch übererfüllen können. Dazu war nicht nur die Standardauslieferung von Typo3 notwendig, sondern an vielen Stellen eine individuelle Anpassung und Neuentwicklung von Plugins. Die Phase der CMS-Integration beginnt klassischerweise mit der Installation und Konfiguration des Systems. Die Entwicklung des Prototyps und die Integration der Templates in Typo3 erfolgte wie in jedem Projekt über ein von uns bereitgestelltes Entwicklungssystem, das dem Kunden jederzeit zugänglich war.

Bereits mit einem Projektfortschritt von ca. 80 % haben wir begonnen, die Projektverantwortlichen auf Kundenseite im Umgang mit dem System zu schulen, um die Integration der Inhalte und somit die ersten echten Erfahrungen mit dem System und der Usabiltity der Website zu ermöglichen.

Im Herbst 2013 war das System nach mehreren fein gegliederten Abnahmestaffeln fertig und die Veröffentlichung der Webseite konnte geplant werden. Nach einer Schulungseinheit mit den Projektverantwortlichen auf Kundenseite und den notwendigen serverseitigen Einstellungen konnte es losgehen.

Das Ergebnis

Avatherm_Start

Link zur neuen Webseite

Die farbenfrohe Website hat System – sie ordnet jeder Branche einen für sie charakteristischen Farbton zu, was die Orientierung auf den jeweiligen Seiten deutlich erleichtert.

Typo3 CMS
Dem Internetauftritt des Kunden liegt das offene und freie Content Management System Typo3 zugrunde. Ein großer Vorteil des Systems für dieses Projekt liegt in der einfachen Handhabung von Mehrsprachigkeit. Darauf werden wir gesondert eingehen.

HTML5 + CSS3 Templates
Alle Templates für das Typo3-System basieren vollständig auf HTML5 und CSS3. Die teilweise browsersensitiven Funktionen wurden mit Hilfe von SaSS und Compass auch für ältere Browser kompatibel gemacht. Aufgrund der Anforderung, auch diese älteren Browser zu unterstützen, haben wir uns gegen den oft präferierten mobile First Ansatz entschieden.

Responsive Design
Dank des extrem soliden Grundgerüsts und unserer modernen Infrastruktur stellt die Entwicklung eines responsive Webdesigs keine große Herausforderung für uns dar. Auf Basis zweier festgelegter Bildschirmbreiten definieren wir Breakpoints, also Schlüsselstellen, an denen das Design seine Form ändert und sich an die neue Breite anpasst. Innerhalb der Breakpoints variieren die Größen der Inhalte je nach Auflösung automatisch. Auf diese Weise entstehen Webseiten, die auf allen Endgeräten Informationen schnell und effizient vermitteln und das Ziel der Seite nicht aus den Augen verlieren.

Mehrsprachigkeit
Ursprünglich gab es eine eigene Homepage für die Türkei und eine für den deutschsprachigen Raum. Die von uns kreierte AVATHERM – Webseite kombiniert beide Webseiten und liefert sämtliche Inhalte auf deutsch, englisch und türkisch. Spezifische Inhalte, die nur in einzelnen Sprachen angezeigt werden sollen, stellen dabei kein Problem dar.

Slider-Funktion
Besonderes Highlight der Startseite ist ein Slider, der verschiedene Bannerbilder im Wechsel anzeigt. Auf diese Weise lassen sich die einzelnen Geschäftsbereiche des Unternehmens übersichtlich und gleichgewichtet darstellen. Mehrere Teaser machen zudem schnell die Spezifika jeder Sparte deutlich.

Zuordnungsoptionen bei der Produktdarstellung
Typo3 bietet zudem die Möglichkeit, einem angelegten Produkt mehrere Elemente wie beispielsweise Detailbilder, lieferbare Farbtöne, Zubehörteile und Merkmals-Icons zuzuordnen.

Produktverwaltung
Speziell für die Anforderungen des Kunden haben wir die Basisfunktionalität von Typo3 erweitert und eigene Plugins entwickelt um die Produktkategorien und deren Produkte zu verwalten. Auf diese Weise ist es uns möglich, die Produkte in einer Art “Onlineshop”-Struktur darzustellen. Natürlich ist die Darstellung der Produkte wiederum mehrsprachig und perfekt in das responsive Design eingepasst.

Referenzbericht zum Download

München, 30. Januar 2014

Leave a Comment