U bevindt zich hier: Home » Blog » Hoe maak je je website geschikt voor mobiel?

Hoe maak je je website geschikt voor mobiel?

04/01/2013

Post image for Hoe maak je je website geschikt voor mobiel?

Je leest overal dat je moet zorgen dat je website geschikt is voor mobiele bezoekers. En als je op straat of in de kroeg eens om je heenkijkt (of gewoon je webstatistieken eens bekijkt), snap je ook waarom dat belangrijk is. Maar hoe je er precies voor moet zorgen dat een tablet- of smartphone-gebruiker goed uit de voeten kan met jouw website, dat wordt er vaak niet bij verteld.

Dit artikel is niet bedoeld om uit te leggen hoe je zelf een site bouwt (ik ga er van uit dat je geen webbouwer bent), maar om je voldoende informatie te geven om een goed gesprek over een mobiele website te hebben met je webbouwer.

Een aparte mobiele website of niet?

De eerste keuze die je moet maken, is of je een aparte mobiele website maakt, of dat je je “gewone” website zodanig opbouwt dat hij ook op een mobiele website goed bruikbaar is. Dat laatste kun je doen met een techniek die responsive design wordt genoemd. Daarover lees je onder aan dit artikel meer.

Beide keuzes hebben voor- en nadelen, wat voor jou de beste aanpak is, hangt af van je bezoekers en van je situatie. Een aparte website bouwen voor mobiele bezoekers lijkt misschien meer werk, maar als je het vergelijkt met het “responsive” maken van je normale website, is het waarschijnlijk zelfs sneller. Aan de andere kant: als je toch een nieuwe website zou laten bouwen, sla je met responsive design misschien makkelijk twee vliegen in één klap.

Het bouwen van een aparte website biedt je in ieder geval deze voordelen:

  • Desktopbezoekers hebben meestal snellere verbindingen dan mobiele bezoekers. Ze houden van mooie grote afbeeldingen en video. Dat zijn precies de dingen die je website te traag maken voor mobiele bezoekers.
  • Op je desktopsite wil je misschien iets doen met “hover” effecten: bijvoorbeeld een informatietekstje dat zichtbaar wordt als je met je muis over een productafbeelding beweegt. Omdat smartphone en tablet gebruikers  een muis gebruiken, werken dat soort effecten daar niet.
  • Klikken met een muis op een groot scherm is veel makkelijker dan met je vinger klikken op een link in een minischermpje. Voor mobiele sites is het handiger om buttons te gebruiken in plaats van tekstlinks, en om daar flink wat witte ruimte omheen te laten. Dat ziet er op je desktop site misschien weer minder mooi uit.
  • Pop-up schermpjes zijn lastig voor mobiele gebruikers, omdat het pop-up scherm het origineel compleet vervangt en het lastig is om van het ene naar het andere venster te switchen. Dus als je dat soort schermen gebruikt op je desktopwebsite, zul je voor mobiele gebruikers toch iets anders moeten verzinnen.
  • En de laatste, en misschien wel belangrijkste reden: mobiele gebruikers, vooral smartphone-gebruikers, bezoeken jouw website vaak onder heel andere omstandigheden dan desktop gebruikers, en willen vaak ook andere dingen doen op je website. Bijvoorbeeld: even snel de routebeschrijving of het telefoonnummer opzoeken. Terwijl ze een functie als “ontwerp je eigen badkamer online” dan liever rustig achter hun pc doen. Je mobiele website heeft dus andere content nodig, of de content krijgt in ieder geval een ander belang, dan op een desktop site.

Hoe stuur je bezoekers naar een mobiele website?

Als je besloten hebt om een aparte mobiele website te maken, en je hebt die bijvoorbeeld op http://mobiel.mijnsite.nl geplaatst, hoe zorg je er dan voor dat mobiele gebruikers die dan ook weten te vinden?

Je hoeft mobiele gebruikers geen aparte url voor te schotelen. Je kunt mobiele gebruikers die naar je normale website surfen, automatisch laten redirecten naar de mobiele site. Dit doe je door in de html-code van je normale website instructies op te nemen, die aangeven welke soort gebruikers welke website te zien krijgen.

Het lastige is natuurlijk, dat er inmiddels honderden verschillende smartphones en tablets zijn. Dus als je voor al die apparaten een aparte redirect zou moeten maken, werd dat een lange lijst, die ook nog eens voortdurend zou veranderen. Gelukkig is dat niet nodig. Je kunt bijvoorbeeld redirects aanmaken die:

  • alle bezoekers met een scherm van minder dan 600 pixels breed automatisch naar de mobiele website sturen
  • alle bezoekers met als besturingssysteem Android (Google) naar de mobiele website sturen
  • alle bezoekers met een bepaald soort apparaat (iPhone, iPad, Winphone, Blackberry) naar de mobiele website sturen.

Een combinatie van deze drie factoren is uitgelegd. Een duidelijke uitleg met voorbeelden vind je op Tech Me Out.

Maar hoe bouw ik dan zo’n mobiele website?

