Site C2i info : la refonte d'une ESN cybersécurité près de Metz

D'où partait le site C2i info

Le site d'origine tournait sur WordPress avec Divi, dans un thème sombre générique : une illustration 3D de banque d'images, des barres de compétences à pourcentages (« Sécurité des Utilisateurs : 95 % »), un bouton « Diagnostic gratuit ». Peu de texte, et une coquille dès le premier titre : « Découvrez les servcices ».

Le plus beau, c'était les témoignages. Quatre cartes, quatre fois la même photo du même monsieur en costume, quatre fois « Gérant, PME Industrielle, Thionville », et quatre fois le texte de démonstration du thème : « Your content goes here. Edit or remove this text inline... ». On ne relit jamais son propre site. Personne ^^

Un premier site non validé

J'ai commencé comme on commence souvent : sauvegarde complète de l'ancien site, design system, en-tête, pages. Début juin, le gérant demande une chose qui change tout : pouvoir modifier ses pages lui-même, dans l'éditeur visuel de Divi. Je repasse donc tout en modules natifs, 90 % de modules standards par page, un ou deux blocs de code au plus.

Mi-juillet, le site est prêt. Le gérant ne le valide pas. Rien de cassé. Il ne s'y reconnaissait pas encore. Il voulait une identité plus proche de la sienne.

La leçon tient en une ligne. J'avais commencé par le code. Il fallait commencer par la charte et par le goût du client.

Du premier site au site livré

La maquette d'abord, le code ensuite

À la rentrée, on repart de zéro côté graphisme. Le client fournit son fichier de couleurs. Je construis la maquette à partir de trois mails où il décrit son accueil, bloc par bloc : ce qu'il veut voir en haut, dans quel ordre, avec quels mots. Elle est validée quatre jours plus tard.

À partir de là, la maquette vaut cahier des charges. Une page validée, puis la suivante. Le reste de la méthode, je la tiens avec tous mes clients :

• tout par écrit, des mails courts ;
• les textes du client posés mot pour mot, jamais réécrits dans son dos ;
• une série de retouches incluse par livrable, la suite sur devis ;
• rien d'annoncé comme fait sans l'avoir vérifié de son côté (son Drive, sa boîte mail, son site) ;
• une sauvegarde avant chaque session de modifications.

49 pages, un même gabarit pour les 24 sous-services

L'ancien site avait un accueil, quatre pages de services courtes, un blog et un contact. Le nouveau en compte 49. Chaque métier a sa page, ses six sous-services et son test en ligne. Les 24 sous-services partagent le même gabarit en neuf sections : le visiteur qui en a lu un sait lire les autres.

Les 49 pages, par type

Le menu est un méga-menu à quatre pictos, où chaque métier liste ses six sous-services, puis « Découvrir » et « Faire le test ». Au-dessus, un bandeau de réassurance : le label, la note de 5,0 sur 13 avis Google, les 125 organisations, la supervision automatisée 24/7. « Automatisée », le mot compte : le client a tenu à ce qu'on ne la confonde pas avec un SOC, un centre de supervision de sécurité. Sur une ESN de cybersécurité, ce genre de nuance, c'est de la crédibilité.

Ce que le visiteur peut faire

Un site d'ESN ne sert pas à faire joli. Il sert à ce qu'un dirigeant inquiet appelle, ou commence par se tester. Les fonctions livrées :

• Quatre diagnostics en ligne, un par métier : 20 questions en cinq thèmes, réponses Oui, Non ou Je ne sais pas, un score sur 20, cinq niveaux et trois priorités, puis un rapport détaillé par mail. Un seul moteur pour les quatre tests. Les questions sont celles du client, reprises mot pour mot : zéro écart sur 310 champs.
• Une demande d'intervention : le bouton vert de l'en-tête ouvre une fenêtre avec un formulaire de quatre champs, les liens de prise en main à distance, le téléphone et les horaires. Une demande marquée « Bloquant » arrive avec [URGENT] en objet.
• Un test d'éligibilité à la fibre sur la page Internet professionnel : c'est le formulaire de l'opérateur Sewan, intégré à la page.
• Une rubrique Actualités et Conseils : cinq catégories, recherche, sommaire automatique, articles associés, et les derniers articles affichés sur les pages de services. Chaque article part tout seul sur Facebook et LinkedIn. Le premier, sur la fraude au changement de RIB, est en ligne depuis le 27 octobre.
• Une carte de la zone d'intervention avec Leaflet et OpenStreetMap : quatre départements, le Luxembourg, le siège et les villes desservies.

1 340 défauts de contraste, zéro à l'arrivée, sans toucher à la marque

Le 1er octobre, je passe le site à axe-core, contre les règles WCAG 2.1 niveau AA, sur 50 pages en deux tailles d'écran. Il relève 1 340 éléments en défaut de contraste.

La cause est dans la marque elle-même. Le bleu et le vert de C2i info, avec du blanc, plafonnent autour de 3:1. La règle demande 4,5:1 pour du texte courant. On pouvait changer les couleurs du client. Je ne l'ai pas fait. J'ai ajouté deux variantes « texte », plus sombres, qui prennent tout ce qui se lit. Les couleurs d'origine restent pour le logo, les filets et les aplats.

