Do’s-and-don’ts van een mobiele website

Een mobiele website is stilaan onmisbaar, maar dat vraagt een extra investering. Gelukkig zijn er betaalbare manieren om uw doelpubliek met smartphone of tablet te bedienen.

Wie toegang heeft tot mobiel internet, spendeert gemiddeld 3,1 uur per week aan sociale netwerken en 2,2 uur aan e-mail via zijn mobiele telefoon. Dat leert ons een wereldwijde studie van onderzoeksbureau TNS. Ook de Belg surft via zijn mobieltje, vooral op zoek naar invulling van persoonlijke interesses. Het browsen zoals we dat achter onze computer doen, is nog niet doorgebroken.

Mobiele gebruikers gaan wel doelgericht op zoek naar informatie: over films, restaurants, een product dat ze willen kopen… En zo belanden steeds meer consumenten op mobiele sites van bedrijven. “Je kunt makkelijk in je statistieken zien wie, wanneer, met welk toestel en wat bekeken wordt op je bedrijfssite”, zeggen Damien Dewitte en Jan Lemmens van Amplexor, een contentmanagementbedrijf. Het enige probleem met die bedrijfssite is dat die zelden is aangepast aan de mobiele surfer. “Het resultaat zijn ongebruiksvriendelijke sites, te kleine letters, lange teksten, zware beelden die zich traag opladen en geen aangepaste navigatie of knoppen”, weet het duo.

Wilt u de groep mobiele gebruikers wel aanspreken, dan hebt u drie mogelijkheden: u bouwt een mobiele site naast uw bestaande webstek, u bouwt een site die zowel op een pc als een smartphone draait of u ontwikkelt een applicatie naast uw bestaande website (zie kader). In dit artikel werken we de eerste (en goedkoopste) oplossing verder uit. U laat de bestaande site gewoon draaien en maakt een mobiele versie die zijn informatie uit hetzelfde contentmanagementsysteem haalt als de klassieke site. De bezoeker wordt automatisch naar de juiste site geleid. Maar hoe vertaalt u de gewone website naar een mobiele site?

Analyseer uw surfers

De informatie uit uw websitestatistieken is cruciaal. “Hebt u meestal zakelijke bezoekers met een BlackBerry, dan mikt uw mobiele website best op deze mensen”, zegt Jan Lemmens. “Hetzelfde voor iPhone- en Android-gebruikers. Hoe meer versies u wilt maken, hoe hoger de kosten. Maar er zijn oplossingen waardoor de site zich automatisch aan de verschillende toestellen aanpast.”

Plaats relevante inhoud bovenaan

“Zet geen grote banner bovenaan zoals op een desktopsite”, zegt Dewitte. “Val met de deur in huis met inhoud of knoppen naar relevante informatie, zodat er niet gescrold moet worden.” Deze inhoud hoeft niet zo uitgebreid te zijn als op de desktopsite. Minder relevante navigatieknoppen verhuizen naar onderen.

Gebruik de mobiele mogelijkheden

“Gebruik zo veel mogelijk touch-mogelijkheden zoals tapping, swiping, pinching en roteren”, zegt Lemmens. “Aparte knopjes naast een afbeelding om bijvoorbeeld in te zoomen worden daardoor overbodig.” Vergeet niet dat het scherm half wordt ingenomen door een keyboard wanneer de gebruiker tekst moet ingeven. Via de gps-functie kunt u ook inspelen op de locatie van de surfer.

Zo min mogelijk bandbreedte

Maak een zo licht mogelijke website, adviseert Amplexor. Voor video’s kiest u beter geen Flash maar HTML5, dat door moderne mobiele browsers wordt ondersteund. Zware foto’s zijn te mijden.

Maak grote knoppen aanklikbaar

Maak volledige velden aanklikbaar in plaats van alleen de tekst of de link. Speciale effecten zoals knoppen met schaduwen en afgeronde hoeken kunt u technisch zo integreren dat ze verdwijnen bij oudere browsers zonder dat de knop zijn functie verliest.

Vergeet Google niet

Vergeet niet uw tweede site te laten indexeren door Google. Dewitte: “Door de juiste code in de desktopversie te stoppen, wijst u Google erop dat er ook een mobiele versie van de site bestaat. Zo niet, kijkt de zoekmachine over de mobiele site heen of denkt hij dat uw desktopsite bepaalde informatie dubbel bevat.”

Mobiel light

Wilt u geen mobiele site ontwikkelen, dan kunt u uw bestaande site lichtjes aanpassen zodat die beter te lezen is op mobiele toestellen. Vervang Flash door bijvoorbeeld HTML5, CSS3 of Javascript. U kunt ook beter geen vast, lang beeld bovenaan zetten, zoals een hoofding of banner. Die past zich niet goed aan aan kleinere schermen. Vermijd ten slotte het gebruik van stukken tekst of knoppen die bijvoorbeeld van kleur veranderen of die tekstblokjes laten verschijnen wanneer u er met de muis over schuift. Kies in plaats hiervan voor grote klikknoppen.

Gebruikers krijgen de raad om Google Mobilizer te gebruiken (www.google.com/gwt/n). Deze converter zet elke site om naar een mobielvriendelijke versie. Geef een site in het zoekvenster in en vink aan ‘Zonder afbeeldingen’.

Hans Hermans