Votre site idéal ressemble à celui-ci ?
Faites appel à PG Concept pour la réalisation d'un site WordPress professionnel, attrayant, sécurisé et performant.
Le site d’une entreprise doit évoluer avec son activité, son positionnement et les attentes de ses différentes audiences. Lorsque sa structure devient trop limitée ou que sa présentation ne reflète plus la réalité de l’entreprise, une refonte complète devient préférable à une succession de corrections ponctuelles.
C’est dans ce contexte que ClubSec, un cabinet de conseil IT, m’a confié la refonte de son site WordPress. L’objectif était de construire une plateforme plus claire, plus performante et beaucoup plus simple à faire évoluer, tout en distinguant précisément les besoins des entreprises clientes de ceux des consultants souhaitant rejoindre le cabinet.
1. Contexte du projet ClubSec
Fondé à Paris en 2023, ClubSec est un cabinet de conseil IT spécialisé dans quatre grands domaines : Cloud Modernization, Platform Engineering, IA & Data et Security by Design.
Son slogan, « Cabinet de conseil en ingénierie du numérique sécurisé », résume son positionnement : accompagner les entreprises dans leurs projets de transformation numérique en intégrant la sécurité dès leur conception.
Le site précédent ne correspondait cependant plus à l’image que ClubSec souhaitait renvoyer. Sa structure en One Page présentait l’entreprise, son modèle et ses offres de manière trop succincte. Les visiteurs disposaient de peu d’informations pour comprendre précisément les expertises proposées ou identifier les missions déjà réalisées.
Le site souffrait également de bugs, de ralentissements et d’une structure rigide, difficile à enrichir sans intervenir directement dans la construction des pages. Cette organisation limitait fortement les possibilités d’évolution.
Charles-Edouard, fondateur de ClubSec, souhaitait donc repartir sur une base plus saine et plus professionnelle. Il a choisi PG Concept pour son expertise en développement WordPress, mais aussi pour la rigueur apportée aux performances, à la sécurité et à la conformité RGPD, le tout avec un rapport qualité-prix particulièrement compétitif.
Le site avant refonte
Cette capture de l’ancien site est présentée uniquement à titre comparatif, afin de vous permettre de constater vous-même les évolutions apportées par la refonte.
Vous pouvez survoler l’image pour faire défiler la capture complète.
2. Cahier des charges de ClubSec
L’un des principaux enjeux consistait à différencier clairement les deux audiences du site.
D’un côté, les entreprises doivent pouvoir découvrir les domaines d’expertise de ClubSec, consulter des exemples de missions et prendre contact pour présenter leurs besoins. De l’autre, les consultants doivent comprendre le modèle redistributif du cabinet, estimer leur future rémunération et déposer leur candidature.
Cette distinction a conduit à créer deux parcours complémentaires, présents aussi bien dans le menu que dans la structure des pages et les appels à l’action.
Le nouveau site devait notamment accueillir :
- Quatre pages détaillant les offres de ClubSec
- Des pages consacrées au modèle, aux valeurs, au paradigme et à la charte de l’entreprise
- Un espace dédié aux candidats
- Une page de références
- Un simulateur de salaire
- Une FAQ
- Une page Communauté
- Une page Contact avec une entrée pour les clients et une autre pour les consultants
La gestion des contenus devait également devenir beaucoup plus souple. Plusieurs types de contenus personnalisés, ou Custom Post Types, étaient donc nécessaires pour permettre à ClubSec d’ajouter des missions, des références, des problématiques, des événements, des formations ou des questions fréquentes sans modifier le design des pages.
Le simulateur de salaire existant devait être conservé, mais entièrement optimisé afin d’améliorer son fonctionnement, son administration et son impact sur les performances générales du site.
La refonte devait enfin moderniser et harmoniser l’identité visuelle, améliorer les temps de chargement, renforcer la sécurité, préparer une structure SEO propre et remettre les informations légales en ordre.
La page initiale regroupant les mentions légales et différentes informations liées aux données personnelles devait notamment être divisée en deux documents distincts : les mentions légales et la politique de confidentialité. Un bandeau de gestion du consentement devait également être ajouté.
3. Déroulement du projet
3.1. Choix techniques
Le nouveau site repose sur WordPress, associé à Divi 5 et à un thème enfant développé spécifiquement pour ClubSec.
Le thème enfant permet de centraliser les personnalisations CSS, JavaScript et PHP sans modifier directement les fichiers du thème principal. Les futures mises à jour de Divi pourront ainsi être appliquées sans écraser les développements réalisés pendant la refonte.
Le simulateur de salaire a été intégré dans un plugin WordPress dédié. Cette séparation évite de rendre son fonctionnement dépendant de Divi ou du thème utilisé.
Les contenus structurés reposent quant à eux sur des Custom Post Types, des taxonomies et des métaboxes personnalisées. Cette architecture dissocie clairement les données de leur présentation et facilite leur réutilisation à différents endroits du site.
3.2. Étapes de la prestation
La première étape a consisté à créer un environnement de staging. Cette copie indépendante du site permet de travailler sur la refonte sans perturber le site encore accessible au public.
Un thème enfant a ensuite été mis en place pour accueillir les développements spécifiques et les règles graphiques globales.
Les différentes pages ont été conçues dans Divi 5 en respectant une identité visuelle commune : typographie Poppins, palette de couleurs rationalisée, composants homogènes, contrastes renforcés et tailles de caractères fluides selon la largeur de l’écran.
6 Custom Post Types ont été développés :
- Problématiques ;
- Références ;
- Missions ;
- Événements ;
- Formations ;
- Questions de la FAQ.
Ces contenus peuvent être associés à des taxonomies et complétés à l’aide de métaboxes adaptées à leur nature.
Du code sur mesure permet ensuite de les afficher automatiquement sous différentes formes : grilles de cartes, filtres par catégories, pagination ou bannière défilante pour les logos des références.
Les missions peuvent par exemple être affichées dans une grille filtrable sur la page Références ou dans une grille ciblée sur chaque page Offre. Une nouvelle mission apparaît automatiquement dans les emplacements correspondants dès lors que ses catégories et ses informations ont été correctement renseignées.
Le plugin du simulateur de salaire a également été entièrement recodé. Ses fichiers ne sont désormais chargés que sur la page dédiée, au lieu d’alourdir inutilement l’ensemble du site. Les calculs et la mise à jour des résultats sont effectués directement dans l’interface grâce à AJAX, sans rechargement de la page.
La sécurisation du site comprend notamment :
- La configuration de Wordfence
- La mise en place d’en-têtes de sécurité
- L’ajout de protections antispam
- Le déplacement de l’URL de connexion à l’administration WordPress
- L’utilisation d’un code personnalisé conforme aux bonnes pratiques de développement WordPress
La mise en conformité RGPD a donné lieu à plusieurs actions complémentaires :
- Un bandeau de consentement permet aux visiteurs de contrôler l’utilisation des cookies.
- Le site n’impose aucun cookie non essentiel : aucun cookie statistique ou marketing n’est actuellement déposé sans nécessité.
- L’ancienne page légale, qui regroupait différents contenus, a été réorganisée en deux pages distinctes. Les mentions légales et la politique de confidentialité ont été corrigées et complétées avec les informations manquantes.
Les performances ont été travaillées dès la conception : images optimisées, limitation des ressources chargées, code ciblé, cache et suppression des dépendances inutiles.
Une attention particulière a également été portée à l’accessibilité, notamment à travers les contrastes, la navigation au clavier, la lisibilité des composants et l’intégration de fils d’Ariane.
La phase de finalisation a inclus une double sauvegarde de l’ancien site :
- Une sauvegarde complète avec UpdraftPlus ;
- Une sauvegarde manuelle des fichiers par FTP et de la base de données.
J’ai transmis l’ensemble au client via WeTransfer dans une archive accompagnée d’un document expliquant le rôle de chaque dossier et les grandes étapes permettant de restaurer l’ancienne version du site si nécessaire.
La dernière étape a consisté à migrer l’environnement de staging vers la production, puis à tester l’ensemble des pages, formulaires, contenus dynamiques et fonctionnalités. Les performances ont enfin été contrôlées avec PageSpeed Insights après la mise en ligne.
4. Aperçu du site ClubSec
4.1. Structure générale
Menu de navigation
Le menu organise les contenus autour des principales intentions des visiteurs. Les entreprises accèdent rapidement aux offres et aux références, tandis que les consultants disposent d’un parcours dédié au modèle ClubSec, au simulateur de salaire et à la candidature.
Pour un affichage visuellement réussi, ce menu se décline en 2 versions :
- Transparent en standard
- Avec un fond vert légèrement dégradé lors du défilement de la page
Footer
Le pied de page reprend les principales rubriques du site et facilite l’accès aux pages institutionnelles, aux offres, aux informations de contact et aux documents légaux. Il complète la navigation principale sans la dupliquer inutilement.
Contenus dynamiques
Affichage paginé des questions de la FAQ
Problématiques sous forme de carrousel
Missions pour l’offre Cloud Modernization
Missions filtrées par offres, avec CTA
Simulateur de salaire
Les missions, références, problématiques, questions fréquentes, formations et événements sont administrés indépendamment des pages. Leur affichage est généré automatiquement à partir des informations saisies dans WordPress. Le simulateur de salaire est basé sur des calculs dynamiques dont les paramètres sont définis dans un écran d’administration dédié.
Cette architecture permet de faire évoluer le contenu sans avoir à ouvrir le constructeur visuel ou à modifier le code du site.
4.2. Pages phares du site
Les pages suivantes ne représentent qu’une partie des pages existantes, mais vous pouvez visiter le site de ClubSec pour en voir davantage. Survolez les images pour les faire défiler.
Accueil
La page d’accueil présente le positionnement de ClubSec, ses quatre domaines d’expertise, son modèle et ses valeurs. Elle propose rapidement deux orientations : découvrir les offres du cabinet ou rejoindre sa communauté de consultants.
Offre Cloud Modernization
La page Cloud Modernization illustre la structure retenue pour les quatre offres de ClubSec. Elle présente les problématiques rencontrées par les entreprises, les services proposés, les technologies maîtrisées et les profils mobilisables.
Une grille de missions associées à l’offre est intégrée automatiquement en bas de page. Contrairement à la page Références, cette grille ne nécessite pas de filtres puisque seules les missions liées au Cloud y sont affichées.
Références
La page Références rassemble les principales missions réalisées par ClubSec. Les visiteurs peuvent les filtrer selon leur domaine afin d’identifier plus facilement les interventions proches de leurs propres enjeux.
Chaque carte contient un bouton dirigeant vers la page Offre correspondante. Les références deviennent ainsi à la fois des preuves d’expertise et des points d’entrée vers les services proposés.
Simulateur de salaire
Le simulateur permet à un consultant d’estimer sa rémunération en fonction de son expérience, de son tarif journalier et du nombre de jours travaillés.
Les résultats sont mis à jour directement dans la page, sans rechargement. L’interface a été repensée pour rendre les paramètres plus compréhensibles et faciliter la comparaison entre plusieurs hypothèses.
FAQ
Les questions fréquentes sont affichées dans une grille paginée afin d’éviter une page trop longue. Le système est déjà compatible avec un filtrage par catégories, même si aucun filtre n’est actuellement appliqué compte tenu du nombre de questions disponibles.
Chaque nouvelle question publiée depuis l’administration rejoint automatiquement la grille.
Contact
La page Contact distingue immédiatement les deux types de demandes.
Un premier formulaire s’adresse aux entreprises souhaitant présenter une problématique ou une mission. Le second est destiné aux consultants souhaitant rejoindre ClubSec. Chaque parcours dispose ainsi de champs et d’un message adaptés à son objectif.
4.3. Administration des contenus
Édition d’une mission
L’écran d’édition d’une mission regroupe les informations nécessaires à son affichage : titre, description, objectif, technologies, catégories et autres données spécifiques.
ClubSec peut ainsi publier de nouvelles missions en remplissant un formulaire structuré, sans avoir à reconstruire manuellement une carte ou une section dans Divi.
Configuration du portfolio des missions
Un écran de configuration permet d’adapter l’apparence de la grille des missions directement depuis l’administration.
Le CSS de la grille, des cartes et des boutons de filtrage peut être personnalisé dans des champs dédiés. Une évolution graphique reste donc possible sans modifier les fichiers du plugin ou le code source du thème enfant.
Configuration du simulateur de salaire
L’administration du simulateur permet de modifier son texte d’introduction et les principales données utilisées pour les calculs.
Un tableau permet notamment de définir, pour chaque niveau d’expérience, un tarif journalier maximal et un salaire minimum. Les règles métier peuvent ainsi évoluer sans nécessiter une nouvelle intervention dans le code du plugin.
5. Suites du projet
La livraison comprend un mois de maintenance et d’assistance afin de corriger les éventuelles anomalies qui pourraient apparaître après la mise en production.
Charles-Edouard a également bénéficié d’une formation à distance pour administrer le site et gérer ses différents contenus (Custom Post Types)
Plusieurs évolutions pourront ensuite être étudiées dans une future version du site :
- Les Custom Post Types Événements et Formations sont déjà opérationnels, mais ne sont pas encore affichés publiquement faute de contenus définitifs. Ils pourront être activés ultérieurement sans modifier l’architecture générale du site.
- Charles-Edouard a également évoqué la possibilité de présenter certaines missions sous forme de carrousel plutôt que dans une grille. La séparation entre les contenus et leur affichage permettra de faire évoluer cette présentation sans ressaisir les informations existantes.
- Des pages de ressources pourront être ajoutées : blog et livres blancs.
- Enfin, un suivi analytique pourra être mis en place avec Matomo dans une configuration sans cookies. ClubSec pourra ainsi mesurer la fréquentation et l’utilisation des principales pages tout en maintenant une approche respectueuse de la vie privée.
Une refonte pensée pour durer, pas seulement pour séduire
J’ai pris beaucoup de plaisir à accompagner ClubSec dans cette refonte, aussi bien sur la conception visuelle que sur les aspects fonctionnels et techniques.
Le résultat ne se limite pas à une nouvelle apparence. Le site dispose désormais d’une architecture pensée pour évoluer, avec des contenus entièrement administrables et de nombreuses possibilités de personnalisation.
ClubSec peut ajouter de nouvelles missions, références, problématiques, questions, formations ou événements sans intervenir dans le design des pages ni modifier une ligne de code. Les données saisies sont automatiquement affichées aux bons endroits et selon la présentation prévue.
Par la diversité de ses pages, le nombre de contenus dynamiques, le développement du simulateur et les nombreuses interactions entre les différentes fonctionnalités, cette refonte fait partie des projets WordPress les plus complexes que j’ai eu l’occasion de réaliser.
Cette refonte illustre surtout l’intérêt d’une architecture correctement pensée dès le départ : offrir aujourd’hui un site clair et performant, tout en laissant suffisamment de souplesse pour accompagner les besoins de demain.
0 commentaires