Inspirer. Respirer.

Le mandat

Inspirer. Respirer. est la campagne d'attractivité de la MRC d'Argenteuil : convaincre des familles, des travailleurs et des entrepreneurs de s'installer dans l'une de ses neuf municipalités. Le site devait porter quatre grandes rubriques (habiter, vivre, travailler, entreprendre), une page par municipalité, un blogue, des vidéos, un babillard d'emplois et une charte d'inclusion à signer.

Beaucoup de pages, beaucoup de contenus différents, et une équipe qui allait les faire vivre pendant des années. Mon travail : la gestion et la structure du projet avec Bernard Imbert, puis toute la programmation, pour que le client puisse composer et enrichir ces pages lui-même. Le design est de Christine Martel.

Quinze blocs pour tout le site

Comme sur mes autres projets WordPress, aucune page n'est codée en dur : le thème expose une bibliothèque de blocs que le client empile dans l'administration. Ici, elle en compte une quinzaine : hero, texte, texte-image, carrousel, citation, liste, vignette, FAQ, formulaire, grille, galerie, blogue, vidéos, article et emplois.

Toutes les sections partagent la même enveloppe (section + grid-wrapper) ; chaque bloc, préfixé b-, ne s'occupe que de son contenu. Les pages de rubrique et celles des municipalités sont ainsi des recettes différentes faites avec les mêmes ingrédients.

Un système de couleurs par section

L'identité joue sur une palette vive : marine, vert, cyan, bleu pâle, rose, jaune, orange. Chaque rubrique a sa couleur, et chaque bloc expose trois réglages indépendants dans l'administration : le fond de la section, la couleur du contenu et celle des accents.

Côté code, ces choix deviennent de simples classes (sections--colors-section-marine, sections--colors-content-green, sections--colors-highlight-pink) qui ne font que définir des variables. Le bloc, lui, ne connaît que ces variables : n'importe quel bloc prend n'importe quelle combinaison sans une ligne de CSS de plus.

Des biseaux qui se raccordent

La signature visuelle du site, ce sont les coupes en diagonale entre les sections. Elles sont dessinées en CSS (un dégradé à arrêt net, sans image) et activées par un modificateur : section--fig, inversé avec section--fig--reverse.

Le défi : le biseau doit prendre la couleur de la section précédente, alors que le client peut réordonner les blocs à volonté. Un réglage section--colors-previous-{couleur} permet de la fixer, et l'option « automatique » laisse le thème la déduire lui-même. Le client déplace un bloc, la jonction suit.

Un front-end orienté objet

Le JavaScript suit l'architecture que j'utilise sur mes thèmes WordPress : des classes regroupées par webpack avec le SCSS, une classe Main qui démarre l'application et une ComponentFactory qui instancie la bonne classe pour chaque élément portant un attribut data-component.

Sept composants couvrent le site : Header, Scrolly, Carousel, Accordion, Video, Filters et Icons. Chaque page n'instancie que ceux que ses blocs déclarent.

Des vidéos chargées à la demande

Le site mise beaucoup sur les témoignages vidéo. Pour ne pas alourdir les pages, chaque vidéo s'affiche d'abord comme une simple image avec un bouton de lecture : le lecteur YouTube n'est créé qu'au clic, et son API n'est chargée qu'une seule fois pour toute la page, peu importe le nombre de vidéos.

La classe garde la liste de ses instances : quand une vidéo démarre, les autres se mettent en pause, et une vidéo qui sort de l'écran s'arrête d'elle-même grâce à un IntersectionObserver.

export default class Video {
  static instances = [];

  constructor(element) {
    this.element = element;
    this.videoId = element.dataset.videoId;
    Video.instances.push(this);
    Video.loadScript(); // l'API YouTube n'est chargée qu'une fois
  }

  initPlayer() {
    this.player = new YT.Player(this.element.querySelector('.js-video'), {
      videoId: this.videoId,
      playerVars: { rel: 0, autoplay: 1 },
      events: {
        onStateChange: (e) => {
          if (e.data === YT.PlayerState.PLAYING) Video.pauseAll(this);
        },
      },
    });
  }

  static pauseAll(current) {
    Video.instances.forEach((v) => v !== current && v.player?.pauseVideo());
  }
}

Un babillard d’emplois filtrable

Les offres d'emploi sont un type de contenu à part, chacune avec sa page, son employeur, sa municipalité et son secteur. La page Emploi les liste toutes, et le composant Filters les trie par secteur et par municipalité sans recharger la page.

Chaque carte porte ses critères en attributs (data-filter-sector, data-filter-location). Au changement d'un filtre, la classe affiche les cartes correspondantes, met à jour le compteur à partir d'un gabarit fourni par le HTML (« {xx} offre{s} correspondante{s} ») et inscrit le nombre de résultats à côté de chaque option.

Une charte qu’on signe en ligne

La page Nous sommes Argenteuil montre la souplesse du page builder : une grille de valeurs, une FAQ en accordéon pour la charte d'inclusion, puis un bloc formulaire pour la signer, et des vidéos de témoignages. Le formulaire est un bloc comme les autres, géré par une extension WordPress et habillé par le thème.

Responsive par bloc

Chaque bloc gère sa propre adaptation : le damier des rubriques passe en colonne, les biseaux gardent leur angle, les filtres d'emploi s'empilent. Une page composée par le client reste correcte sur téléphone, peu importe l'ordre des blocs.

Crédits

Client

MRC d'Argenteuil

Gestion et structure

Matthieu Parent, Bernard Imbert

Programmation

Matthieu Parent

Design

Christine Martel

Captures réalisées sur le site en ligne. Photographies et logos : propriété de leurs auteurs et de MRC d'Argenteuil.