Over Robin

Ik ben front-end designer en grafisch vormgever, en dit werk doe ik ruim twintig jaar. Ik ben sterk in CSS en JavaScript, in het handwerk meer dan in de frameworks, en in ontwerp: van interfaces in Figma tot logo's, magazines en interactieve dingen zoals games.

Verderop staat ook hoe deze site zelf gebouwd is, want ik probeer hier dingen uit die ik daarna in ander werk gebruik.

Waar ik nu aan werk

Op dit moment werk ik voor Boat Bike Tours aan UI/UX, front-end en ontwerpwerk dat ook buiten het scherm terechtkomt. Daarnaast werk ik aan verschillende websites in opdracht van Perfect Web Team.

Meestal zit ik als specialist in een team, naast de mensen die de achterkant bouwen, één of twee dagen per week en over langere tijd. Dan leer ik het systeem kennen in plaats van elke keer opnieuw te beginnen. Wat ik precies doe staat op de dienstenpagina, en waarom ik mezelf front-end designer heb ik op een aparte pagina uitgelegd.

Hoe ik hier gekomen ben

Het begon meer dan twintig jaar geleden op de middelbare school. Samen met Theo van der Zee ontdekte ik het internet en bouwden we websites. Op een dag deden we mee aan ThinkQuest, een wedstrijd van Kennisnet waarin scholieren informatieve websites bouwden voor het onderwijs. Het eerste jaar werd een troostprijs, en we zeiden tegen elkaar dat we nooit meer mee zouden doen. Drie maanden later waren we alweer bezig. Daarna hebben we zes jaar op rij gewonnen.

In 2007 richtten Theo en ik samen Tweepixels op. Zes jaar lang bouwden we daar websites, onder andere voor Middin en Shoppingcenter Overvecht. In diezelfde periode leerde ik tijdens een opdracht voor Q&A Koen en Erik kennen, en met hen begonnen Theo en ik de eerste Nederlandse Joomla Template Club. Themepartner heeft bijna vier jaar bestaan. Wat er is gebleven zijn niet de templates maar de mensen: Sander Potjer, Martijn Boomsma en Tom Janssens, met wie ik sindsdien nog steeds samenwerk.

In 2013 besloten Theo en ik dat we ons ieder verder wilden specialiseren, en begon ik voor mezelf. Sander, Martijn en Tom wisten me snel te vinden en ik ging aan de slag voor Perfect Web Team en Timble. Daar werkte ik onder andere voor de NPO en de Belgische politie.

In 2017 zijn Tom en ik een websiteplatform gaan ontwikkelen, gebaseerd op een opzet die bij de Belgische politie goed had gewerkt. Dat werd Marsvaardig, waar we tot op de dag van vandaag websites bouwen voor zelfstandigen en het MKB. Ook grotere partijen weten ons te vinden, zoals het grootste veilinghuis van Nederland en Well Water.

Nadat in 2021 onze tweede zoon geboren was, zijn mijn vrouw en ik Mevrouw Muziek begonnen. Dat is een muziekprogramma voor structureel muziekonderwijs aan kinderen van nul tot vier.

Waar ik mee werk

Buiten het werk

Ik ben vader van twee zoons en breng daar veel van mijn vrije tijd mee door. Daarnaast speel ik basgitaar in de band Biscuits. Mijn vrouw en ik proberen ook tijd vrij te houden voor de dingen waar we blij van worden, en dat is meestal muziek maken of wandelen.

Over deze site

Hieronder staat waar deze site op draait en welke keuzes eronder liggen.

Statisch, zonder database

Als websitebouwer heb ik geen CMS nodig om mijn eigen site te bewerken, dus deze website draait op de static site generator Eleventy. Alles wat je ziet is vooraf gegenereerde HTML. Er gaat dus geen enkele databaseconnectie over de lijn als je een pagina opvraagt, en dat scheelt meer dan welke cachinglaag ook.

De CSS staat in de HTML zelf in plaats van in een apart bestand, omdat brotli die twee samen beter comprimeert dan apart en het een vraag naar de server scheelt. Afbeeldingen staan bij ImageKit en de site zelf is gehost bij SiteGround.

Progressive enhancement

De moderne CSS staat achter een check op aspect-ratio. Ondersteunt een browser die niet, dan toon ik de basisvormgeving: leesbare tekst, onderstreepte links, alles onder elkaar. Voor de JavaScript geldt hetzelfde, met een extra check op querySelector en addEventListener. Omdat de hele site ook zonder JavaScript werkt, merkt zo iemand daar niets van.

Dat de fallback klein kan blijven komt doordat alle layout op deze site gebouwd is met every layout van onder anderen Heydon Pickering. Elke layout heeft daar één simpele versie zonder moderne CSS, en die versie zet vrijwel alles onder elkaar.

De site draait op mijn eigen packages

Twee packages die ik voor ander werk had geschreven, draaien hier ook. keeptrack-css houdt maten bij die de browser wel weet maar je CSS niet kan opvragen, bijvoorbeeld de hoogte of breedte van een blok dat verderop staat. click-delegation maakt een hele card klikbaar zonder de link erin te slopen, zodat je hem nog steeds kunt kopiëren of in een nieuw tabblad openen. Op de toolspagina staat van allebei een demo, en de cards die je daar ziet gebruiken het zelf. De gecompileerde CSS is o.a. opgebouwd met Illusion, een library die ik in 2015 samen met Tom Janssens schreef.

Toegankelijk en gebruiksvriendelijk

Links zijn onderstreept, het contrast is ruim, en de artikelen lijken bewust op een pagina zonder opmaak. Ik loop de site na met het toetsenbord en met een screenreader, want dat is te controleren en een aanname niet. Voorbeelden die ik samen met opdrachtgevers heb ontworpen en gebouwd staan in mijn portfolio.

En dan de JavaScript

De JavaScript wordt onderaan de pagina deferred geladen, zodat hij het laden niet in de weg zit. Wat de JavaScript zelf doet is deels nut en deels plezier. Nuttig is het wisselen tussen het lichte en het donkere thema, waarbij automatisch de standaard is en de CSS je systeeminstelling volgt.

Voor de lol kun je op elke pagina meetlijnen en hulplijnen aanzetten en de achtergrond transparant maken. In de portfoliopagina's zit een scroll listener voor 'scrolling video' en een meebewegend laptopscherm om de afbeeldingen van de websites. In het artikel over traag voelen staan de demo's waarin je zelf kunt voelen waar het misgaat.