Un site caritatif qu'une équipe non-technique peut vraiment maintenir

Quand un petit organisme caritatif demande un site, la tentation est de livrer la stack dont on est le plus fier. Le bon réflexe est l'inverse, choisir la stack que l'équipe pourra maintenir après votre départ de la ligne d'urgence. Pour Fog of War Canada, ça voulait dire WordPress et Elementor, pas Next.js.

Pourquoi je l'ai construit

L'ancien site était une brochure statique qui cassait chaque fois qu'on essayait d'ajouter un logo de commanditaire. L'inscription passait par un Google Form derrière un petit bouton, et le trafic de dons était redirigé vers une page externe que personne ne pouvait styliser. Le coût de mise à jour entre les cycles, c'était une fin de semaine complète d'un bénévole, et le taux de rebond mobile racontait le reste.

La mission façonne l'architecture

F.O.G. Canada (Friends of Golf) est un organisme caritatif bâti autour d'un tournoi de golf annuel. Le tournoi est l'événement-phare de l'année, avec des paliers de commandite, des inscriptions, des dons et un mur de commanditaires qui s'étoffe d'un cycle à l'autre. L'équipe est composée de bénévoles, passionnés, mais pas techniques. Le site doit pouvoir être édité par quelqu'un qui n'a jamais ouvert d'éditeur de code.

Ce que la construction a priorisé

• Des gabarits de sections en glisser-déposer que l'équipe peut cloner pour chaque nouveau cycle de tournoi.
• Un composant de paliers de commandite (Titre, Eagle, Birdie, etc.) qui affiche les logos à la bonne taille sans toucher au CSS.
• Des mises en page mobile-first parce que les participants s'inscrivent et donnent depuis le terrain, pas depuis un poste fixe.
• Un SEO léger (URL propres, vraies descriptions, cartes OG) pour que les dons ne dépendent pas de qui a partagé le lien.

Comment je l'ai construit

WordPress avec Elementor Pro comme constructeur de pages, un thème enfant pour les quelques surcharges CSS qui devaient vivre dans le versionnage, et ACF pour les données de paliers de commandite, un logo, c'est une ligne dans un répéteur, pas un copier-coller de balisage. L'hébergement est chez un fournisseur canadien, pour la latence et la confiance des donateurs. Le cache vit en périphérie avec purge automatique à l'enregistrement, comme ça les modifications des bénévoles passent en ligne sans qu'on touche à une console.

Le composant de paliers de commandite

Chaque palier (Titre, Eagle, Birdie, Par, En nature) est un bloc de contenu flexible ACF avec un nombre maximal de logos, une hauteur cible en rem et un champ texte alternatif. Le gabarit force le grayscale au survol et le lazy loading par défaut. Ajouter un nouveau commanditaire Birdie prend environ 20 secondes et aucune décision sur la taille.

Ce qui a été difficile

La réponse honnête, c'est la retenue. Tous les instincts disaient de tout refaire en Next.js avec un CMS headless, viser un Lighthouse 100 et en faire une pièce de portfolio. Ça aurait empiré la vie du prochain bénévole. Le vrai travail d'ingénierie, ça a été de supprimer des extensions, verrouiller les widgets Elementor que l'équipe ne doit pas toucher, et écrire un guide d'édition d'une page qui tient sur l'écran d'un téléphone.

L'autre partie difficile, c'était la courbe de croissance du mur de commanditaires. Le premier cycle en comptait 12. Au troisième, on approchait 40, avec des ratios complètement disparates. La correction a été une étape de normalisation dans le rendu ACF : chaque logo a une hauteur maximale verrouillée à la cible du palier, largeur auto, et une boîte de remplissage transparente pour que le poids visuel reste équilibré peu importe ce que le commanditaire envoie.

Ce que j'ai appris

La maintenabilité est une fonctionnalité, et pour un organisme caritatif, c'est LA fonctionnalité. Le critère de succès, ce n'est pas le score de vitesse, c'est de savoir si le conseil peut mettre à jour le mur de commanditaires un mardi soir sans m'appeler. Après trois cycles, ils le peuvent, et c'est ce qui a fait que le projet a vraiment fonctionné.

La suite

• Un audit d'accessibilité contre WCAG 2.2 AA à mesure que le public et la base de donateurs grandissent.
• Un parcours d'inscription de quatuor en libre-service avec Stripe pour que les capitaines d'équipe arrêtent de s'échanger un PDF par courriel.
• Des pages d'archive année par année pour que les cycles passés conservent leur reconnaissance des commanditaires sans encombrer la page d'accueil courante.

La partie continue

Je suis sur ce projet depuis 2024. Chaque cycle apporte de nouveaux commanditaires, de nouvelles photos d'événement, des audits d'accessibilité à mesure que le public grandit, et le genre de petits réglages de performance qui s'accumulent au fil des années. La leçon que je réapprends sans arrêt ici : le bon projet pour un organisme caritatif est rarement le plus techniquement intéressant. C'est celui qui fonctionne encore dans trois ans quand le bénévole qui a pris la relève ne vous a jamais rencontré.