Opquast et son avenir : comment j’ai refondu le site web – REX (partie 2)

Dans un premier billet sur l’avenir d’Opquast, j’expliquais que Opquast allait travailler sur la façon dont l’IA va peut-être permettre de racheter de la dette technique, d’améliorer la qualité et l’accessibilité, de faire mieux par rapport à ce que l’on faisait avant.

Le dire, c’est bien, c’est une belle idée, mais tant qu’à faire, autant mettre en application cette idée et vérifier si elle a du sens.

Et c’est ce que j’ai fait à travers un exercice particulier : une grosse évolution du site Opquast.com, conduite et réalisée par moi-même, à l’aide de mes compétences, malgré mes incompétences et avec l’aide de Laurent, Mickaël, Benjamin et Claude. C’est ce que l’on appelle un REX, c’est-à-dire un retour d’expérience.

Le point de départ

Le site opquast.com est actif depuis plus de 20 ans, mais la dernière refonte datait de 2020 avec le travail de la société Ecedi, avec notamment un gros travail de Aurélia Vu The et de Eva Moreau. L’intégration avait été faite par Corinne Schillinger. Le site tourne sous WordPress.

C’est un site assez complexe à notre échelle, avec trois grandes parties sur trois voire quatre sous-domaines, le www, la checklist, l’annuaire et la boutique. Il y en a d’autres (API, MCP etc..) mais pour l’instant je n’ai travaillé que sur le site www qui contient déjà beaucoup de contenus et de pages.

Depuis plusieurs années, nous avons accumulé de la dette technique avec de très nombreuses surcharges CSS et un grand nombre de modèles de pages. Le moins que l’on puisse dire, c’est que le site n’est pas optimisé.

En ce qui concerne mes compétences, j’ai fait un peu de développement il y a très longtemps mais je ne sais pas faire de code. Je ne connais pas git, j’ai de bonnes bases et un bon vocabulaire transversal. J’ai quand même une assez bonne connaissance du secteur : après autant d’années à écrire des référentiels et à échanger avec des professionnels, le contraire serait tout de même surprenant. En tous cas, retenez ceci : je ne suis pas développeur web.

Les objectifs

Le site Opquast tel qu’il était pensé auparavant était pensé comme un pur site de présentation de contenus et de ressources.

Plusieurs aspects posaient problème :

• les pages comportaient un hero qui occupait énormément de place au niveau vertical, ce qui repoussait très bas le contenu utile, et nous en avons beaucoup, du contenu utile.
• Le site est très centré sur le projet et l’entreprise Opquast et assez peu sur son usage par les différents métiers de la production numérique.
• Les aspects commerciaux et vente de services étaient pour le moins discrets, sachant que la commercialisation est évidemment un enjeu majeur pour Opquast.
• Toujours sur l’aspect commercialisation, et à l’heure où Opquast doit commencer à communiquer et à faire de la publicité, les choix que j’avais fait il y a quelques années sur les cookies deviennent très complexes à tenir.

Il y a quand même des actifs solides : le design system produit en 2020 est toujours valable, les dessins de Jess Porlier sont toujours intéressants, la police nous plait, le logo ne bouge pas, il y a quand même beaucoup d’éléments qui servent de base, le moins que l’on puisse dire est que je ne partais pas d’une page blanche.

Le setup : du vibe coding ultra encadré

Vous connaissez maintenant les ingrédients, parlons maintenant de la façon de les assembler.

L’idée de départ a été de se dire : tiens, pourquoi Elie ne prendrait pas en main cette évolution majeure du site. Le problème c’est que Elie n’est plus développeur depuis la fin du dernier millénaire, qu’il n’est pas graphiste non plus, et qu’il doit quand même se débrouiller pour faire cette évolution.

Bien évidemment, avec ce genre d’ingrédients, début 2026, la réponse tient en deux lettres : IA. Mais pas n’importe comment.

J’ai décidé de travailler avec Claude Code. Et voici quelques éléments de départ :

