SBK Ādaži – Design und Entwicklung der Website eines Frauen-Basketballvereins

Die Website von SBK Ādaži ist die Seite eines Frauen-Basketballvereins, deren Design und Entwicklung CREATING.LV übernommen hat. Der Verein brauchte eine Website, die das Team und die Spielerinnen vorstellt, das Vereinsleben in Fotos zeigt und Interessentinnen hilft, sich für das Team anzumelden oder wegen einer Zusammenarbeit Kontakt aufzunehmen.

Die Website richtet sich an zwei Hauptgruppen: Mädchen und Frauen, die Basketball spielen möchten, und alle, die mit dem Verein zusammenarbeiten möchten. Beide Gruppen brauchen einen kurzen Weg vom ersten Eindruck bis zur Kontaktaufnahme. Deshalb zeigt diese Basketballvereins-Website nicht nur das Team, sondern bietet auch ein Anmeldeformular und eine stets verfügbare WhatsApp-Schaltfläche.

CREATING.LV hat das Design der Website erstellt und die Seite entwickelt: Struktur und Bereiche, Vorstellung der Spielerinnen, Galerie, Animationen, ein Anmeldeformular mit serverseitiger Verarbeitung und die technische SEO-Grundlage. Das Projekt umfasste sowohl das visuelle Konzept als auch die Programmierung – eine vollständige Website-Entwicklung bis hin zu einer Seite, die Anmeldungen per E-Mail versendet.

Die Website hat fünf Bereiche und eine eigene 404-Seite:

• Start – Einstiegsansicht mit einer Basketballspielerin und dem Slogan “Mūsu laukums. Mūsu spēle.” („Unser Spielfeld. Unser Spiel.“) sowie ein Spielerinnen-Karussell;
• Team – die Spielerinnen einzeln mit Bild, Name und Nummer;
• Training und Spiele – eine Seite, die für Informationen zu Training und Spielen vorbereitet ist;
• Veranstaltungen und Galerie – Fotos aus dem Vereinsleben;
• Kontakt – Kontaktmöglichkeiten sowie Links zu WhatsApp, Instagram und Facebook.

Die Struktur ist bewusst kurz gehalten: Über das Menü gelangen Besucher direkt zum Team, zu den Fotos oder zu den Kontaktdaten. Die eigene 404-Seite erscheint, wenn ein Besucher eine nicht vorhandene Adresse aufruft, etwa einen falsch eingegebenen Link: Er bleibt auf der Vereinsseite, statt die Standard-Fehlermeldung des Servers zu sehen.

Die Spielerinnen werden auf der Website auf zwei Arten gezeigt. Auf der Startseite gibt es ein horizontales Spielerinnen-Karussell, das sich scrollen lässt, wobei jede Karte an ihrer Position einrastet (scroll-snap). Auf der Teamseite werden die Spielerinnen einzeln gezeigt – mit Bild, Name, Nummer und einem Zähler, der anzeigt, welche Spielerin des Teams gerade zu sehen ist.

Beide Seiten nutzen eine gemeinsame Datenquelle für die Spielerinnen. Ändert sich der Kader, müssen die Daten nur an einer Stelle korrigiert werden, und die Änderungen erscheinen sowohl auf der Startseite als auch auf der Teamseite. So können in zwei Teilen der Website keine unterschiedlichen Kader entstehen.

Im Bereich „Veranstaltungen und Galerie“ sind Fotos aus dem Vereinsleben von Spielen und Trainings zusammengestellt. Bilder in unterschiedlichen Proportionen bilden ein abwechslungsreiches Raster, und jedes Foto lässt sich in einer vergrößerten Ansicht (Lightbox) mit einer Bildunterschrift öffnen, die erklärt, was zu sehen ist.

Der Bereich „Du willst Basketball spielen? Komm zu uns!“ lädt Interessentinnen ein, dem Verein beizutreten. Die Anmeldung erfolgt in einem einzigen Dialogfenster mit zwei Modi – „dem Team beitreten“ und „Zusammenarbeit anbieten“. So genügt für beide Ziele ein Formular, und am gewählten Modus ist erkennbar, worum es in der Anmeldung geht.

Die Anmeldung wird serverseitig von einem PHP-Skript verarbeitet, das:

• die ausgefüllten Felder prüft;
• mit einem versteckten Feld (Honeypot) vor Spam schützt;
• zu häufige Anfragen begrenzt;
• die Anmeldung per SMTP an die E-Mail-Adresse sendet.

Der E-Mail-Empfang wurde für beide Modi getestet. Ergänzt wird das Formular durch häufig gestellte Fragen, eine schwebende WhatsApp-Schaltfläche und Links zu den Instagram- und Facebook-Konten des Vereins. So kann eine Interessentin den für sie bequemsten Weg wählen: das Formular ausfüllen, eine Nachricht schreiben oder zuerst die Antworten auf häufige Fragen lesen.

