Création de site web avec agenda participatif

Nous avons réalisé ce projet en collaboration avec l’agence montréalaise La Clique des com, qui a conçu les maquettes et porté la relation client. Les illustrations, un univers sous-marin de méduses, de vagues, de varech et de corail, sont signées PewPewkid. Notre rôle a été de transformer tout ça en un site WordPress vivant, animé et simple à gérer, et développer le cœur fonctionnel du projet, l’agenda participatif des actions.

Des maquettes Adobe XD à Bricks Builder

Les maquettes nous sont arrivées en Adobe XD, avec une direction artistique affirmée : fond bleu nuit en dégradé, illustrations pleine largeur, boutons lumineux. Nous les avons intégrées dans Bricks Builder au pixel près, en version desktop comme mobile. Nous avons aussi animé les illustrations de PewPewkid pour prolonger l’univers aquatique, en nous appuyant sur du CSS pour certaines animations. Les méduses ne sont pas là seulement pour décorer : elles donnent au site son mouvement, au sens propre.

Le cœur du projet : des actions proposées par les internautes

Mouvement Méduse ne voulait pas d’un agenda alimenté uniquement par son équipe. L’idée : permettre à n’importe quel organisme ou militante de proposer une action (une mobilisation, une conférence, une rencontre) qui, après validation, rejoint l’agenda public du mouvement.

Une structure de données dédiée

Les actions disposent de leur propre type de contenu et de leurs catégories, déclarés en code pour que la structure reste stable et ne puisse pas être désactivée par erreur depuis l’admin. Chaque action embarque ses champs personnalisés, gérés avec Meta Box : organisme, dates de début et de fin, adresse, lien Google Maps, lien de rencontre en ligne, coût, lien d’inscription et coordonnées de contact.

Du formulaire au brouillon

Le formulaire « Proposer une action » est un formulaire Bricks natif configuré pour créer directement un contenu sur le site. Le titre, la description et l’image sont mappés sur les champs natifs, le reste est enregistré dans les champs personnalisés. Chaque soumission arrive avec le statut Brouillon, rien n’est publié sans regard humain.

La modération, côté admin

L’équipe du mouvement relit chaque proposition, corrige au besoin, assigne la catégorie (volontairement absente du formulaire, pour garder la main sur la classification) puis publie. L’action apparaît alors automatiquement sur la page Les actions et dans le bloc « Les prochaines actions » de l’accueil.

Un agenda navigable par mois

La page se parcourt mois par mois, avec deux flèches et le libellé du mois en cours. Le mois de chaque action est déduit automatiquement de sa date de début, l’équipe n’a rien à renseigner de plus, et l’internaute navigue d’un mois à l’autre sans rechargement de page.

Construit en composants pour durer

Le site est entièrement assemblé à partir de composants : cartes d’action, cartes d’actualité, blocs d’appel à l’action, en-têtes de section. Une modification sur un composant se répercute partout où il est utilisé, et l’équipe du mouvement peut créer de nouvelles pages en assemblant des briques existantes, sans risquer de casser la direction artistique.

Côté référencement naturel, chaque page dispose de ses balises SEO, les actions et actualités ont des permaliens propres, et le balisage Open Graph assure des partages soignés sur Facebook et Instagram, les deux réseaux du mouvement. Le bandeau de consentement aux témoins de connexion est granulaire, conformément à la Loi 25.