La présence d'un industriel, reconstruite de zéro

L'ancien site était un thème WordPress surmonté d'un constructeur de pages. Les titres restaient dans la police par défaut, l'intitulé de l'onglet écorchait le nom de l'entreprise, et sous une rubrique intitulée Our Customer Stories il n'y avait rien du tout. Aucun projet, pas une ligne. La navigation portait une entrée Projects et, si vous cliquiez dessus, vous atterrissiez dans le formulaire de contact.

Le tout était illustré de photographies achetées qui auraient convenu à n'importe quelle entreprise : des gens devant des portables, des réunions autour de tables claires. Pour un cabinet qui dimensionne des fours rotatifs, rédige l'appel d'offres et reste sur le chantier jusqu'à ce que la ligne tourne, ce n'est pas seulement passe-partout, cela contredit l'objet même.

Et les chiffres censés porter l'ensemble étaient ronds : 12+ ans, 50+ clients, 200+ projets, 14 pays. Sur une page de références, les chiffres ronds sont la forme de preuve la plus faible qui soit, parce que rien n'y est vérifiable et qu'ils ne coûtent donc rien à écrire.

Réalisé pour Colleagues Consultants Private Limited.

Le client tient sa propre liste de références depuis l'année de sa création : chaque mission, avec le client, le lieu, la discipline et l'exercice. Elle existait sous forme de fichier de présentation et n'avait jamais été publiée. La question n'était donc plus de faire sonner le site comme crédible, mais seulement de faire entrer ce fichier dans un site web sans le ressaisir.

Un script lit le fichier directement, avec son propre petit lecteur d'archives écrit sur la bibliothèque standard et sans paquet tiers, et en écrit la collection à partir de laquelle le site se construit. La liste des clients et celle des pays sont ensuite calculées depuis cette collection plutôt qu'entretenues à côté. Une nouvelle version de la liste de références devient ainsi une commande et non un chantier rédactionnel.

Ce qui figure ensuite sur le site est compté : 343 missions, 55 clients nommés, 16 pays, 18 exercices consécutifs. Les chiffres ronds de l'ancien site ont été retirés sans être remplacés.

Il y avait à cela une raison qui dépasse le goût de l'ordre. Le rapprochement a montré qu'une partie de l'ancienne liste de pays n'était pas justifiable. Les entrées fautives avaient survécu à cinq relectures, parce qu'une liste d'apparence plausible ne livre rien à qui la relit. C'est précisément pourquoi clients et pays sont aujourd'hui dérivés et non plus écrits : un chiffre calculé depuis le registre ne peut pas s'en écarter.

Les photos de banque n'ont pas été remplacées par de meilleures photos de banque, mais par dix schémas dessinés à la main : la ligne cimentière de la carrière à l'expédition, le flux de vrac, la filière acier, le cycle de vie d'un projet et quatre vues isométriques par secteur. C'est le langage visuel d'un plan technique et non celui d'une photothèque, et chacun d'eux dit quelque chose de l'objet.

Les règles qui les gouvernent sont volontairement étroites, pour que l'ensemble se lise comme une seule main : exactement deux épaisseurs de trait, des étiquettes dans la couche à chasse fixe avec leurs lignes de rappel, et du rouge uniquement là où il porte un sens, c'est-à-dire sur les flèches de flux, les zones chaudes et les nœuds actifs. La couleur n'est pas peinte dans le dessin mais provient de variables, ce qui permet au même fichier d'être juste en schéma clair comme en schéma sombre sans exister deux fois.

Les étiquettes d'un dessin sont l'endroit où un tel ensemble se défait : l'une glisse hors d'un bord, deux se recouvrent, et personne ne le voit, parce que personne ne regarde les dix fichiers côte à côte. Un contrôle mesure donc, à chaque compilation, chaque étiquette face à ses voisines et face au cadre. Cela fait aujourd'hui 106 étiquettes, toutes dégagées.

La carte du monde n'est pas dessinée du tout. Elle est calculée à partir de données de frontières ouvertes : anneaux décompressés, recousus par-dessus l'antiméridien, simplifiés et projetés à plat. Le même script écrit, à partir des mêmes constantes, la conversion qui sert à placer les repères. Carte et repères ne peuvent pas diverger, puisqu'ils viennent d'une seule source.

La page d'accueil ne porte pas une image d'accroche mais le registre lui-même : une sphère où chaque pays est un point, pondéré par le nombre de missions qui y ont été menées. Vous la tournez, vous en détachez un pays et vous lisez le chiffre à côté. La preuve n'est pas une phrase sur la preuve, c'est la commande.

Dessous se trouve un moteur de dessin, pas un cadriciel. Le trait de côte est précalculé, encodé en différences et pèse environ 56 Ko compressé ; il n'est chargé qu'après le premier affichage, ce qui permet à la page d'accueil compilée de rester autour de 42 Ko compressés et fait du titre, non du canevas, le plus grand élément au chargement. En dessous, comme image de départ, se trouve un dessin statique de la même sphère : rien ne clignote et rien ne saute avant l'arrivée des données.

La boucle s'arrête dès qu'elle n'a plus rien à faire. Si l'on ne tourne rien, si rien n'est sélectionné, si la sphère est sortie du champ ou si l'onglet est en arrière-plan, elle ne continue pas : elle s'interrompt et repart au prochain événement. Une page d'accueil qui dessine soixante images par seconde pendant des heures dans une fenêtre que personne ne regarde est un défaut que l'on ne remarque qu'au ventilateur.

Le même moteur sert deux consommateurs, la page d'accueil et un fichier de démonstration autonome, et un contrôle exige qu'il reste un fichier avec un seul export. Sans quoi la deuxième sphère serait vite apparue, contredisant discrètement la première.

