Clavelin Import
Un atlas pour six vignerons
Le site d’un importateur de vins européens, refait en une semaine : des domaines présentés sur leurs cartes, un filtre des vins, et un site six fois plus léger.
7 jours de la charte relevée à la mise en ligne
4,6 → 0,7 Mo au premier affichage sur mobile
À valider Accord d’Antonin Aidinian (nom, photo, étude de cas) · Textes des domaines encore à valider par le client
- 7 jours de la charte relevée à la mise en ligne
- 4,6 → 0,7 Mo au premier affichage sur mobile
- 280 → 12 Ko de JavaScript
- 74 / 74 anciennes adresses redirigées
Ce qui n’allait plus
Le site tenait sur une seule page, construite sur un thème WordPress du commerce, avec dix articles de démonstration jamais remplacés. Les 23 boutons « Commander » n’étaient que du texte et les fiches des vins portaient des adresses comme « test-2 ».
- 4,6 Mo et 34 requêtes au premier affichage sur téléphone
- Des présentations de domaines hébergées sur un lecteur PDF extérieur
- Aucune page par vin ni par domaine pour Google
- 828 Ko de CSS et 280 Ko de JavaScript
L’objectif
Garder l’élégance de la charte existante, mais donner enfin une page à chaque domaine et à chaque vin, et faire voyager le visiteur du Tokaj à la Moselle.
Les fonctions qui changent le quotidien
Des domaines sur leurs cartes
Chaque domaine a sa page : pays en doré, épingle du village, rose des vents et échelle.
Un atlas d’Europe
Les six domaines réunis sur une carte, dès l’accueil.
Le filtre des vins
Blancs, rouges, macération, bulles, liquoreux : un filtre qui reste visible, avec ses compteurs et une sélection partageable.
28 fiches vins structurées
Cépages, viticulture, vinification, élevage, sucre, acidité, alcool, production : tout ce que demande un caviste.
Les tables partenaires
Une carte de France de 66 adresses qui servent ces vins, dont 14 tables étoilées vérifiées en septembre 2026.
Un kit de lancement
Cinq visuels et leurs textes pour annoncer le nouveau site sur Instagram, Facebook et LinkedIn.
Le site, page par page
Une charte respectée, mise en valeur
La charte appartient au client et à son thème d’origine : nous l’avons relevée sur le site en ligne, puis respectée. Notre apport : une palette cartographique et la mise en scène des domaines.
#B98D58 #545D5C #242E35 #F9F8F4 #E2DACB ajout NETYGO #C9BDA8 ajout NETYGO #9E7140 ajout NETYGO Typographie
- Cormorant Infant titres et textes longs
- Alata étiquettes en capitales
- Catamaran texte dense
Partis pris
- Des cartes sans cours d’eau, pour ne garder que l’essentiel
- Aucun carrousel qui défile tout seul, aucune animation sur les étapes
- Une police de secours calée sur celle des titres : rien ne bouge au chargement
- Les bouteilles alignées sur la même ligne dans toutes les cartes de vins
Comment le projet s’est déroulé
Chaque piste a été montrée en ligne, sur une adresse d’essai, puis gardée ou écartée en la voyant.
En ligne en une semaine
- 9 septembre
Relevé de la charte
Couleurs, typographies et formes extraites du site en ligne.
- 13 septembre
Recréation puis améliorations
Reproduction fidèle, puis filtre, fiches structurées et pages domaines, en trois itérations le soir même.
- 14 septembre
Préproduction
Vitesse, visionneuse de documents, atlas, frise ; site en ligne sur une adresse d’essai.
- 15 septembre
Retours du client
Catalogue de la rentrée, nouveau domaine, millésimes, partenaires.
- 16 septembre
Mise en ligne
Bascule du domaine, formulaire en production, Search Console déclarée.
- 17 septembre
Finitions
Photos des bouteilles en haute définition, détourées.
Sous le capot
- Astro
- Cloudflare Pages
- d3-geo
- Natural Earth
- PDF.js
- netygo-forms
- Phase 1 : reproduction à l’identique, vérifiée au pixel à 1 440, 1 024, 768 et 375 pixels de large. Phase 2 : les améliorations.
- Cartes calculées à la construction, étiquettes placées sans chevauchement : rien n’est calculé chez le visiteur.
- jQuery, Slick et Swiper supprimés au profit de quelques lignes de JavaScript natif.
- Messagerie du domaine reprise à l’identique lors de la bascule.
Ce que ça a changé, mesuré
| Mesure | Avant | Après |
|---|---|---|
| Mobile, premier affichage | 4,6 Mo · 34 requêtes | 0,7 Mo · 8 requêtes |
| Mobile, page entière | 6,9 Mo | 1,5 Mo |
| Ordinateur, page entière | 10,1 Mo | 2,5 Mo |
| CSS / JavaScript | 828 / 280 Ko | 249 / 12 Ko |
Mesuré dans Chrome, septembre 2026
- 1,4 s environ pour afficher une page domaine en 4G lente
- 39 pages en ligne, toutes en 200, et chaque ancienne adresse redirigée
- 7 éléments de résultats enrichis validés par Google sur l’accueil et une page domaine
Parlons de ce que vous voulez construire
Nous vous disons franchement ce qui est faisable, en combien de temps et pour quel budget.
D’autres projets racontés
-
Étude de cas Mairie de Brié-et-Angonnes
Le site d’une commune de l’Isère, refait en site statique : accueil vivant, recherche instantanée, démarches en ligne et espace de gestion pour la mairie. -
Étude de cas Les Chats de Brié
Le site d’une association de protection des chats : adoption guidée, dons en ligne, reçus fiscaux automatiques et appli de gestion des fiches. -
Étude de cas Syndicat DEFIS
Le site d’un syndicat du CHU Grenoble-Alpes, reconstruit à l’identique et sans perdre une adresse, avec recherche dans les PDF et grilles de salaire.