Mobile first, hoe zit dat?
Voor de introductie van smartphones was internetgebruik beperkt tot desktop en laptop computers. In basis werkt internet via de browser hetzelfde op een groot scherm als op een klein scherm, toch zijn er verschillen. Je kunt als designer niet zoveel informatie op een klein scherm weergeven, dan worden de elementen onleesbaar. Daarnaast kunnen knoppen ook te klein worden om op te tikken, smartphones werken namelijk standaard met een aanraakscherm in plaats van een computermuis. Er zijn twee manieren om een website geschikt te maken voor ieder scherm type; eerst de desktop versie maken en die aanpassen voor mobiel, of de mobiele versie als prioriteit stellen. In het laatste geval spreken we van een mobile first aanpak.
Webdesign in het klein
De meeste webdesigners maken gebruik van computers met grote schermen, het is dan ook niet verbazingwekkend dat de layout van veel websites er met name goed uitziet op grote schermen. Uiteraard is het ook mogelijk om op een groot scherm een Interface te ontwerpen voor een klein scherm, maar een designer zal deze beperkingen niet zomaar waarderen. Daardoor komt het regelmatig voor dat webpagina’s op een smartphone scherm niet mooi uitkomen of onduidelijk zijn.
Wanneer is mobile first de beste aanpak?
Er wordt wereldwijd meer gebruik gemaakt van mobiele toestellen dan desktop of laptop computers om op het internet te zoeken en navigeren. Dit is al meerdere jaren zo. Google zag dit uiteraard ook begon onderscheid te maken tussen desktop en mobiele websites. Dit was te zien aan de zoekresultaten. Op het moment dat iemand zoekt op een smartphone zullen de zoekresultaten voorkeur geven aan websites die ontworpen zijn met oog op mobiel. Op desktops en laptops kunnen andere zoekresultaten worden weergegeven. Websites die voor beide scherm types een ontwerp aanbieden scoren beter in de ranking.
Met name voor lokale zoekresultaten blijkt een mobile first strategie voordeel te bieden. Denk aan winkelend publiek dat op zoek is naar een restaurant in de buurt. Op een vaste computer is de exacte locatie wellicht van minder belang. Een mobiele pagina kan ontworpen worden met het oog op dit soort verschillen in gebruik èn gebruiker. Daarnaast kunnen mobiele webpagina’s vaak sneller worden geladen, wat op locaties met langzaam internet voordeel kan bieden.
Reponsive design
In het ideale geval is mobile first niet nodig en kan het ook een mobile only of universele ontwerp zijn. Het risico is dan wel dat een webpagina niet optimaal gebruik maakt van de functionaliteit van het systeem. Met responsive design is het mogelijk om een pagina eenmaal te ontwerpen met een optimale weergave op ieder scherm. Elementen worden met technologieën als CSS dynamisch geladen en geschaald op basis van informatie uit de browser.
Er is een keerzijde aan het automatisch laden van een mobiele versie. Zo kan de weergave op een tablet afwijken, het ligt niet altijd voor de hand welke versie het beste uitkomt op een tablet scherm. Daarnaast kan cruciale informatie ontbreken op een mobiele pagina zoals navigatie knoppen en menu’s. Het is daarom van belang voor de webdesigner om pagina’s te testen op zowel vaste als mobiele schermen. Het is doorgaans wel mogelijk om in een mobiele of tablet browser als gebruiker te kiezen voor een ‘desktop weergave’.
