Een mobiele website ontwerpen

Voor mijn afstudeeropdracht voor m’n opleiding Communication & Multimedia Design ben ik al sinds enige tijd in de weer met een websiteontwerp voor mobiele telefoons. Internet op mobiele telefoons wordt namelijk steeds groteren groeit door met zo’n 30% a 40% per jaar. Tevens was 25% van alle verkochte mobiele telefoons over 2009 een smartphone wat ervoor heeft gezorgt dat 40% van de Nederlandse samenleving nu beschikbaarheid heeft over mobiel internet.

Sommige mensen beweren dat mobiel internet binnen vijf jaar populairder is dan het normale internet. Steve Jobs gelooft dat apparaten als de iPad op den duur de PC zullen vervangen.

Waarom een mobiele website?

Voor een bedrijf heeft een mobiele website erg veel voordeel. Zo zit het bedrijf als het ware in de klant zijn/haar broekzak. Hiermee worden meer potentiële klanten bereikt en zo dus de doelgroep vergroot. Het desbetreffende bedrijf wordt bereikbaarder. Even een adres, routeplanning, telefoonnummer of afspraak maken? Zo gepiept met de gegevens van de mobiele website.

Een mobiele website, hoe?

Het ontwerpen voor een mobiele telefoon gaat anders in z’n werk als bij een normale website.

Momenteel ben ik voor mijn opdracht bezig met de conversie van de website www.buurtleven.nl.

Punten waar op moet worden gelet bij een webdesign voor de iPhone

De gebruiker

Tussen het uiteindelijke gebruik van een normale website en een mobiele website zit een wereld van verschil. Een mobiele gebruiker kan zich in letterlijk in iedere omgeving bevinden waar het gebruik van een mobiele telefoon is toegestaan zoals de trein, een bushalte of de supermarkt.

Een desktopgebruiker zit meestal op een statische plek zoals het werk, achter een bureau of misschien in bed of op de bank met een laptop.

Verder zijn de invoermogelijkheden heel verschillend. Bij een normale pc zijn dit gewoonlijk een toetsenbord en een muis maar een mobiele gebruiker moet het doen met een touchscreen, een stylus of misschien in low-end gevallen nog een fysiek toetsenboard. Hierdoor is het verstandig om de invoermogelijkheden voor de gebruiker te beperken. Ik had deze blogpost toch liever ook niet op mijn ipod Touch zitten tikken.

Niet alle content kan 1 op 1 worden overgezet

Een iPhone heeft namelijk maar een schermresolutie van 320 x 480 (waarvan nog een aantal pixels worden afgesnoept

door de navigatieknoppen). Ook al kán de iPhone wel complete desktoppagina’s met hoge resoluties weergegeven, is het verstandig om de website te optimaliseren op een kleiner formaat voor mobiele telefoons. Het laden van de normale website van buurtleven duurt namelijk maarliefst 30 seconden terwijl een mobiel geoptimaliseerde word getoont binnen 1 á 2 sec.

BL_itouch

Buurtleven.nl op een ipod Touch

Grote plaatjes moeten dus worden verkleint voor de mobiele site en videos zijn mogelijk maar alleen als ze embedded en beschikbaar zijn via Youtube.

Dit alles zorgt er tevens voor dat niet alle pagina’s kunnen worden overgezet naar een mobiele versie. Dat betekent dat er goed gekeken moet worden naar welke pagina’s het meest worden bezocht en het best zijn te converteren naar mobiel formaat.

Menu in 1 richting

Het is het best om het menu weer te geven als 1 horizontale of verticale balk die in 1 pagina past zodat de gebruiker niet onnodig hoeft te scrollen. Dit is ook goed terug te zien in de applicatie van bv Hyves.

hyves_app

De Hyves app

Wat je vooral NIET moet doen

De website 1 op 1 overzetten.

De website (laten) maken mij een online website. Er bestaan websites als MobiSiteGalore of Zinadoo waar je (soms na registratie) binnen 5 minuten een website in elkaar kan flansen. Dit is leuk voor beginners of hobbyisten maar de uiteindelijke kwaliteit is echt beneden maats. Als je een professionele uitstraling wilt is het verstandiger om naar een erkende webdesigner te stappen. Dit kost echter wel beduidend meer maar is in principe een goede investering.

Flash gebruiken. Flash word weinig tot helemaal niet ondersteund door mobiele browsers.

Aanvullende bronnen:

App of mobiele website

Ontwerpen voor het mobiele web

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*