Redesign/Relaunch Website FC Aarau

Die neue Website des Fussballclubs Aarau habe ich Anfangs 2016 online gestellt (Artikel dazu)

Die folgenden Screens habe ich direkt von der aktuellen Online-Version der Website (Juni 2017) generiert.
Startseite

Der Magazin-Charakter der Website ist bereits auf der Startseite spürbar. Der Header-Bereich wird von einem grossen Teaser dominiert, der bei einem Page-Reload wechseln kann.

Die Teaser der News-Beiträge sollen möglichst viele Inhalte auf die Startseite holen. Sponsoren und grosser Hinweis auf das nächste Spiel runden die Inhalte der Startseite ab. Bei einem Spieltag wird der Hinweis auf das nächste Spiel im Header-Bereich angezeigt anstatt des grossen Teasers.
Tabelle

Den Stand des aktuellen Wettbewerbs jederzeit möglichst ausführlich unter die Lupe nehmen zu können, scheint für Fussball-Fans von eminenter Wichtigkeit. 

Deshalb habe ich beim Umsetzen der Tabelle darauf geachtet, dass man sich auch auf Tablet und Mobile möglichst schnell über aktuellen Stand des Wettbewerbs informieren kann und bei Klick auf einen Club Einblick in sämtliche verfügbaren Informationen kriegt.

Spielplan und Spiel (Detail)

Die Spielplan-Übersicht zeigt die zukünftig stattfindenden Spiele des Clubs.

Auf der Detailseite eines Spiel findet man die wichtigsten Infos zum Spiel sowie die dazugehörenden News-Beiträge.
News

Die News-Beiträge sind das Kernstück der Website des FC Aarau. Der Magazin-Charakter der News-Beiträge soll die User zu längerem Verweilen und Schmökern auf der Website einladen. Dank verschiedener Inhaltselementen kann dem User eine vielfältige Palette an abwechslungsreicher Berichterstattungen geboten werden.
Sponsoren-Porträts

Ohne Sponsoren könnte der Fussballsport im Aargau nicht in dieser Form gelebt werden, deshalb wird den Sponsoren auf der Website den gebührenden Respekt gezollt.
Navigation

Die Navigation der Website des FC Aarau besteht aus einem primären (Hauptnavigation) und einem sekundären (Service-/Metanavigation)-Teil.

In der Desktop-Ansicht wird der primäre Teil der Navigation sehr prominent im Header-Bereich auf derselben Höhe wie das Logo dargestellt. Der sekundäre Teil wird dezenter in einem schwarzen Balken oberhalb des Header-Bereichs dargestellt.

In der Tablet- und Mobile-Ansicht ist der visuelle Teil der Navigation auf ein Minimum reduziert (Breadcrumbs). Erst bei Klick auf das Menu-Icon (Hamburger) wird die Off-Canvas-Navigation vom rechten Bildrand her eingeblendet.

Auch in der Tablet- und Mobile-Ansicht - sprich in der Off-Canvas-Navigation - wurde die thematische Gliederung der Navigation beibehalten. Die Unterscheidung wird mit Hilfe unterschiedlicher Farben (orange-gelb für primäre, grün für sekundäre) ausgezeichnet.

Umsetzung - ein Markup für alle Ansichten
Bei der Umsetzung habe ich darauf geachtet, dass sämtliche Ansichten (Mobile bis Desktop) mit Hilfe eines (und dementsprechend semantisch möglichst korrekten) Markups umgesetzt werden können.

Die Icons der primären Navigationspunkte können über das CMS definiert werden. Sofern Javascript aktiviert ist und der Browser SVG-Dateien darstellen kann, werden die Icons über Javascript ins Markup eingefügt und via CSS eingefärbt. Die Icons werde absichtlich nachträglich via Javascript ins Markup eingefügt, um die Grösse der Page möglichst gering halten zu können (siehe Lade-Performance der Website weiter unten).
Im Anstellungsverhältnis erstellt

Das Redesign der Website für den FC Aarau habe ich während meiner Anstellung bei der H2G Internetagentur erstellt.

Projektdauer
Im November 2014 habe ich erste Design-Entwürfe erstellt. Ab Mai 2015 habe ich nebst der Arbeit am Design mit der Umsetzung begonnen (Front- sowie Backend). Ab November 2015 konnte von Seiten des FCA mit dem Abfüllen einzelner Inhalte begonnen werden. Die Website haben wir Anfangs Februar 2016 online gestellt.

Wordpress als CMS
Sämtliche Inhalte können über das CMS verwaltet werden. Die Personenporträts, Spiele, und News-Beiträge können von Redakteuren, die Sponsoren sowie die Werbeverwaltung können von Marketing-Verantwortlichen gepflegt werden.

Ich habe das Backend von Wordpress auf die Bedürfnisse des Fussballclubs angepasst und die Übersichtsseiten/-Ansichten mehrerer Inhaltstypen um wichtige Zusatzfunktionen ergänzt.

Um den Redakteuren die Pflege des Inhaltes zu erleichtern werden Spielergebnisse sowie neue Spieler oder Clubs der entsprechenden Liga automatisch aus der Datenbank der Swiss Football League ins CMS importiert.

Für die Website des FCA habe ich ein eigenes Theme entwickelt - mobile first und mit Fokus auf möglichst performantes Laden der einzelnen Seiten im Frontend.

Lade-Performance der Startseite
Ergebnis der Pagespeed Insights von Google: 90 von 100 auf Desktop
Ergebnis WebPagetest über Cable: Speed-Index von knapp 1200