Étude de cas
Destins de Femmes : le site d'une ONG pour les droits des femmes, Prix Edgar Faure 2024
Le site d'une ONG française qui porte la voix des femmes : histoires inspirantes, série d'interviews YouTube, biographie de la fondatrice, équipe et mission. Destins de Femmes est lauréate du Prix Edgar Faure 2024.
La situation
Une ONG française fondée pour porter la voix des femmes et promouvoir un féminisme positif et humaniste avait besoin d'un seul endroit où ses histoires, ses interviews et sa mission puissent se lire, se regarder et donner envie d'agir.
La contrainte
La contrainte était éditoriale, pas technique. Le site parle de personnes et de ce qui leur est arrivé, donc le design devait s'effacer : des textes longs lisibles, de la vidéo qui se lance là où l'histoire est racontée, et rien qui rivalise avec un visage ou une phrase. La crédibilité d'une ONG se construit dès le premier écran, et elle se perd aussi vite avec une page qui ressemble à un lancement de produit.
Il fallait aussi une seule langue, le français, faite proprement pour un public français, avec un formulaire de contact qui fonctionne sans serveur à faire tourner, parce que personne dans une ONG ne devrait être d'astreinte pour un serveur.
Un site comme celui-ci est jugé par deux personnes qui ne se rencontrent jamais : une lectrice qui arrive d'un lien partagé sur son téléphone, et un partenaire ou un membre de jury qui l'ouvre sur un ordinateur pour vérifier que l'organisation est réelle. Les deux ont besoin des mêmes choses dans les premières secondes : un nom, un visage, une raison d'être et un moyen de joindre quelqu'un.
Ce que j'ai construit
Un site React monopage, en français, en ligne sur destinsdefemmes.com :
- Une section d'histoires inspirantes, le cœur du site, mise en page pour être lue et non survolée.
- Une série d'interviews YouTube intégrée à la page, pour que les vidéos se lancent là où l'histoire est racontée au lieu de renvoyer le visiteur ailleurs.
- La biographie de la fondatrice et la présentation de la mission, chacune avec sa section et son rythme.
- Une galerie de l'équipe.
- Un formulaire de contact qui envoie via EmailJS avec une confirmation à l'écran, pour que l'ONG reçoive les messages dans sa boîte mail sans backend.
- Défilement fluide entre les sections, grille Bootstrap, hébergement Firebase.
Je l'ai livré de bout en bout, structure, mise en page, intégration des vidéos, formulaire et déploiement, sans agence entre les deux. C'est comme ça qu'un site de cette taille reste cohérent : une seule personne tient l'ensemble et chaque décision se prend devant le contenu, pas dans un cahier des charges.
Les chiffres
- 2024Prix Edgar Faure
- 5sections de contenu
- FRune langue, faite proprement
- 0serveur à maintenir
Le Prix Edgar Faure 2024 a été décerné à Destins de Femmes. J'ai construit le site ; le travail qu'il récompense est celui de l'ONG. Je ne vais pas l'habiller de chiffres de fréquentation ou de dons que je n'ai pas, et je n'ai demandé de témoignage à personne.
Ce que je ferais autrement
Le site est une application React monopage. Pour une petite équipe et une date de lancement, c'était le bon choix, et le plus rapide : un seul déploiement, pas de serveur, un formulaire qui marche. Il a un vrai coût que je n'accepterais plus aujourd'hui : le HTML servi contient un titre, une description et le script qui charge l'application, et rien d'autre. Les histoires vivent dans le JavaScript.
Un moteur de recherche ou un aperçu de lien WhatsApp qui lit la page brute ne voit presque rien du contenu. Pour un site dont toute la raison d'être est de rendre des histoires trouvables, c'est le mauvais compromis. Aujourd'hui je le construirais en Next.js exporté en statique, une vraie page HTML par section, exactement comme la page que vous êtes en train de lire.
Le reste tient : la mise en page éditoriale, les interviews intégrées, le formulaire sans serveur. Si l'ONG veut un jour faire ce passage, c'est une reconstruction de la coque, pas du contenu.
Stack technique
- React.js
- EmailJS
- Firebase
- Bootstrap
- React-Toastify
- Smooth-Scroll
À voir
Vous voulez la même chose ?
Dites-moi ce que vous construisez, ou ce que vous faites encore à la main, et je vous dirai comment je m'y prendrais. Sans engagement.