Maak je website geschikt voor mobiele apparaten

Wist je dat meer dan de helft van de bezoekers je website kunnen bekijken op hun telefoon of tablet? In deze handleiding lees je de belangrijkste stappen om een probleemloze gebruikerservaring te bieden voor alle schermformaten, van het selecteren van een responsief thema tot het verfijnen van je content.

Het kiezen van een mobielvriendelijk thema op een WordPress-site is cruciaal voor het bieden van een naadloze en geoptimaliseerde gebruikerservaring op verschillende apparaten, het verbeteren van de toegankelijkheid en het positief beïnvloeden van de vermelding in zoekmachines.

Alle thema’ s die op WordPress.com worden aangeboden, zijn mobielvriendelijk. Dit betekent dat ze ontworpen zijn om er geweldig uit te zien op zowel mobiele browsers als desktops.

Als je een thema van derdengebruikt, zorg er dan voor dat het wordt geadverteerd als mobielvriendelijk en dat het er goed uitziet wanneer je het op je mobiele apparaten opent. Controleer de documentatie van het thema voor aanpassingsopties of instellingen om je controle te geven over de weergave van het thema op mobiele apparaten.

Nadat je een mobielvriendelijk thema hebt gekozen, zal je waarschijnlijk wijzigingen aanbrengen aan de standaard content om deze aan je voorkeuren aan te passen. Wanneer je je site bewerkt in de WordPress-editor, is het belangrijk om ervoor te zorgen dat deze er op alle apparaten goed uitziet.

Er is geen aparte ‘mobiele editor’ in WordPress. Wijzigingen die je aan je site aanbrengt, weerspiegelen zich op zowel mobiele als desktopapparaten. Zolang je site een mobielvriendelijk thema gebruikt, past de content zich op alle schermen aan, groot en klein. Dit wordt ook wel ‘responsiviteit’ genoemd.

Je kan op het Voorbeeld-pictogram in de rechterbovenhoek van de editor klikken om te zien hoe je site eruitziet voor een bezoeker. Selecteer Mobiel of Tablet om een benadering van de inhoud in de editor te bekijken:

We zeggen hier benadering omdat veel elementen van de editor weergave worden geïnformeerd door het thema van de site. De stijlen van het thema worden niet weergegeven in de editor; ze worden alleen weergegeven door de pagina in een nieuw tabblad te bekijken of je site te bekijken in de browser van je apparaat. Om je content te bekijken waarbij de stijlen van het thema zijn toegepast, klik je op de optie ‘Voorbeeld in nieuw tabblad‘.

Nadat je op de optie ‘Voorbeeld in nieuw tabblad’ hebt geklikt, kun je de mobiele versie bekijken met de inspectortool in je browser. Om de Inspecteren-modus van je browser te gebruiken om een voorbeeld te bekijken van hoe een pagina of bericht eruitziet in de mobiele weergave:

1. Klik in de rechterbovenhoek van de WordPress-editor op het pictogram Voorbeeld.
2. Selecteer de optie ‘Voorbeeld in nieuw tabblad’.
3. Klik met de rechtermuisknop op de voorbeeldpagina en klik op ‘Inspecteren‘ (Chrome, Firefox, Edge) of ‘Element inspecteren‘ (Safari).
4. Terwijl je in de Inspecteren-modus bent, klik op het mobiele pictogram om het voorbeeld te wijzigen naar de mobiele weergave.

Nadat je je wijzigingen hebt gepubliceerd, kan het nuttig zijn om je site op je telefoon of tablet te openen om deze te bekijken zoals een openbare bezoeker dat zou doen. Zo kan je controleren of de site eruitziet zoals je dat wilt.

Hier zijn een paar tips voor het maximaliseren van de reactiesnelheid van het ontwerp van je site, zodat de content goed wordt weergegeven op mobiele apparaten, tablets en desktops.

Als een afbeelding tekst bevat die is vormgegeven in de afbeelding zelf, kan die tekst op kleinere schermen worden afgesneden, zoals hier:

Dit komt doordat tekst in een afbeelding niet responsief is.

Met behulp van de WordPress-editorkun je tekst over een afbeelding schrijven. Tekst die je op deze manier toevoegt aan een afbeelding, is responsief. In de video hieronder maken we dezelfde afbeelding als hierboven met behulp van het Omslagafbeeldingsblok, wat de responsiviteit op kleinere schermen demonstreert:

