Webdesign voor mobiel – introductie

24 maart 2009 om 14:44

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

image001Kijk 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

image003Een 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:

 

Vooral niet doen:

Een prachtige pauw

image005Het 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:

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

  • http://www.twitter.com/maastrix maastrix

    Wat mij persoonlijk erg stoort is doorlinken naar gewone websites. Ga op een mobiele site niet linken naar een website, filmpje of plaatje dat door de bezoekers van je mobiele site niet bekeken kan worden. Het mobiele web is wijkt wat af van het normale web dus men dient met alle mogelijke beperkingen rekening te houden.

  • http://www.joelcox.nl Joël Cox

    Goed stukje. Overigens is Webkit het hart van meer van 3 kwart (http://marketshare.hitslink.com/mobile-phones.aspx?qprid=59) van alle mobiele gebruikers. Niet alleen in de iPhone en iPod Touch, maar ook een groot deel van de Nokia telefoons en niet te vergeten het Andriod OS!

    Een ander punt vind ik hoe deze mobiele website beschikbaar moet zijn. Moet het op een subdomein zoals veel grote websites het nu doen, of schotelen ze de gebruiker standaard een CSS voor speciaal voor deze mobiele gebruikers? Mijn voorkeur gaat uit naar het eerste.

    Daarnaast ben ik een groot voorstander dat je mobiel ook het ‘hele’ web moet kunnen ervaren, geen afgeslankte versie. Dus stel de gebruiker in ieder geval voor een keuze.

  • Pingback: Web Designer » Blog Archive » Websites en mobiele telefoons()

  • Pingback: Webdesign voor mobiel – introductie « Remco's Musings()

  • Pingback: Mobile web design | multimediaproductie()