Screenshotx Verbands-Website

Bereich Diakonie und Bildung des evangelisch-lutherischen Kirchenkreises Hamburg-Ost hatte bereits eine auf TYPO3 CMS basierte Website mit statischem Template. Sie traten nun an uns heran, weil sie das vorhandene Design auf den technisch neusten Stand bringen wollten. Die Aufgabe von networkteam war es deshalb, den Auftritt von Diakonie und Bildung zukunftssicher zu gestalten. 

Da das Design bereits vorgegeben war, konnten wir auf eine neue Konzeption vollkommen verzichten. Das Projekt wurde zwar weiterhin eng abgestimmt, aber der Aufwand war wesentlich geringer. Die Arbeit mit Mockups und Designentwürfen entfiel - auch für den Kunden. Nicht nur dadurch blieb der zeitliche Aufwand geringer als bei einem kompletten Relaunch, auch die Inhalte konnten auf die neue Website übernommen werden, es waren keine redaktionellen Anpassungen an ein neues Design notwendig. Der geringere Arbeitsaufwand schlug sich dann direkt in den Kosten für das Projekt nieder.
Um die Website auf den neusten Stand zu bringen, galt es zunächst, sie responsiv zu gestalten. Das statische Template wurde von uns skalierbar gemacht und passt sich nun an verschiedene Bildschirmgrößen an. Im Zuge dessen mussten wir eine neue Lösung für die sehr tief verschachtelte Navigation in der mobilen Ansicht entwicklen. Wir haben uns schließlich dafür entschieden, die einzelnen Navigationsebenen aufzubrechen. Über die Hauptnavigation lassen sich die erste und zweite Ebene öffnen, die dritte Ebene wurde in ein Dropdown-Menü ausgelagert. Wir konnten dadurch eine ähnliche Funktionsweise erzielen, wie in der Desktop-Ansicht, bei der die dritte Ebene in einer Seitenleiste zu finden ist. Die Navigation bleibt somit auch auf unterschiedlichen Geräten konsistent. Außerdem konnten wir auf diesem Wege genügend Platz für die Anzeige der Informationen sichern und dem Besucher der Website gleichzeitig Übersichtlichkeit und Flexibilität bei der Wahl der Inhalte gewährleisten. 
Ein weiterer Schritt bestand darin, den Header zu optimieren. Die Headerbilder waren bisher als Ganzes hinterlegt. Diese Bilder haben wir aufgeteilt und die unterschiedlichen Komponenten in mehreren Ebenen übereinander gelegt. In dem responsiven Header ist es so möglich, einzelne Elemente auf kleinen Displays auszublenden und die sichtbaren Bereiche, wie das Logo, weiterhin in einer lesbaren Größe darzustellen.

Highlights & Features

  • Responsive Umsetzung eines vorhandenen Designs
  • Kein neuer Konzeptions- und Designaufwand

  • Tief verschachtelte Navigation für Smartphones aufbereitet
  • Aufbereitung des Headers für responsive Darstellung

Mehr zum Fokusthema Mobile

Sie interessieren sich für eine mobile Lösung? Hier erfahren Sie alles zu diesem Thema