New Defaults

(This column was published in the Dutch, paper version of Web Designer Magazine. It’s in Dutch). Het web is van pak hem beet 2003 tot 2010 niet wezenlijk veranderd. Als we een website gingen bouwen in die periode dan hadden we altijd een paar vaststaande uitgangspunten: de website moest er in elke browser precies hetzelfde uitzien, hij moest 1024 pixels breed zijn, hij moest perfect werken in IE6. Bovenaan de pagina stond de header met een logo en een navigatie, links stond eventueel nog een navigatie, rechts hadden we ruimte voor wat widgets, onderaan de pagina stond er een footer, en, oh ja, daartussen stopten we de inhoud. Het web is veranderd. De uitgangspunten die hierboven staan zijn stuk voor stuk verouderd. De meeste browsers kunnen tegenwoordig fantastische dingen en we hebben allemaal een kek minicomputertje in onze broekzak of handtas. Dit ecosysteem van nieuwe apparaten en browsers vraagt om een hele andere aanpak. Hier onder beschrijf ik een paar New Defaults, nieuwe uitgangspunten voor het huidige web.

Touch First

We gingen er altijd van uit dat iedereen die onze website bezocht een muis gebruikte. Veel van onze interacties waren hier dan ook afhankelijk van: mouseovers werden geregeld gebruikt om content te tonen, zoals bijvoorbeeld een subnavigatie of hulpbalonnetjes. Meer en meer mensen gebruiken echter een touch device en mouseovers werken niet op touch devices. Voor interacties is het dus beter en handiger om uit te gaan van touch in plaats van de muis. Als het werkt met een dikke vinger dan werkt het ook met een cursor, andersom geldt dat niet altijd.

Content First

De content, de inhoud van de site, het spul wat onze bezoekers willen zien, dat stopten we altijd ergens tussen de widgets, de headers en de footers, nadat we die al hadden vormgegeven. Onze sites werden eerst ontworpen, eerst de layout, de kleuren en de tierlantijntjes, en daarna werd er pas gekeken wat er nu eigenlijk in kwam te staan. Tegenwoordig pakken we het iets slimmer aan en kijken we eerst naar de content. We beginnen met het vormgeven van de inhoud, in plaats van de inhoud in een fantastische vormgeving te proppen. Design is het vormgeven van content met de restricties en mogelijkheden die er zijn. Als je de inhoud in een vormgeving stopt, dan ben je een plaatjesmaker, geen designer.

CLI First

Niet alle websites bestaan alleen maar uit content om te consumeren, op veel websites kun je ook iets doen. Een tijd geleden beschreef Luke Wroblewski hoe hij BagChek had opgezet. Hij had er eerst voor gezorgd dat de API goed werkte, dat alle basisfunctionaliteit het deed vanaf de commandline. Daarna begonnen ze pas, laag voor laag, de verschillende grafische interfaces toe te voegen, altijd bovenop deze API. Als er een nieuw apparaat op de markt komt wat een wezenlijk andere interface nodig heeft (TV bijvoorbeeld) dan is dit redelijk eenvoudig te realiseren.

Mobile First

Toen we de eerste responsive sites gingen bouwen, een paar jaar geleden, toen begonnen we met een al dan niet bestaande desktop-site en vormden die om naar iets wat ook lekker werkt op kleinere schermen. We zijn er achter gekomen dat dit wat onhandig is. Het is makkelijker om een site te bedenken en te ontwerpen voor een klein scherm en dit vervolgens op te rekken en aan te passen voor hogere resoluties. Als het op een klein scherm past dan past het ook op een groot scherm. Bovendien dwingt het je om nóg beter na te denken over wat er echt belangrijk is: als het niet op dat kleine schermpje past, is het dan echt wel noodzakelijk? Je ziet inmiddels allemaal websites verschijnen zonder nutteloze, afleidende widgets en met lekker grote, leesbare letters. Een hele fijne ontwikkeling wat mij betreft.

Everything First

De New Defaults die ik hierboven beschrijf zijn nadrukkelijk uitgangspunten, er staat niet Mobile Only, er staat Mobile First. Natuurlijk moet je rekening houden met mensen die een muis gebruiken, of een toetsenbord. En natuurlijk moet een site er prachtig uit zien, het gaat wellicht om meer dan alleen de content, vormgeving is enorm belangrijk. En jazeker, soms zijn widgets een beter idee dan witruimte, en een site moet het absoluut ook doen op de klassieke desktop-computer. Aan al deze dingen moet je óók denken tijdens het ontwerpen en bouwen. Maar niet als eerst.