Hoe krijg je voorrang in Google?

Mobiel vriendelijke websites krijgen voorrang in zoekresultaten

Met ‘Mobile Friendly’ (ofwel: geschikt voor mobiel gebruik) bedoelen we iets anders dan ‘responsive’. Een responsive website is een website die zich automatisch aanpast aan het formaat van het scherm. Denk hierbij aan alle content die van grootte veranderd naar gelang de afmetingen van het scherm van de gebruiker.

Door een stap verder te gaan maken we een website niet alleen responsive, maar nemen we de volgende punten in acht:

'Dikke vingers'

1. Knopafmetingen

Mobiele schermen zijn klein en mensen hebben vaak last van ‘dikke vingers’. Zaken zoals links en knoppen zouden daarom relatief groter moeten zijn voor mobiele gebruikers.

2. Een juiste lay-out

Bij een responsive website met bijvoorbeeld 3 kolommen is het zo dat ‘standaard’ de kolommen in volgorde onder elkaar komen op een mobiel scherm. Iemand op een smartphone wil niet eerst door overbodige afbeeldingen scrollen. Mensen op een mobile device willen in de regel eerst informatie en dan de rest. In ons voorbeeld van een Mobile Friendly ontwerp (afbeelding 1) zien we een desktop website met 3 kolommen; kolom 1: de opt-in aanbieding en advertentie, kolom 2: de informatie, kolom 3: het blogmenu. In de mobiele versie zorgen wij ervoor dat de gebruiker eerst kolom 2 te zien krijgt en dan pas de rest zodat het belangrijkste bovenaan staat. In afbeelding 2 zien we wat er gebeurd als een website wel responsive, maar niet mobile friendly is. De gebruiker krijgt alle informatie gewoon op volgorde met de opt-in aanbieding eerst, dan de SiteGround advertentie en dan pas de gezochte informatie.

Afbeelding 1

Afbeelding 2

Ruimte tussen de regels

Spacing

We houden meer ruimte aan tussen de regels, zodat het makkelijker te lezen is én zodat links makkelijker ‘aan te klikken’ zijn.

‘Mobile friendly’ webdesign door Designer Dragonfly

Mobiel vriendelijke website laten maken

Verbeterde zichtbaarheid voor achtergrondafbeeldingen en tekst

Achtergrondafbeeldingen werken sfeerverhogend en zijn een mooie ‘eyecatcher’. Echter, omdat een mobiel scherm veel kleiner is, kan het zijn dat de tekst dan voor een donker gedeelte van de afbeelding komt waardoor deze onleesbaar wordt. In ons voorbeeld van een Mobile Friendly ontwerp zien we dat in de desktopversie de tekst donker is op een lichte achtergrond, terwijl we in de mobiele versie zien dat de tekst voor het donkere gedeelte van de afbeelding komt. Door hier rekening mee te houden in ons ontwerp zien we dat op de mobiele versie voor smartphone en tablet, de achtergrond donkerder is en de tekst licht, terwijl op de desktopversie de tekst dus juist donker is tegen een licht gedeelte van de achtergrond. Een andere optie is om op de mobiele versie de afbeelding weg te laten en alleen een goede achtergrondkleur te gebruiken. De tekst in de afbeelding zou niet of slecht leesbaar zijn wanneer we niet een mobile friendly versie zouden hebben ontworpen.