Étude de cas Vitréo Cleaning : un site vitrine WordPress avec simulateur de devis

Cette étude de cas de site vitrine WordPress présente le site de Vitréo Cleaning, une entreprise de nettoyage de vitres installée à Lamastre, en Ardèche. Je l’ai conçu et développé de zéro en juin et juillet 2026, sans thème du commerce ni page builder. Trois éléments le distinguent : un simulateur de devis qui calcule le prix en direct, une fenêtre « embuée » que le visiteur essuie du doigt et un référencement local adapté à une zone rurale.

Ce projet illustre ma façon de travailler en création de site vitrine WordPress : partir du métier du client, puis ne coder que ce qui sert la prise de contact.

Contexte : un laveur de vitres en zone rurale

Vitréo Cleaning nettoie les vitres des maisons, vérandas, gîtes, résidences secondaires et vitrines autour de Lamastre, dans un rayon de 35 km couvrant la vallée du Doux et le Haut-Vivarais. Le site devait faire connaître l’entreprise, rassurer sur le prix et transformer une visite en demande d’intervention.

Dans ce métier, la première question d’un particulier est toujours la même : combien ça coûte ? La seconde : est-ce que vous venez jusque chez moi ? Un site vitrine classique y répond par un formulaire de contact et une attente. Le client voulait l’inverse : un prix clair, tout de suite.

Les objectifs du projet :

• afficher une estimation fiable avant tout appel ou formulaire ;
• faire apparaître le reste à charge après le crédit d’impôt de 50 % des services à la personne, pour les particuliers à leur domicile ;
• être trouvé sur les recherches locales, commune par commune ;
• marquer les esprits avec une identité visuelle propre au métier ;
• offrir un site rapide, accessible et simple à mettre à jour.

Les contraintes

• Des connexions parfois lentes. En zone rurale, le réseau mobile est irrégulier : chaque kilo-octet compte.
• Un public de tous âges. Le site doit rester lisible et utilisable sans effort, au doigt comme à la souris.
• Un budget de petite entreprise. Pas de place pour des abonnements à des extensions ou des outils payants.

Le simulateur de devis : conception

Le simulateur calcule le prix à chaque clic, sans rechargement ni e-mail demandé. Le visiteur indique ses ouvrants par type, ajoute ses options et choisit une fréquence de passage. Il voit aussitôt le total et, pour un particulier chez lui, la somme réellement à sa charge après le crédit d’impôt de 50 %.

Ce que calcule le simulateur

1. Le nombre d’ouvrants par catégorie : fenêtres, portes-fenêtres, baies vitrées et fenêtres de toit, chacune avec son tarif affiché sur la ligne.
2. Les options : petits carreaux à croisillons, véranda au forfait.
3. La fréquence : un passage unique ou un rythme régulier, avec une remise qui augmente avec la régularité.
4. Le minimum d’intervention, appliqué et expliqué quand le total est trop faible.
5. Le reste à charge après crédit d’impôt, affiché en clair sous le total.

Pourquoi un calcul en direct

Un prix affiché sans condition crée la confiance. Le visiteur n’a pas l’impression de « donner ses coordonnées pour savoir », et quand il appelle, il connaît déjà l’ordre de grandeur. Le reste à charge est l’argument décisif pour un particulier : il divise le prix par deux et lève l’objection principale.

Côté accessibilité, chaque compteur se pilote avec de vrais boutons « + » et « − », utilisables au clavier, et les options sont des boutons à état (aria-pressed) : un utilisateur au clavier obtient le même calcul que les autres, et le total se met à jour sans changer de page.

La fenêtre « embuée » : une signature visuelle sans bibliothèque

En haut de la page d’accueil, une vitre embuée s’essuie d’un coup de raclette et révèle les collines de la vallée du Doux. L’effet repose sur un masque CSS piloté par les Pointer Events : il suit la souris, le doigt ou le stylet, sans aucune bibliothèque JavaScript.

Au chargement, la raclette balaie la vitre toute seule. Le visiteur peut ensuite glisser le doigt pour l’essuyer lui-même, ou rejouer l’animation avec un bouton. Techniquement, une seule propriété CSS personnalisée décide de la part de vitre nettoyée ; le script se contente de la mettre à jour selon la position du pointeur.

