SBK Ādaži — design et développement du site web d’un club de basketball féminin

Le site web de SBK Ādaži est le site d’un club de basketball féminin dont le design et le développement ont été réalisés par CREATING.LV. Le club avait besoin d’un site qui présente l’équipe et les joueuses, montre la vie du club en photos et aide les personnes intéressées à poser leur candidature pour rejoindre l’équipe ou à prendre contact pour un partenariat.

Le site s’adresse à deux publics principaux : les filles et les femmes qui veulent jouer au basketball, et ceux qui souhaitent devenir partenaires du club. Les deux publics ont besoin d’un chemin court entre la première impression et la prise de contact. C’est pourquoi ce site de club de basketball ne se contente pas de présenter l’équipe : il propose aussi un formulaire de candidature et un bouton WhatsApp toujours accessible.

CREATING.LV a créé le design du site et l’a développé : structure et rubriques, présentation des joueuses, galerie, animations, formulaire de candidature traité côté serveur et bases du SEO technique. Le projet a couvert à la fois le concept visuel et la programmation — il s’agit d’un développement de site web complet, jusqu’à un site qui envoie les candidatures par e-mail.

Le site compte cinq rubriques et une page 404 dédiée :

• Accueil — une vue d’ouverture avec une basketteuse et le slogan “Mūsu laukums. Mūsu spēle.” (« Notre terrain. Notre jeu. »), ainsi qu’un carrousel des joueuses ;
• Équipe — les joueuses une par une, avec photo, nom et numéro ;
• Entraînements et matchs — une page préparée pour les informations sur les entraînements et les matchs ;
• Événements et galerie — des photos de la vie du club ;
• Contact — les moyens de prise de contact, avec des liens WhatsApp, Instagram et Facebook.

La structure est volontairement courte : depuis le menu, le visiteur accède directement à l’équipe, aux photos ou aux coordonnées. La page 404 dédiée s’affiche si le visiteur ouvre une adresse inexistante, par exemple un lien mal saisi : il reste sur le site du club au lieu de voir le message d’erreur standard du serveur.

Les joueuses sont présentées de deux façons sur le site. La page d’accueil comporte un carrousel horizontal des joueuses que l’on peut faire défiler, chaque carte s’arrêtant à sa place (scroll-snap). Sur la page Équipe, les joueuses sont présentées une par une — avec photo, nom, numéro et un compteur indiquant quelle joueuse de l’équipe est affichée.

Les deux pages utilisent une seule source commune de données sur les joueuses. Si l’effectif change, les données ne sont à corriger qu’à un seul endroit, et les modifications apparaissent aussi bien sur la page d’accueil que sur la page Équipe. Ainsi, les deux parties du site ne peuvent pas afficher des effectifs différents.

La rubrique « Événements et galerie » rassemble des photos de la vie du club, prises lors des matchs et des entraînements. Des images de proportions différentes forment une grille variée, et chaque photo peut être ouverte en vue agrandie (lightbox) avec une légende qui explique ce qu’elle montre.

La rubrique « Tu veux jouer au basketball ? Rejoins-nous ! » invite les personnes intéressées à rejoindre le club. La candidature se fait dans une seule boîte de dialogue à deux modes — « rejoindre l’équipe » et « proposer un partenariat ». Ainsi, un seul formulaire couvre les deux objectifs, et le mode choisi indique l’objet de la demande.

Les candidatures sont traitées côté serveur par un script PHP qui :

• vérifie les champs remplis ;
• protège contre le spam grâce à un champ caché (honeypot) ;
• limite les requêtes trop fréquentes ;
• envoie la candidature par e-mail via SMTP.

La réception des e-mails a été testée pour les deux modes. Le formulaire est complété par une foire aux questions, un bouton WhatsApp flottant et des liens vers les comptes Instagram et Facebook du club. La personne intéressée peut ainsi choisir le moyen qui lui convient le mieux : remplir le formulaire, écrire un message ou lire d’abord les réponses aux questions les plus fréquentes.

