Univers des Massages

Reproduire un site existant, en ligne, sous WordPress avec Divi. Pas une maquette figée à interpréter : un site réel, que je pouvais ouvrir dans un onglet voisin, parcourir, redimensionner et inspecter à volonté. C'est une contrainte bien plus serrée qu'un fichier Figma, parce qu'il n'y a plus de zone grise - tout ce que le modèle fait, il le fait devant moi, et l'écart se voit.

Le site est celui de Maria Margola, praticienne en massage bien-être à Mauguio. Quinze pages à monter : l'accueil, une page de présentation, une page qui expose le déroulement d'une séance et distribue vers sept pages de massages, ces sept pages elles-mêmes, une offre à destination des entreprises, une page de contact, une boutique, et les deux pages légales. Trois blocs communs à tout le site - la barre de contact, l'en-tête et le pied de page - et une boutique à faire fonctionner.

C'est mon deuxième projet sous WordPress après Omnifood, et le premier qui soit un site plutôt qu'une page. Le saut n'est pas dans la difficulté d'un bloc isolé : il est dans le fait qu'à quinze pages, tout ce qui n'est pas mutualisé est à refaire neuf fois, et qu'une incohérence ne se voit plus sur un écran mais entre deux pages qu'on ne regarde jamais en même temps.

La question que je me suis posée : jusqu'où va la fidélité ? Reproduire un site, est-ce aussi reproduire ses défauts ?

Autant l'écrire tout de suite et sans détour. Le design de ce site n'est pas de moi. La mise en page, les couleurs, la typographie, les textes, les photographies et le logo appartiennent à Maria Margola et à son site en production. Je n'ai rien conçu ici : j'ai reconstruit.

Ce qui m'appartient est le montage, et c'est tout ce que cette étude de cas commente. Le découpage en sections, lignes et colonnes ; les trois gabarits du Divi Theme Builder qui portent l'en-tête, le pied de page et le corps ; les réglages responsive de chaque module ; la configuration de WooCommerce et de ses quatre produits ; l'arborescence du menu et ses sous-entrées ; le thème enfant. Rien de visible, tout de structurel - c'est exactement le métier de l'intégrateur.

Cette distinction n'est pas une précaution de forme. Elle décide de ce qu'on peut me reprocher, et elle ne joue pas toujours en ma faveur. Les contrastes relevés plus bas viennent du modèle, et s'en écarter aurait été sortir de l'exercice. Les textes de remplacement des images, les niveaux de titre, l'ordre de lecture réel : eux ne relèvent que de moi. Rien dans le modèle ne les impose, et rien à l'écran ne les trahit - ce sont exactement les points qu'un montage au constructeur laisse passer, parce que le rendu paraît juste dans tous les cas.

Que reproduire vaille concevoir. Ce n'est pas le cas, et un exercice de reproduction ne prouve rien sur ma capacité à trancher une direction artistique - il prouve que je sais lire une page et la remonter à l'identique, ce qui est une autre compétence.

Ce qu'il prouve en revanche, et que je n'obtenais sur aucun des quatre autres projets : que je sais tenir un site entier cohérent. Quinze pages, un en-tête partagé, une boutique branchée dessus, et un menu à deux niveaux - huit entrées sous la seule rubrique Massages - qui doit fonctionner sur toutes les pages y compris celles de WooCommerce que je n'ai pas dessinées. C'est le premier projet du portfolio où le livrable n'est pas une page mais un ensemble.

Le site s'adresse à quelqu'un qui a mal quelque part, ou qui veut offrir un moment à quelqu'un d'autre. Deux intentions très différentes, et le site les traite séparément dès le premier écran : les deux boutons du hero sont « Prendre rendez-vous » et « Offrir un bon cadeau ». C'est la décision la plus nette du modèle, et elle se tient - il n'y a pas de parcours unique à optimiser, il y en a deux.

Le reste de la page d'accueil sert la confiance plutôt que la conversion. Une praticienne qu'on va laisser poser les mains sur soi, ce n'est pas un abonnement qu'on résilie d'un clic : la page consacre son plus long bloc de texte à expliquer ce qu'on va ressentir, et renvoie vers une page « Qui suis-je » entièrement biographique, où Maria Margola raconte son parcours depuis la Pologne. Sur un site de service à la personne, cette page-là est le vrai argument commercial.

La conséquence pour le montage est concrète et je l'ai suivie : la prise de rendez-vous ne passe pas par le site. Le bouton ouvre Resalib, une plateforme de réservation extérieure qui gère l'agenda réel de la praticienne. Le site ne prétend pas savoir quand elle est disponible - il passe la main à l'outil qui le sait. Seules les cartes cadeaux, dont la disponibilité ne dépend de rien, restent en vente sur place.

