Portfolio

École Les Marronniers, un site pensé pour durer après moi

Reprendre le site d’une école, c’est un exercice à part : peu de budget, beaucoup de bénévolat, et l’obligation que ça tienne encore debout dans cinq ans.

J’ai toujours eu un petit faible pour les sites d’école.

Ce sont des projets avec des enjeux très particuliers. Il ne faut pas trop en faire côté design, il faut penser à un public large et pas franchement technophile, il faut rester cohérent avec l’identité de l’établissement, et il faut surtout accepter une contrainte de taille : le site est géré bénévolement, et il devra ensuite être maintenu par des personnes pour qui ce n’est absolument pas le métier. Choisir une techno, réfléchir aux modules, doser l’ambition graphique : c’est un vrai petit défi, avec l’envie permanente de s’amuser à mettre plein de choses, contre la nécessité de rester sobre et durable.

C’est exactement le contexte dans lequel j’ai repris le site de l’École Les Marronniers, une école fondamentale à Wauthier-Braine.

Un vieux Joomla fatigué

À la base, la mission était pourtant beaucoup plus modeste : j’avais simplement été missionné pour rafistoler l’ancien site, pas pour le refaire entièrement. Le site était géré par un autre papa de l’école, sous Joomla. Un bon vieux Joomla à l’abandon, avec son lot de fichiers un peu crasseux.

Mais le destin en a décidé autrement.

À préciser tout de suite : ce n’est pas la faute de mon prédécesseur. C’est plutôt lié à un problème de gestion plus général, dont je garderai le détail pour moi. Ce genre de situation arrive fréquemment sur ce type de projet bénévole, quand personne n’a vraiment le temps ni la mission officielle de suivre la maintenance sur la durée. Le simple rafistolage prévu au départ s’est transformé en refonte complète.

Reprendre un site dans cet état donne au moins un avantage : celui de repartir sur des bases saines plutôt que de continuer à rafistoler l’existant.

Pourquoi WordPress, en 2026

Le choix s’est porté sur WordPress. Je sais, je sais : « un WordPress en 2026, brrr » diront certains.

L’argument n’est pas complètement absurde. WordPress fait régulièrement l’actualité pour ses failles de sécurité, et le core du CMS vient justement d’en connaître une bien sentie : la vulnérabilité surnommée wp2shell (CVE-2026-63030), une faille critique d’exécution de code à distance combinant un problème dans l’API REST et une injection SQL, révélée le 17 juillet 2026 et corrigée en urgence dans les versions 6.9.5 et 7.0.2.

Mais il faut remettre ce genre d’épisode à sa juste place. Selon le rapport Patchstack sur l’état de la sécurité WordPress en 2025, l’écosystème a recensé 11 334 nouvelles vulnérabilités sur l’année. Sur ce total, 91 % concernaient des extensions tierces et 9 % des thèmes. Le core de WordPress, lui, n’en comptait que 6, classées en priorité basse. Autrement dit : le cœur du logiciel reste, statistiquement, l’endroit le plus solide de tout l’écosystème. Une faille critique comme wp2shell existe bel et bien, mais elle reste un événement rare à l’échelle du core, pas la norme.

Le vrai risque de sécurité sur WordPress se situe donc presque toujours ailleurs : dans l’accumulation d’extensions installées sans discernement, mal maintenues ou jamais mises à jour. Un WordPress à jour, avec des extensions et un thème choisis avec soin et parcimonie, plutôt qu’empilés sans réflexion, reste un choix parfaitement défendable. C’est justement cette rigueur, plutôt que l’outil en lui-même, qui fait la différence entre un site solide et un site qui devient un problème.

L’autre argument, décisif pour ce type de projet, concerne l’équipe pédagogique elle-même. Les thèmes en blocs de WordPress permettent de construire des compositions de page assez librement, sans toucher au code, avec suffisamment de garde-fous pour ne pas tout casser. L’équipe de l’école peut ainsi éditer ses contenus, composer certaines pages et garder une vraie autonomie, sans dépendre d’un développeur à chaque virgule à changer.

Sobriété numérique assumée

Qui dit projet bénévole dit aussi liberté de faire les choses proprement, sans les contraintes habituelles d’un client pressé.

Le site n’utilise pas Google Analytics. Les cartes utilisent OpenStreetMap plutôt que Google Maps. Les polices sont chargées localement plutôt que depuis les serveurs de Google, ce qui n’a rien d’anecdotique : un tribunal allemand a condamné en janvier 2022 le responsable d’un site à une amende, précisément parce que Google Fonts transmettait l’adresse IP des visiteurs vers les États-Unis sans base légale suffisante, un hébergement local des polices permettant justement d’éviter ce transfert.

