Als je problemen voor mobiel gebruik niet oplost, kan dat een significante invloed op het verkeer naar je website hebben. Een veelvoorkomend probleem waar Google Search Console vaak voor waarschuwt is de melding “Clickable Elements Too Close Together”, die meestal betekent dat mobiele gebruikers moeilijk op je website kunnen navigeren.
Meer dan 4,32 miljard mensen hebben via hun mobiele apparaat toegang tot het internet. Daarom is het belangrijk om deze foutmelding over klikbare elementen zo snel mogelijk op te lossen. Gelukkig zijn er verschillende manieren om dat te doen, en je website meteen veel gebruiksvriendelijker te maken voor mobiele gebruikers.
In dit artikel zullen we uitleggen welk probleem er achter de melding “Clickable Elements Too Close Together” schuilgaat, uitleggen waarom dit gebeurt, en je drie verschillende manieren laten zien waarmee je de fout kan oplossen. Ook leggen we meteen uit wat de foutmelding “Content wider than screen” is en hoe je die kan oplossen.
Aan de slag!
Wat de foutmelding “Clickable Elements Too Close Together” betekent
Heel kort door de bocht kunnen foutmeldingen over mobiel gebruiksgemak je WordPress website ontoegankelijk maken of op z’n minst heel lastig te gebruiken voor mobiele gebruikers. Je kan het Mobile Usability rapport van Google Search Console gebruiken om je website hierop te testen.
Er zijn zes hoofdcategorieën voor problemen met de mobiele bruikbaarheid die je tegen kan komen, namelijk:
- Uses incompatible plugins, oftewel plugins die niet compatibel zijn
- Viewport not set, oftewel de wijze van toegang is niet ingesteld
- Viewport not set to “device-width” oftewel de wijze van toegang geeft geen informatie over schermbreedte
- Text too small to read, oftewel de tekst is te klein om te lezen
- Content wider than the screen, oftewel de content is breder dan het scherm
- Clickable elements too close together, oftewel de klikbare elementen zitten te dicht op elkaar
Google Search Console zal voor dit rapport alle klikbare elementen van je website testen, dus bijvoorbeeld de knoppen en links. Het doel hiervan is om te controleren dat mobiele gebruikers de elementen op je website makkelijk kunnen gebruiken en aanraken, zonder een toetsenbord of muis te gebruiken.
Wanneer Google Search Console bepaalt dat de aanraakbare elementen moeilijk te gebruiken zijn voor mobiele gebruikers, zal de “Clickable Elements Too Close Together” error in je rapportage verschijnen.
Wanneer je op de foutmelding klikt word je meteen doorgestuurd naar de pagina met details en status. In dat venster kan je meer lezen over het problemen en de problematische pagina’s.
In feite komt de foutmelding over de klikbare elementen erop neer dat de aanraakbare elementen op je WordPress website te klein zijn om makkelijk te kunnen worden gebruikt door mobiele gebruikers.
Maar het kan ook betekenen dat de knoppen op zich groot genoeg zijn, maar dat ze te dicht bij andere elementen staan. Wanneer knoppen, links en andere klikbare elementen heel dicht bij elkaar staan, wordt de kans groot dat gebruikers per ongeluk op het verkeerde element drukken, wat de User Experience (UX), oftewel de gebruikservaring, flink verslechtert.
Alhoewel de waarschuwing over klikbare elementen geclassificeerd wordt als foutmelding voor mobiel gebruik, zorgt het oplossen van de melding er ook voor dat de toegankelijkheid van je website in het algemeen beter wordt. Zo stellen mensen met motorische problemen het bijvoorbeeld zeer op prijs als er wat meer ruimte is tussen interactieve elementen. En mensen met visuele beperkingen zullen het vaak een stuk makkelijker vinden om met grotere, helder omlijnde knoppen en links te werken.
Waarom de melding “Clickable Elements Too Close Together” verschijnt
Er zijn verschillende factoren die bijdragen aan het probleem “Clickable Elements Too Close Together”. Soms komt het bijvoorbeeld omdat Google niet de juiste resources kon opvragen tijdens de weergave. In dat geval kan je ook de mobile-friendly test doen om te zien of je website daar wel voor slaagt. Zo ja, dan kan je de melding waarschijnlijk prima negeren.
Het probleem kan ook ontstaan door het ontwerp van je website. Als je bijvoorbeeld heel veel interactieve elementen op één webpagina probeert te proppen, zul je geheid deze foutmelding over mobiel gebruik zien.
Een andere mogelijke oorzaak voor de error over klikbare elementen is dat er een probleem is met de mobiele responsiveness van het ontwerp van je site. Je website moet flexibel zijn en zich automatisch aanpassen aan het specifieke apparaat van elke bezoeker, om de optimale gebruikservaring te kunnen bieden. Maar als je website niet responsive is, kan dat het gebruik ervan lastiger maken.
Wanneer je website niet responsive is, kunnen onderdelen bijvoorbeeld worden uitgerekt, verkleind of helemaal worden vertekend op bepaalde schermen. Op apparaten met kleinere schermen kunnen klikbare elementen daardoor heel klein of raar worden.
Het vinden van mogelijke en veelvoorkomende oorzaken van dit problemen kunnen je helpen om beter te begrijpen waarom je website fouten ziet over mobiele bruikbaarheid. En hierdoor kan je het probleem gaan oplossen.
Zo los je de foutmelding “Clickable Elements Too Close Together” op (3 manieren)
Wanneer mobiele gebruikers je website niet lekker kunnen gebruiken, waarom zouden ze dan niet gewoon weggaan? Je moet problemen voor mobiele gebruikers dus zo snel mogelijk oplossen. We gaan kijken naar drie manieren waarop je de “Clickable Elements Too Close Together” error kan oplossen en meteen een betere gebruikservaring aan je mobiele gebruikers kan bieden.
1. Gebruik de YellowPencil Visual Customizer WordPress plugin
YellowPencil Visual Customizer is een front-end WordPress plugin waarmee je de CSS- en themabestanden van je website kan bewerken, zonder te hoeven programmeren.
Deze plugin is erg handig voor het aanpassen van de grootte van klikbare elementen, dus bijvoorbeeld het groter maken van je knoppen. Je kan ook meer ruimte inbouwen tussen klikbare elementen door de marges en tussenruimte te veranderen.
Je kan de YellowPencil plugin gratis downloaden of een Regular of Extended licentie kopen. Om de plugin te gebruiken kan je deze eerst installeren en activeren op je WordPress website door naar Plugins > Nieuwe plugin te gaan, daar op de plugin te zoeken, en op Nu installeren > Activeren te klikken.
Vervolgens ga je naar YellowPencil > Customizations. Onder het tabblad Customizations , selecteer je Let’s start!
De interface van de visuele customizer zal nu laden en je vragen om de pagina te selecteren waar je de melding over slechte mobiele bruikbaarheid over kreeg.
Je kan de veranderingen doorvoeren voor de specifieke pagina of meteen voor je hele website. Als je veel pagina’s hebt met de “Clickable Elements Too Close Together” foutmelding, is het verstandig te kiezen voor Global.
Kies wat je het beste uitkomt, en klik op Continue. Je kan nu verder gaan met de webpagina, en elk klikbaar element selecteren. YellowPencil laat je vervolgens een aantal opties zien voor dat element.
In het screenshot hieronder hebben we bijvoorbeeld Padding geselecteerd, en 10 pixels aan alle kanten toegevoegd zodat er wat meer ruimte zit tussen interactieve elementen:
Ook de Size en Position instellingen kunnen je helpen bij het oplossen van de “Clickable Elements Too Close Together” fout. Alhoewel het niet per se nodig is, kan je ook de CSS code direct zelf bewerken, via het linkerpaneel.
Vervolgens kan je naar het volgende element doorgaan dat problemen veroorzaakt en de stappen herhalen. Wanneer je tevreden bent met het resultaat, klik je op de groene Save knop.
2. Zorg ervoor dat alle klikbare elementen tenminste 48 px zijn
Het is simpelweg onmogelijk om één statisch ontwerp te maken dat er altijd goed uitziet en goed werkt op alle apparaten. Daarom kan je beter een flexibele layout maken door je aanraakbare elementen te definiëren op basis van device-independent pixels (dpi). Hierdoor wordt het aantal pixels onafhankelijk van het apparaat ingesteld, en elementen die je daarmee ontwerpt zullen automatisch van grootte veranderen op basis van het scherm van de gebruiker.
Op een mobiel apparaat is de aanbevolen minimale grootte voor een element dat aangeraakt moet kunnen worden 48×48 pixels. Dat komt neer op 9 mm, genoeg voor een gemiddelde vingertop.
Kom je er niet goed achter welke elementen precies het probleem veroorzaken, dan kan je dus naar de dpi van elk element kijken. Zit dit onder de aanbevolen grootte (dus bijvoorbeeld 24px), dan kan je hier 48px van maken.
Je kan de berekende waarde van een klikbaar gebied bekijken via de Chrome DevTools of Firefox Devtools, net welke browser je het liefst gebruikt. We gebruiken hier Chrome als voorbeeld.
Om de dpi waarde van een klikbaar element van je WordPress website te bekijken, open je een Chrome tabblad en ga je naar de pagina waar je de foutmelding “Clickable Elements Too Close Together” voor krijgt. Rechtsklik op de pagina en selecteer Inspect.
Door op Inspect te klikken wordt Chrome DevTools geopend. Bovenaan kan je klikken op het icoon met mobiele apparaten, waardoor je naar het scherm Toggle device toolbar gaat.
In het linker preview venster zie je nu een emulatie van je site op een mobiel apparaat. Als je daar boven hovert en op een klikbaar element klikt, zie je de berekende waarde aan de rechterkant:
Indien nodig kan je de grootte van een element ook direct aanpassen door de CSS te bewerken, de bestanden van je website te bewerken, of via een plugin zoals YellowPencil hierboven.
3. Controleer de input-methode
Wanneeer je de “Clickable Elements Too Close Together” foutmelding probeert op te lossen, kan het handig zijn om de input-methode te controleren. Dit is de methode of eigenlijk het apparaat die de gebruiker toepast om je website te zien en te gebruiken. Zo kan je bijvoorbeeld zien of ze een smartphone, tablet of ander apparaat gebruiken.
Een apparaat op basis van aanraking (zoals bij een smartphone) wordt daarbij gezien als een onnauwkeurige input-methode. Zoals we zojuist zagen kan je CSS gebruiken om de elementen die aangeraakt moeten worden te vergroten of grotere marges in te stellen, zodat het voor gebruikers die met aanraking werken makkelijker wordt om je website te gebruiken.
Maar het bepalen van het gebruikte apparaat werkt helaas niet altijd met 100% nauwkeurigheid. Hierbij wordt namelijk de zogeheten “pointer” gebruikt om te bepalen wat de voornaamste input-methode is, en die kan twee waarden hebben:
- Coarse: oftewel grof, wat betekent dat de primaire input-methode van het gebruikte apparaat aanraking gebruikt.
- Fine: oftewel nauwkeurig, waarbij de input-methode een muis of trackpad is.
Wanneer de primaire input-methode aanraking is, bekijkt die bezoekers je website hoogstwaarschijnlijk via een smartphone of tablet.
Maar dit is zeker geen garantie. Zo kan het ook dat iemand je website bezoekt via een laptop met touchscreen, of hebben ze een Bluetooth apparaat verbonden aan hun smartphone.
Voor wanneer de waarde van de pointer op ‘coarse’ staat, kan je de klikbare elementen aanpassen via CSS. Om dit te doen plaats je de volgende code in het CSS bestand van je WordPress thema, of je gebruikt een plugin zoals YellowPencil:
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Na het aanpassen van de CSS, kan je Google vragen om je website opnieuw te crawlen om te kijken of het probleem nu opgelost is.
Je kan Google ook vragen om alleen specifieke URL’s opnieuw te crawlen, via de URL Inspection Tool. Na het versturen van de URL via deze tool, selecteer je Request Indexing. De Inspection tool zal de URL dan testen op duidelijke problemen bij het indexeren.
Wanneer Google geen problemen meer vindt, komt je pagina in aanmerking voor indexatie.
Wanneer je veel URL’s hebt, kan je ook een sitemap opsturen. Voor elke pagina die je wil laten indexeren verander je de <lastmod> tag naar de laatste aanpassingsdatum. Vervolgens stuur je de sitemap in via de Google sitemap report tool.
In de meeste gevallen zal je sitemap meteen geaccepteerd worden. Maar soms kan het wel even duren totdat Google alle URL’s in de sitemap gecrawld heeft, afhankelijk van de grootte, overig verkeer en activiteit op de site. Er is sowieso geen garantie dat Google elke individuele URL binnen je sitemap zal crawlen.
Wat betekent de “Content Wider Than Screen” foutmelding
Zoals je wellicht nog weet, kan Google Search Console een waarschuwing geven voor verschillende problemen voor mobiele gebruikers. Naast de “Clickable Elements Too Close Together” foutmelding, kan het rapport ook een waarschuwing geven over “Content Wider Than Screen”.
Dit probleem wordt op dezelfde plek in Google Search Console gemeld als de foutmelding over klikbare elementen. En net als die fout, zijn er ook verschillende mogelijke oorzaken.
Waarom je de melding “Content Wider Than Screen” te zien krijgt
Deze foutmelding verschijnt wanneer je website te breed voor een scherm is, waardoor mobiele gebruikers opzij moeten bewegen om ook de “offscreen” content te kunnen zien. Om een goede gebruikservaring te bieden moet je altijd proberen te voorkomen dat gebruikers horizontaal moeten scrollen.
Je zal de “Content wider than screen” foutmelding vaak zien wanneer je absolute waarden gebruikt in je CSS. Aangezien inflexibele layouts ook de foutmelding over klikbare elementen kunnen opleveren, gebeurt het vaak dat je deze twee fouten in hetzelfde rapport ziet.
Zo los je de foutmelding “Content wider than screen” op (5 manieren)
Wanneer je rapport de waarschuwing “Content wider than screen” bevat, zijn er eenvoudige manieren om dit op te lossen. Laten we enkele van de beste opties bekijken.
1. Gebruik geen absolute variabelen in CSS declaraties
Eén van de beste manieren om de foutmelding “Content wider than screen” te voorkomen, is door geen absolute variabelen te gebruiken in je CSS declaraties. Je content heeft dan geen specifieke viewport nodig om correct getoond te worden.
In plaats van absolute waarden kan je dan beter relatieve breedte en positie waarden gebruiken voor je CSS elementen. Door zoveel mogelijk relatieve waarden te gebruiken, kan je flexibele layouts maken die zich eenvoudig kunnen aanpassen aan verschillende schermgroottes.
2. Geef afbeeldingen een maximale breedte
Een afbeelding met vaste afmetingen kan groter weergegeven worden dan de beschikbare viewport, waardoor je de foutmelding “Content wider than screen” krijgt. Om ervoor te zorgen dat je afbeeldingen zich altijd goed aanpassen aan de afmetingen van het gebruikte scherm, kan je ze het beste een max-width van 100% toewijzen.
Hierdoor wordt de afbeelding altijd verkleind tot de beschikbare ruimte. Zelfs als je max-width gebruikt, moet je ook nog de width en height attributen binnen de <image> tag gebruiken, aangezien moderne webbrowser dit gebruiken om alvast ruimte te reserveren voor afbeelding terwijl ze nog aan het laden zijn. Door de <image> tag te gebruiken voorkom je verspringende layout wanneer de afbeeldingen geladen zijn.
3. Gebruik meta viewport tags
Standaard wordt een pagina weergegeven op de breedte van een desktop, meestal rond de 980px. De browser probeert vervolgens de pagina te optimaliseren door de lettergrootte te veranderen en de content aan de schermgrootte aan te passen.
Helaas kan dit onverwachte resultaten opleveren. Sommige gebruikers moeten inzoomen om je content te lezen en te gebruiken, waardoor je mogelijk deze foutmelding krijgt.
In plaats van te vertrouwen op deze instellingen van browsers, kan je beter duidelijke instructies geven hoe de afmetingen en schaal van je pagina’s gebruikt moeten worden. Je kan dit doen door een meta viewport tag toe te voegen aan de header van je document.
4. Gebruik moderne CSS layout technieken
Je kan de foutmelding “Content wider than screen” ook oplossen door de layout van je site te verbeteren. Om meer flexibele layouts te kunnen maken, kan je technieken zoals Flexbox, CSS Grid Layout, of Multiple-Column Layout (Multicol) gebruiken.
5. Gebruik CSS Media queries waar mogelijk
Media queries kunnen het makkelijker maken om de stijl van je website aan te passen aan het apparaat van de gebruiker, ook wanneer ze een touchscreen gebruiken. Als je nu dus nog steeds de melding “Content wider than screen” te zien krijgt, raden we je aan om CSS media queries te gebruiken waar nodig.
Na het toepassen van deze queries kan je testen of de “Content wider than screen” fout nu wel weg is. Dit door je door het Mobile Usability rapport nog eens op te vragen en de oplossing te valideren met de stappen in het volgende onderdeel.
Zo kan je je oplossing controleren en valideren
Welke foutmelding je ook opgelost hebt en hoe je die ook opgelost hebt, het is altijd belangrijk om te controleren dat je acties het probleem ook daadwerkelijk opgelost hebben. Dit doe je door de Mobile Usability tool van Google nog eens op je website los te laten.
Dit kan je doen door terug te gaan naar het Mobile Usability rapport en de foutmelding “Clickable elements too close together” terug te vinden. Vervolgens klik je op Validate fix.
Je kan dezelfde stappen gebruiken voor de “Content wider than screen” foutmelding. Google zal je website opnieuw controleren, en je krijgt een bericht te zien dat de verandering momenteel gevalideerd wordt.
Is de fout inderdaad opgelost, dan zal Google Search Console een bericht “Passed” weergeven, met een mooi groen vinkje. Wanneer je oplossing niet gevalideerd kunnen worden, zal je een andere oplossing voor de fout(en) moeten vinden.
Samenvatting
Wanneer je problemen voor mobiele gebruikers niet oplost, kan je user experience daaronder lijden, waardoor het verkeer naar je website flink kan afnemen. Door deze fouten op te lossen, zorg je ervoor dat je website prettig is voor mobiele gebruikers, en überhaupt goed toegankelijk is voor meer mensen.
In dit artikel heb je gelezen hoe je de foutmelding “Clickable elements too close together” op drie manieren kan oplossen:
- Het veranderen van je website via een frontend CSS style editor plugin (zoals YellowPencil).
- Chrome DevTools gebruiken om te controleren dat alle klikbare elementen minstens 48 dpi zijn.
- De input-methode controleren en eventueel je CSS aanpassen.
Nog vragen over het oplossen van de foutmelding “Clickable elements too close together”? Laat het ons weten in de reacties hieronder.
Laat een reactie achter