Webdesign

ALLGUTH Referenzbericht

Im Überblick

Allguth_Logo

Kunde: ALLGUTH GmbH
Branche: Tankstellen + ergänzende Dienstleistungen
Sitz: Gräfelfing
Zeitraum: Juli – Okt. 2013
Umfang: Redesign Webseite

 

“ALLGUTH – Ihr Partner für unterwegs”

 

Das Unternehmen

Die Firma ALLGUTH ist ein mittelständisches Familienunternehmen, das Dienstleistungen aus den vier Geschäftsfeldern Tankstelle, Waschstraße, Getränkemarkt und Shop in Kombination anbietet. Mit 35 solcher moderner Service-Center ist ALLGUTH in ganz Bayern dicht vernetzt.

Ganz bewusst hat sich das Unternehmen für Regionalität entschieden und das nicht zuletzt, weil damit der gelebte Grundsatz der Kundennähe sehr gut vereinbar ist. Das individuelle Servicekonzept garantiert darüber hinaus Wiedererkennung und bei den Kunden das Gefühl, ganz genau zu wissen, wo sie ihren Boxenstopp machen wollen. Denn Spitzenleistungen gehen hier Hand in Hand mit moderaten Preisen.

Genau dies vermittelt auch die neue Webseite, die Videri Concept für ALLGUTH mit integriertem Content Management System Typo3 erstellt hat. Interessierte können sich über den vollen Serviceumfang informieren, das Unternehmen und seine Geschichte kennenlernen sowie die am nächsten gelegenen Standorte über den Standortfinder herausfinden.

Die Herausforderung

Das Projekt lief im Juli 2013 an. Wir von Videri Concept haben zunächst mit der Konzeption und der Analyse der Anforderungen begonnen. Auf Basis eines bestehenden Grob-Konzepts entstand die detaillierte Vorstellung des Internetauftritts. Die Herausforderung bestand dabei darin, die bereits gewachsenen Strukturen der alten Webseite aufzubrechen und die einzelnen Bestandteile neu, logisch und strukturiert wieder zu vereinen.

Im Anschluss an die Konzeptionsphase entwickelten wir die neue Struktur des Internetauftritts. In enger Zusammenarbeit mit dem Kunden wurde zeitgleich das Design auf Basis vollflächiger Hintergrundbilder ausgearbeitet. Als Resultat entstand das finale Design des Internetauftritts mit einer zugrundeliegenden Struktur, die allen Anforderungen gerecht wird.

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. Der Prototyp war im August 2013 dann bereit für die Abnahme und damit 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 auch 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.

Die Projektverantwortlichen auf Kundenseite haben wir schon bald im Umgang mit dem System geschult, um die Integration der Inhalte und somit die ersten echten Erfahrungen mit dem System und der Usabiltity der Website zu ermöglichen. Die speziell für den Kunden entwickelten Plugins wurden nach und nach integriert und an das Design für Desktop und mobile Geräte angepasst.

Im Herbst 2013 war es dann soweit: Das System war nach mehreren fein gegliederten Abnahmestaffeln fertig und die Veröffentlichung des Internetauftritts konnte geplant werden. Nach einer mehrstufigen Schulungseinheit mit den einzelnen Verantwortlichen und der notwendigen serverseitigen Einstellungen zum Umzug der Webseite und Transport der Daten in des Rechenzentrum des Kunden, konnte es losgehen.

Ergebnis

ALLGUTH_Start

Link zur neuen Webseite


Typo3 CMS
Dem Internetauftritt des Kunden liegt das offene und freie Content Management System Typo3 zugrunde. Zusätzlich zum Standardfunktionsumfang von Typo3 haben wir Sonderwünsche des Kunden in das CMS integriert. Auf einige der individuellen Lösungen gehen wir nachfolgend ein.

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.

Stationsfinder mit JSON-Schnittstelle
In der zentralen Datenbank des Kunden werden die Kontakt- und Leistungsinformationen der verschiedenen Standorte von Tankstellen, Getränkemärkten, Waschstraßen und Shops verwaltet. Um eine Redundanz der Daten zu vermeiden, haben wir die bereits vorhandene Schnittstelle an Typo3 angebunden und in den neu gestalteten Stationsfinder integriert. Natürlich ist es auch möglich, die Suche mit verschiedenen Filtermöglichkeiten von den mobilen Geräten aus zu nutzen. Auch die Spritpreise sind über die Schnittstelle abrufbar und werden auf der Webseite gezeigt.

Vollflächige Bilder
Bei der gesamten Webseite arbeiten wir mit dem Stilelement vollflächiger Bilder, die den Flair der jeweiligen Servicebereiche perfekt transportieren. Aufgrund unterschiedlicher Transparenzstufen der Textfelder kann eine gute Lesbarkeit dennoch auf allen Seiten garantiert werden.

Referenzbericht zum Download

München, 20. Dezember 2013

Leave a Comment