Un projet de démonstration mené de bout en bout : ce que le métier impose, ce que la direction artistique en tire, comment l'expérience s'organise, et seulement ensuite, comment c'est développé.
Ce projet est une étude de cas fictive. L'électricien et son entreprise sont inventés : ce n'est pas une référence client, et rien sur cette page ne décrit un client réel. Ce qui est décrit, ce sont mes décisions de conception.
Le site, lui, existe. Il est développé, déployé et accessible en ligne. Les scores présentés plus bas sont mesurés sur ce site réel, et vous pouvez les vérifier vous-même à tout moment via le lien PageSpeed.
Une panne à 22h et une rénovation complète arrivent par la même porte, et ne supportent pas la même page.
Le brief que je me suis donné tient en une contradiction. Un électricien vit de deux clientèles qui n'ont rien en commun : celle du dépannage, qui cherche la nuit, en panique, et compose le premier numéro qui la rassure ; celle des chantiers (mise aux normes, borne IRVE, domotique) qui compare pendant plusieurs jours, lit les avis et vérifie les certifications.
Une page conçue pour la première ressemble à un bouton d'appel. Une page conçue pour la seconde ressemble à un dossier. Tout le projet consiste à faire tenir les deux sans que l'une gêne l'autre, et c'est ce qui décide de la direction artistique avant même de parler de couleurs.
Un site d'artisan montre presque toujours une perceuse, un casque, une équipe qui sourit. Ces images disent qu'on travaille : ce dont personne ne doute. Les images retenues montrent un tableau terminé, un chemin de câbles aligné : ce qui se juge, et ce qui justifie un devis plus élevé que celui d'à côté.
Un électricien est jugé sur la régularité : conducteurs de même longueur, repères lisibles, gaines parallèles. Les cadrages appuient délibérément sur cette géométrie. C'est le seul argument que le client comprend sans être du métier.
L'accent ne sert qu'à une chose : appeler ou demander un devis. Partout ailleurs la page s'efface. Une couleur qui apparaît partout ne signale plus rien, et sur un site où l'urgence doit sauter aux yeux, c'est une faute.
RGE, Qualifelec, décennale : listées en bas de page, elles ne servent à rien. Traitées comme un élément graphique à part entière, elles deviennent le premier argument du client qui cherche les aides : celui qui apporte les chantiers, pas les dépannages.
Chaque décision d'architecture découle du parti pris ci-dessus. Voici lesquelles, et pourquoi.
C'est la réponse à la première clientèle. Le numéro est atteignable au pouce dès l'ouverture, sans scroller et sans formulaire. La nuit, dans un couloir sans lumière, tout ce qui s'interpose entre la recherche et l'appel est un obstacle.
C'est la réponse à la seconde. Quatre champs, dont un qui distingue une panne d'un chantier : l'artisan sait avant de rappeler ce qui l'attend, et n'utilise pas une demi-journée à qualifier au téléphone ce qu'une case pouvait dire.
H1 géolocalisé "électricien Saint-Tropez", Schema.org LocalBusiness, fiche Google Business liée au site. Surtout, chaque prestation porte son nom réel (borne IRVE, NF C 15-100, domotique), parce que ce sont les mots que tapent les clients, et qu'un site qui dit seulement "électricien dans le Var" passe à côté.
Chantiers, tableaux de distribution, installations finies. Elle est volontairement située juste avant le formulaire : au moment où le client évalue s'il veut de vous, et non relégué en fin de page, quand la décision est déjà prise.
En panne, on n'ouvre pas trois onglets.
On appelle le premier qui
répond.
Mobile
Solide malgré l'ensemble des pages du site. Décisif pour les urgences depuis un mobile en 4G.
Contrastes WCAG, aria-labels complets, navigation clavier.
HTTPS, images dimensionnées, aucune librairie vulnérable.
H1 géolocalisé, Schema.org LocalBusiness, sitemap structuré.
Desktop
Image de sérieux professionnel avant même de lire le contenu.
Même niveau que sur mobile. Tous les critères essentiels respectés.
Sécurité, protocoles, images : aucune anomalie côté bureau.
Structure sémantique complète. Google comprend et indexe chaque page du site.
Scores relevés sur le site déployé. Lighthouse évolue : ces valeurs peuvent varier d'une mesure à l'autre, le lien PageSpeed plus bas permet de les recalculer en direct.
Le site est codé à la main, sans modèle ni extension : chaque page traitée individuellement, images WebP pré-dimensionnées, fonts hébergées localement, scripts ordonnés. La technique n'est pas le sujet de cette page : elle est ce qui permet aux décisions précédentes de tenir une fois en ligne.
L'écart entre le mobile et le desktop mesure le coût d'un site complet : accueil, services, réalisations, devis, urgences. Un artisan qui présente réellement son métier a plus à charger qu'une carte de visite, et c'est un arbitrage assumé, pas un défaut à masquer.
Ouvrez le site sur un téléphone. Regardez où se trouve le numéro, à quel moment la galerie arrive, ce que demande le formulaire. C'est là que les décisions décrites plus haut deviennent lisibles.
Site de démonstration : déployé sur GitHub Pages
La page dédiée aux électriciens et artisans du BTP dans le Var 83 : bouton urgence, formulaire de devis, SEO local.
→ Page électricien VarBasé à Saint-Tropez, je connais le marché local et accompagne les artisans et professionnels du Golfe de Saint-Tropez.
→ Page Saint-TropezVotre site existe mais est lent ou vieilli ? Je le refonds entièrement : nouveau design, nouveau code, nouvelles performances.
→ Voir la refonteAprès le lancement, je maintiens votre site rapide et sécurisé. À partir de 60 €/mois, sans engagement.
→ Voir la maintenanceLes autres projets de démonstration, pour les métiers du Var : restaurants, agences immobilières, coiffeurs, artisans.
→ Voir le portfolioDevis gratuit sous 24h. Décrivez votre activité en quelques lignes : je vous propose une solution adaptée.
→ Demander mon devisUn chantier se termine.
Un site continue.
Découvrez l'offre complète sur la création de site pour électricien ou demandez directement votre audit gratuit.
Devis 100% gratuit · Sans engagement · Réponse sous 24h · Var 83
Étude de cas site internet électricien Var · Performance web artisan Saint-Tropez · SEO électricien Var 83 · Création site artisan Golfe de Saint-Tropez