This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

En wat als we de boel nou eens omdraaien?

(This column was published in the Dutch, paper version of Web Designer Magazine. It’s in Dutch). Veel designers vinden mij een vervelende zeikerd. Altijd maar aan het zeuren dat het niveau van webdesign niet hoog genoeg is. Ik ga eens proberen om uit te leggen wat ik bedoel, op een iets constructievere manier dan “je snapt er geen fuck van!”.

Hoe wordt je site bekeken?

Er zijn ontelbaar veel mogelijke manieren waarop jouw site bekeken wordt. Je site is onderdeel van een groter, samenhangend geheel, het web. Dat is een aaneenschakeling van documenten en applicaties die bereikbaar zijn via URL’s. Deze URL’s kunnen geopend worden met een browser vanaf verschillende apparaten. Dit laatste is een wezenlijk onderdeel van het web. Het idee is dat het web toegankelijk moet zijn voor iedereen, ongeacht het apparaat waarmee er gekeken wordt. Dit betekent dat jouw website bekeken wordt met de allernieuwste browsers op de allernieuwste gadgets, maar ook met een oude rotbrowser op een antieke computer (met bovendien een gare monitor). Jouw site wordt beluisterd door mensen die niet kunnen kijken. Je zo zorgvuldig gecomponeerde stylesheet wordt overruled door de custom stylesheets van slechtzienden die alles in zwarte 40 px letters op een witte achtergrond willen zien.

Onzekerheid

Het enige wat je dus zeker weet is dat dat niemand jouw site zo te zien krijgt zoals jij hem ziet. In het verleden hebben we altijd geprobeerd om deze onzekerheid te omzeilen, of te negeren, door een vast formaat te kiezen. Eerst waren websites 640 pixels breed, later 800, en weer later werd dat ineens 1024. We wisten wel dat sommige mensen een smaller scherm hadden, of dat veel mensen hun vensters nooit full-screen openen, maar het kwam ons wel goed uit om dat te negeren. Ik heb me hier altijd over verbaasd. Waarom ontwierpen we niet gewoon websites die gebruik maken van procenten, van verhoudingen, in plaats van vaste formaten. Dat is zo veel logischer voor het web. En bovendien kan dat heel eenvoudig met CSS.

Verkeerde tools

Ik denk dat de tools die we gebruiken om websites te ontwerpen ons uitstekend in staat stellen om prachtige plaatjes te maken. Maar het probleem met deze tools is dat ze wezenlijk anders in elkaar zitten dan het web. Ze hebben helemaal niks te maken met de zogenaamde web design stack, ze volgen een andere logica. Ik zal eens proberen om deze web design stack uit te leggen, zonder al te technisch te worden.

De basis van elke site is de content. Stel dat je deze pagina leest op een website (mijn columns worden gelukkig ook online gepubliceerd). Het enige waar ik in dat geval zeker van kan zijn is dat iedereen deze woorden kan lezen (of horen). Als je de content aanbiedt in goede, semantische HTML, zonder styling, dan kan iedereen het lezen.

Verreweg de meeste browsers (maar niet allemaal) kunnen tekst vormgeven met CSS. Je kan de font-grootte aanpassen, het lettertype, de line-height, de grootte van de verschillende kopjes, etcetera. Dit is de typografie. Het is logisch om eerst de typografie op orde te hebben voordat er gekeken wordt naar de volgende stap, de layout. Layout is namelijk niet altijd nodig: sommige apparaten zijn zo smal dat de website gerust in één kolom getoond kan worden.

Maar zodra je de site ook geschikt wilt maken voor bredere schermen zul je iets aan layout moeten doen. In de begintijd van responsive design gingen we uit van vaste formaten voor het bepalen van zogenaamde breakpoints. Deze formaten waren gebaseerd op veelvoorkomende schermgroottes. Inmiddels zijn er zo veel verschillende gadgets met zo bizar veel verschillende resoluties dat we iets anders moeten bedenken. Liefst iets wat je kunt beredeneren. Een logisch uitgangspunt voor het bepalen van breakpoints is typografie. Er zijn eenvoudige, redelijk universele wetten die voorschrijven wat de ideale regelbreedte is: tussen de 40 en de 75 karakters, ongeveer. Een logisch breakpoint is dus het moment dat de tekstkolom breder wordt dan 75 karakters. Pas op dat moment moet je iets veranderen aan de layout.

De ideale tool

Simpel gezegd is de web design stack: content -> typografie -> layout -> verf. Het invoeren van (echte) content, het bepalen van de typografie en het opzetten van de verschillende layouts en grids, dit zijn allemaal zaken waarbij een slimme tool enorm handig zou zijn. Voor print bestaan deze tools al lang, het zijn DTP programma’s als InDesign en Quark. Voor het web bestaan dit soort tools vreemd genoeg niet.

Alle tools die we nu gebruiken stimuleren je juist om andersom te denken. Bij Photoshop ligt de nadruk op effecten en kleur, in een canvas van een vast formaat. Het is zelfs helemaal niet geschikt voor typografie. Natuurlijk is het belangrijk dat een site er prachtig uitziet. Maar ik weet zeker dat alle sites er nóg mooier uit gaan zien als de content goed is, als de typografie netjes is en de grids logisch zijn. Als iedereen op die manier sites gaat ontwerpen dan stop ik met zeiken, dat beloof ik.