🌐 Refonte de site sans régression : le cas Dogland, modernisé sans jamais s'arrêter

TL;DRUne refonte de site sans régression, c'est possible même sur une application vivante utilisée tous les jours par une équipe. La preuve avec Dogland, un site d'éducation canine dont l'espace client et l'administration tournent en continu pendant tout le chantier.

📋 Fiche projet#

📌 Le contexte : un site qui n'a rien d'une vitrine#

Le site de Dogland n'est pas un site vitrine qu'on peut refaire à froid, hors ligne, puis rebasculer en une nuit. Une seule application Symfony sert deux sites distincts, reconnus par leur nom de domaine, avec un thème choisi au moment où la page se charge. Cette même application héberge aussi un espace client, où les propriétaires réservent des cours d'éducation, des séjours en pension, des créneaux de toilettage et gèrent les fiches de leurs animaux. Et elle héberge une administration métier, utilisée tous les jours pour organiser le planning et suivre les réservations.

Trois usages, une seule base de code. Toucher à l'un sans regarder les deux autres, c'est prendre le risque de casser une réservation en cours ou une page qui n'a rien à voir avec le chantier. Le front-end reposait sur Bootstrap 3 (une bibliothèque CSS de mise en page vieille de plus de dix ans), jQuery, FontAwesome pour les icônes et Owl Carousel pour les carrousels, le tout empaqueté dans un bundle Webpack partagé avec le second site. Autrement dit : impossible de toucher au code front sans risquer d'affecter un site qui n'était pas concerné par la refonte.

Dernière contrainte, et non des moindres : le serveur de production ne dispose ni de npm (le gestionnaire de paquets JavaScript) ni d'aucun outil de build. Tout ce qui est livré doit fonctionner tel quel, sans étape de compilation côté serveur.

📌 La contrainte de départ : trois règles pour cadrer une refonte de site sans régression#

Avant d'écrire la moindre ligne de CSS, trois règles ont été posées pour garantir une refonte de site sans régression sur les périmètres voisins :

1. Ne rien changer au second site. Il partage l'application et le bundle front, mais il n'était pas dans le périmètre du projet. Aucune de ses pages ne devait bouger, ni visuellement ni techniquement.
2. Ne pas réécrire l'administration. Réécrire l'outil que l'équipe utilise chaque jour pour le planning et les réservations, c'est exposer l'exploitation quotidienne à des régressions pour un bénéfice purement esthétique. Le risque n'était pas justifié par le gain.
3. Ne dépendre d'aucune chaîne de build lourde en production. Sans npm ni outils de build sur le serveur, la solution livrée devait être directement exploitable, sans étape intermédiaire fragile.

📌 Ce qui a été fait#

📌 Un design system pensé pour durer#

Le chantier s'appuie sur un design system (un ensemble de règles et de composants réutilisables qui garantissent la cohérence visuelle d'un site) : des jetons de design — couleurs, typographie, espacements, ombres, rayons — et une quarantaine de composants nommés. Conteneurs, en-têtes, menu coulissant, cartes, blocs de services, citations, chiffres clés, accordéons, fil d'Ariane, alertes, badges, champs de formulaire, calendrier, modales, panneaux de l'espace client : chaque brique visuelle du site est désormais documentée et réutilisable, au lieu d'être recréée à chaque page.

📌 Une identité de marque conservée, pas réinventée#

La palette de couleurs de Dogland a été conservée à l'identique, avec les mêmes codes hexadécimaux. Elle a simplement été étendue en gammes de nuances, pour construire des contrastes accessibles sans inventer de nouvelles couleurs. L'identité visuelle du client n'a pas changé : elle a gagné en cohérence.

📌 Une typographie qui respecte les visiteurs#

Les polices sont désormais auto-hébergées au format WOFF2 (un format de police web compressé), découpées en sous-ensembles latin et latin-ext pour ne charger que les caractères nécessaires, avec préchargement des deux graisses critiques. Aucun appel à Google Fonts : un choix qui sert à la fois la conformité CNIL (l'autorité française de protection des données) et la performance, puisque les polices sont servies directement depuis le site plutôt que depuis un serveur tiers.

📌 Une navigation repensée pour tous les usages#

Le menu principal fonctionne désormais en push menu : un panneau fixe s'ouvre et décale la page entière, les sous-niveaux glissent par-dessus leur parent. Le focus clavier est piégé à l'intérieur du menu ouvert, la touche Échap le referme, le balayage tactile fonctionne sur mobile, et l'animation respecte le réglage prefers-reduced-motion (une préférence système pour limiter les animations, utile aux personnes sensibles au mouvement).

📌 La fin de jQuery sur le site public#

jQuery a été retiré du site public et remplacé par du JavaScript natif. Cela concerne le calendrier de réservation — le format de date jj/mm/aaaa reste inchangé côté serveur, les dimanches restent désactivables, la date de départ reste liée à la date d'arrivée —, le calcul du tarif de pension, les modales, et les carrousels, remplacés par du défilement natif. Résultat : moins de code à charger, moins de dépendances à maintenir.

⚖️ Une conformité RGPD renforcée#

Le mode consentement est désormais initialisé en position « refusé » avant tout chargement de script tiers. Le conteneur de mesure d'audience n'est injecté qu'après accord explicite. Les contenus tiers — vidéos YouTube et Vimeo, cartes — sont remplacés par un espace réservé tant que l'accord n'est pas donné, avec un affichage possible au cas par cas. Le choix du visiteur est conservé côté navigateur sans dépôt de cookie, et les cookies de mesure sont supprimés en cas de refus. Le bandeau n'est pas bloquant, refuser est aussi simple qu'accepter, et le choix reste révocable depuis le pied de page à tout moment.

📌 Une centaine de pages éditoriales préservées, pas réécrites#

Le site compte une centaine de pages éditoriales — conseils d'éducation, fiches de races, compléments alimentaires, permis de détention, blog, boutique, livre d'or — qui utilisaient encore le vocabulaire visuel de l'ancienne bibliothèque. Plutôt que de toutes les réécrire, une couche de compatibilité réinterprète ce vocabulaire pour qu'elles adoptent la nouvelle charte graphique sans intervention manuelle. Elles pourront être migrées progressivement, page par page, sans urgence.

📌 Une administration habillée, pas réécrite#

Conformément à la deuxième règle du projet, l'administration conserve sa mécanique historique. Elle reçoit l'identité visuelle de la refonte via une feuille de style additionnelle qui couvre la barre supérieure, la navigation latérale, les cartes, les tableaux, les boutons, les formulaires, les messages et la pagination, ainsi que les modales. Le balisage HTML, partagé avec le second site, n'a pas été modifié : tout passe par le style, ce qui écarte tout risque de régression sur l'outil de travail quotidien.

📌 Résultats mesurés#

📋 Ce que ce projet illustre#

Une refonte n'oblige pas à tout reconstruire. Sur une application métier vivante, comme celle de Dogland, le travail consiste d'abord à tracer des frontières nettes : ce qui est refait à neuf, ce qui est simplement réhabillé, ce qui n'est pas touché du tout. Cette discipline permet de livrer une refonte de site sans régression sur les périmètres voisins, sans fenêtre de maintenance et sans faire courir de risque à l'activité du client pendant le chantier. C'est une approche transposable à toute entreprise dont le site combine vitrine publique, espace client et outil de gestion interne dans une même application.

Vous portez un site sur mesure vieillissant et redoutez la refonte ? Parlons de votre projet : contactez Websource pour évaluer, sans engagement, ce qui peut être refait, réhabillé ou laissé tel quel.