Wie net als ik websites bouwt, herkent het vast wel: het bouwen doe je niet op een tablet en al helemaal niet op een smartphone. Maar als de site eenmaal in de lucht is, drie keer raden hoe deze bekeken wordt? Precies: in heel veel gevallen op een smartphone. Dat is eigenlijk heel raar, maar gelukkig kunnen up-to-date WordPress templates en thema’s daar heel goed mee omgaan. Toch moet je zelf ook nog aan de bak.

Waarom je een site voor mobiel moet aanpassen

Niet alleen de bezoekers op je site, ook Google is dol op smartphones: de snelheid van de smartphoneversie van een site is leidend voor de ranking in hun zoekresultaten.

Het is dus wel duidelijk waarom je website er ook, of nee, vooral op smartphones goed uit moet zien. Je moet daarom een responsive website maken. Responsive betekent dat de lay-out van de site zich aanpast aan het scherm waarop je deze bekijkt.

Maar als moderne WordPress templates en thema’s al geschikt zijn voor mobiel, moet je je er dan nog wel druk om maken? Het antwoord is: ja. WordPress bedenkt zelf hoe hij je site aanpast voor een klein scherm. Maar dat is niet altijd de beste manier. Je moet daarom zelf nog controleren of dat wel mooi gedaan is en of alles op een klein scherm te lezen en te gebruiken is.

Check het zelf

Terwijl je dit aan het lezen bent zit je natuurlijk al op je smartphone je eigen site of die van een klant te bekijken. Maar dit kun je ook op een desktop controleren. Er zijn verschillende responsive website checkers: o.a. de Mobielvriendelijke test van Google of http://responsivetesttool.com/.

Ook voor tablets

Wat ik hier schrijf voor smartphones, geldt natuurlijk ook voor tablets. Maar omdat de schermen van tablets nog redelijk groot zijn, is het probleem daar net wat minder. Daarom heb ik het in deze blog verder alleen over smartphones.

7 Veel voorkomende problemen met websites als je ze bekijkt op een smartphone

Ik vertel je niet alleen wat de problemen zijn, ik geef je ook tips hoe je dit op kunt lossen. Houd je site ernaast en pak, voor zover  nodig, alle problemen één voor één aan.

Na het lezen van deze blogpost heb jij ook een website die geschikt is voor mobiel.

1. Je hebt een loep nodig om de tekst te kunnen lezen

Het scherm van een smartphone is nou eenmaal een stuk kleiner dan dat van een desktop of laptop. Dus is het logisch dat alles er kleiner uitziet. De kleine lettertjes worden namelijk nóg kleiner dan ze al waren.

⇒ Moeten die kleine lettertjes ook echt op een smartphone getoond worden? Of kunnen ze een normale fontsize krijgen?

2. Er staat een enorme lap tekst

Je hebt dat vast ook weleens met e-mails: op een telefoon denk je ‘wow, wat een lange mail!’. Maar bekijk je ‘em dan later op je computer, dan is diezelfde mail helemaal niet zo bijzonder lang.

Op het kleine scherm van een smartphone komt dus alles al snel over als een megatekst.

⇒ Kort je tekst daarom in voor smartphones: beperk je tot het belangrijkste en laat de rest achterwege.

3. Alles staat op elkaar gepropt.

Als je mijn vorige blog over webteksten hebt gelezen, dan herinner je je het vast nog wel: mensen willen online teksten scannen, niet lezen.

⇒ Om te kunnen scannen op mobiel moet je veel witruimte en kopjes in je tekst aanbrengen. Voeg net zo lang witruimte en kopjes toe tot het er overzichtelijk uitziet op een smartphone.

4. Er staan zware filmpjes of sliders op

Wie geen enorme databundel heeft of op een trage wifi surft, zit er niet op te wachten: zware filmpjes en sliders. Het vreet data en maakt de site supertraag. Daar houdt niemand van (alweer: herinner je een eerdere blog van mij over dit onderwerp?).

⇒ Gebruik i.p.v. een filmpje een foto. In plaats van sliders laat je een statische versie zien met blokjes foto’s en tekst.

5. Oops, hoe krijg ik die pop-up weg?

Zit je net lekker op een site te kijken, komt daar zo’n irritante pop-up die je hele scherm in beslag neemt. Geen idee hoe je dat ding weer wegkrijgt want het kruisje zit ergens naast je scherm. Verder kijken is ook niet meer aan de orde want je kunt niks anders meer zien dan die pop-up.

⇒ Gebruik dus geen standaard pop-ups op de smartphoneversie van je website. Er zijn prima alternatieven voor een klein scherm, zoals pop-upbars of een invulveld op je pagina.

6. Ik heb barbievingers nodig voor die minuscule buttons en linkjes

Help, pizza quatro formaggi besteld terwijl je een kaasallergie hebt? En hoe krijg je dan wel die pizza Hawaï in je winkelwagentje? Dat gebeurt er als je buttons en links veel te klein zijn voor normale mensenvingers. Vooral irritant als er een rijtje linkjes of buttons vlakbij elkaar staan.

⇒ Heb jij dit ook op je site? Vraag een paar mensen om eens te testen of het lekker klikt.

7. E-mailadressen en telefoonnummers zijn niet aanklikbaar

Dat is nou echt een gemiste kans als je het mij vraagt: juist op een smartphone kunnen mensen snel mailen of bellen. Maar dan moeten alle linkjes met e-mailadressen en telefoonnummers wél aanklikbaar zijn.

Zo moeilijk is dat niet. In WordPress kun je aan icoontjes en tekst heel makkelijk een link toevoegen.

⇒ Voor e-mailadressen vul je als link in: mailto:info@annemariejanse.nl. Voor telefoonnummers gebruik je: tel://0031-6-54695708.

Bonustip

En dan nog een bonustip.  Speciaal voor als je niet alleen een mooie, maar ook een snelle smartphone-versie van je website wilt:

⇒ Upload van alle afbeeldingen 2 versies in je mediabibliotheek: een kleine voor desktop, en een hele kleine voor mobiel.

Is jouw site geschikt voor mobiel?

Heb je tijdens het lezen van deze blog gecheckt hoe je site er op een smartphone uitziet? En? Was je tevreden met het resultaat? Of is er werk te doen?

Bij Weblish leer je hoe je dit zelf aanpast. Kijk maar eens in de cursusagenda.

Wil je dat iemand het voor je doet? Stuur me dan vandaag nog een mailtje.

Deze blog verscheen voor het eerst op Weblish.nl.