Voys.nl geschikt voor oa iPhone, Android en Blackberry

2% van de bezoekers van Voys.nl vindt via mobiele toestellen onze website, dus het werd tijd om ook deze bezoekers van een goede gebruikerservaring te voorzien.

Testen van je mobiele site

Omdat je de website niet na iedere aanpassing wilt testen op een mobiel aparaat is het handig om een testomgeving te hebben. De meest eenvoudige testomgeving is een normale browser als FireFox, die doet alsof hij een mobiele webbrowser is.

Voys.nl op iPhone, Android, Nokia en Blackberry

De user agent switcher firefox plugin maakt dit mogelijk. Deze is standaard niet gevuld met een lijst van browsers. Een mooie lijst vind je echter bij techpatterns. Wil je kunnen testen zonder een mobiel dan zijn de iPhone en Android SDK een welkome aanvulling op je testomgeving.

Joomla en mobiele apparaten

Voys.nl draait op het opensource cms Joomla. Joomla moet kunnen “zien” dat de bezoeker een mobiele browser gebruikt. De heren van Mobile Joomla hebben een prachtige plugin geschreven die dit mogelijk maakt. Ook leveren ze standaard templates voor iPhone, PDA’s (Android, Windows mobile en Blackberry) en WAP devices. Nou komen de Voys.nl bezoeker voornamelijk van iPhone en Android devices dus daarvoor hebben we de templates verder aangepast.

Het ontwikkelen van een website voor mobile devices

En dan begint het werkelijke ontwikkelen. We hebben er daarbij voor gekozen om 1 template voor iPhone en PDA te ontwikkelen. Een probleem waar we gelijk tegenaan liepen was dat een iPhone de scaling voor de mobiele site niet goed uitvoert. Daar kom je overigens alleen achter op de iPhone zelf, of als je de iPhone SDK gebruikt om de site te testen. De viewport meta tag (content=’width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no’) zorgt ervoor dat de iPhone wel netjes aan het scalen gaat. Een ander iPhone dingetje is het plaatsen van een klein icoon bij telefoonnummers. Voor de volledigheid is het toevoegen van een dergelijk icoon voor e-mailadressen een mooie oplossing.

Als je dat probleem hebt opgelost is het voor de rest “normale” webontwikkeling, waarbij je rekening moet houden met een kleiner schermformaat. Er zullen meer kleine zaken zijn waarmee je rekening moet houden, maar in ons geval neemt de Mobile Joomla module een hoop werk uit handen. Overigens, ook het veel gebruikte wordpress kent een goede plugin voor mobiele websites: WP-touch plugin.