HTML d'abord, framework ensuite : concevoir en live avec sa cliente

J'ai travaillé les pages du site d'Eva en HTML/CSS avant de les porter vers Astro. Ce support lui permettait de voir la page dans son navigateur sans installer mon environnement de développement. Nous pouvions ajuster le contenu et la composition ensemble, puis je reprenais l'intégration technique.

Je suis Jim. Après les choix de parcours pour le public d'Eva, voici la méthode utilisée pour construire les pages de La Puissance de l'Éveil avec elle.

Cette préparation rejoint celle de mon propre site construit avec Claude : poser les choix de contenu et de design avant de multiplier les demandes de code.

Un support qu'Eva pouvait regarder

Eva n'a pas besoin de connaître le terminal, npm ou Claude Code pour décider de ce qu'elle veut sur son site. Il me fallait un support qui lui permette de voir la page et de dire ce qu'elle souhaitait changer.

Un fichier HTML convenait à ce besoin. Elle pouvait l'ouvrir dans le navigateur et regarder les textes, les images et les interactions préparées dans le prototype. Ça ne demande pas de lancer un serveur Astro sur son ordinateur.

Travailler section par section

Les sessions partaient des idées, des textes et des photos d'Eva. Avec le gabarit déjà posé, nous pouvions avancer section par section : ajuster un titre, déplacer un bloc, changer la place d'une image ou essayer un accent or sur un mot.

Le changement était visible pendant la discussion. Eva n'avait donc pas à imaginer la page à partir d'une description. La validation portait sur une composition que nous pouvions regarder ensemble.

Une fois la composition validée, je pouvais passer aux liens, à l'édition du contenu et au déploiement. Ces opérations avaient leur propre temps de travail.

Pourquoi séparer le prototype du portage

J'aurais pu démarrer directement dans Astro. Sur ce chantier, j'ai préféré séparer la recherche de composition de l'organisation du site : les fichiers, les composants et les champs éditables venaient ensuite.

En session, ça me permettait de rester sur la page montrée à Eva. Au portage, je pouvais reprendre les éléments communs et traiter les besoins techniques sans les faire entrer dans chaque discussion de design.

Avec un environnement Astro déjà préparé, on peut aussi concevoir directement dans le framework. Ici, j'avais retenu le HTML pour garder le prototype facile à montrer à Eva.

Porter la page vers Astro

Les composants Astro acceptent le HTML. Je pouvais donc reprendre une grande partie du prototype sans recommencer sa mise en page. Le travail consistait ensuite à organiser cette matière.

Les principales opérations étaient les suivantes :

Extraire le <head> dans un layout partagé, pour ne pas le répéter sur chaque page.
Isoler la navigation et le footer dans des composants réutilisables.
Remplacer les textes en dur par du contenu ou des variables pilotées par le CMS.
Préparer les images avec les outils d'astro:assets et choisir les formats et tailles nécessaires.
Ajouter les titres, descriptions et balises Open Graph propres aux pages.

Pour les images, les formats se choisissent dans la configuration. Le composant <Picture> permet notamment de préparer plusieurs formats, comme AVIF et WebP, en gardant une image de repli.

Après intégration, je contrôle que la composition validée tient toujours : mêmes proportions, images bien cadrées, textes lisibles. C'est particulièrement utile quand les textes deviennent éditables ou que les images changent de traitement.

Ce que je retiens de ce workflow

Le bénéfice principal était d'avoir un support commun pendant les discussions. Nous pouvions décider à partir de la page affichée, puis je reprenais les opérations d'intégration. Un test mobile ou le travail sur une autre page peut encore amener un ajustement, mais nous avons déjà une composition sur laquelle nous appuyer.

Une fois le prototype repris, il restait à héberger le site et à organiser son édition. J'ai présenté ces choix dans Astro, Cloudflare et un CMS que la cliente peut piloter.

Le bilan du passage de Wix au sur-mesure rassemble ce que je garderais de cette méthode pour un projet comparable.