Refonte d’un site de 13 ans : tout moderniser sans rien casser

Beaucoup d’entreprises ont un site qui faisait autrefois leur fierté et qui ressemble aujourd’hui à une carte postale de la décennie passée. Le refaire fait peur : il y a des années de contenus, des positions durement acquises dans les moteurs de recherche, les habitudes des utilisateurs — et du code que personne n’ose toucher. Nous venons justement de boucler un projet de ce type — la refonte complète de la communauté photo SuperSnimki.ru — et voici comment il s’est déroulé.

Le point de départ

Nous avons lancé SuperSnimki en 2013. Depuis, le site a accumulé plus de 200 000 photos, plus de 4 700 auteurs, des milliers d’articles et de discussions sur le forum. La plateforme tournait de manière stable, mais l’interface était restée figée dans son époque :

La décision clé : ne pas réécrire la plateforme

La voie la plus coûteuse et la plus risquée, c’est « on réécrit tout sur une nouvelle stack ». Nous l’avons écartée. Le moteur en Perl, les bases MongoDB et MySQL, la structure des URL et les données sont restés les mêmes. Nous avons changé ce que voit l’utilisateur — et ce qui empêchait le site d’être rapide.

Résultat : la refonte ne s’est pas transformée en migration. Aucun lien n’a été cassé, les positions dans les moteurs de recherche n’ont pas souffert, et les utilisateurs ont simplement retrouvé un matin leur site familier, entièrement transformé.

Un design system par-dessus le code existant

Première étape : décrire le design system sous forme de tokens — couleurs des thèmes clair et sombre, échelle typographique, espacements sur une grille de 4 px, rayons d’angle, durées d’animation. Les 183 templates du site ont tous été basculés sur ces tokens : c’est pourquoi le mode sombre a fonctionné d’emblée partout, et pas seulement sur la page d’accueil.

Une petite astuce nous a fait gagner beaucoup de temps : les 130 nouvelles icônes SVG ont repris les mêmes noms de classes que les anciennes icônes issues des polices. Inutile de réécrire les templates pour les icônes — elles ont simplement changé d’apparence.

Une version mobile digne d’une application

Aujourd’hui, la majorité du public regarde les photos sur smartphone. D’où une barre de navigation en bas de l’écran avec le bouton de publication au centre, un menu coulissant et une nouvelle visionneuse plein écran : zoom à deux doigts, balayage, double-tap. Le site peut même être ajouté à l’écran d’accueil, comme une application.

Vitesse : supprimer plus qu’ajouter

Une refonte alourdit souvent un site. Chez nous, c’est l’inverse :

Au final, le code du projet compte 27 000 lignes de moins, alors même que les fonctionnalités se sont multipliées.

De nouvelles raisons de revenir

Une bonne refonte ne se résume pas à l’apparence. Nous en avons profité pour ajouter ce qui donne envie de revenir :

Sécurité et SEO, au passage

Quand on passe en revue tous les templates, on repère aussi ce qui était resté invisible pendant des années. Nous avons corrigé des failles XSS dans la recherche, les commentaires et le forum, protégé les suppressions par des jetons CSRF, rétabli de vraies erreurs 404, réparé le flux RSS, enrichi le balisage JSON-LD et ajouté les images au plan du site.

Ce que votre projet peut en retenir

L’étude de cas détaillée, avec captures d’écran, se trouve dans notre portfolio, et le nouveau site est à découvrir en direct sur supersnimki.ru.

Si votre site a lui aussi besoin d’un coup de neuf mais que vous redoutez d’y toucher, parlez-nous de votre projet : nous vous proposerons un plan de refonte sans aucune perte.