Dat proces is eigenlijk hetzelfde als het bouwen van een gewone website. Je moet eerst nadenken over je doelstellingen, over je bezoekers en wat zij willen, en dat bepaalt de functionaliteit die nodig is en de structuur van de website.

Bij het ontwerpen van de website moet je rekening houden met de beperkingen van mobiele gebruikers, dus houd het snel en eenvoudig. Geen zware graphics, geen uitklapmenu’s met zes lagen, geen kleine friemellinkjes die je niet met je vingers kunt bedienen en geen lay-out in verschillende kolommen – want dat wordt de klein en daardoor slecht leesbaar op een telefoonscherm.

Qua techniek kun je je het beste bedienen van xhtml of html5, en css3: dat zijn moderne protocollen die bijna alle mobiele apparaten ondersteunen. Vermijd het gebruik van tabellen om elementen op je pagina’s te positioneren. En natuurlijk vermijd je het gebruik van Flash!

One site fits all: responsive design

Als je liever niet twee verschillende websites wilt bouwen en onderhouden, dan kun je er ook voor kiezen om één website te maken die geschikt is voor alle apparaten door middel van responsive design. Dat is een designaanpak waardoor een website een optimale gebruikerservaring biedt ongeacht het apparaat waarop de site bekeken wordt. Dat betekent dat de site makkelijk is om te lezen, en gebruikers zo min mogelijk hoeven te scrollen en te resizen.

Dat wordt bereikt door in het stylesheet van de website (css), het document met alle opmaakinstructies voor de site, verschillende instructies op te nemen voor verschillende schermgrootten. Zo worden bijvoorbeeld kolombreedtes en het formaat van afbeeldingen aangegeven in percentages van de schermbreedte of –hoogte, in plaats van een vast aantal pixels. Zo zie je op kleinere schermpjes automatisch ook kleinere afbeeldingen.

Niet alle webdesigners hebben al ervaring met responsive design. Informeer dus goed en vraag naar voorbeelden als je overweegt om je nieuwe website op deze manier te laten bouwen. Gebruik je WordPress als content management systeem, dan kun je ook gebruik maken van standaard gratis of betaalde responsive design templates of een plug-in als WPtouch.

Een aantal Nederlandse voorbeelden van responsive design websites vind je op de website van Webdesigner Magazine.

Is mijn site al geschikt voor mobiel?

De beste manier om te controleren of je site nu al lekker werkt op mobiele apparaten, is door hem te gebruiken met verschillende smartphones en tablets. Bekijk in ieder geval een iPad, iPhone en een Android telefoon, en eventueel een Blackberry. Is de site makkelijk te bedienen? Werken alle menu’s zoals ze horen? Kun je een bestelling plaatsen?

Als je toevallig geen 5 verschillende apparaten in huis hebt, is er ook een aantal websites waar je een snelle check kunt doen:

  • Responsive Web Design Testing Tool: check of een site met responsive design is gebouwd of niet
  • Mobile Grader geeft aan hoe mobielvriendelijk je website is
  • GoMo van Google biedt ook een tool waarmee je kunt zien hoe jouw website er op verschillende mobiele apparaten uitziet.
  • W3C MobileOK Checker controleert of je website aan de mobiele standaarden van het World Wide Web consortium voldoet.

En deze site dan?

Nope, deze site is niet geschikt voor mobiel. En ik heb ook nog geen aparte mobiele versie gebouwd of laten bouwen! Projectje voor dit jaar… ik schrijf een update voor dit artikelen om te zijner tijd mijn ervaringen met de verbouwing te delen. Heb je in de tussentijd zelf tips of ervaringen met het maken van een mobiele site die je wilt delen, plaats dan hieronder een reactie!

 

Vorig artikel:

Volgend artikel:

{ 6 reacties… lees ze hieronder of geef je eigen reactie }

Joris Spuesens januari 4, 2013 om 16:19

Weer een helder en duidelijk artikel. Blijf zo doorgaan en succes met je goede voornemens. En natuurlijk ook nog de beste wensen voor 2013!

Beantwoorden

annemieke januari 4, 2013 om 16:54

Dank je wel Joris. Jij ook een gezond en geweldig 2013 gewenst!

Beantwoorden

Mark Visser maart 13, 2013 om 20:13

Erg duidelijk en herkenbaar verhaal! Heb zelf een tijd geleden een zelfde beslissing moeten nemen. Wij hebben gekozen voor een mobiele website die op iedere mobiele apparaat goed weergegeven kan worden met behulp van http://www.123-web.nl/.

Beantwoorden

annemieke maart 13, 2013 om 21:29

En da’s ook niet zo gek he Mark, als je bij 123-web werkt… Beetje doorzichtige reactie, hoor!

Beantwoorden

Philip februari 25, 2015 om 22:21

Helder en duidelijkheid en efficient, ga zo door.

Beantwoorden

Lars maart 3, 2015 om 16:28

Leuk artikel, misschien tijd voor een update na 2 jaar?
Er zijn al weer heel wat dingen veranderd en we weten ondertussen meer over het
gedrag van mensen op een mobieltje waardoor responsive tot lagere conversies gaat
leiden t.o.v. een echte mobiele website.

Beantwoorden

Geef een reactie