Un honeypot est un champ de formulaire invisible pour le visiteur, mais que les programmes de spam automatiques remplissent généralement ; grâce à ce champ, le script peut distinguer les envois automatiques de ceux remplis par des personnes. La limitation de fréquence empêche d’envoyer trop de requêtes en peu de temps. Ces deux techniques visent à éviter que des messages générés automatiquement n’arrivent dans la boîte mail et que les vraies candidatures ne s’y perdent.

Le design s’inspire d’un terrain de basketball : lignes du terrain, trajectoire du ballon et pattes de chat comme signature de la marque du club. Les tons violets et sombres, les accents orange et les polices Archivo et Manrope forment un langage visuel unifié qui relie dans un même style toutes les pages du site du club de basketball, tandis que les photos et les numéros des joueuses prolongent cette ambiance dans la présentation de l’équipe.

Le tir du ballon est animé avec GSAP, et l’animation tient compte du paramètre de réduction des animations que l’utilisateur peut activer sur son appareil. Ce paramètre est généralement activé par les personnes que les éléments en mouvement à l’écran gênent dans leur lecture ou mettent mal à l’aise ; le respecter fait donc partie de l’accessibilité du site. Sur téléphone, le menu s’ouvre avec le bouton de menu, l’en-tête reste visible pendant le défilement et la mise en page s’adapte à l’écran étroit.

Le site web de SBK Ādaži est développé avec Astro 4 et TypeScript et généré de manière statique : les pages sont préparées à l’avance sous forme de fichiers HTML, si bien qu’aucune base de données n’est nécessaire pour afficher le contenu. Les transitions entre les pages sont assurées par Astro View Transitions, les animations utilisent GSAP et les candidatures sont traitées côté serveur par un script PHP. View Transitions permet d’afficher le passage d’une page à l’autre sous forme d’animation fluide, même si chaque page reste un fichier HTML distinct.

Les bases du SEO sont intégrées dès le code :

• chaque page a son propre titre, sa description, son adresse canonique et ses données Open Graph ;
• des données structurées — WebSite, BreadcrumbList, SportsTeam et FAQPage, qui décrivent aux moteurs de recherche, sous une forme lisible par machine, le site, la place de la page dans la structure du site, l’équipe sportive et les questions fréquentes avec leurs réponses ;
• sitemap, robots.txt et llms.txt — ce dernier est une courte description du site dans un fichier texte, destinée aux outils d’intelligence artificielle.

Un site statique n’a ni tableau de bord ni base de données à mettre à jour régulièrement ; il y a donc moins de composants à maintenir. La seule partie dynamique est le traitement des candidatures côté serveur, protégé par la vérification des champs, un honeypot et la limitation de fréquence des requêtes. Les modifications de contenu, comme l’ajout d’une nouvelle joueuse, se font dans les données du projet, puis le site est régénéré ; c’est pourquoi, lorsqu’on prévoit un tel site, il faut convenir dès le départ de qui mettra à jour le contenu.

Un site de club sportif de ce type convient aux clubs, équipes et associations qui doivent présenter leur effectif et la vie du club, et recevoir des candidatures de nouveaux membres ou partenaires. Un site statique avec un seul formulaire de candidature est adapté si le contenu n’a pas besoin d’être mis à jour tous les jours. Si le club publie souvent des actualités lui-même, on peut aussi choisir une solution avec un système de gestion de contenu, comme WordPress.

Un site de club sportif similaire peut aussi servir à une équipe de football, de volleyball ou de hockey : les données des joueurs, la galerie et le formulaire de candidature sont universels, mais le design doit être créé pour chaque club à partir de sa propre marque. Pour en savoir plus sur l’aspect visuel et l’ergonomie — web design et UX/UI.

• Développement de sites web
• Web design et UX/UI

Le portfolio présente la solution développée au moment de la livraison du projet. Le site actuel a pu être modifié depuis.