Refonte du site tabularis.dev

Contexte

Tabularis est un client SQL open source. Son site, tabularis.dev, avait été construit rapidement par des développeurs spécialistes des bases de données et du logiciel desktop, pas du front-end. Il remplissait son rôle et avait aidé le projet à toucher une communauté grandissante.

Mais le projet a continué de grandir : plus de fonctionnalités, de plugins, de documentation et de nouveaux visiteurs. Le site avait plus à dire que sa structure d’origine ne pouvait en contenir. L’objectif de la refonte n’était pas de réparer quelque chose de cassé, mais de donner au site la place de grandir avec le projet.

Approche

• Revue du site page par page : ce que chaque page cherchait à dire, et où un nouveau visiteur risquait de se perdre ou de partir
• Étude de sites d’outils pour développeurs (Stripe, Vercel, Linear) pour leur navigation simple et leur cohérence visuelle, sans copier leur style
• Prototypage dans Figma, testé directement avec le vrai contenu, page après page
• Remise en question de chaque section avant de la garder : est-ce qu’elle aide le lecteur à décider, ou est-elle là parce qu’elle était facile à ajouter ?
• Identité visuelle unifiée : deux polices aux rôles clairs (Urbanist pour l’interface et la lecture, JetBrains Mono pour le code et les données), une palette, les mêmes espacements et composants sur toutes les pages, un logo décliné en couleur, blanc et noir
• Refonte de l’architecture du code en parallèle du design

Décisions techniques

Un nouveau design sur l’ancien code n’aurait fait que déplacer le problème. Tous les styles du site tenaient dans un seul fichier globals.css d’environ 13 000 lignes : impossible de savoir si une règle était encore utilisée, et modifier une classe risquait d’impacter d’autres pages. Les 65 composants étaient aussi regroupés dans un seul dossier, sans organisation par fonctionnalité.

Les styles ont été migrés vers des CSS Modules, page par page pendant la refonte et composant par composant pour les éléments partagés : chaque composant a désormais son propre fichier de style, à côté de lui. Les composants suivent la même logique, avec d’un côté les composants partagés de mise en page et d’interface, de l’autre un dossier par partie du site (accueil, blog, wiki, téléchargement). La feuille de style globale ne contient plus que les variables partagées et les classes de mise en page de base.

Deux parties ont demandé plus de temps que les autres. La page de téléchargement, la plus simple en apparence, où chaque clic en trop ou option peu claire peut faire partir un visiteur. Et les pages de contenu (blog, solutions), écrites en Markdown : chaque type de contenu (niveaux de titres, blocs de code, vidéos, images) a dû être conçu et testé pour fonctionner dans n’importe quelle combinaison.

Résultats

• Feuille de style globale réduite de 13 000 à environ 300 lignes
• Code réduit de 25 % : de 28 533 à 21 453 lignes, pour presque deux fois plus de fichiers (de 145 à 288), chacun avec un rôle clair
• Page d’accueil recentrée sur les 4 fonctionnalités les plus importantes pour une première visite, au lieu de 14 cartes de même poids
• En-tête du tableau des plugins simplifié : six logos de bases de données et deux boutons, au lieu d’une carte de treize cibles avec quatre couleurs de statut et trois boutons
• Récit complet de la refonte publié sur le blog de Tabularis