Traduction assistée par IA. Le contenu original a été rédigé en anglais.
Brauwerk Hoffman est une microbrasserie d'inspiration allemande et un brewpub saisonnier de Campbell's Bay, fondée en 2018 par Todd Hoffman. C'était la première microbrasserie du Pontiac. Depuis Arnprior, c'est à quelques minutes de l'autre côté de la rivière, et une fin de semaine d'été, c'est une destination plutôt qu'un arrêt en passant.
Le nouveau site est en ligne sur brauwerk-hoffman.ca depuis le 12 septembre 2026. Voici comment il a été bâti, ce qui le rendait plus difficile qu'un site de restaurant ordinaire, et ce qui ne s'est pas passé comme prévu. La version courte du projet se trouve dans l'étude de cas Brauwerk Hoffman. Ceci est la version longue.
Qu'est-ce qui clochait avec l'ancien site ?
Il fonctionnait, mais il était lourd. L'ancien site tournait sur un thème Bootstrap qui tirait des polices, des styles de cadriciel et des bibliothèques d'animation de trois domaines externes à chaque chargement de page, donc chaque visite dépendait des serveurs de trois autres entreprises avant que la page puisse finir de s'afficher. Et rien n'y était prévu pour une entreprise fermée la moitié de l'année.
Rien de tout ça n'est inhabituel. C'est ainsi que finissent la plupart des petits sites en restauration : bâtis une fois, rapiécés pendant des années, et plus lents à chaque saison.
Pourquoi le bilinguisme n'était pas optionnel
Campbell's Bay est au Québec. L'article 52 de la Charte de la langue française exige que les publications commerciales soient offertes en français, et l'Office québécois de la langue française applique cette règle aux sites Web. Ce n'est pas théorique : en 2025, l'OQLF a annoncé une deuxième condamnation et une amende contre une entreprise montréalaise dont le site Web était uniquement en anglais.
Chaque page existe donc en français et en anglais avec un contenu équivalent, l'anglais à la racine et le français sous /fr/. Le français est rédigé, pas traduit à la machine, avec sa propre navigation, ses propres messages de formulaire et ses propres messages d'erreur. J'ai écrit sur ce qu'un site bilingue implique vraiment, et ce projet est l'exemple le plus clair que j'ai de la raison pour laquelle « on ajoutera le français plus tard » ne fonctionne pas du côté québécois.
Un écart est connu. Au lancement, les adresses des archives de bières et d'événements utilisaient encore des mots anglais dans leurs URL françaises, une limite de la version gratuite de l'extension de traduction. J'ai choisi d'écrire ces deux redirections à la main plutôt que d'acheter une licence pour corriger deux adresses.
Une entreprise saisonnière a besoin d'un site saisonnier
Brauwerk Hoffman n'est pas ouvert à l'année. Environ sept mois par année, la réponse honnête à « est-ce que je peux passer cette fin de semaine ? » est non, et le site doit le dire partout en même temps : la bannière de la page d'accueil, les heures, le texte sur ce qui est ouvert.
Sur la plupart des sites, ça veut dire que quelqu'un doit penser à modifier cinq pages dans deux langues deux fois par année. Il y a toujours un oubli, et c'est habituellement les heures dans le pied de page. Ici, le statut de saison est un seul interrupteur. On le bascule, et la pastille de la page d'accueil, les heures et le texte ouvert ou fermé changent ensemble, dans les deux langues, depuis un seul écran.
Les bières fonctionnent de la même façon. Une bière n'est pas un paragraphe. Elle a un style, un taux d'alcool, une image d'étiquette et un indicateur pour savoir si elle est en fût en ce moment. La liste des bières, l'archive et la canette 3D lisent toutes cette même fiche, alors il y a exactement un endroit à modifier quand une bière est épuisée.
Un éditeur impossible à briser
Il n'y a pas de service du marketing dans une brasserie. La personne qui met le site à jour le fait entre le brassage et le service, et elle doit pouvoir changer la liste des bières sans aucun risque de briser la mise en page.
La barre latérale de l'éditeur affiche donc cinq choses : Bières, Événements, Menu, Médias et Statut de saison. Tout le reste est bloqué à l'adresse, pas seulement caché du menu. La différence compte. Cacher un lien dans un menu n'empêche personne d'atteindre la page derrière en tapant l'adresse, et bien des tableaux de bord WordPress « simplifiés » se contentent de cacher.
Les pages ont perdu l'éditeur libre, sauf la politique de confidentialité. Le contenu qui a une forme, comme une ligne du temps ou une galerie, vit dans des champs qui gardent cette forme. Le design vit dans un seul fichier de thème qui définit une fois la couleur, la typographie et les espacements. Résultat : le site garde son allure, peu importe qui le modifie.
La canette 3D, et ce qui arrive quand elle ne charge pas
La page d'accueil présente une canette qu'on peut faire tourner. Elle est faite de vraie géométrie affichée dans le navigateur en WebGL, pas d'une photo, et c'était la partie du projet la plus susceptible de mal tourner.
Deux règles l'ont gardée honnête. D'abord, le décodeur qui déballe le modèle 3D est hébergé sur le site même plutôt que tiré du serveur de quelqu'un d'autre, parce qu'une panne chez un tiers ne devrait pas transformer la page d'accueil en boîte vide. Ensuite, elle a toujours une solution de repli. Chaque canette a une image pré-rendue qui s'affiche en premier et ne s'efface qu'une fois que la version 3D a vraiment dessiné une image. Si un navigateur ne peut pas faire de WebGL, le visiteur voit une belle image fixe et ne sait jamais qu'il a manqué quelque chose. Sur les pages de chaque bière, les appareils tactiles gardent l'image fixe, volontairement.
Réussir ce passage a demandé de mesurer plutôt que de deviner. Au premier chargement, la canette prenait 1,7 seconde à s'animer, et seulement 200 millisecondes environ venaient du réseau. Le reste, c'était décoder de grosses textures et préparer l'éclairage, le tout en attendant que le visiteur soit presque rendu à la canette. Lancer ce travail dès la fin du chargement de la page, plutôt qu'à la dernière seconde, fait que la canette est animée avant que quiconque l'atteigne.
Ce qui a mal tourné
Pas mal de choses. Voici celles qui valent la peine d'être racontées.
La première tentative de lancement a échoué, et c'était ma faute. Le plan était solide, mais j'ai sauté la répétition complète pour aller plus vite. En cours de route, la connexion au serveur a lâché, ce qui a fait croire qu'une étape n'avait rien fait, puis WordPress a refusé de démarrer avec les nouvelles tables de la base de données. J'ai abandonné. Au retour en arrière, un horodatage dans mon script avait une minute d'écart avec celui utilisé par la bascule, alors un ancien dossier n'a jamais été renommé et le site est resté sans thème fonctionnel pendant plusieurs minutes. Deux leçons sont sorties de ce soir-là, et les deux sont maintenant des règles : répéter d'abord sur le vrai serveur, et tirer chaque nom de la même valeur qui l'a créé au lieu de le taper deux fois.
La deuxième tentative a été répétée, scriptée du début à la fin, et s'est faite avec environ trois secondes d'interruption. L'ancien site est resté intact sur le serveur, avec une seule commande pour revenir en arrière. Puis mon propre script de vérification a annoncé que la plupart des pages échouaient et a recommandé le retour en arrière. Elles allaient très bien. L'hébergeur limite les requêtes qu'un serveur s'envoie à lui-même, alors le script se faisait freiner et prenait ça pour un site brisé. J'ai vérifié de l'extérieur, confirmé que chaque page s'affichait correctement, et je n'ai pas fait marche arrière. Une vérification incapable de distinguer un site brisé d'un site occupé est pire que pas de vérification, et la corriger est sur la liste.
Quelques autres, en bref :
- Le téléversement d'images échouait sur l'ancien site en ligne avec une erreur du serveur. Les images se téléversaient pourtant; la bibliothèque d'images du serveur prenait 185 secondes pour redimensionner un PNG qu'une autre bibliothèque traite en moins de deux, alors la requête expirait. Changer de bibliothèque a fait passer le téléversement de quelques minutes à environ une seconde.
- Le logo mobile était un fichier de 1,25 Mo pour un espace de 320 pixels de large. Le remplacer par une version de 26 Ko a fait passer la note Lighthouse mobile de 66 à 88 et a réduit le poids de la page environ de moitié.
- Quarante-six réglages de taille de police pointaient vers des valeurs que WordPress ne produit jamais, alors ils ne faisaient rien. Un simple titre s'affichait à moins de 12 pixels. Personne ne l'avait remarqué, ce qui est une leçon en soi.
- Pendant la construction, le formulaire de contact envoyait les messages, mais ne disait jamais au visiteur que ça avait fonctionné. J'ai expliqué pourquoi ça compte dans pourquoi votre formulaire de contact ne rapporte rien.
L'accessibilité, au-delà de la note automatique
Lighthouse a donné 100 au site terminé pour l'accessibilité. Une analyse plus poussée le même jour avec axe-core a tout de même trouvé deux vrais problèmes : chaque page avait ses repères d'en-tête et de pied de page imbriqués deux fois, ce qui mêle les lecteurs d'écran, et le carrousel de bières ne pouvait pas défiler au clavier. Les deux sont entrés sur la liste de corrections le jour même.
C'est ce que j'aimerais que tout propriétaire d'entreprise retienne de cette section. Une note automatique vérifie une partie des règles, et une note parfaite ne veut pas dire que le site passe. J'explique ce que la norme exige dans ce que WCAG 2.1 AA exige pour une petite entreprise.
Ce que je dirais à une autre entreprise saisonnière
Bâtissez le site autour de la façon dont l'entreprise fonctionne vraiment. Si vous ouvrez et fermez avec la saison, le site devrait le faire d'un seul geste. Si vous êtes du côté québécois, le français vient en premier dans le plan, pas en dernier. Si les gens qui le mettent à jour ont un autre travail, donnez-leur les cinq choses dont ils ont besoin et verrouillez le reste. Et la personne qui fait le lancement devrait le répéter sur le vrai serveur, parce que le soir où j'ai sauté cette étape, c'est le soir où ça a mal tourné.
Si vous avez une entreprise saisonnière ou touristique d'un côté ou de l'autre de la rivière et que votre site vous donne du fil à retordre chaque printemps, parlez-m'en. J'ai fait ce parcours-là du début à la fin.