Je hoort het tegenwoordig van alle kanten waaien: ‘mobile first is dé te hanteren aanpak voor de opbouw van nieuwe websites, applicaties en alles anders wat digitaal is.’ Niet verwonderlijk, als je weet dat sinds een aantal jaar mobiele toestellen talrijker aanwezig zijn dan de klassieke computers. Ook het merendeel van de zoekopdrachten gebeurt via mobiele apparaten. Het belang van een responsive website is dus niet te onderschatten. De vraag is of elke designer dus best op de kar springt van de mobile first-aanpak?

• Omdat je niet de plaats hebt om alles te tonen op de mobiele toestellen, word je gedwongen om keuzes te maken op vlak van content. Je moet op voorhand goed nadenken en analyseren wat echt belangrijk is voor je websitebezoekers en dat zo goed mogelijk laten overkomen op een klein scherm.
• Bovendien is het ook een stuk eenvoudiger om vanuit het mobiele ontwerp verder op te werken naar een desktop design. Het ontwerpen van pagina’s is immers een cumulatief proces, waarbij elke nieuwe stap verder bouwt op de stappen die eerder gezet werden. Het is eenvoudig om stelselmatig te kunnen uitbreiden, dan elementen te moeten schrappen. 
• Maar er is ook een keerzijde van de medaille. De interfaces vormgegeven voor mobile first zijn minder onderscheidend. Je ontwerpt namelijk vooral op detailniveau en er is geen ruimte voor extraatjes of details die je website mooier maken. Je website is dus goed bruikbaar en bevat de essentiële informatie, maar onderscheidt zich minder van concurrenten.

De Amerikaanse webdesigner Brad Frost schreef een boek over hoe het designproces volgens hem - en intussen ook volgens vele anderen - er zou moeten uitzien, het zogeheten atomic design. Ook hij vindt dat collega Stephen Hay het het best verwoordde toen hij zei ‘We’re not designing pages, we’re designing systems of components’. Designs moeten het vliegensvlug veranderende digitale landschap van internettoestellen en contenttypes kunnen blijven volgen, zonder daarbij vaart te verliezen. Wie enkele jaren geleden de boot naar de mobiele aanpak gemist heeft, dreigt nu misschien wel kopje onder te gaan. En ook het oude designproces is stilaan achterhaald. Agility, samenwerking en aanpassingsvermogen staan tegenwoordig centraal, terwijl de raakvlakken tussen design en development steeds groter en groter worden.

Het atomische designproces van Frost ziet er ongeveer als volgt uit:

1. De atomen: Atomen zijn de basisbouwstenen waaruit alles en iedereen opgemaakt is. Wanneer je die lijn doortrekt naar webinterfaces, komt dat overeen met de HTML-tags zoals form labels, inputs en buttons. Ook meer abstracte elementen zoals kleurpaletten en lettertypes kunnen hieronder vallen.
2. De molecules: Wanneer je verschillende atomen verenigt, krijg je met molecules te maken. Atomen klitten samen om zo nieuwe bouwstenen te vormen met hun eigen functie. In webtaal zou je zo die form label, input en button kunnen samenvoegen tot één form die wél meteen concreet bruikbaar is.
3. De organismes: Net zoals de atomen samen een molecule gaan vormen, kunnen de molecules op hun beurt dan weer gezamenlijk aan een organisme gaan bouwen. Hierdoor worden de verschillende onderdeeltjes uiteindelijk samengevoegd tot één geheel, zoals een webpagina. Zo kan je bijvoorbeeld in een topbalk diverse componenten als een logo, een zoekfunctie en een lijst van sociale mediakanalen hebben staan, of worden verschillende producten na elkaar afgebeeld om een assortiment aan te bieden. Hoe dan ook maak je zo telkens van kleine blokjes één groter geheel.
4. De templates: Wanneer je dankzij je atomen en molecules goeie organismes hebt weten op te bouwen, kan je er voor kiezen om die vorm op te slaan als een template. Op die manier beschik je al over de juiste manier van opbouwen, zonder alles concreet te moeten invullen. Met die templates krijg je ook meteen een concreet zicht op het design van de webpagina, al kan er natuurlijk nog heel wat aan veranderen totdat het definitieve design op tafel ligt.
5. De pagina’s: Het eindpunt van het designproces. Wanneer alle bouwstenen in elkaar klikken en de templates hun concrete invulling hebben gekregen, krijg je een pagina voor ogen die ook de gebruikers zullen zien. Nu kunnen de tests pas écht beginnen, aangezien je al met een vrij waarheidsgetrouw beeld zit van wat het eindproduct gaat worden.

Stelselmatig opbouwen loont dus zeker en vast de moeite als je een goeie website wil opbouwen. Zet al die atomen en molecules goed in elkaar om degelijke organismes te vormen, en stoom zo door richting templates en pagina’s die steeds complexer en uitgebreider worden. De stevige basis blijft hoe dan ook liggen voor eender welk ander platform waar je nadien voor gaat ontwikkelen. Ook gewonnen voor onze mobile first-aanpak? Calibrate staat je graag bij met raad en daad!