Het bouwen van een mobiele website.

Net toen het me helemaal niet interessant leek om mobiele sites te bouwen kreeg ik een opdracht binnen hiervoor. Een klant wil dat hun site geoptimaliseerd is voor mobiel gebruik. Dat betekend lichter, rekening houden met beperkte ruimte, JavaScript verwijderen en plaatjes beter uitserveren.

Detectie van het platform en zijn mogelijkheden

Om het wiel niet een tweede keer uit te vinden gebruiken wij WURFL.  Dit is een grote verzameling van XML bestanden waarin alle mogelijkheden per telefoon zijn beschreven. Door de detectie van de user-agent en dus de telefoon kan ik met behulp van WURFL alle gegevens er bij vinden zoals resolutie, JavaScipt ondersteuning, etc.

Indelen van categorieën telefoons

Met tweakers.net als voorbeeld hebben we apparaten onderverdeeld in verschillende classen. We hebben ook dezelfde classen gebruikt als Tweakers welke staan beschreven op de ‘device detect‘ pagina’. De onderscheid tussen de versie A tot en met F ligt hem vooral in resolutie en JavaScript support.

Omgaan met resolutie

Net nu we eindelijk er toch vanuit kunnen gaan dat een standaard beeldscherm minimaal 1024 breed is (de 800 x 600 resolutie-schermen zijn verwaarloosbaar) moete we dus weer rekening gaan houden met lagere resoluties. Het fijne is dat de modernere telefoons wel kunnen zoomen.In ons project gaan we er vanuit dat de meeste telefoons niet hoeven te zoomen. Maar niet alleen de resolutie-verschillen maken het erg, maar ook de verschillende verhoudingen.

Om het ons niet te moeilijk te maken testen we met de meest voorkomende resoluties:

• 128 x 160 pixels
• 176 x 220 pixels
• 240 x 320 pixels
• 320 x 480 pixels

De meeste smartphones (waarbij IPhone een grote speler is) hebben de laatst genoemde resolutie, iets  wat ons heeft laten kiezen voor een breedte van 310px.

Het I-phone zoom probleem

De eerste mobiele versie was al vrij snel een feit, maar op de IPhone hadden we een gek probleem. De Iphone lijkt alles te schalen. Eerst dacht ik een fout te maken meteen en veel te breed element er in, maar naar een paar test werdt al vrij snel duidelijk dat Iphone (mijn zijn resolutie van 320px) maar al te graag 1024 wilt laten zien. Standaard toont hij dus altijd alles kleiner. Om dit op te lossen kan de volgende meta-tag worden gebruikt:

<meta¬†name=”viewport”¬†content=”width=device-width;¬†initial-scale=1.0;¬†maximum-scale=1.0;”>

Een enorm simpele oplossing dus. Hiermee vertel je de browser van de Iphone dat de initiele schaal 1 is (dus 100%) en dat de maximale schaal ook 1 is. Zo kan er wel niet meer ingezomd worden. Door de maximale schaal te vergroten kan er wel worden gezoomd (wat weer fijner is voor de mensen die het niet goed kunnen lezen).

Roteren naar “landscape” en terug

De volgende stap is om de website bij een landscape positie de bredere ruimte te laten gebruiken. Hiervoor kunnen we javascript gebruiken. Op het moemnt dat de orientatie veranderd moet er een actie komen die het geheel kleiner of juist groter maakt. Dit is te realiseren met de event-handler “onorientationchange”:

<body¬†onorientationchange=”updateOrientation();”>

Related articles by Zemanta

• MIX10: Designing and Developing for the Rich Mobile Web (lukew.com)
• Mobile Development with Apache MyFaces Trinidad (nofluffjuststuff.com)
• Designing for the mobile web (sitepoint.com)
• The iPad Web Design & Development Toolbox (iphone.appstorm.net)