Om de responsiviteit van lettertypen op je pagina te optimaliseren, gebruik je em- of rem-eenheden in plaats van pixels (px). Het gebruik van pixels voor lettertypegrootte is in wezen harde codes die de grootte van het specifieke lettertype op de pagina weergeven. Dit betekent dat het lettertype altijd in die exacte grootte wordt weergegeven, ongeacht de schermgrootte. De waarden em en rem daarentegen zijn relatieve grootte-eenheden die groter of kleiner worden weergegeven afhankelijk van de beschikbare ruimte op het scherm van de lezer.

In plaats van een tekstmenu te gebruiken voor je mobiele lay-out, kun je het Navigatieblok van je site aanpassen om het mobiele menu weer te geven. Dit heet een overlay-menu (ook wel het ‘hamburgermenu’ of ‘kebab-menu’ genoemd). Deze functie kan je helpen om de koptekst compacter te maken en het menu toegankelijker te maken om deze te bekijken en gebruiken op mobiele apparaten.

Sommige blokken bevatten een optie voor het ‘stapelen op mobiel’ om ruimte beter te gebruiken op kleinere schermen. Als content naast elkaar wordt weergegeven op een desktopscherm, wordt deze op kleinere schermen naar onder verplaatst, zodat mobiele gebruikers deze makkelijker kunnen lezen.

De instelling ‘Stapelen op mobiel’ is beschikbaar in de volgende blokken:

• Kolommenblok
• Media- & Tekstblok
• Instagram-berichten weergeven

Knoppen en menu’s zijn gemakkelijker leesbaar op kleinere apparaten doordat ze op meerdere regels kunnen worden geplaatst.

De optie ‘Sta toe om naar meerdere regels te laten lopen’ is beschikbaar in de lay-out-instellingen van de volgende blokken:

• Knoppenblok
• Deelknoppenblok
• Navigatieblok
• Pictogrammen van Social Media-blok
• Reactiesblok
• Rij- en Gestapelde blokken

AMP (Accelerated Mobile Pages) is een open-source framework van derden dat het mogelijk maakt om websites te maken die bijna direct laden op mobiele apparaten, waardoor bezoekers van je site een snelle browse-ervaring krijgen. Om AMP aan je site toe te voegen, kun je de AMP-plugininstalleren. Voor sites van WordPress.com met plugins die voor 13 juni 2022 zijn aangemaakt, is de AMP-plugin standaard geïnstalleerd.

Onthoud dat het gebruik van AMP veel functionaliteit op je site verwijdert (lay-out, veel functies) voor mobiele bezoekers om de site snel te laten laden. Je kan dit alleen gebruiken als je thema is gemaakt met AMP in gedachten. Alle thema’s op WordPress.com zijn al mobielvriendelijk, dus AMP is niet vereist om een geoptimaliseerde ervaring voor mobiele apparaten te bieden.

Als je site weergaveproblemen ondervindt en je AMP hebt geïnstalleerd, raden we je aan de AMP-plugin te deactiveren om te kijken of dit de prestaties van je site verbetert. Als je een optie ‘Mobiele versie afsluiten’ op je website ziet die je volledig wilt verwijderen, deactiveer dan ook de AMP-plugin.

Als je site AMP al een tijdje gebruikt, houd er dan rekening mee dat Google de resultaten niet onmiddellijk bijwerkt en dat AMP-pagina’s nog een tijdje worden weergeven nadat je deze hebt gedeactiveerd. Het is wellicht handig om pagina-omleidingen in te stellen na het uitschakelen van AMP. Zoekmachines indexeren de URL’s van de AMP-pagina en het kan even duren voordat ze die URL’s uit hun lijst hebben verwijderd. Dit betekent dat sommige mobiele bezoekers naar een 404-foutpagina worden doorgestuurd.

Er zijn verschillende populaire en gratis omleidingsplugins om uit te kiezen. Je stelt een 301 Redirect in en hebt waarschijnlijk een Regex-expressie nodig die lijkt op /(.*)\/amp. We raden je aan om te controleren of je de juiste doorverwijzing hebt ingesteld en de instructiehandleiding van de omleidingsplugin te raadplegen.