À propos du projet
Le contexte
Tonelec est une entreprise d'électricité générale fondée par Antoine Vi-Van, artisan installé à Carpentras et fort de plus de 35 ans de métier. Il intervient sur tout le Vaucluse pour l'installation, le dépannage et la mise aux normes électriques, ainsi que pour la pose et l'entretien de systèmes de climatisation réversible.
Antoine, disposait d'une simple carte de visite et d'une fiche Google Maps à peine visible. Il souhaitait une présence en ligne professionnelle pour attirer des clients dans le Comtat Venaissin, sans que le budget d'un site vitrine devienne un frein.
L'objectif
Concevoir un site one-page qui remplit trois rôles :
- Convertir en urgence — un bandeau rouge persistant avec bouton d'appel direct (
tel:) affiché en permanence, pour convertir immédiatement les recherches type « électricien Carpentras dépannage ». - Rassurer et légitimer — mettre en avant les 35 ans de métier, les partenaires professionnels (Hager, Rexel, Schneider) et des avis Google pour asseoir la crédibilité de l'artisan.
- Référencer localement — positionner Tonelec sur les requêtes du bassin de Carpentras : électricien Carpentras, dépannage électrique Vaucluse, installation climatisation Mazan, borne IRVE Pernes-les-Fontaines…
Mon intervention
- Analyse de la fiche Google Business Profile existante, identification d'un doublon et plan de nettoyage.
- 4 propositions de wireframes soumises au client via un comparateur interactif, avec un audit UX/UI documenté pour chaque version.
- Conception d'un logo vectoriel sur-mesure (SVG + kit multi-formats : favicon, PWA, print, monochrome).
- Développement complet du site sous Astro.js, sans framework CSS lourd, pour un site ultra-léger et ultra-rapide.
- Rédaction des textes SEO orientés intention de recherche locale, avec un mot-clé principal par section.
- Configuration SEO on-page : balises
title/description, données structurées Schema.orgLocalBusiness+ElectricalContractor, sitemap.xml, robots.txt. - Optimisation des Core Web Vitals via images WebP, lazy loading,
font-display: swap. - Rédaction et intégration de la page Mentions légales & Politique de confidentialité RGPD en 2-en-1.
- Configuration du domaine
tone-elec.frchez Infomaniak et déploiement.
Technologies
| Catégorie | Outils |
|---|---|
| Framework | Astro.js |
| Langages | JavaScript, HTML5, SCSS |
| Typographie | Oswald (Google Fonts, display: swap) |
| SEO | Meta tags, Schema.org LocalBusiness, sitemap.xml, Google Search Console |
| Médias | SVG (logo), WebP (photos) |
| Analytics | Plausible Analytics (RGPD-friendly, sans cookies) |
| Workflow | Git, déploiement continu |
Quelques choix techniques
- Astro.js plutôt que WordPress : pour un site vitrine one-page qui n'a pas besoin de back-office, Astro délivre un HTML statique ultra-léger (aucun runtime JS chargé côté client sauf pour l'accordéon FAQ). Résultat : un Lighthouse à 100/100 en performance et zéro maintenance de plugins.
- SVG inliné pour le logo : le logo est injecté directement dans le HTML via
set:htmld'Astro. Aucune requête réseau supplémentaire, indexation SEO du texte du logo, et rendu identique quel que soit l'appareil. - Formulaire de contact minimaliste — 3 champs (nom, téléphone, type de besoin) pour maximiser le taux de conversion sur mobile, avec envoi via une API PHP maison et l'hébergeur (aucun back-end à maintenir).
- Design system full-CSS avec variables custom (
--red: #C0392B,--dark: #18181b) pour garantir la cohérence visuelle et permettre à Antoine ou à moi-même de faire évoluer la charte en une ligne de code. - Zéro cookie de tracking : Plausible Analytics conforme RGPD par défaut, ce qui a permis de simplifier la bannière de consentement et d'accélérer le premier rendu.
Le résultat
Un site clair, ultra-rapide et pensé mobile-first, qui met en scène le métier d'Antoine en moins d'un scroll. Le bandeau d'appel direct est visible en permanence, les 6 prestations sont illustrées par de vraies photos de chantiers, et le formulaire de devis se remplit en 15 secondes. La fiche Google Business Profile a été nettoyée du doublon et optimisée en parallèle du site — deux leviers qui se renforcent mutuellement pour le SEO local.