De mobiele kijk op het web

De afgelopen tijd - lees: de laatste 2 à 3 jaar - is er veel veranderd in het ontwerpen voor het web. De dagen dat websites werden gebouwd voor een enkele, vaste schermgrootte zijn voorgoed voorbij. Tegenwoordig worden websites bezocht door tal van apparaten met een groot scala aan verschillende schermgroottes en bedienings interfaces, onder uiteenlopende omstandigheden. Wereldwijd is de hoeveelheid verkeer op websites dat door mobiele apparaten wordt veroorzaakt bijna verdubbeld in het afgelopen jaar, tot een totaal van bijna 24%!

 

Webtraffic door mobiele apparatenBron: walkersands.com

 

Dat dit veranderende gedrag ook in Nederland sterk aan de orde is komt duidelijk naar voren in een onderzoek door het CBS, waarvan de resultaten onlangs werden gepubliceerd. Hieruit blijkt dat afgelopen jaar 60% van de internetgebruikers in Nederland ook onderweg online is; 2/3 van deze groep gebruikt hiervoor de tablet of mobiele telefoon.

Uit deze gegevens mag dus rustig geconcludeerd worden dat wanneer de User Interface (UI) van een website alleen wordt ontworpen voor gebruik op een desktop, een grote groep gebruikers wordt genegeerd.

Gelukkig heeft ook de techniek de laatste tijd niet stil gestaan. Waar we enkele jaren geleden nog een complete, losstaande website moesten bouwen speciaal voor de mobiele telefoon, kunnen we tegenwoordig de User Experience (UX) voor alle bezoekers optimaliseren met behulp van slechts één website. Met behulp van Media Queries wordt er voor elk apparaat een aparte (of extra) stylesheet ingeladen, waarmee we er voor zorgen dat de weergave van de website mee schaalt met de grootte van het scherm. De website wordt ontworpen aan de hand van een grid, welke in het door ons gebruikte framework wordt opgebouwd op manier die toegespitst is op het bezoekende apparaat. In onderstaande afbeelding zie je een schematische weergave van hoe dit in zijn werk gaat.

 

Responsive web design Bron: corephp.com

 

Deze manier van werken noemen we "Responsive Web Design". Responsive Web Design behelst echter meer dan het schalen van de kolommen in een website. Zo wordt de desktop in 99% van de gevallen bediend met toetsenbord en muis, terwijl de mobiele telefoon of tablet wordt bediend middels het aanraken van het scherm, met een in veel gevallen forse duim. Het simpelweg verkleinen van de navigatie zal resulteren in enorm kleine knopjes, wat daarmee niet bepaald voor een prettige gebruikservaring zal zorgen. Tevens werken de oude vertrouwde hover (of mouse-over) drop-down navigaties niet op een apparaat met een touch screen. Om een zowel desktop als mobile-friendly ervaring te creëren maken wij daarom gebruik van een navigatiestructuur die in twee of meer stappen geoptimaliseerd wordt voor verschillende schermgroottes, vaak door het menu op mobiele telefoons in te laten schuiven (collapsen) om de pixels zo effectief mogelijk te benutten.

Ook is het van belang op bepaalde plaatsen de kunst van het weglaten toe te passen. De grote hoeveelheid real estate die we gewend zijn van een desktopscherm gebruiken we namelijk maar al te graag om mooie sfeerimpressies weer te geven door het vertonen van grote foto's. Het inladen van die grote foto's op een mobiele telefoon duurt niet alleen lang - zeker op over een fragiele 3G verbinding - maar levert ook niet meer op dan het tonen van een kleine versie van de foto. De kunst is echter met dit weglaten de informatievoorziening of functionaliteit naar de gebruiker toe toch optimaal te houden voor het apparaat wat hij of zij gebruikt.

Onze eigen website is een goed voorbeeld van hoe wij websites ontwerpen en bouwen op een manier dat de UX op elk apparaat optimaal is. Probeer deze eens op verschillende apparaten te bekijken, of pas de grootte van het browservenster aan hoe de website reageert op verschillende schermgroottes.

Tenslotte zijn er nog tal van zaken meer welke van belang zijn tijdens het optimaliseren van de UX voor de verschillende apparaten waarmee de website bezocht wordt. Zo zijn er bijvoorbeeld met de opkomst van retina (of niet-Apple varianten hierop) schermen zaken om rekening mee te houden bij het al dan niet inladen van retina images, is het tonen van enorme tabellen op een mobiele telefoon vaak een kriem, of kan het lonend zijn specifieke functies aan te spreken als een GPS. Hierover later meer, so stay tuned.