Als er één duidelijke webdesign trend zal zijn in 2010 dan zal het volgens ons de massale opkomst van mobiele websites zijn. Grote spelers zoals Twitter, Google en Facebook hebben al langer dan vandaag een mobiele versie van hun webapplicaties online staan. Nu is het tijd dat de rest van het web mobiel wordt.

Ook wij hebben onlangs een mobiele versie van deze website gelanceerd, inclusief weblog. Alle toestellen met een mobiele browser - gaande van de iPhone over Android tot Windows Mobile - zijn welkom op http://m.goodbytes.be.

Het bouwen van de mobiele website bovenop ons reeds bestaande content management systeem was op zich makkelijker dan verwacht, maar toch vonden we maar weinig nuttige informatie over het ontwikkelen van websites voor mobiele toestellen. Veel zaken moesten we zelf uitzoeken en hier delen we graag onze bevindingen.

We hebben het in dit artikel niet over het bouwen van iPhone Apps, of Android-applicaties, maar wel over het maken van toegankelijke mobiele websites en applicaties die vanuit een browser op elk mobiel toestel bruikbaar zijn.

1 - Kies je mobiele strategie

Native iPhone/Android/Windows Mobile/...-applicaties zorgen voor een meer naadloze gebruikerservaring op het toestel in kwestie, maar het probleem is dat deze apps telkens device of platform specifiek zijn. Je dient dus voor elk platform een andere applicatie te ontwikkelen én te onderhouden, iets wat voor kleine en zelfs grotere ondernemingen onbegonnen werk is. Bovendien sluit je alle andere gebruikers volledig uit omdat Windows Mobile bijvoorbeeld nooit gebruik zal kunnen maken van uw iPhone-applicatie en omgekeerd.

Het geeft meteen één van de mogelijke strategieën weer die je kan volgen wanneer je je eigen webapplicatie of website mobiel ter beschikking wil stellen: een toestelspecifieke versie van je applicatie bouwen. Volgens ons is die strategie vooral nuttig wanneer je gebruik wilt maken van specifieke mogelijkheden van toestellen als de iPhone. Wie bijvoorbeeld de accelerometer van de iPhone wil gebruiken in zijn game of applicatie kan niet anders dan een iPhone-specifieke applicatie gaan schrijven.

Voor de meeste “gewone” webapplicaties en websites zijn deze snufjes gelukkig volledig overbodig en kunnen we onze functionaliteit en informatie beschikbaar maken voor mobiele browsers ongeacht het platform. Als je deze strategie volgt kan je meteen kiezen tussen twee werkwijzen. Ofwel schrijf je gewoon een geoptimaliseerde alternatieve stylesheet voor je bestaande webpagina’s, ofwel bouw je een hele alternatieve website, specifiek gericht op mobiele toestellen. We raden de laatste strategie aan, waarom lees u hieronder.

2 - Sim-pli-fy!

Mobiele toestellen hebben een beperkte schermruimte en resolutie. Bovendien bezoeken mobiele gebruikers uw applicatie vaak met een ander doel dan gewone desktop-users. Mobiele gebruikers willen namelijk vaak snel een specifieke actie uitvoeren of bepaalde informatie terugvinden. Ze zijn niet geïnteresseerd in alle informatie en afbeeldingen die een gewone website of applicatie te bieden heeft.

Daarom raden we iedereen aan om de bestaande webpagina’s of pagina’s van een webapplicatie zodanig te minimaliseren en te vereenvoudigen tot ze enkel nog maar die noodzakelijke informatie bevatten die mobiele users nodig hebben.

Om in eerste instantie te plannen welke informatie je best op je pagina’s plaatst, start je best met mockups. Zo verlies je geen tijd met onnodige code uit te schrijven en bij te sturen wanneer blijkt dat je layout niet optimaal werd ingedeeld voor het mobiele scherm.

3 - Gebruik webstandaarden, ook mobiel

We gebruiken steeds webstandaarden voor onze normale sites en dat dienen we ook of zelfs nog meer te doen voor mobiele websites. Mobiele browsers zijn namelijk even of meer gevoelig voor codefouten. Schrijf daarom je code uit in xHTML strict met valide CSS om problemen te vermijden.

Je mobiele website valideren kan via deze prima tool: http://validator.w3.org/mobile/. Deze validator geeft je bovendien veel tips over het optimaliseren van je code voor mobiele toestellen, gaande van een te grote paginagrootte tot waarschuwingen over verkeerd gebruik van hoogtes en breedtes in je mobiele website.