• Pour commencer, je me suis installé un environnement local avec le logiciel local, justement et Mickaël m’a aidé à récupérer le code et les données distantes.
• Très vite, alors que je ne connais absolument pas git, Mickaël a dû me fournir un process à utiliser. Comment récupérer un dépôt, comment créer une branche, faire un commit, lancer un déploiement en dev, demander une fusion en production.
• Nous avons un espace de développement, j’ai très vite été outillé par Mickaël pour déployer sur cet espace et vérifier que je ne faisais pas de bêtises.
• Après quelques frayeurs, j’ai demandé à Mickaël de me retirer les droits de mise en production sur le site. Et donc même quand je le souhaite, je ne peux pas.
• Claude n’a pas le droit de déployer non plus. J’ai dû lui donner des instructions très strictes. Même avec ces instructions, il lui arrive d’essayer de faire des bêtises.
• Je l’ai doté d’une mémoire avec claude-mem et d’une paire d’yeux et d’une souris avec Playwright (un outil qui permet d’émuler un navigateur web).
• Je développe en mettant en place des tests unitaires, ils sont exécutés avant les mises en production.

Ensuite, c’était parti. Je vais vous résumer mon aventure en trois phrases :

• Claude code est surpuissant et fait des trucs incroyables.
• Claude code fait un nombre de bêtises incroyables (et des grosses si on ne le surveille pas).
• Il a terriblement confiance en lui et il est de mauvaise foi (oui, je sais que c’est une machine probabiliste, il a donc peu de chance de se vexer lorsque j’écris cela).

La refonte en pratique

Je suis nul en graphisme et je suis daltonien. J’évite donc de faire des choses sophistiquées. Je fais sobre en essayant de faire croire que c’est un choix. Dans ce cas précis, j’ai repris l’ensemble des marqueurs d’Opquast et j’ai décidé de me servir des émoji, très transgénérationnels. J’ai aussi et surtout remonté les contenus le plus haut possible dans les pages. Je me suis aussi servi d’un système classique de double colonnes (en sticky ou pas) qui permet de mettre du contexte, des appels à l’action et des liens complémentaires.

Sur la méthode employée, il aurait certainement fallu reprendre le site sous forme de prototypes depuis le début, j’ai choisi de travailler sur toutes les pages, l’arborescence, le graphisme, les modèles et les styles à la fois. Je ne pense pas que ce soit la façon la plus solide de travailler, mais pour me former et conduire ce chantier en solo ou presque, cela s’est avéré très utile et je pense assez efficace.

J’ai repris l’ensemble des pages de manière progressive, par famille ou type de page en créant à chaque fois que cela était nécessaire de nouveaux modèles de contenus. Cela m’a donné une quinzaine de modèles correspondant souvent à des modèles assez proches dans leur structure mais avec des variantes dans les colonnes (ajout de sommaire automatique, version sticky ou pas, ajout des coordonnées de la société, etc..).

Bien entendu, la connaissance des règles Opquast dans un contexte de vibe coding est absolument décisive. Je prends souvent l’exemple de la règle sur le signalement des items actifs de menu. Quand vous savez ce que vous voulez et que vous savez dire ce que vous voulez, vous gagnez beaucoup mais alors beaucoup de temps.

J’ai évidemment pris soin de l’accessibilité, notamment pour les aspects navigation et focus clavier. Je me suis servi du MCP Opquast pour faire des évaluations, et ça permet quand même de détecter beaucoup de défauts.

À l’issue de ce long travail, j’avais une première version du site qui a été mise en production aux alentours du 5 mars 2026. Ça ne s’est pas passé sans difficultés, notamment pour la mise en place de tout ce qui ne concerne pas le code à savoir les modifications en base de données.

Fouetté par Mickaël, j’ai quand même réussi à tout mettre en place. Voici une capture du résultat obtenu.

Je ne l’ai pas trop dit parce que je n’étais pas vraiment fier de mon travail. Le meilleur (ou le pire) restait à venir : la rationalisation et la factorisation.

Une nouvelle couche d’optimisation

Je me suis rendu compte que j’avais finalement beaucoup de nouveaux modèles de pages et finalement assez peu de variantes. Dans le même temps, les CSS du site étaient pléthoriques avec de nombreux recouvrements et surcharges accumulées qui font perdre énormément de temps dans le développement.

