fFolgen Sie uns auch auf Facebook ... hier klicken.

Facelift der Website des DSC Arminia Bielefeld

von Markus Freise O Keine Kommentare

Ziemlich genau vier Jahre liegen zwischen diesem Blog-Beitrag und dem historischen Kopfball von Sebastian Hille zum 1:0 gegen den VfL Osnabrück und dem damit verbundenen Wiederaufstieg des DSC Arminia Bielefeld in die 2. Fußball-Bundesliga.

Mit diesem sportlichen Erfolg war im Frühjahr 2013 der Relaunch der Website des DSC Arminia Bielefeld verknüpft. So köpfte Hille eben nicht nur die Arminia eine Klasse höher, sondern bescherte uns auch die Aufgabe, „unserem“ Verein ein neues digitales zu Hause zu erschaffen. Damals war die Aufgabe ganz klar, die zwar stabile, aber in die Jahre gekommene Typo3-Architektur durch eine zeitgemäße und agilere WordPress-Installation abzulösen. Zudem war in 2013 längst klar: Eine responsive Ansicht für Smartphones ist unabdingbar.

Jetzt nicht nur „okay“ auf Tablets, sondern optimiert. Die neue Website des DSC Arminia Bielefeld.

Was folgte, war ein arbeitsreicher Sommer, in dem wir eben nicht nur das Design und die Struktur anpassten, sondern auch unter der Haube einiges taten. Von besagtem Responsive Design bis hin zur XML-Anbindung des Live-Ergebnisdienstes OPTA und die Erstellung einer Schnittstelle, um die Vereins-App über eine dedizierte API mit den News und Team-Infos der Website zu beliefern.

Vier Jahre Internet sind lang … vier Jahre Arminia eine Ewigkeit

Nun ist das vier Jahre her. Eine Zeitspanne, in der nicht nur der DSC vieles erlebt hat – Ab- und Aufstiege, Relegationsdramen, Pokalsensationen usw. – sondern in der auch in der digitalen Kommunikation die Entwicklung ungebremst vonstatten geht. Responsive Design war in 2013 beispielsweise noch eine ganz andere Aufgabe als in 2017.

Ein weiterer Punkt ist, dass die Kommunikation im digitalen Raum längst heterogen ist. Neben der Homepage als Hub Ihrer Unternehmenskommunikation, läuft diese vor allem über Social Media-Channels wie Facebook, Instagram und YouTube.

Aus diesem Grund stellten wir uns und Arminia im Herbst 2016 die Frage: Wie reagieren wir hinsichtlich der Website darauf?

Der Vorteil eines dedizierten WordPress-Themes

Ein vollständiger Relaunch wäre falsch gewesen. Zum einen hätte das wichtige Budgets gebunden. Zum anderen war das Fundament der Site noch immer sehr gut. Dadurch bedingt, dass wir uns 2013 bei der Neuerstellung der Homepage bewusst dazu entschieden haben, nicht dem unsäglichen Trend zu folgen, jeder Aufgabe mit einem fertigen WordPress-Theme zu begegnen. Das erscheint oft auf den ersten Blick als die wirtschaftlichere Lösung. Am Ende – oder mittendrin – ist es dann meist unmöglich, den fremden Code anzupassen oder zu erweitern. Und wenn, dann nur mit Einbussen in Stabilität und Sicherheit. Verbundgen mit hohen Kosten, die anderswo besser ausgegeben wären.

Wir hingegen kannte jede Code-Zeile und wussten genau, wo wir anpacken müssen, um das Theme arminia2015 (ein kleineres Facelift gab es vor zwei Jahren) zu arminia2017 zu migrieren.

  • Technologisch verwarfen wir dazu die bestehenden CSS-Strukturen und lösten sie durch eine moderne SCSS/CSS-Lösung ab.
  • Im gleichen Zug räumten wir den Theme-Ordner auf und befreiten ihn von einigem Ballast. Gut 90% des Codes aus 2013 konnten wir jedoch problemlos weiterverwenden.
  • Das responsive Design befreiten wir vom Korsett einiger weniger Breakpoints, machten es so flexibel wie möglich und reagierten damit auf die Vielfalt an Displaygrößen.
  • Die unübersichtliche mobile Navigation ersetzten wir vollständig durch eine neue aufgeräumte und informativere Lösung.
  • Neben der komplett neuen Startseite – siehe unten – räumten wir auch auf den Unterseiten auf. Oft in Details, aber immer in Hinblick auf eine Optimierung.

Die Startseite als Portal

Die augenfälligste Änderung war der komplette Umbau der Startseite. Hier einmal die Ansicht des vorherigen Aufbaus und des Facelifts

Website des DSC Arminia Bielefeld aus 2016

Facelift der Website des DSC Arminia Bielefeld

Die wesentlichen Änderungen der Startseite

  • Vor allem das Weglassen des Headers war ein großer Gewinn. Nicht nur, dass dieser viel Raum einnahm, war es – aus dem Nähkästchen geplaudert – immer schwierig, regelmäßig neues Bildmaterial zu finden, das dieser Fläche gerecht wurde.
  • Die fehlende Visualität fingen wir mit der Vergrößerung der Slideshow mit den Top-News auf.
  • Zudem war eine Aufgabe, die Auffindbarkeit des Fan- und Ticketshops zu erhöhen. Vorher durch einen einfachen Textlink gelöst, entschieden wir uns an dieser Stelle für einen grafischen Weg.
  • Prominent an gleicher Stelle präsentiert sich nun auch der für den Verein wichtige Kommunikations-Kanal YouTube mit den jeweils aktuellen Videos.
  • Die Anzahl der sogenannten Aktionsflächen, als der internen „Werbebanner“ dampften wir mächtig ein. Analysen ergaben, dass diese nicht wirklich genutzt wurden. Hier entschieden wir uns für größere Flächen.
  • Die direkte Möglichkeit zur Anmeldung des Vereins-Newsletters ist ein weiteres neues Element auf der Startseite.

Somit versteht sich der Einstieg der Website des DSC Arminia Bielefeld auch als Portal in die vielfältigen Strukturen, die ein Fußballverein in der 2. Fußball-Bundesliga mit sich bringt.

Gleichzeitig zeigt diese Fallstudie, dass es sehr sinnvoll ist, von Beginn an auf eigene Strukturen und Codes zu setzen. So haben Sie zu jedem Zeitpunkt die Möglichkeit, ihre Website als wichtiges Instrument in der digitalen Kommunikation den jeweiligen Entwicklungen Ihres Unternehmens und den Strömungen und Fortschritten im Internet anzupassen.

Besuchen Sie die Website des DSC Arminia Bielefeld

Wenn Sie Fragen oder Anmerkungen zu den hier geschilderten Dingen oder anderen Aspekten rund um digitale Kommunikation, Grafik-Design und Internet haben, freuen wir uns über ihren Anruf unter 0521/97797996 oder eine E-Mail an info@designbuero-freise.de. Und falls Sie am Ball bleiben wollen, empfehlen wir Ihnen, unseren Newsletter zu abonnieren oder dem Designbüro Freise auf Facebook zu folgen.

t

Bislang keine Kommentare. Haben Sie eine Frage, oder Anmerkung? Dann hier klicken.

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlich.

Vielen Dank für Ihren Beitrag.