Les statistiques de fréquentation, elles, passent par Umami, une solution open source qu’on héberge soi-même. L’idée n’est pas de se priver de données : une donnée anonyme reste précieuse. Elle montre les pages consultées, les parcours empruntés, elle aide à vérifier qu’on prend les bonnes décisions. Ce n’est ni du traçage ni de l’espionnage. C’est de l’optimisation, mais dosée, sans profilage individuel ni revente à qui que ce soit.

Le choix des couleurs

Question graphisme, la palette n’a pas demandé de grande théorie.

L’école avait déjà son identité, son nom, son logo. Le point de départ le plus honnête consistait donc à partir de cette base existante plutôt qu’à imposer une nouvelle direction artistique à un établissement qui n’en avait pas besoin. La palette reprend logiquement les tons déjà présents dans le logo : un vert profond, du côté du feuillage et des marronniers qui donnent leur nom à l’école, associé à des teintes plus chaudes et plus neutres pour ne pas surcharger l’ensemble.

Autant l’admettre : ce vert-là m’arrange particulièrement bien. Le vert reste ma couleur préférée, alors le voir déjà légitimement présent dans l’identité de l’école plutôt que de devoir l’imposer artificiellement, c’était plutôt une bonne nouvelle.

Le reste de la palette joue la carte de la sobriété : un fond clair pour ne pas fatiguer l’œil, des accents colorés utilisés avec parcimonie plutôt que dispersés partout, et un contraste pensé pour rester confortable à lire pour des parents pressés autant que pour des enfants qui découvrent encore la lecture.

La typographie

Deux familles de police structurent l’ensemble du site : une plus expressive pour les titres, une plus neutre pour le confort de lecture des textes courants.

  • Police de titre : [à compléter — nom de la police + police de substitution]
  • Police de texte courant : [à compléter — nom de la police + police de substitution]

L’idée derrière ce duo reste assez classique en identité visuelle : une typographie de titre qui porte un peu de caractère et de chaleur, cohérente avec l’univers plus enfantin de l’école, posée sur une typographie de texte courant plus discrète, pensée avant tout pour rester lisible sur un écran de téléphone glissé entre deux portes le matin.

Un dock, une mascotte, et un brin de liberté bénévole

Le bénévolat a aussi ses petits luxes : personne n’avait demandé de mascotte, et pourtant une mascotte a fini par exister. Un marron stylisé, repris de l’identité de l’école, dessiné avec les couleurs de la palette du logo, vert compris.

Le site intègre également un petit dock, façon barre d’icônes, permettant aux parents de naviguer directement vers les rubriques essentielles : le menu du mois, l’agenda, l’accueil, le contact. L’idée est de transformer le site en une sorte de mini-application du quotidien, plutôt qu’un simple site vitrine qu’on visite une fois puis qu’on oublie.

Un prototype va plus loin : un petit outil permettant de composer soi-même son marron, un peu à la manière d’un Monsieur Patate, en claymorphisme ludique. Rien n’est encore livré au moment où j’écris ces lignes, mais le projet avance. Rien que d’imaginer ma fille en train de confectionner son propre marron, ou des élèves s’amuser avec pendant une pause, ça donne clairement envie de le finir. Et si personne ne s’en sert au final, tant pis : l’idée valait la peine d’être tentée.

Une architecture repensée, pensée pour continuer sans moi

Au-delà du visuel, l’architecture du site a été entièrement revue, et des tutoriels vidéo ont été réalisés pour l’équipe qui devra continuer à l’alimenter.

C’est un point essentiel sur ce genre de projet bénévole : il ne s’agit pas de construire quelque chose d’impressionnant pour soi, mais quelque chose qui pourra vivre sans qu’on soit constamment derrière. Je vais encore suivre ce projet quelques années, sauf imprévu, et cet article est probablement amené à évoluer avec lui.

Repères & crédits

  • Projet : site web de l’École Les Marronniers, Wauthier-Braine
  • Réalisation : Fofent, bénévolement
  • Plateforme : WordPress, thème en blocs, extensions choisies avec parcimonie
  • Statistiques : Umami, auto-hébergé
  • Cartographie : OpenStreetMap
  • Site officiel : ecole-les-marronniers.be

Sources


Transparence : cet article a été corédigé avec l’aide d’Euria, l’intelligence artificielle d’Infomaniak.