À l'arrivée, zéro défaut axe-core sur les 50 pages, en 1 440 et en 390 pixels de large, contrôle rejoué le 26 octobre. Les couleurs de marque sont intactes. C'est un contrôle automatique doublé d'une passe à la main, pas un audit de conformité. La rubrique Actualités, ouverte après, n'a pas encore été mesurée.

Une charte de 31 pages et 528 fichiers

La maquette validée, il restait le reste : tout ce qui porte la marque hors du site. Le client a reçu une charte en PDF de 31 pages et un dossier de 528 fichiers rangés en six dossiers sur son Drive. C'est le travail que je décris sur la page charte graphique et identité visuelle.

Les 528 fichiers du kit

Deux polices, à cause d'une licence

Au bureau, le client travaille dans Microsoft 365, avec Aptos, la police de Microsoft 365, déjà installée sur ses postes. J'ai lu la licence : elle interdit de servir les fichiers de la police sur un site, et la licence web était un abonnement annuel.

Il fallait donc une police libre qui ressemble à Aptos. J'en ai mesuré 30, en superposant leur tracé à celui d'Aptos. Funnel Sans, sous licence SIL OFL, arrive première : 0,78 de recouvrement en graisse normale, 0,84 en gras. Public Sans fait 0,65 et 0,73, Manrope 0,51 et 0,64. Le client a validé. Elle est hébergée sur son serveur : depuis le 22 septembre, le site n'appelle plus aucune police chez Google.

Aptos dans les mails et les documents, Funnel Sans sur le site et les visuels. Côte à côte, il faut chercher la différence.

Un logo redessiné, et ses règles

Le logo d'origine est un fichier Illustrator. Je l'ai reconstruit en vectoriel à partir du PDF fourni par le client, à 3,8 près sur 255 par canal de couleur en moyenne. Il sort en trois formes, cinq versions de couleur et quatre formats, avec une zone de protection, des tailles minimales et huit interdits illustrés. Le label ExpertCyber se pose à côté du logo, jamais dedans. L'emblème seul est réservé au favicon et à l'icône d'application : règle demandée par le client.

Les pictos viennent d'un seul jeu, Font Awesome en version libre, hébergé sur le serveur. Le client avait refusé des pictos dessinés au trait en septembre. Depuis, la règle : un picto choisi pour un service le suit partout, du menu à la signature mail.

Les détails qu'on ne voit qu'au bureau

• La carte de visite : recto bleu à circuits, avec les quatre métiers et leur verbe (Protéger, Collaborer, Communiquer, Connecter). Au verso, un QR code qui contient la fiche de contact elle-même : l'appareil photo d'un iPhone propose « Ajouter aux contacts » sans rien télécharger. Testé au décodeur à 150 et 300 dpi.
• La signature mail : adresse, mail, téléphone et site cliquables, un filet en dégradé, les quatre services liés à leur page.
• Le fond Teams : une photo des bureaux du client, logo et verbes posés en relief sur le mur.
• Le reste du kit : modèles Word et PowerPoint, favicons, sept avatars, les couvertures des réseaux, fonds d'écran jusqu'en 4K.

Ce qui se mesure

Les notes Lighthouse sont une mesure en local, sur trois passes, pas des données de visiteurs réels. Pour y arriver, l'accueil du nouveau site est passé de 3 355 Kio à 706 Kio sur mobile, près de 5 fois moins : la vidéo d'accueil se charge en différé, et plus du tout sur téléphone.

La dernière ligne demande une explication. Un fichier llms.txt résume le site pour les moteurs de réponse par IA. Sur un site Divi, les pages sortaient vides dans ce fichier : le contenu vit dans les modules, pas dans le texte de la page. Un module du thème enfant les rend lisibles, et le fichier complet est passé de 9 Ko à 470 Ko. C'est le même travail que sur mon propre llms.txt, décrit sur la page visibilité SEO et GEO. Côté référencement classique : Rank Math, un titre et une description par page, un seul H1, des données structurées, et des redirections 301 depuis les anciennes adresses.

Ce qui reste au client

Le site est construit en modules Divi natifs. Le client ouvre une page, clique sur un texte, le change. Aucune page codée en dur, aucun appel au prestataire pour corriger une virgule. Tout le reste, les couleurs, les pictos, les polices, les gabarits Word, est dans sa charte et sur son Drive.

C'était sa première demande, en juin. C'est ce qui a fait basculer le chantier : un site qu'on modifie soi-même, c'est un site qu'on garde.

Et maintenant

Le site C2i info est livré. L'ouverture aux moteurs de recherche (indexation, plan du site, Search Console, page cookies) est proposée au client depuis le 29 octobre. Je n'ai donc aucun chiffre de trafic ni de demandes à montrer. Je reviendrai sur cet article dans trois mois, avec ce qui se mesure en ligne.

Si votre site d'entreprise ressemble encore à un thème de démonstration, c'est le travail de la page création et refonte de site. Les prix sont sur la grille des tarifs.