Thème WP sur mesure d'après des maquettes complexes pour une agence de communication responsable
Scores de cette page :
EcoIndex A
SEO 100%
Accessibilité 100%
Performance 99%
Bonnes Pratiques 100%
Intégration pixel perfect d'un thème WordPress from scratch depuis des maquettes imposées, blocs Gutenberg sur mesure et filtre JavaScript sur la page archive — avec la contrainte d'atteindre la meilleure note Green IT possible à partir de choix techniques et visuels fixés par le client.
Contexte
Canopée est une agence de communication et de design responsable avec qui je travaille régulièrement, en sous-traitance. Pour ce site, le client avait déjà fixé les maquettes, imposé WordPress et choisi lui-même sa liste de plugins — ma mission n'était donc pas de concevoir le site le plus léger possible dès le départ, mais d'obtenir la meilleure note environnementale possible une fois toutes ces contraintes posées. C'est une nuance importante : on parle ici d'éco-réalisation (optimiser dans un cadre déjà fixé), pas d'éco-conception (choisir ce cadre dès le départ pour qu'il soit léger).
Une intégration « pixel perfect », jusqu'au moindre détail
Le client ne voulait pas une interprétation des maquettes, mais une reproduction fidèle au pixel près — ce qu'on appelle une intégration « pixel perfect ». Concrètement, ça veut dire que les décors graphiques (ces traits orangés qui courent en diagonale derrière le texte, les titres en écriture manuscrite, les blocs de texte sur plusieurs colonnes) devaient être positionnés exactement comme sur la maquette d'origine, sans décalage visible, et rester cohérents une fois le site ouvert sur un petit écran. Ce niveau d'exigence visuelle demande un travail de vérification constant, maquette ouverte à côté du navigateur, pixel après pixel.
Des outils imposés, pas choisis
Le client avait sa propre liste de plugins WordPress à respecter : ACF Pro pour structurer le contenu, Everest Forms Pro pour les formulaires, Mailster pour la newsletter, Imagify pour compresser les images, Wordfence pour la sécurité, et WP Rocket pour la mise en cache. Les maquettes, elles, étaient ambitieuses sur le plan visuel : des décors en dégradé de cercles concentriques positionnés en arrière-plan, indépendamment du texte et des images, avec une adaptation mobile exigeante à respecter point par point.
Huit blocs sur mesure pour coller exactement aux maquettes
Plutôt que de bricoler le contenu avec les blocs standards de WordPress, j'ai construit huit blocs Gutenberg personnalisés, chacun pensé pour un composant précis des maquettes : un chapo, un bloc de chiffres mis en avant, un focus, un focus en vert, une frise chronologique, une liste mise en avant, les logos des partenaires, et un surtitre. Résultat pour l'équipe de Canopée : composer une page revient à empiler ces blocs comme des pièces toutes prêtes, sans jamais avoir à toucher au code.
La page « Nos références », le vrai morceau de résistance
C'est la page la plus complexe du site : chaque projet de l'agence s'affiche dans une vignette en forme d'hexagone, assemblées comme une alvéole de ruche. Rien d'exotique dans le principe, sauf que ces hexagones devaient se réorganiser tout seuls selon la largeur de l'écran — passer d'une grille à plusieurs colonnes sur ordinateur à une colonne unique sur mobile — sans jamais perdre leur forme ni se chevaucher. Tout repose uniquement sur du CSS, sans une ligne de JavaScript pour gérer cette mise en forme.
Un système de filtres (par métier, par secteur d'activité) permet de réduire la liste affichée sans recharger la page :
Et sur mobile, tout tient toujours debout
Sur un écran étroit, la grille d'hexagones ne se contente pas de rétrécir : elle se réorganise entièrement en une seule colonne, en conservant la forme de chaque vignette. C'est ce comportement précis — demandé par les maquettes, imposé par le client — qui a demandé le plus de temps de mise au point sur ce projet.
Optimiser dans les limites imposées
Le reste du travail d'optimisation s'est fait à l'intérieur du cadre fixé par le client : fichiers CSS et JavaScript réduits au minimum avant la mise en ligne, feuille de style dédiée à l'impression fournie en plus de l'affichage écran. Malgré des maquettes ambitieuses et une pile de plugins non choisie, les résultats restent solides :
- Page d'accueil : plus propre que 94% des sites sur Website Carbon · EcoIndex B
- Page « Nos références » : plus propre que 88% des sites sur Website Carbon · EcoIndex C
- Reste du site : plus propre que 95% des sites sur Website Carbon · EcoIndex A
La page des références reste la moins bien notée du site — logique, c'est elle qui porte la grille d'hexagones et son système de filtre, les deux éléments les plus coûteux du projet. Le reste du site, construit avec les mêmes contraintes mais sans cette complexité visuelle, retrouve une note A.