BCF Avocats d’affaires

Le mandat

BCF est un cabinet d'avocats d'affaires de Montréal et de Québec. En 2019, lg2 a signé sa nouvelle campagne et son nouveau site, avec une signature qui donne le ton : « Saisir l'instant. Définir le futur. » Le site devait présenter des centaines de professionnels, six grandes expertises, des industries, des produits signatures et une veille juridique, l'intelligence d'affaires.

Le contenu est géré dans Sitecore, développé côté serveur par Nexio. Chez lg2, l'équipe front-end livrait les gabarits, les styles et tout le JavaScript. J'y ai travaillé comme développeur front-end. L'expérience utilisateur, elle, est signée par un autre Mathieu Parent (avec un seul t).

Le site a depuis été remplacé : les captures de cette page viennent de la Wayback Machine, en janvier 2024.

Deux panneaux, une image qui suit la lecture

La mise en page repose sur une idée simple : à gauche, le contenu défile ; à droite, un grand panneau d'image reste en place. Quand on change de section, l'image change aussi, en fondu. Le site garde ainsi une présence visuelle forte sans jamais couper le texte.

Chaque section déclare son image dans un attribut (data-image-slide-notifier). Un IntersectionObserver repère la section qui arrive en haut de l'écran ; la nouvelle image est préchargée, puis posée par-dessus l'ancienne avec un fondu GSAP. Sur mobile, le module se désactive et les images reprennent leur place dans le flux.

export class ImageSlide extends Module {
  private _observer = new IntersectionObserver(this._onReached, {
    rootMargin: '-120px 0px 60% 0px',
  });
  private _current = '';

  public onGroupDesktop(): void {
    document.querySelectorAll('[data-image-slide-notifier]')
      .forEach((el) => this._observer.observe(el));
  }

  public onGroupMobile(): void {
    this._observer.disconnect();
  }

  @autobind
  private _onReached(entries: IntersectionObserverEntry[]): void {
    entries.filter((e) => e.isIntersecting).forEach((e) =>
      this._changeBackground(e.target.getAttribute('data-image-slide-notifier')));
  }

  private _changeBackground(src: string): void {
    if (src === this._current) return;
    this._current = src;
    const img = new Image();
    img.onload = () => { /* fondu GSAP de la nouvelle image */ };
    img.src = src; // préchargée avant l'affichage
  }
}

Un front-end en modules TypeScript

Tout le JavaScript est écrit en TypeScript orienté objet. Une ModuleFactory parcourt la page et instancie la bonne classe pour chaque élément portant un attribut data-module ; un même élément peut en déclarer plusieurs, séparés par une barre verticale. Dix-sept modules couvrent le site : navigation, carrousels, recherche, formulaires, superpositions, vidéos, infobulles, consentement…

Chaque module hérite d'une classe Module commune, qui lui fournit son IntersectionObserver et des méthodes appelées aux changements de point de rupture (onGroupDesktop, onGroupMobile). Les méthodes liées aux événements utilisent un décorateur @autobind plutôt que des bind() éparpillés.

Ce découpage comptait beaucoup dans un CMS comme Sitecore : les rédacteurs composent les pages, et chaque bloc arrive avec son comportement, peu importe où il est placé.

Penser aux rédacteurs

Un site Sitecore se modifie dans un éditeur visuel, directement sur la page. Les animations qui cachent un élément avant de le révéler y deviennent vite un problème : on ne peut pas modifier un texte invisible. Les modules vérifient donc le contexte et, en mode édition, affichent tout de suite leur contenu final.

Même logique pour la recherche, propulsée par Coveo : quand de nouveaux résultats s'affichent, la fabrique relance la création des modules dans la zone mise à jour, pour que les cartes chargées dynamiquement se comportent comme les autres.

Des appels à l’action dessinés

La nouvelle identité de BCF utilise des motifs de points et de cercles concentriques. On les retrouve dans les appels à l'action : chaque lien principal porte un petit motif SVG, en points ou en cercles, qui se dessine quand il entre à l'écran.

Les tuiles des produits signatures reprennent les mêmes motifs, à plus grande échelle. Le module Cta, lui, signale aussi chaque clic au module de suivi : recherche, équipe, veille juridique et demandes de contact remontent comme des événements distincts dans l'analytique.

Des pages d’expertise et des contacts clés

Chaque expertise a sa page : un texte d'introduction, ses spécialités et un carrousel des contacts clés, avec le titre de chaque professionnel au-dessus de sa photo. Les listes plus longues (publications, membres de l'équipe) se complètent avec un bouton « Voir plus ».

Ce bouton est d'abord un vrai lien vers la page suivante. Avec JavaScript, le module récupère cette page, en extrait seulement les nouvelles cartes, les ajoute à la liste et les fait apparaître en cascade. Sans JavaScript, le lien fonctionne quand même.

Une signature animée, une fois par jour

À la première visite, le logo de BCF s'anime : ses formes apparaissent une à une, puis la signature se dessine et s'efface. Un témoin retient que l'animation a été vue pendant une journée, pour ne pas la rejouer à chaque page. Et elle ne s'affiche que si le visiteur a accepté les témoins fonctionnels.

Sur téléphone

Sur téléphone, le panneau d'image disparaît : les sections s'empilent, les chiffres clés passent en carrousel et la navigation se replie derrière trois boutons (appel, recherche, menu).

Crédits

Client

BCF Avocats d’affaires

Agence

lg2

Direction de création numérique

Nicolas Baldovini

Expérience utilisateur

Mathieu Parent

Chargé de projet, site web

Nicolas Francoeur

Production graphique numérique

Michel Bélisle, Mathieu Schetagne

Développement front-end

François Perreault (lead), Mathieu Lavoie, Jean-François Leblanc, Matthieu Parent

Développement Sitecore et back-end

Nexio

Captures réalisées sur le site en ligne. Photographies et logos : propriété de leurs auteurs et de BCF Avocats d’affaires, avec lg2.