La bande de clôture que nous avons construite soixante fois

Ce que nous avons trouvé sur notre propre site

Ce site compte quatre-vingt-dix-sept pages publiques en trois langues. Presque toutes celles qui vendent quelque chose se terminent de la même façon : une bande sombre avec un titre, une phrase, un bouton plein pour réserver un appel et un lien discret vers l’audit gratuit. C’est un seul bloc. Il aurait dû exister une seule fois.

Il existait soixante fois. Chaque page portait sa propre copie du balisage, et cinquante-cinq pages portaient leur propre copie des règles de mise en page des deux boutons. Elles étaient identiques, jusqu’à ce qu’une page soit écrite sans elles. Sur cette page, les deux boutons se retrouvaient collés à la phrase du dessus et l’un à l’autre. Un lecteur l’a remarqué avant nous.

Nous avons compté le reste. L’en-tête de page est construit à la main sur trente-cinq pages. Le conteneur de section avec la petite étiquette à gauche apparaît cent quatre-vingt-six fois sur quarante-cinq pages. La grille de points numérotés est sur trente-neuf. Les vrais composants partagés étaient bien moins présents : la liste de cartes du blog sur trente-trois, la bande d’abonnement sur dix-huit.

Pourquoi un visiteur le remarque

Personne qui lit le site d’un institut de politiques publiques ne pense aux composants. Il se demande si l’organisation a l’air compétente. La cohérence est l’un des plus anciens résultats de la recherche en utilisabilité ; c’est la quatrième des dix heuristiques de Nielsen, et elle dit qu’une même chose doit se présenter et se comporter de la même façon partout.

La raison n’est pas esthétique. Les gens se construisent un modèle d’une interface en quelques secondes, puis cessent de regarder de près. Quand un bouton qui était bleu et carré sur la page précédente est bleu et légèrement plus arrondi sur celle-ci, le modèle se brise et le lecteur doit regarder à nouveau. Il ne saura pas nommer ce qui a changé. Il enregistrera qu’il y a quelque chose d’étrange, et cette impression s’attache à l’organisation, pas à la page.

C’est pourquoi la page du contrat avec les boutons serrés comptait plus que deux pixels manquants. La page d’avant avait les boutons bien espacés. Le lecteur est arrivé sur celle qui vend le service et l’a trouvée faite par quelqu’un de pressé.

Pourquoi cela coûte de la vitesse

Un bloc partagé s’écrit une fois et son style s’écrit une fois. Un bloc copié expédie son style avec chaque page qui le porte. Sur ce site, supprimer les règles de boutons en double a effacé cent quatre déclarations sur cinquante-cinq pages, chacune qu’un téléphone téléchargeait et analysait pour rien.

Sur un site WordPress, la même chose se produit avec les constructeurs de pages. Une section copiée d’une page à l’autre emporte ses propres réglages et souvent son propre code généré. Cent pages construites ainsi expédient cent variations de la même chose, et le site ralentit un peu à chacune.

Pourquoi cela coûte de l’argent

Les boutons serrés se corrigeaient en une ligne. Faire la même correction à la main sur cinquante-cinq pages prend une matinée, et la cinquante-sixième est oubliée. Avec un composant, la correction se fait une fois et toutes les pages l’ont. Cette différence est l’essentiel de ce que paie un contrat de maintenance : pouvoir changer une chose à un seul endroit et faire confiance au site entier pour suivre.

Il y a aussi une leçon honnête sur la façon dont ce site a été construit. Les pages ont été écrites vite en août, et chaque nouvelle copiait sa voisine, comme le fait tout processus rapide, que les mains soient celles d’une personne ou d’une machine. Un copieur produit soixante quasi-copies à moins qu’on lui dise de produire un composant. Maintenant on le lui dit. Une vérification dans notre déploiement refuse toute page qui déclare ses propres règles pour un bloc qui a déjà un composant.

Comment savoir si votre site a ce problème

Ouvrez trois pages de différentes parties de votre site dans trois onglets. Regardez les boutons, les titres, l’espace autour de la section de clôture et la façon dont une photo est légendée. Si tout est identique, quelqu’un a construit un système. Si tout est presque identique, quelqu’un a copié, et les différences grandiront à chaque modification.

Posez à ceux qui le maintiennent une question plus simple : si nous changions demain la couleur de tous les boutons, combien d’endroits faudrait-il toucher ? Un seul est la bonne réponse. Sur WordPress, cela veut dire un thème avec ses propres blocs ou compositions, stylés à un seul endroit. Un nombre à deux chiffres veut dire que le site est un tas de pages qui, aujourd’hui, se ressemblent par hasard.

Ce que nous faisons du nôtre

La bande de clôture est désormais un composant, et les règles des boutons vivent dans une seule feuille de style, si bien que les cinquante-sept pages qui portent encore l’ancien balisage héritent déjà du bon espacement. Le reste passe en composants dans l’ordre du nombre de pages qui cessent de porter leur propre copie : l’en-tête de page, le conteneur de section, les points numérotés, la photo légendée, la bande de preuves.

Il existe aussi maintenant un catalogue, une page privée où chaque composant s’affiche avec un contenu d’exemple, en clair et en sombre, dans les trois langues, avec ses règles à côté. Avant que quiconque ajoute une section à une page, c’est la page à ouvrir. Nous raconterons la migration quand elle sera terminée, avec les chiffres.