Ce sont ces raisons qui m’ont conduit à lancer une phase d’optimisation. Il y a bien sûr une autre raison dont je vous parlais en début d’article : vérifier que je ne dis pas de bêtise quand je dis que l’IA peut permettre d’améliorer la qualité des sites et de racheter de la datte technique.

Alors, voilà, c’était parti pour une nouvelle couche (et un nouveau week-end à faire travailler un ami imaginaire artificiel et à me faire gronder par ma compagne qui sentait bien qu’il se passait quelque chose entre Claude et moi).

J’avais déjà essayé de factoriser tout le code CSS du site et je m’étais planté lamentablement, j’avais dû revenir en arrière et repartir du début. Parmi les choses essentielles que Mickael m’a mises en évidence, l’une des plus importantes est le mode plan (pour celles et ceux qui utilisent Claude code, il faut faire Shift Tab).

Quelle que soit votre utilisation de l’IA et les agents que vous utilisez, demandez toujours un plan d’action avant d’agir. Ça change tout. Ça marche aussi pas mal avec les humains, au passage.

Ici j’ai donc décidé de travailler en mode planification et de procéder par itération successives entre la mutualisation de templates et la suppression de feuilles de style.
Le résultat est assez spectaculaire, avec la mutualisation de 15 modèles en un seul et la diminution des CSS de moitié.

Parmi les exigences majeures, le responsive. Là aussi, l’utilisation de l’IA m’a permis de travailler beaucoup plus rapidement.

Si l’on passe au bonus, Laurent Denis m’a demandé si je pouvais créer un dark mode et je l’ai fait. C’est un sujet sur lequel je ne suis pas trop à l’aise, j’ai eu beaucoup de travail pour arriver à quelque chose de correct. Je n’ai pas encore voulu mettre cela en production, si vous voulez tester, il y a une option en bas de la page “à propos » pour l’activer en version bêta. Je vous la remets ici :

Dans les bonus, je me suis fait (Claude m’a fait) un petit outil pour que les contributeurs puissent associer les emoji associés aux titres dans l’espace d’administration WordPress.

Ce qu’il reste à faire, ce que j’ai appris.

Je dois encore traiter le site des checklists (déjà très avancé), l’annuaire et la boutique, optimiser les médias, soigner plein de détails. Vous aurez sans doute beaucoup de choses à me remonter, je m’attends à beaucoup de suggestions et c’est très bien.

Nous avons mis en place un bandeau de cookies et un système de gestion du consentement. Nous avons créé des landing pages et allons commencer la publicité. C’est quelque chose que nous n’avons jamais fait. Nous allons apprendre en marchant.

Mais ce n’est pas tout, j’ai appris plein de choses.

Créer un site, même avec un agent IA c’est toujours beaucoup mais alors beaucoup de travail. Les choses vont plus vite mais il est facile de perdre beaucoup de temps. Le vibe coding est une activité fascinante et très déstabilisante au niveau psychologique. On a vite fait de se faire aspirer dans des phases d’amélioration sans fin. Comme dit Mickaël, il faut savoir s’arrêter et définir des périmètres à ses améliorations.

Dans l’ensemble, je confirme quand même quelque chose que nous avons observé depuis plusieurs mois : l’IA non encadrée en vibe coding produit des choses incroyables mais aussi potentiellement dangereuses et/ou de mauvaise qualité.

Plus que jamais travailler sur la qualité est un choix : la couche exigences, tests unitaires, tests fonctionnels, référentiels, contrôles, limitations volontaires est fondamentale.

La compréhension du système, la connaissance des règles et du vocabulaire sont aussi fondamentales. Il y a six mois je disais que la formation Opquast était essentielle pour travailler en équipe. Aujourd’hui, je vous dis qu’elle est essentielle tout court. Je ne sais pas si ça durera longtemps, mais aujourd’hui, je n’ai absolument aucun doute.

Je vais continuer à m’entraîner, à réfléchir, à me former. Rien n’est stable, tout est à faire, le travail sur la qualité est toujours aussi nécessaire.