Uløste problemer med mobilanvendelighed kan have en betydelig indflydelse på din hjemmesides trafik. Et almindeligt problem, som Google Search Console muligvis advarer dig om, er fejlen “Klikbare elementer er for tæt på hinanden”, hvilket sandsynligvis betyder, at dit websted er komplekst for mobilbrugere at navigere på.
Mere end 4,32 milliarder mennesker får adgang til internettet fra deres mobile enheder. Derfor er det afgørende at løse denne klikbare elementfejl så hurtigt som muligt. Heldigvis er der flere måder, du kan gøre det på og gøre dit websted mere mobilvenligt.
I denne artikel forklarer vi, hvad problemet med “Klikbare elementer er for tæt på hinanden” er, diskuterer, hvorfor det sker, og guider dig gennem tre metoder, du kan bruge til at løse det. Vi vil også forklare, hvad fejlen “Indhold bredere end skærm” er, og hvordan du kan løse den.
Lad os komme på arbejde!
Foretrækker du at se videoversionen?
Hvad fejlen “Klikbare elementer er for tæt på hinanden” er
I en nøddeskal kan fejl i mobilanvendelighed gøre dit WordPress-websted utilgængeligt og mere udfordrende for mobilbrugere at navigere på. Du kan bruge Google Search Consoles rapport om mobilanvendelighed til at teste dit websted.
Der er seks hovedtyper af problemer med mobilanvendelighed, du kan støde på, som er:
- Bruger inkompatible plugins
- Viewport ikke indstillet
- Viewport ikke indstillet til “enhedsbredde”
- Teksten er for lille til at kunne læses
- Indhold bredere end skærmen
- Klikbare elementer er for tæt på hinanden
Som en del af denne rapport vil Google Search Console kontrollere alle dit websteds klikbare elementer, såsom knapper og links. Formålet med dette er at verificere, om mobilbrugere komfortabelt kan interagere med dit websteds elementer ved kun at bruge berøring, i stedet for at bruge et tastatur eller en mus.
Hvis Google Search Console fastslår, at dine klikbare elementer udgør en udfordring for mobilbrugere, vil den inkludere fejlen “Klikbare elementer er for tæt på hinanden” i din oversigtsrapport.
Hvis du klikker på fejlen, vil den bringe dig til siden med detaljer og status. På denne skærm kan du lære mere om problemet, herunder de berørte sider.
Grundlæggende er fejlen med klikbare elementer en advarsel, der indikerer, at de klikbare elementer på dit WordPress-websted er for små til, at mobilbrugere kan interagere komfortabelt med.
Alternativt kan det betyde, at de er store nok, men placeret for tæt på nabo-elementer. Hvis knapper, links og andre klikbare elementer klynger for tæt sammen, risikerer brugere at trykke på de forkerte, hvilket skader brugeroplevelsen (UX).
Selvom det at have klikbare elementer for tæt på hinanden er klassificeret som en fejl ved mobilanvendelighed, kan løsning af dette problem også forbedre tilgængeligheden af dit websted. For eksempel kan folk med problemer med fingerfærdighed sætte pris på lidt ekstra plads mellem interaktive elementer. I modsætning hertil kan brugere med synsrelaterede problemer have lettere ved at interagere med store, klart definerede knapper og links.
Hvorfor fejlen “Klikbare elementer er for tæt på hinanden” vil vises
Forskellige faktorer kan resultere i problemet “Klikbare elementer er for tæt på hinanden”. Nogle gange er det bare fordi Google ikke kunne anmode om de nødvendige ressourcer under gengivelsen. Hvis det er tilfældet, så kan du prøve at bruge den mobilvenlige test og se, om den består. Hvis det gør, kan du sikkert ignorere det.
Dette problem kan også skyldes dit websteds design. For eksempel, hvis du prøver at presse for mange interaktive elementer ind på en enkelt webside, kan du muligvis se denne mobilanvendelighedsfejl.
En anden grund til fejlen med klikbare elementer er, at der er et problem med mobilresponsen af dit websteds design. Din hjemmeside skal være fleksibel og automatisk tilpasse sig den besøgendes specifikke enhed for at give den bedst mulige UX. Men hvis dit websted ikke er responsivt, kan det resultere i problemer med brugervenlighed.
Mere specifikt, hvis dit websted ikke er responsivt, kan dele af det forekomme strakt, krympet eller skævt på bestemte skærme. På enheder med mindre skærme kan elementer, der kan trykkes, virke trange eller forvrængede.
Ved at identificere nogle af standard og potentielle årsager til, at denne fejl opstår, kan du hjælpe dig med bedre at forstå, hvorfor dit websted støder på problemer med mobilanvendelighed. Det hjælper dig også med at bestemme, hvordan du løser problemet.
Sådan rettes fejlen “Klikbare elementer er for tæt på hinanden” (3 metoder)
Hvis mobilbrugere har svært ved at navigere på dit websted, hvad forhindrer dem så i at navigere væk fra det? Det er vigtigt at forhindre dette problem for at løse alle problemer med mobilanvendelighed så hurtigt som muligt. Lad os tage et kig på tre metoder, du kan bruge til at rette fejlen “Klikbare elementer eer for tæt på hinanden” og give en bedre brugeroplevelse til dine mobilbrugere.
1. Brug YellowPencil Visual Customizer WordPress-plugin
YellowPencil Visual Customizer er et frontend WordPress-plugin, der giver dig mulighed for at redigere dit websteds CSS- og temafiler uden nogen form for kodning.
Dette plugin er praktisk til at ændre størrelsen på dine klikbare mål, såsom at gøre dine knapper større. Du kan også skabe mere plads mellem klikbare elementer ved at ændre margener og afstand mellem dem.
Du kan downloade YellowPencil-plugin’et gratis eller købe en almindelig eller udvidet licens. For at bruge det skal du først installere og aktivere det på dit WordPress-websted ved at gå til Plugins > Tilføj nyt, søge efter pluginnet og derefter klikke på Installer nu > Aktiver.
Derefter skal du navigere til YellowPencil > Customizations. Under Customizations fanen, vælg Let’s start!
Den visuelle tilpasningsgrænseflade indlæses og beder dig om at vælge den side, der udløser mobilanvendelighedsfejlen.
Du kan enten anvende dine ændringer på denne specifikke side eller på tværs af hele dit websted. Hvis mange sider viser fejlen med klikbare elementer, kan du vælge Global.
Foretag dit valg, og klik derefter på Continue. Du kan nu arbejde dig igennem din webside og vælge hvert enkelt element, du kan trykke på. YellowPencil viser et panel med redigeringsmuligheder for det element.
For eksempel, i nedenstående skærmbillede valgte vi padding og tilføjede 10 pixels på alle sider for at øge afstanden mellem de klikbare mål:
Indstillingerne for Size og Position hjælper også med at løse fejlen “Klikbare elementer for tæt på hinanden”. Selvom det ikke er nødvendigt, hvis du vil redigere CSS-koden direkte, kan du gøre det via det venstre panel.
Derefter kan du gå videre til det næste element, der forårsager problemer med mobilanvendelighed og gentage processen. Når du er tilfreds med dine ændringer, skal du klikke på den grønne Save knap.
2. Sørg for, at alle mål, der kan klikkes på, er mindst 48px
Det er umuligt at skabe et enkelt statisk design, der ser godt ud og fungerer korrekt på tværs af alle enheder. I stedet ville det være bedst, hvis du havde til formål at skabe et fleksibelt layout ved at definere alle dine klikbare mål ved hjælp af enhedsuafhængige pixels (dpi). Elementer, der er defineret ved hjælp af dpi, kan automatisk skaleres til størrelse baseret på brugerens skærmstørrelse.
På en mobilenhed er det mindst anbefalede berøringsmål 48×48 pixels. Det svarer til omkring 9 mm, hvilket er tilstrækkeligt til den gennemsnitlige persons fingerspids.
Derfor, hvis du kæmper for at finde ud af præcis, hvilke elementer der er kilden til problemet, kan det hjælpe med at se på hvert elements dpi. Hvis det er under det anbefalede berøringsmål (f.eks. 24px), kan du øge polstringen for at bringe den til 48px.
Du kan kontrollere den beregnede værdi af et område, der kan trykkes på, ved hjælp af Chrome DevTools eller Firefox DevTools, afhængigt af hvilken browser du foretrækker. Vi bruger Chrome som eksempel.
For at kontrollere dpi-værdien for et af de klikbare elementer på dit WordPress-websted skal du åbne det i en Chrome-browserfane og navigere til siden, der viser fejlen “Klikbare elementer for tæt på hinanden”. Højreklik på siden og vælg Inspect.
Hvis du klikker på Inspect, åbnes Chrome DevTools. Øverst skal du klikke på ikonet, der viser mobile enheder, hvilket bringer dig til skærmbilledet Toggle device toolbar.
I det venstre preview panel vil du se en mobil device emulation af dit websted. Hvis du holder markøren over og klikker på et af de elementer, der kan trykkes på, kan du se den beregnede værdi til højre:
Hvis det er nødvendigt, kan du derefter justere et elements størrelse ved direkte at redigere dine CSS– og webstedsfiler eller bruge et plugin såsom YellowPencil.
3. Tjek inputmetoden
Hvis du forsøger at rette fejlen “Klikbare elementer for tæt på hinanden”, kan det hjælpe med at kontrollere inputmetoden. Det refererer til den metode eller enhed, en bruger bruger til at se og interagere med dit websted. Mere specifikt kan du se, om de bruger en smartphone, tablet eller andre enheder.
For eksempel betragtes berøring som en upræcis inputmetode. Som vi lige har diskuteret, kan brug af CSS til at øge størrelsen på dine berøringsfølsomme mål eller tilføjelse af ekstra padding gøre det nemmere for besøgende at trykke på, der bruger berøringsenheder til at interagere med dit websted.
At bestemme en brugers enhed er dog ikke en eksakt videnskab. Denne teknik bruger det, der er kendt som “pointeren” til at kontrollere brugerens primære inputmetode, som kan have en af to værdier:
- Coarse: Enhedens primære inputmetode er berøring.
- Fine: Indtastningsmetoden er en mus og pegefelt.
Bemærk, at hvis berøring er brugerens primære inputmetode, tyder det på, at personen ser dit websted på en smartphone eller tablet.
Tilstedeværelsen af en berøringsskærm garanterer dog ikke, at nogen bruger en mobilenhed. De kan få adgang til dit websted ved hjælp af en stor, touchscreen-aktiveret bærbar computer, eller de kan have tilsluttet en Bluetooth-enhed til deres smartphone.
Hvis markøren returnerer en coarse værdi, kan du justere størrelsen på det klikbare mål ved hjælp af CSS. For at gøre det kan du placere følgende i CSS-filen til dit WordPress-tema (eller ved at bruge et plugin såsom YellowPencil):
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Når du har justeret din CSS, kan du bede Google om at crawle dit websted igen for at afgøre, om dette har løst problemet.
Alternativt kan du bede Google om at gencrawle individuelle webadresser ved hjælp af URL Inspection Tool. Når du har indsendt din URL via dette værktøj, skal du vælge Anmod om indeksering. Inspektionsværktøjet vil derefter teste URL’en for indlysende problemer med indeksering.
Forudsat at Google ikke finder nogen problemer, vil siden kvalificere sig til indeksering.
Alternativt, hvis du har et stort antal URL’er, kan du indsende et sitemap. For hver side, der kræver genindeksering, skal du opdatere dens <lastmod>-tag med den sidste ændringsdato. Du kan derefter indsende dette sitemap ved hjælp af Google’s sitemap report tool.
I de fleste tilfælde vil dit sitemap gå igennem med det samme. Det kan dog tage Google noget tid at crawle alle webadresserne i dit sitemap, afhængigt af faktorer som webstedets størrelse, trafik og aktivitet. Der er heller ingen garanti for, at Google crawler hver eneste URL i dit sitemap.
Hvad fejlen “Indhold bredere end skærm” betyder
Som du måske husker, kan Google Search Console advare dig om forskellige fejl ved mobilanvendelighed. Ud over “Klikbare elementer er for tæt på hinanden” kan din oversigtsrapport også indeholde problemet “Indhold bredere end skærmen”.
Dette problem vises på samme sted i din Google Search Console som fejlen “Klikbare elementer”. På samme måde har det en række potentielle årsager.
Sådan løser du fejlen “Indhold bredere end skærmen”
Hvorfor kan fejlen “Indhold bredere end skærm” vises
Denne fejl opstår, når dit webstedsdesign udvides vandret, hvilket tvinger mobilbrugere til at stryge sidelæns for at se indholdet “uden for skærmen”. For at give en god brugeroplevelse bør du undgå vandret scroll, hvor det er muligt.
Du er mere tilbøjelig til at støde på problemet “Indhold bredere end skærm”, hvis du bruger absolute values i dine CSS-erklæringer. Da ufleksible layouts kan resultere i fejlen “Klikbare elementer”, er det ikke ualmindeligt at støde på disse to fejl i den samme rapport om mobilanvendelighed.
Sådan rettes fejlen “Indhold bredere end skærm” (5 metoder)
Hvis din rapport indeholder fejlen “Indhold bredere end skærmen”, kan du bruge nogle enkle metoder til at løse det. Lad os tage et kig på fem af de mest almindelige muligheder.
1. Undgå at bruge absolutte variable i CSS-deklarationer
En af de bedste måder at rette fejlen “Indhold bredere end skærm” på er at undgå at bruge absolute variabler i dine CSS-erklæringer. Dit indhold bør ikke kræve en bestemt visningsport for at blive vist og fungere korrekt.
Derfor bør du i stedet for at bruge absolute values vælge relative width og position values for dine CSS-elementer. Ved at bruge relative værdier, hvor det er muligt, kan du oprette fleksible layouts, der skaleres, så de passer til en række skærmstørrelser.
2. Tildel billeder en maksimal bredde
Et billede med faste dimensioner kan se større ud end visningsporten og udløse fejlen “Indhold bredere end skærmen”. For at sikre, at dine billeder skaleres baseret på skærmens dimensioner, er det bedst at tildele alle billeder en maks. bredde på 100%.
Det vil tvinge billedet til at krympe for at passe til den tilgængelige plads. Selvom du bruger max-width, bør du stadig bruge bredde- og højde attributterne i dit <image>-tag, da moderne webbrowsere bruger disse oplysninger til at reservere plads til billeder, når de indlæses. Ved at bruge <image>-tagget kan du undgå layoutskift, når dine billeder endelig vises på skærmen.
3. Brug Meta Viewport-tags
Som standard gengiver mobilbrowsere siden ved skrivebordets skærmbredde, som normalt er omkring 980px. Browseren vil derefter forsøge at optimere din side ved at øge skriftstørrelsen og skalere dit indhold, så det passer til de aktuelle skærmdimensioner.
Desværre kan denne standardadfærd resultere i uoverensstemmelser. Nogle brugere skal muligvis zoome ind for at læse og interagere med dit indhold, og det er derfor, du kan se denne fejl.
I stedet for at stole på denne standardadfærd, bør du give browseren instruktioner om, hvordan du kontrollerer sidens dimensioner og skala. Du kan gøre dette ved at indsætte et meta viewport-tag i head på dit dokument.
4. Brug moderne CSS-layoutteknikker
Du kan også rette fejlen “Indhold bredere end skærmen” ved at ændre dit websteds layout. For at hjælpe dig med at skabe mere fleksible layouts kan du overveje at implementere teknikker som Flexbox, CSS Grid Layout, eller Multiple-Column Layout (Multicol).
5. Brug CSS Media Queries, hvor det er relevant
Media queries kan gøre det nemmere at ændre styles baseret på brugerenheden, herunder berøringsskærme. Derfor, hvis du stadig har at gøre med fejlen “Indhold bredere end skærmen” på dette tidspunkt, anbefaler vi at bruge CSS-medieforespørgsler, hvor det er relevant.
Efter at have foretaget disse ændringer, er det tid til at teste for at se, om du har løst fejlen “Indhold bredere end skærmen”. Du kan gøre dette ved at køre rapporten Mobile Usability igen og validere rettelsen ved at bruge de trin, vi diskuterer i næste afsnit.
Sådan bekræfter og validerer du din fejlløsning
Uanset hvilke af ovenstående fejl du har at gøre med, eller de metoder du bruger til at rette det, er det vigtigt at afgøre, om dine ændringer har løst problemet. Du kan gøre dette ved at køre Googles mobilanvendelighedstest igen.
For at gøre det skal du navigere tilbage til din Mobile Usability report og finde fejlen “Klikbare elementer for tæt på hinanden“. Vælg derefter indstillingen Valider rettelse.
Bemærk, at du kan gentage de samme trin, hvis du forsøger at verificere og validere din fejlopløsning for “Indhold bredere end skærmen.” Google vil derefter gennemgå dit websted, og du vil modtage en besked, der fortæller dig, at det er i gang med at validere ændringen.
Hvis du har løst fejlen, viser Google Search Console en “Bestået”-meddelelse og et tilhørende grønt flueben. På den anden side, hvis de rettelser, du brugte, ikke er validerede, bliver du nødt til at gense fejlen for at implementere en alternativ løsning.
Opsummering
Uløste mobilanvendelighedsfejl kan resultere i en dårlig brugeroplevelse og kan forårsage et mærkbart fald i dit websteds trafik. Ved at tage skridt til at løse fejl ved brugervenlighed kan du sikre, at din hjemmeside er mobilvenlig og tilgængelig for et større antal mennesker.
I dette indlæg lærte du, hvordan du retter fejlen “Klikbare elementer er for tæt på hinanden” ved hjælp af tre metoder:
- Rediger dit websted ved hjælp af et frontend CSS style editor plugin (som YellowPencil).
- Brug Chrome DevTools til at sikre, at alle trykbare maccessibilityål er 48 dpi eller større.
- Tjek inputmetoden og juster din CSS i overensstemmelse hermed.
Har du spørgsmål om at rette fejlen “Klikbare elementer er for tæt på hinanden”? Fortæl os det i kommentarerne nedenfor!
Han er en selvlært webudvikler, skribent, skaber og en stor beundrer af Free and Open Source Software (FOSS). Udover teknologi, er han begejstret for videnskab, filosofi, fotografi, kunst, katte og mad. Lær mere om ham på hans hjemmeside, og kontakt Salman på X.
Skriv et svar