Die (fast) perfekte Webseite für Sportvereine

von

Heutzutage sollte die Webseite eines Sportvereins nicht mehr nur einige wenige Informationen zu den Mannschaften und zum Club enthalten. Sie sollte vielmehr das digitale Aushängeschild des Vereins sein und diesen mit einem interaktiven, intuitiven und vor allem informativen Auftritt nach aussen repräsentieren.

Was braucht die Webseite eines Fussballclubs also, damit sie den heutigen digitalen Ansprüchen genügt? Mit dem Projekt FC Demo habe ich versucht, einen möglichst modernen und kompletten Auftritt für eine Vereinswebseite zu bauen.

Alles Wichtige auf einer Plattform


Die FC Demo Webseite ist auf Italienisch, Deutsch, Französisch und Englisch verfügbar und für Computer und Smartphones optimiert. Die Startseite führt aktuelle Vereinsinformationen, News und verschiedene Medieninhalte zusammen.

Spielpläne, Resultate und Tabellen werden über Daten von football.ch beziehungsweise dem Schweizerischen Fussballverband eingebunden und werden in regelmässigen Abständen automatisch aktualisiert. Eine Mannschaftsseite zeigt Spielerprofile und Informationen rund um die erste Mannschaft. Für den Nachwuchsbereich gibt es eine eigene Unterseite mit Links zu den jeweiligen Spielplänen und Tabellen auf der SFV-Webseite. Auf einer weiteren Seite wurde ein Kalender eingebettet, der mit Google Kalender verbunden ist und direkt den aktuellen Spielplan und die Platzbelegung durch die verschiedenen Mannschaften zeigt.

Zudem ergänzen Videos, Social-Media-Beiträge und eine Spotify-Matchday-Playlist die restlichen Inhalte und machen das Design interaktiver. Weitere Bereiche informieren über die Vereinsgeschichte, das Organigramm im Verein, Sponsoringmöglichkeiten, offene Stellen und die Anreise zum Stadion. Über verschiedene Formulare können Besucherinnen und Besucher Kontakt aufnehmen, sich für einen Newsletter anmelden oder Bewerbungsunterlagen hochladen.

Ein eingebundener KI-Chat von Chatbase unterstützt dabei, Informationen innerhalb des umfangreichen Angebots schneller zu finden. Er beantwortet Fragen auf Grundlage der hinterlegten Inhalte der Demo-Webseite.

Startseite der FC-Demo-Webseite in der Desktopansicht

Gestalterisch verbindet die Webseite dunkles Blau, Rot und helle Flächen mit einer handschriftlichen Akzentschrift. Der Auftritt soll sportlich und dynamisch wirken und für die Nutzenden einfach zu bedienen sein.

Ein eigener Shop für Fans


Unter einer separaten Subdomain ergänzt ein Onlineshop die Vereinswebseite. Produkte lassen sich durchsuchen und filtern sowie auf einer Wunschliste speichern. Es sind jeweils Produktvarianten wie unterschiedliche Grössen und verschiedene Versandmöglichkeiten verfügbar. Ist man an einem Artikel interessiert, kann man ihn in den Warenkorb legen und anschliessend mit verschiedenen Zahlungsmethoden bezahlen. Die Bezahlung ist in Schweizer Franken oder Euro möglich und wird durch den Anbieter Stripe ausgeführt.

Die Oberfläche des Shops wurde mit Next.js und dem Open-Source-Commerce-System Medusa umgesetzt. Medusa übernimmt im Hintergrund die Verwaltung von Produkten, Varianten, Warenkörben und Bestellungen. Das Shop-System läuft auf einem VPS (Virtual Private Server). Dadurch konnte ich die technische Umgebung selbst konfigurieren und war nicht von einem fertigen Shop-Baukasten abhängig.

Onlineshop mit Produktübersicht

Die Vereinswebseite ist unter demo.cineluuk.ch erreichbar. Der Onlineshop befindet sich unter shop.demo.cineluuk.ch.

(nsc)

Konzept und Medienwahl

Ich entschied mich bewusst für eine interaktive Webseite, weil sich die verschiedenen Inhalte eines Fussballclubs damit laufend aktualisieren und miteinander verknüpfen lassen. Das Experiment bestand für mich darin, redaktionelle Inhalte, Live-Daten, Multimedia, Formulare und E-Commerce in einem einheitlichen Auftritt zusammenzuführen. Rückblickend war dieser Umfang gleichzeitig die Stärke und die grösste Schwierigkeit des Projekts.

Umsetzung und Workflow

Zu Beginn definierte ich die Informationsarchitektur und die visuelle Grundgestaltung. Anschliessend setzte ich zuerst die zentralen Seitenelemente und danach die einzelnen Unterseiten um. Die Vereinsseite entstand mit HTML, CSS und JavaScript. Für den Shop arbeitete ich mit Next.js, Medusa und einer Stripe-Testumgebung.

Besonders zeitintensiv waren das responsive Verhalten, die vier Sprachversionen und die Einbindung externer Dienste. Da viele Funktionen voneinander abhängen, führten kleine Änderungen teilweise zu unerwarteten Problemen an anderen Stellen. Ich hätte früher ein kleineres Grundsystem fertigstellen und dieses konsequenter testen sollen, bevor weitere Funktionen dazukamen.

Selbstkritik

Nicht alle Bereiche sind gleich stark ausgearbeitet. Einige Inhalte sind noch klar als Demodaten erkennbar, und durch die zahlreichen externen Einbettungen hängt ein Teil der Nutzererfahrung von Drittanbietern und den gewählten Cookie-Einstellungen ab. Für die Darstellung einiger Inhalte musste ich einen Verein als Beispielquelle verwenden. Hier habe ich mich für den FC Mendrisio entschieden, da es ein mittelgrosser Verein ist, der die nötigen Inhalte auf den sozialen Medien veröffentlicht und in der Zielgruppe für eine solche Webstruktur sein könnte. Auch die manuelle Pflege der vier Sprachen ist auf Dauer fehleranfällig. Für eine produktive Version würde ich die Inhalte deshalb über ein zentrales CMS verwalten und die Abhängigkeit von externen Diensten reduzieren.

Da es sich um eine Einzelarbeit handelte, gab es keinen eigentlichen Gruppenprozess. Dadurch konnte ich Entscheidungen schnell treffen, musste aber Gestaltung, Inhalt, Programmierung und technische Tests selbst koordinieren. Früheres Feedback von Testpersonen hätte mir geholfen, Prioritäten klarer zu setzen und gewisse Umwege zu vermeiden.

Mein wichtigstes Learning ist, den Umfang einer Webseite nicht nur nach sichtbaren Seiten, sondern auch nach Übersetzungen, Datenquellen, Fehlerfällen und Wartung zu beurteilen. Bei einem nächsten Projekt würde ich früher mit echten Nutzungsszenarien testen und zunächst eine kleinere, stabile Testversion entwickeln.

Die eingebetteten Inhalte und Dienste von football.ch/SFV, YouTube, Spotify, Google Calendar, Curator.io, Chatbase, Web3Forms und Cloudflare stammen von den jeweiligen Anbietern. Die technische Einbindung und die Gestaltung innerhalb der FC-Demo-Webseite wurden im Rahmen dieses Projekts umgesetzt. Die Projekt-Domain bezieht sich auf die cineluuk.ch Hauptseite.