Constructions Havreau
Un site vitrine complet pour une entreprise qui n'existe pas.
Projet conceptuel : site vitrine pour une entreprise de construction et de rénovation résidentielle. Construit en entier — identité, contenu, bilinguisme, demande de soumission, accessibilité, performance — pour montrer ce que je livre à une PME locale.
Pourquoi une entreprise inventée
La question qu'on me pose le plus souvent est simple : « as-tu un exemple de site que tu pourrais faire pour mon entreprise ? ». Y répondre avec un site de client demande d'avoir un client, et un premier client demande de répondre à la question. Constructions Havreau casse cette boucle.
L'entreprise est fictive, mais rien du travail ne l'est. Le site est bâti, déployé et vérifié exactement comme un mandat payant : les cinq pages existent, le formulaire valide vraiment, les deux langues sont complètes, et la démonstration tourne sur la même infrastructure que ce site-ci.
La contrainte principale a été l'honnêteté. Un site vitrine crédible s'appuie sur de l'ancienneté, des chiffres et des témoignages — précisément ce qu'une entreprise inventée ne peut pas avoir. La fiction est donc nommée à chaque endroit où elle serait lue comme une preuve : chiffres d'exemple, exemples de témoignages, exemple de projet. Le reste du contenu est resté concret, parce que c'est lui qui rend la démonstration utile.
Ce qu'un client de PME regarde en premier
Quelqu'un qui cherche un entrepreneur ne cherche pas d'abord de belles photos : il cherche à écarter le risque de se faire avoir. La structure de la page suit cet ordre. Les repères vérifiables arrivent avant les services, le déroulement d'un chantier avant les réalisations, et la visite gratuite est offerte partout où la main pourrait hésiter.
Le contenu descend dans le détail du métier — membrane d'étanchéité, pente vers le drain, circuits dédiés, étaiement temporaire, continuité de l'isolation. C'est un choix : un texte qui dit « des solutions adaptées à vos besoins » ne prouve rien, alors qu'un texte qui nomme les étapes cachées d'une salle de bain prouve qu'on connaît le métier. Sur un vrai mandat, ces phrases viennent d'une entrevue avec le client.
Le formulaire de soumission demande la ville, le type de projet et une description, pas un formulaire de dix champs. Il valide en direct, désigne le champ fautif et amène le lecteur d'écran sur le résumé d'erreurs. Sur la démonstration, il ne transmet et n'enregistre rien, et il le dit.
Les décisions qui se mesurent
Aucune photo ne fait sauter la page pendant son chargement : chaque image réserve sa place exacte, et le décalage cumulatif est de zéro sur toutes les pages. Les apparitions au défilement sont écrites en CSS plutôt qu'en JavaScript, ce qui retire un composant client de chaque page.
Le formulaire a d'abord été écrit avec une bibliothèque de validation, puis réécrit à la main : le schéma coûtait 66 ko de JavaScript pour cinq règles, plus que tout le reste du site. Les photos sont converties à l'avance en quatre largeurs choisies d'après les tailles d'affichage réelles, ce qui a divisé par deux le poids de la page des services.
Le contraste, la taille des cibles tactiles, la hiérarchie des titres et l'absence de débordement à 320 px sont mesurés dans un vrai navigateur, sur les huit pages, à chaque passe. Le site est volontairement exclu de toute indexation, par trois canaux indépendants : une entreprise inventée ne doit jamais apparaître dans un résultat de recherche.
Aperçus




Ce qu'il y a dedans
- Identité visuelle complète : palette, typographie, sigle, système de composants
- Cinq pages et six fiches de projet, bilingues, avec adresses traduites
- Formulaire de soumission validé, avec gestion du focus et messages reliés aux champs
- Décalage cumulatif de zéro et moins de 400 ko à l'affichage sur chaque page
- Contraste, cibles tactiles et hiérarchie de titres mesurés dans un navigateur
- Aucune indexation : entreprise fictive, signalée sur chaque page
- Image de partage dédiée par langue, pour l'envoi direct à un prospect
