CLAP Lavage
Le site vitrine de CLAP Lavage, une station de lavage en libre-service ouverte 24h/24 à Saint-Gilles, dans le Gard. Une page unique qui répond à ce qu'on se demande avant de prendre la route : quels équipements, quels véhicules acceptés (de la moto au poids lourd), où c'est et comment appeler. J'ai repris le rouge et le jaune des auvents de la station sur un fond noir, pour que les vraies photos prises sur place fassent le travail.
▸ Le défi
J'avais mis une première version en ligne en juin 2026 : un seul fichier HTML de 2,1 Mo, avec les photos encodées directement dans la page et Tailwind chargé depuis un CDN. Trop lourd pour quelqu'un qui cherche l'adresse depuis son téléphone. Il fallait une page beaucoup plus légère, qui affiche d'emblée les horaires et la hauteur maximum du portique (2,70 m), avec l'itinéraire à un clic. Et tout ça sans imposer un bandeau cookies pour une simple carte.
La section « Nos équipements » : une grille de cartes photo pour le portique de 2,70 m, la haute pression et la mousse active. Chaque carte porte une étiquette (automatique, manuel, prélavage) et une photo prise à la station.
Focus sur l'expérience utilisateur : détails de navigation, micro-interactions et hiérarchie visuelle.
▸ La solution
J'ai tout repris en site statique : HTML écrit à la main et Tailwind CSS 4 compilé en une feuille de 56 Ko. Un seul script de 5 Ko, sans framework. Les photos sont passées en WebP, en plusieurs largeurs selon l'écran. La page suit l'ordre des questions d'un client : équipements en grille de photos, fonctionnement en 3 étapes, galerie avec visionneuse, avis, accès, FAQ. Sur mobile, une barre fixe garde l'appel et l'itinéraire en bas de l'écran. La carte Google Maps ne se charge que si on clique sur « Afficher la carte ».
La section accès : adresse, itinéraire et communes desservies à gauche. À droite, une photo de la station tient la place de la carte Google Maps tant qu'on n'a pas cliqué sur « Afficher la carte », donc aucun cookie tiers au chargement.
Résultats clés
Le HTML de la page est passé de 2,1 Mo à 88 Ko, et plus aucun script externe n'est chargé. La page embarque des données structurées Schema.org de type AutoWash (horaires 24h/24, adresse, coordonnées GPS, 12 communes desservies) et une FAQ balisée, pour préparer le référencement local. La nouvelle version est en ligne depuis le 7 octobre 2026 sur une adresse de prévisualisation Vercel, le temps de brancher le nom de domaine définitif.
-96%
Poids du HTML (2,1 Mo → 88 Ko)
0
Cookies déposés au chargement
AutoWash + FAQ
Données structurées
Discutons de votre vision.
Je conçois et développe sur mesure pour des marques exigeantes. Réponse sous 24h.
Chaque projet suit un processus structuré pour garantir un résultat optimal.
Ce projet a été réalisé en 1 semaine, de la découverte initiale au déploiement final.
Première version
Tri des photos de la station et mise en ligne d'une première page unique sur Vercel, le 24 juin 2026. Tout tenait dans un seul fichier HTML, photos comprises : rapide à publier, mais 2,1 Mo à télécharger. C'est cette version que j'ai reprise à l'automne.
Photos & direction artistique
Conversion des photos en WebP, en plusieurs largeurs pour servir la bonne taille à chaque écran. Palette tirée de la station : le rouge CLAP et le jaune des auvents sur un noir profond. Manrope pour les titres, Inter pour le texte.
Intégration
Page écrite en HTML, styles compilés avec la CLI Tailwind CSS 4, interactions en JavaScript natif : menu mobile animé, apparition des blocs au scroll, barre de progression de lecture, visionneuse photo, carte chargée au clic. Lien d'évitement et focus clavier visibles. Les animations se coupent si le système demande de réduire les mouvements.
SEO local & mise en ligne
Données structurées AutoWash et FAQPage, balises Open Graph, manifeste et icônes. En-têtes de sécurité et règles de cache réglés dans vercel.json. Déploiement de la nouvelle version sur Vercel le 7 octobre 2026, en prévisualisation non indexée avant le passage sur le nom de domaine définitif.
Projet suivant