Une entreprise qui vend des systèmes de comptage complets, et non de simples appareils, a besoin d’un site qui inspire confiance, explique et génère des demandes – tout à la fois. Avec l’exemple de Clever Meter Ukraine, je raconte comment un cahier des charges de 65 pages est devenu d’abord un design, puis un grand site WordPress bilingue avec deux publics, géolocalisation, documentation, réalisations, formulaires et newsletter maison.
Le client et sa demande
Clever Meter Ukraine est spécialisée dans le comptage de l’eau et de la chaleur : elle sélectionne et fournit les compteurs, met en place la relève automatique des index et propose logiciels, analyse, intégration avec la facturation et service après-vente. L’entreprise travaille avec les fabricants Apator Powogaz, GWF et ADD Grup. Il lui fallait un site d’entreprise qui montre l’essentiel dès le premier écran : elle construit tout le système de comptage, elle ne vend pas seulement des appareils.
Le client m’a remis un cahier des charges détaillé de 65 pages – arborescence, blocs de chaque page, deux publics, exigences sur les formulaires, l’accessibilité, la sécurité et les rôles dans l’administration. J’ai mené tout le projet : design, développement, mise en place du contenu et vérifications avant la livraison.
Design : de la charte graphique au UI kit
J’ai construit le style sur la charte graphique et la texture d’eau de la marque : le bleu marine et le bleu clair de l’entreprise, ses polices, des sections blanches et bleu pâle. J’ai converti la texture du fichier source du client en masque vectoriel : sur le site, elle reste légère et change de couleur selon le fond. L’orange de la marque n’apparaît que là où il y a une action ou un mouvement de données : boutons principaux, pointillés des parcours de données, numéros d’étapes, chiffres clés.
Outre la page d’accueil, la maquette comprend une vingtaine de modèles de pages intérieures et un UI kit à part :
- couleurs de la marque, typographie, grille de 12 colonnes et échelle d’espacements ;
- boutons et champs de formulaire dans tous leurs états – normal, survol, focus, erreur, inactif ;
- cartes, badges, tableaux, messages, squelettes de chargement et états vides ;
- une fenêtre de formulaire en quatre états – saisie, erreur, envoi, succès avec numéro de demande ;
- une fiche des animations : ce qui bouge, en combien de millisecondes et pourquoi – sans mouvement décoratif.
Deux publics : « Partenaires » et « Entreprises »
Le site s’adresse à deux publics aux questions différentes. Un service des eaux ou une commune s’intéresse à l’échelle du réseau et au contrôle des pertes ; un promoteur ou une gérance, au comptage par logement et au retour sur investissement. Le site fonctionne donc en deux versions avec une structure commune : le sélecteur dans l’en-tête et dans le menu mobile mène à la même page de l’autre version, et la version « Entreprises » a son propre préfixe d’adresse – pratique pour la publicité et les e-mailings.
Chaque version déplace les accents : titres et textes des bannières, appels à l’action en bas de page, choix des domaines de solutions sur l’accueil, scénarios de télémétrie. Les réalisations et actualités du public en cours passent en tête des listes, les autres suivent – rien n’est masqué. Pour les moteurs de recherche, les deux versions renvoient à une seule adresse, sans doublons dans l’index, tandis que le cache les conserve séparément.
Accueil : la région du visiteur dès le premier écran
Le premier écran, c’est une photo de ville pleine largeur, la texture de la marque et le titre « du compteur à l’analyse », avec en bas une bande vitrée du parcours des données : compteurs → transmission → plateforme numérique → analyse et facturation. La photo dépend de la région du visiteur : elle est déterminée sur le serveur à partir de l’adresse IP grâce à une base locale mise à jour chaque mois. Le navigateur ne demande rien, l’IP n’est jamais enregistrée, et si la région n’est pas reconnue, une photo universelle s’affiche.
Dans l’administration, chaque région reçoit sa photo et, au besoin, ses propres plages d’adresses IP, et un rédacteur peut prévisualiser l’accueil tel qu’il apparaît dans n’importe quelle région. Plus bas : le cycle complet du comptage en huit étapes, les atouts, les chiffres de l’entreprise et les marques de fabricants, les solutions, les technologies de transmission, les réalisations, les actualités du secteur et le bloc « Nous trouvons la solution ».
Les rubriques produit : du comptage au service
Chaque rubrique répond à une question précise du visiteur et se termine par une prochaine étape claire :
- Comptage des ressources – les types de comptage et un calculateur : le visiteur saisit le nombre de compteurs, la fréquence des relevés, les minutes par compteur, le coût horaire d’un releveur et la part de passages répétés, et voit aussitôt l’économie annuelle et les heures libérées par la relève à distance ;
- Solutions – des domaines pour services des eaux, communes, revendeurs, promoteurs, industrie et agriculture, chacun avec sa page : problèmes du site, contenu de l’offre, équipements, réalisations et documents associés ;
- Télémétrie – le parcours des données de l’appareil à la facturation, les technologies LoRaWAN, M-Bus, Wireless M-Bus et GSM/NB-IoT, et un schéma interactif : vous choisissez le type de site, le schéma se reconstruit ;
- Logiciel – collecte des index, contrôle des pertes et des déséquilibres, rapports, intégration avec la facturation et demande de démonstration ;
- Service et assistance – échange, réparation et étalonnage, formulaire de demande avec choix de l’appareil et envoi de jusqu’à cinq photos ;
- À propos – l’histoire de l’entreprise avec une carte de son expansion, une vidéo dans un lecteur en fenêtre, les fabricants partenaires et un formulaire pour les futurs revendeurs.
Documentation technique et réalisations sur une carte
La documentation forme une bibliothèque à part pour les ingénieurs et les bureaux d’études. Les documents se cherchent par titre, modèle et référence et se filtrent par type (notices, catalogues, certificats, schémas de raccordement, BIM/CAD), catégorie d’équipement, technologie, fabricant et langue. Chaque document indique son format, sa taille, sa version et sa date de mise à jour, les versions obsolètes sont signalées, et certains fichiers sont remis après un court formulaire – l’entreprise obtient ainsi le contact du concepteur.
Les réalisations sont présentées sur une carte de l’Ukraine : vous choisissez une ville et voyez ses projets ; sur téléphone, une liste de villes soignée remplace la carte. Le référentiel contient les 460 villes du pays en ukrainien et en anglais : une nouvelle réalisation se rattache à n’importe quelle ville en la choisissant dans une liste. La page d’une réalisation se lit comme un récit : le site, le problème avant le projet, l’architecture du système, les équipements utilisés, le résultat et un bouton pour chiffrer un site similaire.
Actualités, recherche et newsletter
Les actualités sont rédigées dans l’éditeur de blocs de WordPress avec mes propres blocs – avis d’expert avec un annuaire des experts, fait mis en avant, appel à l’action, contenus liés. Chaque article affiche un temps de lecture, un sommaire, des étiquettes, des boutons de partage et des articles similaires ; photos et galeries se téléchargent une à une ou en archive. Un article ne peut pas être publié sans titre, chapeau, image de couverture et description d’image.
La recherche comprend les différentes formes des mots et fouille aussi bien les textes des pages que les champs des documents et des réalisations ; des suggestions s’affichent dès la saisie et se pilotent au clavier. Pour les abonnements, j’ai écrit une newsletter maison sans service externe : confirmation de l’adresse, choix des rubriques et des thèmes, e-mail dès la parution d’un article ou résumé hebdomadaire, éditeur d’e-mails par blocs, file d’envoi avec limites, désabonnement et gestion de l’abonnement en un clic, export des abonnés.
Formulaires de demande : numéro, services et protection anti-spam
Chaque langue compte 11 formulaires – trouver une solution, consultation, étalonnage, réparation, partenariat, estimation du coût et du retour sur investissement, demande de document, abonnement et formulaire général de la page Contacts. Ils s’ouvrent dans des fenêtres qui gardent le focus et se ferment avec Échap ; sur téléphone, ils glissent depuis le bas. Chaque demande reçoit un numéro au format CMU-année-numéro – il figure dans l’e-mail et sur l’écran de confirmation.
- sur la page Contacts, le visiteur choisit un sujet – et le message part au bon service, dont les adresses se règlent dans l’administration ;
- on peut joindre à la demande un cahier des charges, un plan du site ou une photo du point de comptage ;
- contre le spam : un champ piège invisible, un contrôle du temps de saisie et une limite d’envois par appareil – sans captcha pour les vrais visiteurs ;
- toutes les demandes sont conservées dans l’administration, et la rubrique « Contacts clients » les regroupe par personne – par e-mail ou téléphone –, avec recherche et export vers Excel.
Version anglaise avec Polylang
La langue principale du site est l’ukrainien, et la version anglaise est entièrement traduite : pages, actualités, réalisations, documents, rubriques, menus, formulaires, e-mails de la newsletter et tous les libellés de l’interface. Les deux versions partagent les mêmes adresses, au préfixe de langue près ; le sélecteur UA / EN mène à la même page et, s’il n’y a pas de traduction, l’indique au lieu d’ouvrir une page vide. Les réglages généraux et les blocs du site ont leurs propres valeurs par langue, et un champ vide reprend le texte ukrainien.
Tout se modifie depuis l’administration
Exigence principale du client : aucun texte, chiffre ou photo dans le code. Chaque bloc de la maquette est devenu un champ ACF – sur la page concernée ou dans les sections communes « Réglages du site » et « Blocs du site » : contacts, services, réseaux sociaux, bouton de contact rapide, chiffres de l’entreprise, marques, textes des fenêtres de formulaire, appels à l’action. Les textes se rédigent dans un éditeur visuel, et le rendu reste fidèle à la maquette : paragraphes et listes prennent automatiquement le style du design. Les champs indiquent où ils apparaissent sur le site.
L’équipe dispose de rôles : un gestionnaire de contenu s’occupe des actualités, de la médiathèque et des demandes, sans toucher aux pages, aux documents ni aux réglages. La médiathèque retire les données de localisation des photos, crée des copies réduites en WebP et montre où chaque image est utilisée. Les vidéos s’ajoutent par lien YouTube ou en fichier.
SEO, vitesse et sécurité
Le site est prêt pour le référencement dès le premier jour : adresses lisibles avec redirection des anciennes, fil d’Ariane avec données structurées, titres et descriptions SEO dans Yoast, balises de langue pour les moteurs de recherche. Les polices sont hébergées localement, les images sont servies à la bonne taille et se chargent au fil du défilement, les pages intérieures sont mises en cache, mais pas l’accueil avec sa bannière régionale.
La sécurité suit le cahier des charges : en-têtes de sécurité du navigateur, blocage des tentatives de deviner le mot de passe, mots de passe robustes, connexion à deux facteurs au choix de l’utilisateur, interfaces de service fermées et journal des actions dans l’administration. Avant la livraison, j’ai parcouru tout le site dans les deux langues et les deux versions : aucune erreur de page, tous les formulaires testés, aucun défilement horizontal sur téléphone.
Pourquoi une entreprise technologique a besoin d’un site bien pensé
Quand une entreprise vend des solutions techniques complexes, son site joue le rôle de premier conseiller. Un ingénieur d’un service des eaux, un représentant de commune ou un promoteur doit comprendre vite ce qu’on lui propose et comment cela fonctionne. Pour les sites B2B, je m’appuie donc sur quelques principes :
- expliquer le complexe par des schémas, des étapes et des calculateurs, pas par des paragraphes de jargon ;
- à chaque public ses accents, dans une structure commune ;
- sur chaque page, une prochaine étape claire : trouver une solution, demander un conseil, obtenir un document ;
- documentation et réalisations comme preuves d’expertise, faciles à trouver ;
- tout le contenu entre les mains de l’équipe, dans toutes les langues, sans développeur.
Si vous avez besoin d’un site d’entreprise complet – du design selon votre cahier des charges au développement de fonctions avancées –, je mène le projet de la première maquette à la livraison du site terminé.
Détails du projet
Type de projetdesign et développement d’un site d’entreprise
CatégorieSite d’entreprise
TechnologiesFigma, UI kit, WordPress, thème sur mesure, PHP, JavaScript, HTML5, CSS3, ACF, Polylang, Contact Form 7, Flamingo, Yoast SEO, Relevanssi, LiteSpeed Cache, newsletter maison
Rôleprojet clé en main selon le cahier des charges : design, UI kit, thème WordPress sur mesure, fonctionnalités, champs ACF, version anglaise, tests
ClientClever Meter Ukraine
PaysUkraine
Travaux réalisés
- Design de l’accueil, d’une vingtaine de modèles de pages, d’un UI kit et d’une fiche d’animations selon la charte
- Développement d’un thème WordPress où tout le contenu – textes, chiffres, photos, contacts – se modifie dans des champs ACF
- Deux versions du site – « Partenaires » et « Entreprises » – avec leurs adresses, textes et ordre des réalisations et actualités
- Photo du premier écran selon la région du visiteur, grâce à une base d’adresses IP maison
- Rubriques comptage avec calculateur, solutions, télémétrie avec schéma interactif, logiciel, service, à propos et contacts
- Bibliothèque de documentation avec recherche, filtres et remise des fichiers après formulaire
- Réalisations sur une carte de l’Ukraine, actualités avec blocs d’éditeur sur mesure, recherche avec suggestions
- 11 formulaires par langue avec numéro de demande, envoi par service, anti-spam et carnet de contacts
- Newsletter maison : confirmation, rubriques, résumé hebdomadaire, éditeur d’e-mails
- Traduction du site en anglais avec Polylang, réglage du SEO, du cache, de la sécurité et des rôles
Résultat
- Un grand site d’entreprise bilingue avec un discours distinct pour les partenaires et les entreprises
- Bibliothèque de documentation, carte des réalisations, actualités et newsletter – sans service externe
- Des demandes numérotées qui arrivent directement au bon service
- L’équipe du client gère tout le contenu en deux langues depuis l’administration
- Le site a été vérifié sur toutes les pages, langues et versions et il est prêt à être livré
