Deux familles de cinq

Cinq pages de notre site n’avaient pas d’illustration : l’index de la documentation, l’index des tutoriels, la page des partenaires, l’index du blog et la page de contact. Tout le reste en avait une. La tâche était de dessiner cinq images qui aient l’air d’être à leur place.

À leur place par rapport à quoi, exactement, voilà la question, et ce n’est pas une question à laquelle on répond en regardant. Dix images existantes, vues une à une sur dix pages différentes au fil de plusieurs mois, produisent une impression assurée de style maison. Cette impression ne vaut rien, et nous avons le comptage pour le prouver.

Le style n’existait pas

Un court script a parcouru les dix images sur un canevas et a compté les pixels sombres : luminance inférieure ou égale à 110, alpha supérieur ou égal à 200, quantifiés sur seize niveaux pour que l’anticrénelage ne produise pas mille couleurs presque identiques.

Le résultat a été deux groupes de cinq, sans le moindre recouvrement.

Cinq contre cinq. Il n’y a pas de majorité. Si quelqu’un avait tranché à l’œil, il aurait pris le groupe qu’il avait regardé le plus récemment et produit une sixième image assortie à la moitié du site.

Les cinq nouvelles suivent le premier groupe, et la raison n’est pas le comptage. Les images de comparaison forment une sous-famille avec leur propre composant, leur propre rapport d’aspect et leur propre place dans le produit ; ce sont des pages d’un autre genre qui font un autre travail. Les nouvelles illustrations voisinent avec le premier groupe, elles se dessinent donc comme le premier groupe. La mesure n’a pas pris la décision. Elle a rendu la décision possible, en remplaçant un sentiment sur un style maison par deux faits sur deux ensembles.

Une couleur absente de la feuille de style est une couleur inventée

Le bleu marine qui domine le premier groupe n’apparaît nulle part dans notre feuille de style. C’est une couleur arrivée avec ces images et qui n’a aucun nom dans le système de conception.

La copier dans cinq nouveaux fichiers aurait été exactement ce que cette ronde devait éviter : une valeur qui n’existe que parce que quelqu’un a prélevé un pixel. Les nouvelles images utilisent donc le jeton dont la valeur en est la plus proche et qui appartient à la même famille que la couleur de marque. Ce n’est pas identique. C’est défendable, et cela bouge si le système bouge.

Le premier jet portait aussi un ruban de lecture orange sur l’image de la documentation, avec la couleur d’accentuation, parce qu’un ruban, c’est orange. Un second comptage a tranché cela aussi : sur les dix illustrations existantes, à travers 1,79 million de pixels opaques, le nombre de celles qui ont ne serait-ce qu’un pixel chaud est de zéro. Pas peu : zéro. Un élément orange aurait fait du nouveau dessin la seule chose chaude du site, ce qui est une décision que quelqu’un voudra peut-être prendre délibérément un jour et n’est pas une décision qu’un ruban doit prendre tout seul.

Le blanc est là où l’œil se pose

La dernière propriété partagée est une propriété que personne n’avait notée et que les dix respectent : chaque image a exactement un plan blanc, et c’est là que va l’œil. La façade d’un coffre, l’intérieur d’un bouclier, les tuiles autour d’un moyeu.

Quatre des cinq nouveaux dessins l’ont repris naturellement, car une feuille de papier, un article, une lettre et un bouton de lecture sont des choses blanches. L’image des partenaires, non : deux nuances de bleu, pas de blanc nulle part.

Cela allait très bien sur la page des partenaires. C’était manifestement faux sur une planche-contact, qui est une page générée unique posant les quinze images côte à côte sur la vraie couleur de fond. Un dessin dans une rangée de quinze qui n’a pas de plan de focalisation se lit immédiatement comme plus plat que les autres, et ne se lit pas du tout quand on le regarde seul. L’hexagone de gauche repose désormais sur la couleur de surface.

Si vous faites un ensemble, regardez l’ensemble. Les pages individuelles sont la mauvaise surface de relecture pour une propriété qui n’existe que par comparaison.

