Ça y est, c’est fait ! Le site de la Team-Azerty tourne désormais sous Fluent 2. Tout a commencé un 9 mai 2025, et après des semaines de code, de tests, de recodage, de retests et de « tiens, pourquoi ça casse là ? », la nouvelle version est enfin en ligne. Et cette fois, ce n’est pas juste un coup de pinceau sur l’interface : tout a été repensé de A à Z.

Avant de plonger dans les détails, une petite question : Fluent 2, ça sort d’où ?

Le Fluent Design System 2 (ou Fluent 2) de Microsoft repose sur plusieurs principes fondamentaux visant à créer des expériences utilisateur cohérentes et modernes :

• Simplicité et clarté
  Le design privilégie la lisibilité et la facilité d’utilisation avec des interfaces épurées, une hiérarchie visuelle claire et des éléments essentiels mis en avant.
• Authenticité et humanité
  Fluent 2 met l’accent sur des interactions qui semblent naturelles et humaines, avec des animations fluides reflétant les mouvements du monde réel et des micro-interactions engageantes.
• Inclusivité et accessibilité
  Le système intègre nativement des considérations d’accessibilité avec des contrastes appropriés, une navigation au clavier optimisée et une compatibilité avec les technologies d’assistance.
• Adaptabilité multiplateforme
  Les composants sont conçus pour fonctionner de manière cohérente sur différents appareils (desktop, mobile, web) tout en s’adaptant aux spécificités de chaque plateforme.
• Matériaux et profondeur
  Utilisation subtile d’effets de profondeur, d’ombres douces et de surfaces translucides pour créer une hiérarchie visuelle intuitive sans surcharger l’interface.
• Système de couleurs cohérent
  Une palette de couleurs pensée pour la lisibilité et l’harmonie, avec des variations pour les thèmes sombres et clairs, et une attention particulière aux contrastes.
• Typographie expressive
  Une hiérarchie typographique claire avec des polices optimisées pour la lecture à l’écran et une échelle de tailles cohérente.

Ces principes visent à créer des expériences à la fois fonctionnelles et esthétiques, en phase avec les attentes modernes des utilisateurs.

Bref, vous l’aurez compris, la drogue dans le webdesign est définitivement trop présente, mais comme nous sommes des moutons, nous suivons le vent.

Fluent 2 by Team-Azerty, ça donne quoi ?

C’est une refonte complète du site. L’objectif ? Un design plus moderne, plus cohérent et surtout plus flexible, tout en restant compatible avec les anciennes skins. Oui, vous avez bien lu : même si vous êtes du genre nostalgique de l’époque « table HTML » (ou de la mise à plat de 2016), votre skin préférée continue de fonctionner, et ce au prix de nombreuses contorsions au niveau du code. J’en parle plus loin.

Les nouveautés :

• Une cohérence graphique : finis les décalages de style entre les rubriques (développées au fil des ans avec leur propre charte), tout est maintenant harmonisé.
• Un dark mode natif : grâce aux tokens, ça a été beaucoup plus simple, et contrairement au bidouillage de 2019, ça a été directement géré et non appliqué en mode verrue.
• Des effets visuels en CSS : animations discrètes, transitions fluides, et quelques surprises pour égayer la navigation.
• L’abandon de jQuery UI : place au CSS pur et au JavaScript moderne pour plus de légèreté et de performances.

Le secret ?

Un gros travail de fond côté PHP, avec un DOM réécrit et enrichi à la volée, sans toucher aux pages historiques. Résultat : un site rajeuni sans casser les vieux meubles. Ce parti pris n’est pas sans poser des problèmes de maintenabilité du code, mais certaines parties du site datent de 2002, donc, hormis moi, peu de chances que quelqu’un comprenne ma logique... particulière ! Comprenez également par là que j’ai un système de templates qui héritent les uns des autres, chacun modifiant le DOM, et bien entendu, le code historique qui a lancé ce système de templates date de 2006. Ça vous laisse imaginer l’usine à gaz derrière tout ça.

Les chiffres qui piquent un peu

• 10 363 lignes de CSS (autant dire que j’ai passé quelques tokens sur Claude AI)
• 4 693 lignes de PHP (et pas une de trop !)
• Des centaines d’heures passées à peaufiner chaque composant sur CodePen
• Et un copilote d’exception : Claude AI, sans qui ce chantier aurait pris deux vies de développeur humain (ou presque 10 ans, comme entre la dernière grosse refonte et celle-ci).

Pourquoi tout ça ?

Parce qu’après presque une décennie de bricolage et de patchs successifs (dont un mode sombre perfectible), il était temps de remettre un peu d’ordre. Cette fois, chaque rubrique, chaque page a été revue : structure, ergonomie, tout y est passé. L’idée, c’est d’avoir un site plus clair, plus fluide (sans mauvais jeu de mots) et plus moderne.

Et maintenant ?

Allez donc y faire un tour et donnez-nous votre avis !
Un bug ? Une idée ? Les commentaires sont ouverts, comme toujours, alors n’hésitez pas à laisser vos impressions, vos remarques, vos suggestions sur le topic du forum et en répondant au sondage.

Et si tout marche du premier coup… tant mieux ! (Mais ne pariez pas trop fort là-dessus.)

PS : Avec plus de 10 000 lignes de CSS, il y a forcément un pixel qui se promène de travers quelque part. Merci d’avance pour votre indulgence… et vos signalements 😉

PPS : Si je me motive, je tente la template phpBB. Mais visiblement la version 4 de phpBB est dans les tuyaux, la 4.0.0-alpha 1 a été publié il y a 1 mois, il est sage d'attendre sa sortie avant de se lancer dans un thème qu'il faudra modifier.