Vergeet niet een correcte doctype te gebruiken waarmee je aangeeft dat je voor mobiele toestellen aan het werken bent. Zo kunnen niet alleen mobiele browsers prima om met je pagina’s, ook Google Mobile zal je mobiele site herkennen en kunnen indexeren.

Enkele algemene tips om je website en code te optimaliseren voor mobiele toestellen:

• Geef gebruikers altijd de optie om je normale website te bezoeken
• Gebruik zo weinig mogelijk afbeeldingen en grote bestanden
• Zorg voor een aangepaste navigatie, liefst met een grote klikzone
• Zorg dat er maar in één richting gescrold moet worden
• Gebruik geen frames
• Gebruik geen tabellen om layouts vorm te geven
• Zorg voor labels bij alle formulierelementen

4 - Alles is relatief, zeker mobiel webontwerp

Waar we normaal gezien zonder schroom met pixels kunnen werken om onze elementen een breedte en een hoogte te geven, is dat niet zomaar het geval op mobiele toestellen. Nergens is er zo’n wildgroei aan schermresoluties als op de mobiele markt. Maak er daarom een punt van om je lettertypes, breedtes en zelfs hoogtes in te stellen in CSS via een relatieve eenheid zoals em. De mobiele validator tool zal je bovendien steeds waarschuwen wanneer je pixels gebruikt.

Het voordeel van te werken met bijvoorbeeld een 100% breedte voor je mobiele site (in plaats van x-aantal pixels), heeft tot gevolg dat deze altijd het volledige scherm van het toestel zal inpalmen. Op de iPhone bijvoorbeeld zal de site zich automatisch uitrekken wanneer de gebruiker het toestel horizontaal gaat houden, wat de leesbaarheid en bruikbaarheid erg ten goede komt.

5 - m.goodbytes.be

Er zijn verschillende manieren om je mobiele website te hosten of te koppelen aan je bestaande domeinnaam. Enkele jaren geleden nog dacht met dat domeinnamen met .mobi-extensie erg populair zouden worden. Je hebt dan echter twee domeinnamen aan te kopen, wat niet meteen handig is.

Een andere optie was om /mobile achter je domeinnaam te plaatsen. Dat kan, maar de handigste en ondertussen meest ingeburgerde oplossing is om een subdomein “m” aan te maken voor je mobiele site. Zo maken wij gebruik van http://m.goodbytes.be om mobiele gebruikers te bedienen. Dat is niet alleen kort, het is ook een makkelijk te onthouden uitbreiding van je reeds aangekochte domeinnaam.

6 - Mobiele gebruikers detecteren en doorverwijzen

Zodra je klaar bent met het bouwen van je mobiele website, is het wenselijk om mobiele gebruikers rechtstreeks door te verwijzen naar de mobiele site. Het is namelijk erg vervelend om bijvoorbeeld via Google terecht te komen op de normale website wanneer je via je mobieltje surft. Zorg daarom voor detectie van mobiele toestellen via PHP of een andere serverside programmeertaal, want Javascript zal namelijk door de meeste mobiele browsers niet of niet goed ondersteunt worden.

Om gebruikers door te verwijzen kan je de “user-agent” opvragen of gebruik maken van één van de commerciële of gratis scripts op het Internet.

Conclusie

Je verzetten heeft geen zin: het mobiele web is aan een opmars bezig. Maak van in het begin gebruik van best-practices en zorg dat je mobiele gebruikers het naar hun zin hebben. Wellicht zal het aantal mobiele bezoekers op je website (we zorgen voor Google Analytics in ons volgend artikel) nog redelijk beperkt blijven. Het is wel een zekerheid dat dit aantal in de komende maanden en jaren enkel maar zal toenemen. Wees niet bang om een aantal zaken uit te proberen en stuur je mobiele website bij waar nodig!

Heb je zelf geen iPhone dan kan je zeker je vrienden of collega’s je website laten testen. Ook wij beschikken uiteraard niet over alle verschillende toestellen die momenteel op de markt zijn. Hoewel het absoluut geen vervanging is voor een echte iPhone, kan je wel starten met je website te bekijken in deze iPhone simulator!

Meer mobile tips of vragen: shoot below!

Links en extra bronnen

Google Analytics voor mobiele websites
Best practices for mobile web
Mobile web design best practices & tips
Mobiel webdesign inspiratie gallery
10 tips to create a more usable web
8 tips to keep your mobile readers happy
Mobile Web Design: Tips & Techniques