Une ligne tracée avant les formes est une ligne que l’on ne voit pas

La première version de l’image des partenaires comportait une ligne de liaison entre les deux hexagones : un unique trait horizontal, de 433 pixels de large, déclaré avant les deux formes.

L’ordre de peinture a fait le reste. Les hexagones en couvraient le milieu, laissant deux moignons dépasser sur les côtés, et comme l’hexagone de droite avait une opacité de remplissage légèrement inférieure à un, la partie couverte transparaissait en bande fantôme au travers. Deux défauts pour une seule erreur d’ordre, et tous deux ressemblent à un problème de rendu plutôt qu’à un problème de source.

La liaison est désormais le recouvrement lui-même, découpé à l’intersection des deux formes, et il n’y a plus aucune transparence partielle dans le fichier. C’est à la fois un meilleur dessin et un dessin qui marche : la surface commune entre deux partenaires est l’idée, et une ligne entre eux était une façon plus faible de le dire.

Deux traits d’union terminent un commentaire XML

Chacun de ces fichiers porte des commentaires expliquant la géométrie, et les commentaires d’un SVG voyagent jusqu’au navigateur. Mesuré sur la première version : sur 10 160 octets répartis dans les cinq fichiers, 5789 étaient du commentaire. Cinquante-sept pour cent de ce que nous aurions livré était une explication de ce que nous livrions.

L’explication vit désormais dans le composant qui référence les images, où elle est au moins aussi utile et n’atteint le navigateur de personne. C’est un point général sur la différence entre commentaires de source et commentaires d’actif : l’un est gratuit, l’autre est de la charge utile.

Le second point est une règle plutôt qu’une mesure, et c’est le genre de règle dont on n’a besoin qu’une fois. Un double trait d’union termine un commentaire XML. Faire référence à une propriété personnalisée CSS par son nom à l’intérieur d’un commentaire SVG termine donc le commentaire trop tôt, au milieu d’une phrase, et le reste de cette phrase devient du balisage. Le fichier échoue alors à s’analyser, et un SVG qui échoue à s’analyser ne produit pas de message d’erreur. Il produit une réponse 200 et une image vide.

Les cinq fichiers actuels ne contiennent aucun double trait d’union dans un commentaire et tous les cinq s’analysent comme du XML valide. Le mode de défaillance est réel ; l’incident précis n’est pas quelque chose dont je peux vous remettre une mesure, car cet état n’a jamais fait l’objet d’un commit.

Le texte alternatif n’est pas une décision de conception

Une illustration qui ne dit rien que le titre voisin ne dise déjà est de la décoration, et la réponse d’accessibilité pour la décoration est un attribut alt vide, pour qu’un lecteur d’écran n’aille pas lire « coffre avec clé » à côté d’un titre sur les identifiants qui restent sur votre propre hôte. Ce raisonnement est juste et nous l’avons suivi longtemps.

Ce n’est pas non plus toute l’histoire, car un robot d’indexation ne distingue pas la décoration du contenu. Un audit SEO compte un alt vide comme un alt manquant, et un rapport plein d’attributs alt manquants est un rapport que personne ne lit.

Chaque illustration porte donc désormais une courte description issue du catalogue de traduction, une description par image plutôt que par emplacement, puisque le même dessin veut dire la même chose sur deux pages différentes. La garde exige un alt non vide sur chaque illustration, ce qui veut dire qu’en cacher une de l’arbre d’accessibilité n’est pas une option que quelqu’un peut prendre en silence. Une nouvelle illustration a besoin d’une description dans les neuf langues avant de pouvoir sortir.

Zéro décalage, et la contre-épreuve

La largeur et la hauteur de chaque image sont les dimensions de sa propre boîte de vue, et elles sont là pour exactement une raison : que le navigateur réserve la place avant l’arrivée des octets. La largeur visible vient des classes et n’a rien à voir avec ces nombres.

