De presentatie van een industriebedrijf, volledig herbouwd

De oude site was een WordPress-thema met een paginabouwer erbovenop. De koppen stonden in het standaardlettertype, de titel in de browsertab schreef de bedrijfsnaam verkeerd, en onder een rubriek Our Customer Stories stond helemaal niets. Geen project, geen regel. De navigatie had een item Projects, en wie erop klikte belandde in het contactformulier.

Het geheel was geïllustreerd met gekochte fotografie die bij elk willekeurig bedrijf had gepast: mensen achter laptops, vergaderingen aan lichte tafels. Voor een bureau dat draaiovens dimensioneert, de aanbesteding schrijft en op de bouwplaats blijft tot de lijn draait, is dat niet alleen willekeurig, het spreekt het onderwerp tegen.

En de cijfers die het geheel moesten dragen waren rond: 12+ jaar, 50+ klanten, 200+ projecten, 14 landen. Op een referentiepagina zijn ronde cijfers de zwakste vorm van bewijs, omdat er niets aan te controleren valt en ze daarom niets kosten.

Gemaakt voor Colleagues Consultants Private Limited.

De klant houdt sinds het oprichtingsjaar een eigen referentielijst bij: elke opdracht, met klant, plaats, discipline en boekjaar. Die bestond als presentatiebestand en was nooit gepubliceerd. Daarmee was de vraag niet langer hoe je de site geloofwaardig laat klinken, maar alleen nog hoe je dat bestand in een website krijgt zonder het over te typen.

Een script leest het bestand rechtstreeks, met een eigen kleine archieflezer geschreven op de standaardbibliotheek en zonder pakket van derden, en schrijft daaruit de verzameling waaruit de site bouwt. De klantenlijst en de landenlijst worden vervolgens uit die verzameling geteld in plaats van ernaast onderhouden. Een nieuwe versie van de referentielijst is daarmee één opdracht en geen redactieproject.

Wat er daarna op de site staat is geteld: 343 opdrachten, 55 met naam genoemde opdrachtgevers, 16 landen, 18 ononderbroken boekjaren. De ronde cijfers van de oude site zijn zonder vervanging geschrapt.

Daar was een reden voor die verder gaat dan ordelijkheid. Bij het naast elkaar leggen bleek dat een deel van de oude landenlijst niet te onderbouwen was. De foute vermeldingen hadden vijf correctieronden overleefd, omdat een lijst die aannemelijk oogt niets prijsgeeft aan wie hem naleest. Precies daarom worden klanten en landen tegenwoordig afgeleid en niet meer geschreven: een cijfer dat uit het register wordt berekend kan er niet van afwijken.

De stockfotografie is niet vervangen door betere stockfotografie, maar door tien met de hand getekende schema's: de cementlijn van groeve tot verlading, de bulkstroom, de staalroute, de projectlevenscyclus en vier isometrische sectorplaten. Het is de beeldtaal van een technische tekening en niet die van een beeldbank, en elk ervan zegt iets over het onderwerp.

De regels erachter zijn smal gehouden zodat de reeks als één hand leest: precies twee lijndiktes, labels in de monospace-laag met verwijslijnen, en rood uitsluitend waar het iets betekent, dus bij stroompijlen, hete zones en actieve knopen. Kleur wordt niet in de tekening geschilderd maar komt uit variabelen, waardoor hetzelfde bestand in het lichte en in het donkere schema klopt zonder twee keer te bestaan.

Labels in een tekening zijn de plek waar zo'n reeks uit elkaar valt: er glijdt er een over een rand, er overlappen er twee, en niemand merkt het, omdat niemand alle tien bestanden naast elkaar bekijkt. Daarom meet een controle bij elke build elk label tegen zijn buren en tegen het kader. Dat zijn er op dit moment 106, allemaal vrij.

De wereldkaart is helemaal niet getekend. Ze wordt berekend uit open grensgegevens: ringen uitgepakt, over de antimeridiaan heen aaneengezet, vereenvoudigd en vlak geprojecteerd. Hetzelfde script schrijft uit dezelfde constanten de omrekening waarmee de markers worden gezet. Kaart en markers kunnen niet uit elkaar lopen, omdat beide uit één bron komen.

De homepage draagt geen openingsbeeld maar het register zelf: een bol waarop elk land een punt is, gewogen naar het aantal daar uitgevoerde opdrachten. Je draait hem, licht er een land uit en leest het getal ernaast. Het bewijs is geen zin over het bewijs, het is het bedieningselement.

Eronder zit een tekenmachine, geen framework. De kustlijn is voorberekend, differentieel gecodeerd en weegt ongeveer 56 KB ingepakt; ze wordt pas na het eerste beeld geladen, waardoor de gebouwde homepage zelf rond 42 KB ingepakt blijft en het grootste element bij het laden de kop is en niet het canvas. Eronder ligt als beginbeeld een statische tekening van dezelfde bol, zodat er niets knippert en niets springt voordat de gegevens er zijn.

De lus stopt zodra ze niets meer te doen heeft. Wordt er niet gedraaid, is er niets geselecteerd, is de bol uit beeld gescrold of staat het tabblad op de achtergrond, dan loopt ze niet door: ze houdt op en start bij de volgende gebeurtenis opnieuw. Een homepage die urenlang zestig beelden per seconde in een onbekeken venster tekent, is een fout die je alleen aan de ventilator merkt.

Dezelfde machine bedient twee afnemers, de homepage en een zelfstandig demobestand, en een controle staat erop dat het één bestand met één export blijft. Anders was de tweede bol er snel geweest, die de eerste stilletjes tegenspreekt.

