Maak je website mobiel

Het heeft lang geduurd, maar eindelijk is ook in België het mobiele internet bezig aan een stevige opmars. Steeds meer mensen beschikken over een smartphone of een gsm waarmee je ook op internet kan, en stilaan worden ook de data-abonnementen van gsm-operatoren betaalbaar. Hoog tijd dus om ook jouw website in een mobiel kleedje te steken!

Waar op letten?

Surfen met een gsm heeft uiteraard een aantal beperkingen. Daar moet je als webdesigner dus zeker rekening mee houden. We zetten alvast de belangrijkste tips op een rijtje.

Automatisch herkennen

Een mobiele website vervangt zo goed als nooit de normale versie van je site. Vaak wordt hiervoor een subdomein aangemaakt, zodat bezoekers van m.spelensite.be terecht komen op de mobiele versie, en surfers van www.spelensite.be terecht komen op de gewone site. Maar meestal weet een bezoeker helemaal niet of er een m-versie van de website beschikbaar is.

Daarom doe je er goed aan om bezoekers automatisch op de juiste versie te laten toekomen, afhankelijk van de (mobiele) browser waarmee ze surfen. Wie beschikt over PHP kan gebruik maken van Detect Mobile Browsers, gratis voor non-profit organisaties. Je kan met het script bovendien ook nog onderscheid maken tussen de verschillende mobiele browsers, zodat iPhone-gebruikers nog een andere versie te zien krijgen dan bezoekers die Windows Mobile gebruiken.

Beperkte verbindingssnelheid

Hoewel alle gsm-operatoren druk in de weer zijn om hun netwerken te versnellen, gaat het internet via je gsm nog steeds trager dan voor wie thuis over een breedbandverbinding beschikt. Zorg er daarom voor dat de totale bestandsgrootte van je webpagina's zo klein mogelijk is. Dat doe je bijvoorbeeld door:

zuinig om te gaan met afbeeldingen (klein in afmetingen en resolutie, geen EXIF-informatie)
met slechts één beperkt extern CSS-document te werken
geen overbodige HTML-tags te gebruiken (20 geneste div-blokken vervang je door 1 div-blok)

Gebruik de Firebug Add-on van Firefox om te testen hoe zwaar je website is.

Beperkte schermresoluties

De schermpjes van smartphones worden steeds groter en beter, maar het spreekt voor zich dat je met de beperkte schermresoluties rekening moet houden. Bovendien hanteert elke gsm-fabrikant andere afmetingen. Werk daarom met een "vloeibare" lay-out (fluid width) die zich aanpast aan de breedte van je browser. Ook hiervoor is het belangrijk dat afbeeldingen die je gebruikt niet te groot zijn. Zorg er bovendien voor dat de belangrijkste inhoud van je pagina bovenaan staat, zodat bezoekers zonder of met zo weinig mogelijk gescroll de eigenlijke inhoud van je pagina kunnen zien.

Geen of beperkte mogelijkheden van Javascript, AJAX, Flash

Hou er rekening mee dat de meeste mobiele browsers Javascript, AJAX en Flash niet of slechts in beperkte mate ondersteunen. Vermijd ze dus waar mogelijk, of gebruik ze alleen voor het toevoegen van extra gebruiksvriendelijkheid.

Navigeren

Veel smartphones worden bediend via touchscreens. Zorg er daarom voor dat je vlot door je mobiele website kan navigeren door knoppen en links groot genoeg te maken.

Hou het simpel

Nog meer dan voor gewone websites, is het bijna onmogelijk om je mobiele website er goed te laten uitzien op alle smartphones. Hou de structuur van je website daarom zo eenvoudig mogelijk en gebruik in je CSS-code geen line-height, display: hidden, position en float properties.

Testen, testen en nog meer testen

Er is maar één manier om te weten of je mobiele website er op de verschillende platformen er min of meer goed uitziet, en dat is door eindeloos veel te testen. De beste manier is nog altijd door zelf met een smartphone de site te bezoeken, maar volgende website kunnen je ook een heel stuk verder helpen:

W3C mobileOK Checker: doet allerlei controles en gaat na hoe mobiel je website is
mobiReady testing tool: gelijkaardig aan de W3C mobileOK Checker
MobiOne: test je website op een iPhone
Android Emulator: test je website onder Android
Microsoft Device Emulater: test je website onder Windows Mobile
BlackBerry Emulator: test je website op een BlackBerry
dotMobi Emulator: test je website op een Sony K750 en Nokia N70
Opera Mini Simulator: test je website in de mobiele versie van Opera