Le décalage cumulatif de mise en page sur quarante-cinq états de page a mesuré 0,00000, un nombre qui ne veut rien dire tout seul. Toute mesure qui rapporte un zéro parfait doit répondre à la question de savoir si elle regardait.

La même exécution a donc été répétée en retirant les dimensions et en injectant un délai de 1500 millisecondes devant les images. Treize états sur quinze ont décalé. Les deux qui n’ont pas bougé se trouvent dans la cellule la plus courte d’une grille, où l’image ne peut pas changer la hauteur de la rangée quoi qu’elle fasse : leur zéro est donc structurel et non accidentel. Cela a été vérifié un par un plutôt qu’écarté d’un revers de main, car deux zéros inexpliqués dans une contre-épreuve sont exactement là où se cacherait un vrai trou.

Il y a un détail mécanique de plus qui vaut la peine d’être dit, car il est facile de se tromper dans l’autre sens : ces images contournent entièrement l’optimiseur d’images du cadriciel. Ce n’est pas de la paresse. L’optimiseur refuse le SVG à moins qu’un drapeau spécifiquement dangereux ne soit activé, le faire passer par lui produirait donc une image cassée plutôt qu’une image plus petite.

Une découverte qui ne faisait pas partie de la ronde

En mesurant des largeurs, une classe utilitaire d’une page sans rapport s’est révélée ne rien faire du tout. Elle pose une largeur maximale qui est écrasée par une classe déclarée plus loin dans la feuille de style : la valeur est donc inerte depuis qu’elle a été écrite.

Personne ne l’avait remarqué, car l’élément a l’air raisonnable à sa largeur réelle. C’est la manière ordinaire dont un style mort survit : il n’est pas faux à l’écran, il n’est simplement pas ce qui fait le travail, et le seul moyen de le trouver est de mesurer une propriété que vous mesuriez déjà pour une autre raison.

Ce que nous noterions

1. 01Un style maison que vous n’avez jamais compté n’existe peut-être pas. Dix images, deux familles, cinq chacune, et toute impression de majorité était fausse.
2. 02Une mesure rend une décision possible ; elle ne la prend pas. Aucun des deux groupes n’était plus grand ; les nouvelles images suivent les illustrations de fonctionnalités à cause du genre de page où elles se trouvent.
3. 03Une couleur prélevée sur un pixel est une couleur inventée. Utilisez le jeton le plus proche et acceptez qu’il ne soit pas identique.
4. 04Zéro est une réponse forte. Aucun pixel chaud sur 1,79 million tranche une discussion sur un ruban orange plus vite que le goût.
5. 05Relisez un ensemble comme un ensemble. Les propriétés qui n’existent que par comparaison sont invisibles sur une page isolée.
6. 06Déclarez un connecteur après les choses qu’il relie, sinon il sera couvert, et la transparence partielle fera passer l’erreur pour un défaut du moteur de rendu.
7. 07Les commentaires d’un actif sont de la charge utile. Plus de la moitié de ce que nous avons failli livrer était de l’explication.
8. 08Du XML invalide dans un SVG donne une image vide, pas une erreur. Il n’y a aucun message à chercher.
9. 09Un alt vide est juste pour un humain et manquant pour un robot. Choisissez l’arbitrage délibérément et faites-le respecter par un test.
10. 10Un zéro parfait a besoin d’une contre-épreuve. Cassez la chose exprès et vérifiez que le nombre bouge.

Pour être clair : les cinq images sont en production dans neuf langues avec leurs descriptions, les comptages viennent d’une exécution sur canevas sur les fichiers réels, et tout a été mesuré contre un serveur de développement plutôt que contre une construction de production. Il n’y a pas de thème sombre à vérifier, ce qui a été constaté et non supposé : avec le mode sombre émulé, la capture est identique octet pour octet à celle en clair.

Issu du travail de plateforme sur Provibr. Un défaut de mise en page qui produisait zéro pixel de débordement est dans une barre plus étroite que sa fenêtre, et ce que neuf langues font à un ensemble de contrôles de taille fixe est dans seize mille clés et neuf langues.