Licht is de standaard, donker is een beslissing. De site volgt bewust niet de systeeminstelling zolang de bezoeker niets heeft gekozen: een ingenieursbureau wordt eerst op papierwit gelezen, en wie het anders wil zegt dat één keer.

Twee gescheiden attributen dragen dat. Het ene houdt de keuze vast, het andere het daaruit afgeleide schema, en elk component vraagt alleen naar het schema. Het klinkt als één attribuut te veel, en het is de reden dat een derde kleurenschema hier een toevoeging op één plek zou zijn en geen wijziging in achttien componenten. Beide worden door hetzelfde script vóór het eerste beeld gezet. Schrijf ze los van elkaar en je krijgt een pagina die één frame lang donkere letters op een donkere ondergrond zet.

Eén vlak gedraagt zich anders dan alle andere, het geïnverteerde: de ondergrond ervan kantelt mee met het schema, dus kantelt ook de leesbaarheid van het accent erop. Het draagt daarom een eigen accentwaarde, per schema genomen uit het passende uiteinde van de roodschaal. Zonder dat zou het bedrijfsrood daar op iets boven 2:1 staan en op een laptop in de trein onzichtbaar zijn.

Gemeten in plaats van geschat: de contrasttabel van het lichte schema is uitgerekend, alle 28 gecontroleerde paren halen AA, en de zwakste staat op 4,90:1.

De site draaide een tijd op twee breedtes, een smalle voor de kop en de openingen en een brede voor fotobanden. Dat zet twee verticale randen op dezelfde pagina, en als je het één keer hebt gezien zie je het overal. Er is nu precies één paginabreedte, kop inbegrepen.

De marge is aan die breedte gekoppeld en niet gekozen: haar plafond is het tempo waarmee ze meegroeit, maal de maximale breedte. Zet één van de twee getallen vrij en je bouwt jezelf een fout die nergens op lijkt. De marge zit namelijk binnen de maximale breedte. Groeit ze door nadat de breedte al is afgetopt, dan wordt de inhoud smaller naarmate het venster breder wordt. Precies dat is hier één keer gebeurd, met een piek net voor de aftopping en een daling erachter.

Een schermafdruk laat dat nooit zien, omdat elk beeld op zichzelf aannemelijk is. Een controle laat het meteen zien: ze meet de inhoudsbreedte per pagina en per venstergrootte, drukt die als rij af, en een deuk ergens in die rij is het bewijs. Dezelfde run loopt op drie telefoonbreedtes elk element langs en noemt alles wat voorbij de documentrand steekt.

Twee vondsten zijn algemeen genoeg om mee te nemen. Een gecentreerd rasteritem wordt op zijn maximale inhoud gedimensioneerd, waardoor een lang bijschrift het raster opblaast zolang je het niet uitdrukkelijk begrenst. En overloop geldt niet voor een tabelbox, en daarom snijdt de hulpklasse die inhoud voor schermlezers verbergt een kale tabel niet weg maar laat hem staan.

Naast de website staat een brochure van 37 A4-pagina's, en het is geen kopie. Het is één HTML-bestand met ingebedde letters en beelden, dat in de browser wordt gelezen en eruit wordt afgedrukt. Wat erop staat komt uit de inhoudsbestanden van de site. Verander één regel dienstverleningstekst en beide edities veranderen.

De pagina-indeling is berekend, niet gezet. De bouwstap waardeert elke regel in drukeenheden en vult pagina's tot ze vol zijn. De constanten die dat vraagt zijn niet geschat maar gemeten: een controle rendert het afgewerkte document en leest de kaders terug. De eerste poging raadde ze, en twaalf pagina's op rij liepen over.

Daarom staat er aan het eind een poort die moet slagen. Een overlopende A4 ziet er op het scherm onopvallend uit en verliest bij het afdrukken zijn onderrand, zonder dat er ergens een melding verschijnt. Een fout die pas op papier zichtbaar wordt, is op papier te laat. Ernaast staat een export naar een bewerkbaar document, gecontroleerd tegen de zetting van het origineel, met een resterende afwijking van twee honderdste pixel.

Niets hiervan dwingt de synchroniciteit vanzelf af. De inhoud wordt bewust in de brochure overgenomen en niet tijdens de uitvoering opgehaald, zodat een wijziging aan de site een reeds gedrukt document niet met terugwerkende kracht verandert.

De projectbeschrijvingen zijn het ene deel van de site dat verder moet groeien, en het enige waarvoor een interface nodig is. Die bestaat, staat op een eigen adres en draait alleen op de machine van wie redigeert: een lijst van de bestaande records, een formulier voor elk veld, en ernaast een voorbeeld van de kaart en van de afgewerkte pagina.

Bewerkt worden dezelfde bestanden waaruit de site bouwt, zonder database en zonder account. Elk veld wordt bij het opslaan gecontroleerd tegen hetzelfde schema waartegen de build controleert. Een record dat hier doorkomt breekt de build niet: dat is de hele bedoeling van de oefening, en het traject is in ruim dertig controles doorlopen.

Waar een beschrijving geen ondertekend document achter zich heeft, is ze als representatief gemarkeerd, zichtbaar op het overzicht en bij elke afzonderlijke vermelding. Wat gedocumenteerd is staat in het register; wat ernaast staat geeft zich niet uit voor een contractstuk. Die scheiding is de voorwaarde waaronder die helft van de site iets waard is.

Uitlevering is statisch vanuit een container: gebouwde bestanden achter een lichte server, een push op de hoofdtak bouwt opnieuw. Een voettekst noemt ons als auteur, in de stilste letter van de site.