Een website die net niet af is, is een commercieel lek

Ik open graag de websites die andere ontwerpers trots delen. Binnen dertig seconden weet ik of hij het voor mij wint of verliest.

Het gaat meestal zo. Een webdesigner deelt de post van klant A. Klant A heeft die post zelf vol trots geplaatst: de nieuwe website, gemaakt door die designer. Logisch dat de klant dat doet. Hij ziet de buitenkant, en de buitenkant is vaak prima. Dan open ik de site, want ik vind het leuk om te zien wat anderen maken en of ik er iets van kan leren. En binnen een halve minuut zie ik het schuiven.

De pagina staat niet vast. Scroll je iets te hard, dan verspringt hij een paar pixels naar links en verschijnt er rechts een witte rand. Op mobiel plakt de footer tegen elkaar aan, zodat je niet ziet waar de ene link ophoudt en de volgende begint. Het burgermenu is langer dan het scherm en krioelt. En soms, het vervelendst, staat er gewoon een typefout in.

Dit gaat niet over smaak

De ontwerpen zijn zelden slecht. Het gaat over iets anders: genoegen nemen met net niet. De laatste tien procent, waarin een ontwerp een werkend systeem moet worden, wordt overgeslagen. Soms door een deadline, soms door budget, soms omdat er simpelweg geen oog voor is. Het resultaat is hetzelfde. De site is opgeleverd en houdt niet.

Het applaus komt van mensen die de site nooit op hun telefoon openden

Onder de post reageren vakgenoten positief. Dat snap ik. Zij zien dezelfde render die de designer zag: op een groot scherm, in het formaat waarin het is gepresenteerd. Niemand pakt zijn telefoon, scrollt te hard en let op die rand rechts. De waardering gaat over het plaatje. De uitvoering blijft buiten beeld. Zo blijft net niet onzichtbaar voor iedereen, behalve voor de bezoeker die daadwerkelijk moet klikken.

Voor de ondernemer is dit een commercieel lek

Jullie betalen een fors bedrag voor een website, en jullie potentiële klant landt op een pagina die schuift, een menu dat niet te overzien is en een tekst met een fout erin. Die klant weet niet waaróm het niet klopt. Hij voelt alleen dat het niet klopt, en hij haakt af voordat hij bij jullie aanbod is. Dat kost omzet voordat het gesprek begint. Ik ben zelf die bezoeker die wegklikt.

Het ontwerp is goedgekeurd als plaatje, niet getest als systeem

Daar zit de kern. Een statische mockup laat één toestand zien, op één schermbreedte, zonder interactie. Een echte website is honderd toestanden: elk schermformaat, elke scrollpositie, elke beweging. Wat op de mockup vaststaat, gaat schuiven zodra de bouw niet is verankerd. Een pagina die naar links verspringt met een witte rand is bijna altijd een element dat breder is dan het scherm. De opmaak is niet vastgezet op de beschikbare ruimte. Google heeft daar zelfs een meetwaarde voor, Cumulative Layout Shift, onderdeel van de Core Web Vitals. Wat jij ervaart als "hij beweegt een beetje", is een getal dat gemeten en vastgelegd kan worden.

De footer die op mobiel tegen elkaar plakt komt uit hetzelfde principe. Hij is opgemaakt op de breedte van het ontwerp, niet op een raster dat ook bij een smal scherm klopt. En de typefout overleeft omdat er wordt nagekeken in het ontwerpbestand, niet op de live site. Twee verschillende dingen, twee verschillende controles. Het is hetzelfde principe waarmee ik een logo op vaste verhoudingen bouw: leg de maten vast, dan houdt het op elke schaal en bij elke leverancier.

Vier controles die twee minuten kosten

• Open de site op je eigen telefoon en scroll er stevig doorheen. Verspringt er iets, of komt er een rand in beeld die er niet hoort te zijn.
• Bekijk de footer en het menu op mobiel. Staat alles los van elkaar en is het in één oogopslag te overzien.
• Klik op de live site door elke belangrijke link, en lees onderweg elk woord. Werkt elke knop, komt elk menu-item ergens uit, en klopt de tekst in koppen, knoppen en foutmeldingen. Een link die doodloopt kost je een klant precies op het moment dat hij verder wilde.
• Versmal het browservenster op je laptop tot het smalst mogelijke. Een pagina die vastligt blijft heel. Een pagina die dat niet doet, valt hier uit elkaar.

Vindt een van deze controles iets, dan is de site nog niet af. Niet omdat hij lelijk is. Omdat hij niet vaststaat.

Ik blijf het leuk vinden om de sites van anderen te openen, juist omdat ik er iets van leer, ook van de dingen die net niet kloppen. Twijfel je over je eigen site, dan kijk ik graag een keer mee. Geen verkooppraatje, gewoon een tweede paar ogen dat weet waar het gaat schuiven. Wil je het gestructureerd, dan begin je met een korte nulmeting van je eigen merk.

Demy Rink, Brand Systems Architect