Het is alweer een tijdje geleden dat Google zijn mobile-first index begon uit te rollen. Toen dit voor het eerst werd aangekondigd, haastten SEO-specialisten zich om ervoor te zorgen dat hun site in overeenstemming was met Google’s Core Web Vitals en richtlijnen voor mobiele ontwikkeling.
Optimaliseren voor het mobiele web is een heel uitgebreid onderdeel binnen SEO, waarvoor kennis op specialistenniveau en eigen inzet nodig is om succesvol te zijn. Zozeer zelfs, dat veel industrieën een volledige, kwalitatieve implementatie van hun website op mobiel vereisen. En niet iedereen voldoet daaraan.
Vaak slagen sites er niet in om hun website mobielvriendelijk te maken. Het is duidelijk dat het belangrijk is om een website te hebben die mobiel toegankelijk is. Zeker omdat een groot deel van de samenleving via zijn mobiele telefoon websites bezoekt.
Hieronder vind je cijfers op het gebied van mobiel gebruik in 2021.
- 99,2% van de Nederlanders had in 2021 een mobiele telefoon.
- 95,7% daarvan had in 2021 een smartphone en ruim 90% gebruikt deze voor internet.
- 96% maakte in 2021 gebruik van een of meerdere social media kanalen.
- 40% van de Nederlanders doet in 2021 ongeveer maandelijks een aankoop via e-commerce.
- In 2020 waren er wereldwijd meer dan 3,6 miljard gebruikers die een smartphone gebruikten. In 2023 zullen dat er 4,3 miljard zijn.
Om te profiteren van de best mogelijke online aanwezigheid, moet je optimaliseren voor veel verschillende soorten apparaten en schermresoluties. Dus niet alleen voor een laptop en pc. Om je website te optimaliseren voor mobiele telefoons, kun je de onderstaande tips gebruiken. Deze tips creëren ook mogelijkheden om jouw Core Web Vitals-cijfers te verhogen.
Door een responsive design te gebruiken en afbeeldingen te optimaliseren, kun je een kwalitatieve site maken die zoveel mogelijk mensen binnen je doelgroep bereikt.
1. Zorg ervoor dat alle content op elk device hetzelfde is
Het idee achter deze tip is om duplicate content en beschuldigingen van cloaking te voorkomen. Lees meer over Duplicate Content en Cloaking.
Zorg er dus voor de zekerheid altijd voor dat alle content op de desktopversie van je site hetzelfde is als op mobiel. Een van de beste technieken om hiervoor te zorgen is responsive design. Responsive design houdt in dat je een stylesheet maakt die “media queries” gebruikt om ontwerpen automatisch te laten overgaan tussen diverse platforms en apparaten. Als je jouw website zo snel mogelijk wilt maken, overweeg dan om CSS sprites te bekijken om server-side requests te verminderen.
Meer bezoekers en hogere posities door contentoptimalisatie!
2. Content boven de vouw plaatsen
De psychologische voordelen om te willen zien wat je aanbiedt zijn nog niet verdwenen. Dus je moet hier op verschillende mobiele apparaten enigszins rekening mee houden. Het is belangrijk om te onthouden dat in een mobiele omgeving, waar je eindeloos kunt scrollen, tekst nog steeds boven de vouw wordt geplaatst. Het heeft nog steeds de voorkeur om op een mobiel design ten minste een deel van de tekst boven de vouw (in beeld) te hebben staan. Hiermee laat je zien dat er een reden is om te scrollen.
3. Gebruik een ‘top-down’ ontwikkelingsaanpak
Een “top-down” ontwikkelingsaanpak betekent dat je alle mogelijke consequenties van elke beslissing in een ontwerp van begin tot eind in overweging neemt. Je ontwikkelt voor mobile-first, in plaats van desktop-first. Deze ontwikkelingsaanpak is ideaal omdat je geen problemen in het uiteindelijke ontwerp krijgt.
Hier is een voorbeeld: Je maakt een desktop website. Ongeveer op driekwart van het proces besluit je dat je er een mobiele site bij wilt maken. Je maakt de mockup. Maar, na het coderen van de mockup en het doorlopen van de overgangen, loop je tegen een aantal bugs aan. Dit komt omdat de bottom-up benadering niet werkt. Dit is het fenomeen waarbij onvoorziene problemen op het laatste moment opduiken. Waardoor onvoorziene bugs en toename van uren ontstaan die oorspronkelijk niet waren voorzien toen het project werd opgestart. Daarom was het beter geweest als de top-down benadering gebruikt was. Dus eerst het ontwikkelen van een mobiel responsief design en daarna pas de desktop versie ontwikkelen. Hierdoor kan je bugs vermijden.
4. Richt je niet uitsluitend op de mobiele gebruiker
Naarmate het gebruik van mobiel en desktop steeds dichter bij elkaar komt te liggen nemen ook de doelen en wensen van de gebruikers van deze platforms toe.
Wanneer je je richt op wat jouw gebruiker wil bereiken op basis van zijn platform, kan je de bezoeker beter van dienst zijn. Het is van belang dat de bezoeker op zijn gekozen platform zijn doelen op jouw website kan bereiken. Dit kan zijn dat de gebruiker een product koopt of alleen onderzoek doet naar de diensten die je aanbiedt. Het gekozen platform mag hierin geen belemmering zijn.
5. Gebruik responsive design-technieken
Het is niet meer aan te raden om alleen een website te ontwerpen voor uitsluitend mobiele apparaten (dit zijn zogenaamde m-dot websites). Er is geen enkele reden om een dergelijke implementatie te gebruiken in het mobile-first tijdperk. De structuur kan erg rommelig zijn, met meerdere URL’s die problemen met duplicate content veroorzaken als ze niet goed zijn geoptimaliseerd.
Tegenwoordig is de ideale implementatie een responsive design. Deze ontwerpen maken gebruik van zogenaamde media queries om de schermresoluties te definiëren die het ontwerp zal ondersteunen. Elke afzonderlijke resolutie is wat wordt genoemd een “breekpunt” in het ontwerp, of het punt waarop het responsieve ontwerp van de ene resolutie overgaat naar de volgende. Het voordeel van een dergelijke structuur is dat je geen problemen krijgt met duplicate content zoals bij een m-dot implementatie. Ook zal jouw mobiele implementatie de nieuwste technologie zijn.
6. Gebruik code in plaats van afbeeldingen om de sitesnelheid te verhogen
Moet je echt die achtergrond in twee kleuren gebruiken als de 2 pixels brede en 1200 pixels hoge herhalende achtergrond? Als dat niet zo is, en je kunt het in plaats daarvan coderen, is het beter om dit te coderen. Hoewel zoiets kleins geen grote impact op de snelheid van de site zal hebben, kunnen optimalisaties wel uitmaken.
De volgende keer dat je een site-audit uitvoert of op een andere manier een website maakt, denk dan: “Heb ik deze afbeelding hier echt nodig of kan ik hem in plaats daarvan gewoon coderen?” Als de afbeelding echt niet nodig is, kan het coderen van het object helpen de snelheid van de site exponentieel te verhogen. Vooral on-site ontwerpen die een overvloed aan afbeeldingen gebruiken.
7. Pas WordPress aan voor mobiel
Er zijn veel plug-ins beschikbaar voor WordPress. Zoveel zelfs, dat sommige zelfs functionaliteit bieden voor een verhoogde mobiele compatibiliteit. De meest nuttige plug-ins voor dit doel zijn Duda Mobile, W3 Total Cache, evenals plug-ins voor het minifiëren van HTML en CSS.
Bronnen: https://www.searchenginejournal.com/mobile-optimization-best-practices, https://thisplaymedia.nl/blog/alle-statistieken-mobiel-gebruik-2021-in-nederland