Maak je website geschikt voor mobiel

Home / Home / Blog / Maak je website geschikt voor mobiel

Het aantal mobiele bezoekers aan websites neemt hard toe. Dat is ook niet zo verwonderlijk, want met tablets als de iPad, de iPhone en andere smartphones hoef je echt geen pc meer op te starten om comfortabel over internet te surfen. Omdat het aantal mobiele bezoekers aan je site steeds verder toeneemt is het slim om eens stil te staan bij de (on)mogelijkheden van een tablet of een smartphone.

figuur:  toename aantal mobiele bezoekers in 2010.

Een paar feitjes

• In het vierde kwartaal van 2010 zijn meer smartphones dan pc’s verkocht;
• Apple is de grootste productent van laptops geworden met dank aan de iPad;
• Mensen verliezen tegenwoordig liever hun portemonnee dan hun mobiel.

Net even anders

Het belangrijkste verschil tussen een mobieltje of tablet en een conventionele pc is het aanraakscherm. De muis is vervangen door een vinger en het klikken is slepen en tikken geworden. Wat betreft de schermgrootte gaan we weer een aantal jaren terug in de tijd. Vergeet grote schermen en denk weer eens “klein”. De oriëntatie van de mobile schermen is ook anders. Een monitor heeft ruimte in de breedte een mobieltje houden we vaak rechtop vast. Een laatste belangrijke factor om rekening mee te houden is traagheid. Een mobieltje is langzamer en maakt vaak gebruik van minder snelle internetverbindingen dan een pc.

Een hele dikke muis

Ik denk dat er makkelijk 100 muispijltjes passen op mijn vingertop. Als je dat bedenkt dan is het ook duidelijk dat de vinger een hele lompe aanwijzer is. Houd daar rekening mee met het designen van je mobiele site. Een menu waar veel items dicht op elkaar staan is een crime. Net als kleine icoontjes, smalle teksten of korte inline linkjes. Leg je vinger eens op de link die je hebt gemaakt. Raak je daarbij nog een link aan? Dan is de link dus te priegelig (dit kun je ook op je gewone pc testen).

Slepen

Eén van de grootste voordelen van de aanraakschermen is dat je op gevoel kunt slepen. Veel websites maken nog gebruik van het traditionele vorige/volgende kliksysteem voor banners, productopsommingen etc. Zou het niet veel handiger zijn als je daar met een simpele “sleep” doorheen kan bladeren? Als voorbeeld heb ik de veelgebruikte easy slider jquery plugin aangepast: zonder slepen | met slepen. Dit is een relatief kleine aanpassing (die nog niet helemaal uitgewerkt is), met veel extra gebruikgemak.

Mini, midi, regular, maxi

Een normale website mag ongeveer 1000 pixels breed zijn, dan ziet hij er netjes uit op bijna alle beeldschermen. De iPad heeft ook een scherm van 1024 bij 768 pixels, alleen wordt hij vaak ook “staand” vastgehouden. En dan heb je in één keer veel minder ruimte over in de breedte. Wil je tegemoetkomen aan deze nieuwe wijze van gebruik? Test en ontwerp je site dan ook voor weergave op staande schermen. Als je bezoeker gebruik maakt van een smartphone dan is het slim om nog minder informatie in één keer op het scherm te tonen. De resolutie van een iPhone 4 is 960 bij 640 pixels. In theorie kun je er dus bijna net zoveel informatie op kwijt als op de iPad. Maar omdat het beelscherm een stuk kleiner is kun je beter flink gaan snijden in de interface. Tablets en smartphones verkleinen sites vaak om ze in één keer volledig te kunnen tonen. Voor een tablet is dat op zich wel te doen (mits je de “dikke vinger” test hebt gedaan). Bij een smartphone levert dat een zoekplaatje en veel in en uitzoomacties op. Voor een smartphone kun je daarom beter een eigen vereenvoudigde interface bedenken. Goede voorbeelden daarvan zie je bij Bol.com en hp.nl.

Sneller alstublieft

Snelheid is enorm belangrijk. Dit geldt voor je gewone website. Bezoekers haten traagheid en zoekmachines zijn er ook bepaald geen fan van. Voor je mobiele site is snelheid nog belangrijker, omdat een mobieltje langzamer is dan je pc (dat hoop ik tenminste voor je) en de internetverbinding vaak ook minder breed is. Slank je mobiele site daarom zover mogelijk af: less is more! Strip zwaar grafisch materiaal, verwijder uitgebreide scripts en verklein foto’s.

Nog meer tips?

Wil je weten wat er nog meer bij komt kijken om je site geschikt te maken voor de groeiende groep mobiele bezoekers. Stuur me dan een berichtje of maak een vrijblijvende afspraak. Je ontvangt van mij dan een checklist met nog meer belangrijke aandachtspunten.

Reageer op dit artikel! "Maak je website geschikt voor mobiel"

Reageer op dit artikel!