Le clair est la valeur par défaut, le sombre est une décision. Le site ne suit délibérément pas le réglage du système tant que le visiteur n'a rien choisi : un cabinet d'ingénierie se lit d'abord sur blanc papier, et qui le veut autrement le dit une fois.

Deux attributs distincts portent cela. L'un retient le choix, l'autre le schéma qui en découle, et chaque composant n'interroge que le schéma. Cela semble faire un attribut de trop, et c'est la raison pour laquelle un troisième jeu de couleurs serait ici un ajout à un seul endroit plutôt qu'une modification dans dix-huit composants. Les deux sont posés par le même script avant le premier affichage. Écrivez-les séparément et vous obtenez une page qui peint, l'espace d'une image, du texte sombre sur fond sombre.

Une surface se comporte autrement que toutes les autres, la surface inversée : son fond bascule avec le schéma, donc la lisibilité de l'accent posé dessus bascule aussi. Elle porte pour cette raison sa propre valeur d'accent, prise par schéma à l'extrémité adéquate de la rampe de rouges. Sans elle, le rouge de la marque y tiendrait à un peu plus de 2:1 et deviendrait invisible sur un portable dans le train.

Mesuré plutôt qu'estimé : le tableau de contrastes du schéma clair est calculé, les 28 paires vérifiées satisfont au niveau AA, et la plus faible se situe à 4,90:1.

Le site a un temps fonctionné avec deux largeurs, une étroite pour l'en-tête et les accroches, une large pour les bandeaux photographiques. Cela pose deux arêtes verticales sur la même page et, une fois que vous l'avez vu, vous le voyez partout. Il y a désormais exactement une largeur de page, en-tête compris.

La gouttière est liée à cette largeur plutôt que choisie : son plafond est le taux avec lequel elle grandit, multiplié par la largeur maximale. Fixez librement l'un des deux nombres et vous vous fabriquez un défaut qui ne ressemble à rien. La gouttière se trouve en effet à l'intérieur de la largeur maximale. Si elle continue de croître alors que la largeur est déjà plafonnée, le contenu devient plus étroit à mesure que la fenêtre s'élargit. C'est exactement ce qui est arrivé une fois ici, avec un maximum juste avant le plafond et une chute au-delà.

Une capture d'écran ne montre jamais cela, parce que chaque image prise isolément reste plausible. Un contrôle le montre immédiatement : il mesure la largeur du contenu par page et par taille de fenêtre, l'imprime en ligne, et un creux quelque part dans la ligne est la preuve. La même exécution parcourt chaque élément sur trois largeurs de téléphone et nomme tout ce qui dépasse le bord du document.

Deux trouvailles en sont assez générales pour être emportées. Un élément de grille centré est dimensionné sur son contenu maximal, si bien qu'une longue légende fait éclater la grille tant qu'on ne la borne pas explicitement. Et le débordement ne s'applique pas à une boîte de tableau, raison pour laquelle la classe utilitaire qui masque un contenu pour les lecteurs d'écran ne rogne pas un tableau nu mais le laisse en place.

À côté du site se tient une brochure de 37 feuillets A4, et ce n'est pas une copie. C'est un unique fichier HTML, polices et images incorporées, qui se lit dans le navigateur et s'imprime depuis lui. Ce qui y figure provient des fichiers de contenu du site. Modifiez une ligne de prestation et les deux éditions changent.

La pagination est calculée, non composée. L'étape de construction chiffre chaque ligne en unités d'impression et remplit les feuillets jusqu'à ce qu'ils soient pleins. Les constantes que cela demande ne sont pas estimées mais mesurées : un contrôle rend le document fini et relit les boîtes. La première tentative les avait devinées, et douze feuillets consécutifs ont débordé.

D'où une barrière finale qui doit passer. Un feuillet A4 en débordement paraît anodin à l'écran et perd son bord inférieur à l'impression, sans qu'aucun message n'apparaisse nulle part. Un défaut qui ne se voit que sur le papier se voit trop tard. À côté se trouve un export vers un document modifiable, vérifié contre la composition de l'original, avec un écart résiduel de deux centièmes de pixel.

Rien de tout cela n'impose la synchronisation de soi-même. Les contenus sont repris dans la brochure délibérément et non chargés à l'exécution, afin qu'une modification du site ne vienne pas altérer rétroactivement un document déjà imprimé.

Les fiches de projet sont la partie du site appelée à grandir, et la seule qui réclame une interface. Elle existe, elle occupe une adresse propre et ne tourne que sur le poste de celui qui édite : une liste des enregistrements existants, un formulaire pour chaque champ, et à côté un aperçu de la carte et de la page finie.

Ce qu'elle modifie, ce sont les fichiers mêmes à partir desquels le site se construit, sans base de données et sans compte. Chaque champ est validé à l'enregistrement contre le schéma que la compilation utilise elle aussi. Un enregistrement qui passe ici ne casse pas la compilation : c'est tout l'objet de l'exercice, et le parcours est éprouvé sur plus de trente contrôles.

Lorsqu'une fiche n'a pas de document signé derrière elle, elle est signalée comme représentative, visiblement sur l'index et sur chaque entrée. Ce qui est documenté figure au registre ; ce qui se tient à côté ne se présente pas comme une pièce contractuelle. Cette séparation est la condition sous laquelle cette moitié du site vaut quelque chose.

La livraison est statique depuis un conteneur : des fichiers compilés derrière un serveur léger, une poussée sur la branche principale reconstruit. Un pied de page nous nomme comme auteur, dans le plus discret des corps de la page.