Een webpagina is een stapel dozen. Ik geef elke doos een maat en wat ruimte errond, de browser legt ze samen en doet daarna zijn eigen rekenwerk: hoe breed is het scherm, hoe lang is de tekst die erin staat, wat doen de dozen eromheen. Meestal komt het resultaat overeen met wat ik opgaf.
Soms niet. Dan wijkt het scherm af van de code, en nergens staat waarom.
Waarom het verborgen blijft
In de praktijk gaat dat bijna altijd over drie dingen. Een blok is ergens onderweg verschaald en staat kleiner dan de maat die eraan hangt. Een tekst is langer dan de ruimte die ervoor voorzien is en wordt afgesneden, zonder schuifbalk om de rest alsnog te lezen. Of een blok is breder dan het scherm, waardoor de hele pagina zijwaarts kan opschuiven.
Voor een bezoeker is elk van die drie meteen zichtbaar. Voor mij niet. Mijn scherm is breder, mijn testtekst is korter, en ik weet al waar ik moet kijken.
Waarom niemand het nakijkt
De informatie ontbreekt niet. Browsers hebben ingebouwde ontwikkelaarstools en alles staat erin. Het probleem is dat ik het zelf moet samenleggen: element aanklikken, de opgegeven maat lezen, de werkelijke maat lezen, de twee vergelijken, en daarna de bovenliggende elementen aflopen tot ik vind waar het verschil vandaan komt.
Per element een halve minuut. Een pagina heeft honderden elementen. Dus kijkt niemand vooraf, en valt het pas op wanneer er al iets misgelopen is. Op dat moment zoek je niet meer naar een maat. Dan zoek je naar een fout.
Dus bouwde ik een meetlat
Layout Lens is een Chrome-extensie die één ding doet. Je drukt op een sneltoets, je beweegt met de muis over de pagina, en bij elk element verschijnt een overlay: groen voor de binnenruimte, oranje voor de buitenruimte, met de waarde in elke strook.
Dat deel is niet nieuw. Het verschil zit in wat er gebeurt wanneer de opgegeven maat en de werkelijke maat niet overeenkomen. Dan kleurt de omlijning rood en zegt de tooltip wat er scheelt:
W CSS 300px → Visual 240px (-60px)
↳ ancestor div.stage is transformed
Die tweede regel is waar het mij om te doen is. Niet dat er iets niet klopt, maar welk element hogerop de oorzaak is. Dat is het speurwerk dat me anders een halve minuut per element kost, en het is de reden dat ik nu wel elke pagina naloop.
Klopt
CSS 300×150 = Visual 300×150
Klopt niet
CSS 300×150 → Visual 240×120 (-60px)
↳ ancestor div.stage is transformed
Wat het niet kan, en waarom dat het punt is
Ik heb bestaande extensies geprobeerd en ze telkens weer verwijderd. Wat als een meetlat begint, groeit uit tot een volledig ontwerppakket in je browser: kleuren aanpassen, tekst herschrijven, elementen verslepen, een account, soms een abonnement.
Hoe meer zo'n tool kan, hoe meer toegang hij vraagt. En hij draait op elke pagina die ik open, ook op de webshop van een klant waar ik als beheerder ingelogd ben. Voor een meetlat is dat een slechte ruil.
Layout Lens meet, en herstelt niets. Geen account, geen instellingen, geen dashboard. Ze doet niets tot je de sneltoets indrukt, ze bewaart één schakelaar per tabblad, en die is weg zodra je de browser sluit. Er gaat niets naar een server.
Dat is geen bescheidenheid. Het is de enige manier waarop ik iets durf te laten meedraaien op de site van iemand anders.
Waarom ik daar tijd in stak
Een bezoeker ziet nooit met welk gereedschap een site gebouwd is. Wat een bezoeker wel ziet, is de plek waar het misging. Het verschil tussen die twee is wie het als eerste opmerkt: ik, voor de oplevering, of jouw klant, op een toestel dat ik nooit in handen had.
Het idee was een namiddag werk. De rest was de tien keer dat het bijna werkte. De eerste versie sloeg overal alarm, ook waar niets aan de hand was. Een tool die dat te vaak doet, zet je binnen de week uit. Daarna bleek de eerste druk op de sneltoets soms niets te doen en de tweede wel, omdat Chrome het achtergronddeel van een extensie stillegt wanneer het een tijdje ongebruikt blijft. Dat is het soort fout dat niemand meldt. Je denkt dat je zelf iets verkeerd deed, en je gebruikt het daarna minder.
Geen van die dingen stond in een handleiding. Daar zit het werk meestal.
Tot slot
Ik kan niet beloven dat er nooit iets misloopt aan een site die ik bouw. Ik kan wel zorgen dat ik het zie voor jij het ziet, en jij voor je klant. Daar heb ik liever gereedschap voor dan geheugen.
Layout Lens is gratis. De extensie wacht nog op beoordeling door de Chrome Web Store. Werk je zelf aan sites, dan staan de broncode en de volledige technische uitleg op GitHub. Loopt er op jouw site iets mis dat je niet verklaard krijgt, dan kijk ik er graag naar.