• les personnes qui ont réglé leur système pour limiter les animations voient directement la vitre propre ;
• l’illustration porte une description textuelle pour les lecteurs d’écran ;
• l’effet ne bloque rien : le titre, le prix et les boutons d’action restent accessibles immédiatement.

Thème sur mesure et performance

Le site repose sur un thème WordPress écrit pour lui, sans constructeur de pages ni bibliothèque JavaScript. Le simulateur et la fenêtre embuée tiennent en une centaine de lignes de JavaScript natif. Moins de code chargé, c’est un affichage plus rapide sur les réseaux mobiles faibles.

Plutôt qu’un score figé à un instant donné, voici les leviers mis en place :

• aucun page builder : le HTML produit contient uniquement ce que la page affiche ;
• zéro dépendance JavaScript, ni jQuery ni framework ;
• CSS critique intégré dans la page pour un premier affichage immédiat, le reste chargé ensuite ;
• scripts chargés en différé, sans bloquer l’affichage ;
• animations désactivées pour les visiteurs qui le demandent.

C’est tout l’intérêt d’un thème WordPress sur mesure : chaque ligne a une raison d’être, et le client garde l’administration WordPress qu’il connaît pour modifier ses textes.

Un module de réservation sur mesure

Le thème intègre aussi un module de réservation codé sur mesure. Le visiteur choisit un créneau parmi ceux calculés côté serveur selon les disponibilités, sans payer à cette étape. Il reçoit un e-mail de confirmation et un lien personnel pour consulter son rendez-vous ou l’annuler. C’est la même logique que celle d’une application de réservation, à l’échelle d’un site vitrine.

Accessibilité : viser le niveau WCAG AA

J’ai travaillé l’accessibilité en prenant pour référence les critères du niveau AA des WCAG : contrastes travaillés, navigation au clavier, focus visible, vrais boutons pour chaque action, description textuelle des illustrations et respect des préférences de mouvement. Pour une entreprise de services, c’est aussi une question commerciale : un site difficile à utiliser perd des clients.

SEO local en zone rurale

En zone rurale, on recherche « nettoyage de vitres » suivi du nom de sa commune ou de la ville voisine. J’ai donc construit le référencement autour de Lamastre et de la vallée du Doux, avec une page de zone d’intervention unique qui liste les communes desservies, plutôt qu’une page par village.

• Un ancrage clair : le titre principal associe le service, Lamastre et la vallée du Doux.
• Des communes utiles : les principales communes desservies sont affichées avec leur distance et leur temps de trajet, et renvoient vers une page de zone d’intervention unique.
• Pas de pages satellites : des dizaines de pages « nettoyage de vitres à [commune] » quasi identiques seraient vues comme du contenu de faible valeur.
• Des réponses aux questions concrètes : une FAQ lève les doutes d’un particulier (présence pendant l’intervention, météo, fréquence de passage) avant qu’il appelle.

Résultats

Le site a été conçu de zéro et livré en deux mois. Le visiteur connaît le prix avant d’appeler, voit son reste à charge après crédit d’impôt et sait si sa commune est desservie. Je ne publie pas de chiffres de trafic ou de conversion sans relevé vérifié et l’accord du client.

Sur le plan qualitatif, le site remplit son cahier des charges : une identité mémorable, un parcours qui mène au contact sans friction, et un client autonome dans WordPress. Les avis vérifiés laissés par mes clients sont réunis sur la page avis clients Codeur.com.

Ce que j’en retiens

Un petit site peut faire beaucoup s’il répond d’abord à la vraie question du visiteur. Ici, c’était le prix. Le simulateur a demandé plus de réflexion que de code : choisir les bonnes catégories d’ouvrants, rendre le minimum d’intervention compréhensible et montrer le reste à charge au bon endroit.

Je retiens aussi qu’une animation peut être à la fois mémorable, légère et accessible, à condition d’être pensée sans bibliothèque et avec une solution de repli. Si vous envisagez un site comparable, la page tarifs WordPress explique ce qui fait varier le budget d’un site vitrine ; le devis définitif suit toujours un cadrage gratuit.