Je n'ai mené ni entretiens ni tests : le site d'origine était le point de départ imposé. Ce que je décris ici est une lecture argumentée de ses intentions, pas une recherche utilisateur.

Avant de poser la première section, j'ai relevé ce que le modèle répète et ce qu'il traite au cas par cas. Sur quinze pages, ce relevé décide de tout : ce qui se répète devient un gabarit monté une fois, ce qui ne se répète pas est réglé page par page. Se tromper de côté coûte soit neuf fois le même travail, soit un gabarit qu'il faut ensuite contourner partout.

Le point structurant du projet n'est pas dans une page, il est dans le Divi Theme Builder. Trois gabarits y sont montés une fois et s'appliquent à tout le site : la barre de contact et l'en-tête dans le gabarit d'en-tête, le bloc de coordonnées et les liens légaux dans le gabarit de pied de page, et un gabarit de corps qui cadre le contenu. Les quinze pages n'ont plus à porter que ce qui leur est propre.

C'est l'équivalent, dans une interface, de ce que la correction d'Omnifood obtenait avec trois classes utilitaires dans un fichier general.css chargé avant le reste : sortir le commun du particulier. La différence est que Divi le range dans une base de données au lieu d'un fichier, ce qui a une conséquence pratique immédiate - aucun Ctrl+F ne permet de savoir où un réglage a été posé. Sur quinze pages, c'est la principale difficulté du projet.

À l'intérieur de ce cadre, la page d'accueil compte 8 sections, 14 lignes et 74 modules, pour 425 nœuds dans le document final. Les sept pages de massages, elles, reposent sur un seul motif répété : le bloc de fiche décrit plus haut, dupliqué autant de fois qu'il y a de massages dans la famille. Une fois le premier réglé, les suivants sont des copies dont je ne change que le texte.

C'est la partie du projet que je n'avais jamais faite, et celle qui apprend le plus. WooCommerce n'est pas un module de plus dans Divi : c'est une extension qui ajoute ses propres pages, ses propres gabarits et son propre vocabulaire au site. Installer WooCommerce crée d'un coup une boutique, un panier, une page de commande et un espace client, avant même qu'un seul produit existe.

Quatre produits sont créés - deux durées de carte cadeau, en formule standard et en formule Deep Tissue, de 75 à 120 euros. La boutique les affiche en grille : visuel, libellé, prix, et un lien vers la fiche. Les forfaits fidélité affichés juste en dessous ne sont volontairement pas des produits : ils renvoient vers le formulaire de contact, parce qu'un forfait de cinq séances se négocie de vive voix et n'a pas à passer par un panier.

Ce dernier point est la décision de montage dont je suis le plus satisfait, et c'est celle du modèle que j'ai comprise en la reproduisant. Deux blocs voisins, graphiquement jumeaux, dont l'un mène à un paiement et l'autre à une conversation. Rien dans l'apparence ne les distingue ; c'est le libellé du bouton qui porte toute la différence, et il est écrit en clair : « Me contacter ».

La direction est intégralement celle du site d'origine ; je ne l'ai pas choisie, je l'ai relevée. Les valeurs ci-dessous sont mesurées dans le rendu de ma reproduction, où elles vivent dans les réglages du thème Divi plutôt que dans un fichier CSS qu'on pourrait ouvrir.

Les captures ci-dessous sont celles de ma reproduction.

Contrairement à l'étude de cas Omnifood, où je commentais les décisions d'un autre, celles-ci sont les miennes - non pas des décisions de design, que le modèle imposait, mais des décisions de montage, qui ne se voient pas à l'écran et qui décident pourtant de ce que devient le site après moi.

Deux choses m'ont gêné en montant le site. La première : les seize fiches de massage présentent le même tableau - zones ciblées, méthodes, bienfaits - sans qu'on puisse jamais les comparer entre elles. Quelqu'un qui a mal au dos doit ouvrir sept pages et retenir ce qu'il a lu. Le même contenu rangé une fois en comparatif répondrait à la question réelle du visiteur, qui n'est pas « qu'est-ce que le massage suédois » mais « lequel est fait pour moi ».

La seconde : la page d'accueil annonce toujours « 3 groupes de massages » et n'affiche que trois cartes, alors que le menu en propose huit depuis que j'ai complété le site. La contradiction est interne à ma propre reproduction, et elle est de mon fait : un visiteur qui entre par l'accueil ne voit pas les deux tiers de ce qui est proposé. Au-delà du décompte, l'entrée par famille technique demande de toute façon au visiteur de traduire une douleur en catégorie professionnelle avant de pouvoir avancer. J'entrerais par le besoin - soulager une douleur, se détendre, récupérer après le sport - et je laisserais les noms de massages en second rideau.