Webdesign voor mobiel – introductie
Ook gastschrijver worden? Meld je dan nu aan!
Je komt er niet meer onder uit. Iedereen heeft het er over. Mobiel is hot. Het jaar 2009 staat in het teken van de mobiele telefoon, en dan vooral die mobiele telefoons die het internet op kunnen. Mobiele websites voor mobiel internet. Mobiele marketingcampagnes voor de mobiele mens. Maar wat houdt dit nu eigenlijk in, mobiele websites? Als mensen mobiel internet gebruiken bezoeken ze toch gewoon de reguliere websites die we al ontwikkeld hebben? Dit is inderdaad best mogelijk. De vraag is of je ze dit wel echt aan wil doen.
De mobiele telefoon als een apparaat om het internet mee te bezoeken is slechts in beperkte mate vergelijkbaar met de computer. Het internet dat ze benaderen is hetzelfde. De manier waarop het internet wordt gebruikt en weergegeven is echter compleet anders.
Resolutie
Kijk eerst maar eens naar het beeldscherm. De computer heeft een groot scherm, vaak meer dan 15 inch diagonaal, en de schermresoluties zijn groot. Hierdoor wordt er voor webdesign vaak uitgegaan van een schermresolutie van 1024 bij 768 pixels. Door binnen deze grens te blijven, is de website op vrijwel elk computerscherm goed te bekijken. Het beeldscherm van een mobiele telefoon biedt slechts een fractie van de ruimte die we gewend zijn. Slechts een paar inch in de diagonaal, en een schermresolutie die uiteen kan lopen van 128 bij 128 pixels, tot 480 bij 800 pixels, met een hele reeks aan resoluties hiertussen. Ook zijn de beeldschermen van mobiele telefoons over het algemeen verticaal georiënteerd, waar we van de computer gewend zijn dat deze horizontaal is.
Besturing
Een mobiele telefoon heeft geen muis. En meestal ook geen QWERTY toetsenbord er aan hangen. Dit maakt navigeren door een website al een stuk minder makkelijk, en lange stukken tekst invoeren wordt er ook niet leuker op. De meeste mobiele telefoons maken gebruik van vier richtingstoetsen om door een website heen te scrollen. Wanneer je dan zowel horizontaal als verticaal door een website moet scrollen, raak je het overzicht al snel kwijt. De opkomst van touchscreens bij mobiele telefoons is een stap in de goede richting voor mobiele websites. Navigeren is hiermee een stuk makkelijker. Maar ondanks dat er steeds meer mobiele telefoons met een touchscreen zijn, kunnen we de toestellen met enkel richtingstoetsen niet vergeten.
Snelheid
Nederland kent een groot aantal breedbandverbindingen als het gaat om internet. Hierdoor kan bijna iedereen in Nederland gebruik maken van een snelle verbinding. Prachtige, grote en uitgebreide websites bekijken is hierdoor een kwestie van seconden. Mobiel internet biedt deze snelheid nog niet. Er moet dus goed rekening gehouden worden met de bestandsgrootte van de website: je wilt immers niet dat bezoekers een minuut wachten op het laden van de website, en er vervolgens nog niks mee kunnen omdat deze niet goed te bekijken is op hun kleine scherm.
Webstandaarden
Internetbrowsers zoals Mozilla Firefox, Internet Explorer en Safari kunnen veel verschillende vormen van HTML, CSS, scripts en Rich Media laten zien. Deze zijn al zo ver ontwikkeld dat de mogelijkheden voor design erg uitgebreid zijn. De meeste mobiele internetbrowsers zijn nog niet zo ver. Zo hoef je nog niet eens na te denken over het gebruiken van Flash in een website als je wilt dat mensen deze op hun mobieltje bekijken. De ondersteuning hiervoor is slechts beperkt, maar gelukkig lijkt er wel verbetering in te komen. Zo ook met de ondersteuning van scripts en cookies. De meeste mobiele telefoons bieden nu ondersteuning voor cookies, maar de ondersteuning van Javascript is nog erg onduidelijk. Zo biedt de ene mobiele browser geen ondersteuning voor scripts, en hanteert de Apple iPhone een maximale verwerkingstijd van 5 seconden voor scripts, en wordt niet alle functionaliteit hiervan ondersteund. Ook is het gebruik maken van XHTML en CSS een gevoelig punt. Niet elke variant van XHTML is goed voor de mobiele telefoon, en ook worden niet alle onderdelen van CSS op de juiste manier weergegeven.
Do’s en Don’ts
Het is inmiddels wel duidelijk dat er veel punten zijn waarop gelet moet worden bij mobiel webdesign. Maar wat moet je nou wel doen, en wat moet je laten?
Vooral wel doen:
- Optimaliseren voor verschillende toestellen: een website voor een resolutie van 128 bij 128 pixels ziet er echt niet goed meer uit op een scherm van 240 bij 320 pixels. Gebruik bijvoorbeeld schaalbare afbeeldingen en vlakken.
- Gebruik maken van kleuren en foto’s: dat de website op een mobiele telefoon bekeken wordt, betekent niet dat we alleen maar een wit vlak met zwarte tekst willen zien.
- Hou de navigatie makkelijk: je wilt immers ook met je richtingstoetsen snel naar de juiste pagina toe.
- XHTML Basic 1.0 of MP 1.0 gebruiken: deze worden door alle populaire mobiele toestellen van dit moment ondersteund, en bieden dus een goede fundering voor de website.
- CSS testen op verschillende toestellen: niet elke telefoon laat alle verschillende soorten borders zien, en ook margins, paddings en float zien er net wat anders uit op zo’n klein scherm.
- Testen, testen, testen!
Vooral niet doen:
- Flash op de website: de ondersteuning hiervoor is op dit moment nog te beperkt.
- Lettertypes definiëren: de meeste mobiele telefoons hebben slechts een paar lettertypen geïnstalleerd staan, en uitbreiding is niet mogelijk. Mobiele internetbrowsers kiezen standaard voor een lettertype zonder schreef om het makkelijk leesbaar te houden.
- Lettergrootte definiëren in pixels: gebruik liever percentages. Het aantal dpi dat het beeldscherm van een mobiele telefoon heeft kan sterk verschillen.
- Javascript gebruiken: liever niet. Ondersteuning is zeer wisselend.
- PNG: Hou de afbeeldingen liever als JPG of GIF. Niet alle mobieltjes ondersteunen afbeeldingen in PNG formaat.
Een prachtige pauw
Het liefst zouden we zien dat iedereen een Apple iPhone of T-Mobile G1 heeft. Deze toestellen bieden een uitstekende mobiele browser, een schermresolutie van 320 bij 480 pixels, en een touchscreen. Hiermee kunnen de meeste ‘gewone’ websites al goed getoond en gebruikt worden. Helaas zijn er nog veel meer verschillende telefoons, en moeten we daar ook nog rekening mee gaan houden. Maar mobiel webdesign betekent niet dat je alleen maar een kale pagina met tekst kunt weergeven. Juist nu is er zoveel meer mogelijk. Maak gebruik van de mogelijkheden, en onderscheid jezelf van de rest door een mobiele website, die ook onderweg van je scherm spat.
Meer weten over mobiel webdesign? Hier nog een paar nuttige links:
- Mobile Web Best Practices (W3.org)
- Mobile screen size trends
- Mobile Web Design Trends 2009
- Tips to design your site for mobile
- Effective design for multiple screen sizes
Remco Hübner studeert Communicatie & Multimedia Design aan de Hogeschool Rotterdam. Hij is verbonden aan eCommerce-specialist De Nieuwe Zaak te Zwolle, om met zijn afstudeerscriptie de implementatie van mobiele websites in Nederland te laten groeien.
Remco’s LinkedIn: http://www.linkedin.com/pub/5/798/49
Over de auteur
Geen biografie beschikbaar.
(Nog geen stemmen uitgebracht)
Loading ...
Geplaatst op 
Tags: 