Ein Honeypot ist ein Formularfeld, das Besucher nicht sehen, das automatisierte Spam-Programme aber meist ausfüllen. Anhand dieses Felds kann das Skript automatische Einsendungen von solchen unterscheiden, die Menschen ausgefüllt haben. Die Häufigkeitsbegrenzung verhindert, dass in kurzer Zeit zu viele Anfragen gesendet werden. Beide Verfahren sollen verhindern, dass automatisch erzeugte Nachrichten im Postfach landen und echte Anmeldungen darin untergehen.

Grundlage des Designs ist ein Basketballfeld: Spielfeldlinien, die Flugbahn des Balls und Katzenpfoten als Akzent der Vereinsmarke. Violette und dunkle Töne, orangefarbene Akzente und die Schriften Archivo und Manrope bilden eine einheitliche visuelle Sprache, die alle Seiten der Basketballvereins-Website stilistisch verbindet, während Fotos und Nummern der Spielerinnen diese Stimmung in der Teamvorstellung fortführen.

Der Wurf des Balls wird mit GSAP animiert, und die Animation berücksichtigt die Einstellung für reduzierte Bewegung, die Nutzer auf ihrem Gerät aktivieren können. Diese Einstellung aktivieren meist Menschen, denen bewegte Bildschirmelemente das Lesen erschweren oder Unbehagen bereiten – ihre Berücksichtigung ist daher Teil der Barrierefreiheit der Website. Auf dem Smartphone öffnet sich das Menü über die Menü-Schaltfläche, die Kopfzeile bleibt auch beim Scrollen sichtbar, und das Layout passt sich an schmale Bildschirme an.

Die Website von SBK Ādaži wurde mit Astro 4 und TypeScript erstellt und wird statisch generiert: Die Seiten werden vorab als HTML-Dateien erzeugt, daher ist für die Anzeige der Inhalte keine Datenbank nötig. Die Übergänge zwischen den Seiten übernimmt Astro View Transitions, für Animationen wird GSAP verwendet, und Anmeldungen verarbeitet ein PHP-Skript auf dem Server. View Transitions lassen den Wechsel von einer Seite zur nächsten als fließende Animation erscheinen, obwohl jede Seite weiterhin eine eigene HTML-Datei ist.

Die SEO-Grundlage ist bereits im Code angelegt:

• jede Seite hat eigenen Titel, Beschreibung, kanonische Adresse und Open-Graph-Daten;
• strukturierte Daten – WebSite, BreadcrumbList, SportsTeam und FAQPage, die Suchmaschinen in maschinenlesbarer Form die Website, die Position der Seite in der Website-Struktur, das Sportteam sowie die häufig gestellten Fragen mit Antworten beschreiben;
• Sitemap, robots.txt und llms.txt – Letztere ist eine kurze Beschreibung der Website in einer Textdatei, die für KI-Tools gedacht ist.

Eine statische Website hat kein Backend und keine Datenbank, die regelmäßig aktualisiert werden müssen, daher gibt es weniger zu wartende Komponenten. Der einzige dynamische Teil ist die serverseitige Verarbeitung der Anmeldungen, geschützt durch Feldprüfung, Honeypot und Häufigkeitsbegrenzung. Inhaltliche Änderungen, etwa das Hinzufügen einer neuen Spielerin, werden in den Projektdaten vorgenommen und die Website anschließend neu generiert. Bei der Planung einer solchen Website sollte daher von Anfang an vereinbart werden, wer die Inhalte aktualisiert.

Eine solche Sportvereins-Website eignet sich für Vereine, Teams und Verbände, die ihren Kader und das Vereinsleben zeigen und Anmeldungen neuer Mitglieder oder Partner entgegennehmen möchten. Eine statische Website mit einem Anmeldeformular ist passend, wenn die Inhalte nicht täglich aktualisiert werden müssen. Veröffentlicht der Verein selbst häufig Neuigkeiten, kann auch eine Lösung mit Content-Management-System gewählt werden, zum Beispiel WordPress.

Eine ähnliche Sportvereins-Website kann auch einem Fußball-, Volleyball- oder Eishockeyteam dienen: Spielerdaten, Galerie und Anmeldeformular sind universell, das Design muss jedoch für jeden Verein aus dessen eigener Marke entwickelt werden. Mehr zu Gestaltung und Benutzerfreundlichkeit – Webdesign und UX/UI.

• Website-Entwicklung
• Webdesign und UX/UI

Das Portfolio zeigt die Lösung zum Zeitpunkt der Projektübergabe. Die aktuelle Website kann verändert worden sein.