23. Mai 2014

Mehrphasiges Webseiten-Facelift beim BDEW

Köln/Berlin

Die Webseite des BDEW soll in Zukunft auch auf mobilen Endgeräten optimal dargestellt werden. Um zeitlich und finanziell flexibler agieren zu können, wurde das umfangreiche Projekt in mehrere, aufeinander aufbauende Phasen unterteilt. Schritt für Schritt entsteht so ein vollständiges Responsive Design.

Neues Web-Design auch für mobile Endgeräte

Der Bundesverband der Energie- und Wasserwirtschaft e.V. (BDEW) vertritt über 1.800 Unternehmen aus den Bereichen Erdgas, Strom und Fernwärme, Wasser und Abwasser. Für seine Webseite www.bdew.de setzt der Verband seit Jahren auf das Content Management System TIMETOWEB der TIMETOACT. Eines der Kernelemente ist die Abbildung der gesamten Gremienarbeit mit Mitarbeitern sowie direkten und indirekten Mitgliedern.

Der BDEW wollte seine Internetpräsenz überarbeiten und zugleich für mobile Endgeräte optimieren. Unabhängig von Ausgabegerät und Bildschirmgröße sollte die Homepage gut strukturiert und komfortabel zu bedienen sein. TIMETOACT wurde damit beauftragt, das von einer Agentur überarbeitete Layout technisch umzusetzen.

Um das Projekt sowohl zeitlich als auch finanziell optimal gestalten zu können, wurde es in mehrere Phasen aufgeteilt:

Überarbeitetes Weblayout für Darstellung auf Laptop und Desktop-PC umsetzen
Responsive Design der Webseite für Blackberry & Geräte mit
iOS-Betriebssystem (Apple) umsetzen
Responsive Design der Webseite für Android-Betriebssystem
(u. A. Samsung, HTC, Sony) umsetzen
Weitere Performanceoptimierung für kürzere Ladezeiten auf
allen Geräten vornehmen

#64335023 © Syda Productions - Fotolia.com

Der BDEW kann jeden Projektteil einzeln beauftragen. Die einzelnen Teilstücke bauen aufeinander auf, sind aber bereits unabhängig voneinander lauffähig. Die Entwickler der TIMETOACT arbeiten in jeder Phase bereits auf das Gesamtziel, ein vollständiges Responsive Webdesign, hin.

Webdesign für Laptop und Desktop-PC mit ersten Responsiven Elementen

Ein vollständiges Responsive Webdesign vor Augen, wurde bei bereits in Phase eins mit einem „Grid“-Layout, HTML5 und CSS gearbeitet. Damit wurde der Grundstein dafür, die Webseite später für mobile Endgeräten zu optimieren, gelegt. In der Desktop-Version von www.bdew.de finden sich somit bereits einige Responsive Elemente: Das Framework selbst basiert auf Twitter Bootstrap, dessen Code standardisiert und für mobile Endgeräte optimiert ist.

Für Stilelemente, wie illustrierende Icons, wurden anstelle von Grafiken vollständig skalierbare Font-Icons verwendet. Für die mobilen Endgeräte müssen damit später keine weiteren Grafiken in unterschiedlichen Größen eingebunden werden, womit die Performance der Webseite verbessert wird.

Skalierbare Font-Icons statt datenintensiven Grafiken

Sind die Inhalte einer Kategorie auf mehr als eine Seite verteilt, stehen dem User wahlweise Pfeiltasten oder ein Wischeffekt zum Umschalten zur Verfügung. Der Wischeffekt funktioniert sowohl mit der Maus am Desktop-PC oder Laptop als auch mit den Fingern am Tablet-PC.

BDEW.de im Facelift - zuerst stationär, dann mobil

Die Entwickler der TIMETOACT und der BDEW arbeiten bei der Umsetzung eng zusammen. Über einen eigenen Zugang hat der BDEW jederzeit die Möglichkeit, sich den aktuellen Stand der Webseite live anzuschauen. Im Januar 2014 ging die Webseite des BDEW, optimiert für Laptop und Desktop-PCs, online. Die weitere Optimierung für mobile Endgeräte findet im laufenden Betrieb statt, so dass die Besucher der Webseite bereits von dem neuen Layout profitieren können.

Flexibles, mehrphasiges Projektmodell

Mit dieser flexiblen Projektaufteilung kann der BDEW seine Webseite für mobile Endgeräte optimieren, ohne gleich zu Beginn das dafür notwendige Gesamtbudget freigeben zu müssen. Die einzelnen Projektschritte werden jeweils erst dann beauftragt, wenn Budget und Zeit vorhanden sind. Es entsteht Schritt für Schritt eine moderne Webseite, die auch auf dem Smartphone, iPhone oder Tablet ansprechend gestaltet und einfach zu bedienen ist. Neue, moderne Features können unkompliziert in den flexiblen Projektplan aufgenommen und entsprechend der Kundenanforderungen umgesetzt werden. Da beständig an der Webseite gearbeitet wird, sind die verwendeten Technologien und Programmiersprachen zudem stets auf dem neuesten Stand.

Was ist ein „Responsive Design“?
Ein "Responsive Design" oder auch „Responsive Web-Design“ sorgt dafür, dass Webauftritte auf unterschiedlichen Endgeräten jeweils optimiert dargestellt werden. Die flexiblen Layouts passen sich den Bildschirmauflösungen dynamisch an. Webseiteninhalte, wie Texte, Fotos oder auch Navigation, werden entsprechend skaliert und angeordnet.

Tags:

Alle Tags

TIMETOWEB Anwender

Stimme aus dem Unternehmen

Ory Daniel Laserstein
Fachgebietsleiter Online-Medien, Geschäftsbereich Kommunikation, BDEW Bundesverband der Energie- und Wasserwirtschaft e. V.
„Mit TIMETOACT optimieren wir unsere Webseite Schritt für Schritt für mobile Endgeräte. Die Projektschritte passen sich komplett flexibel unserer Zeit- und Budgetplanung an.“