Cum să remediați „Țintele de atingere nu sunt dimensionate corespunzător” pe WordPress

Lighthouse este un instrument puternic care vă permite să culegeți informații utile despre performanța paginilor dvs. web. Una dintre problemele frecvente de proiectare semnalate este „Țintele de atingere nu sunt dimensionate corespunzător” . Cu toate acestea, dacă nu sunteți un dezvoltator web sau un designer, este posibil să nu știți ce înseamnă acest lucru sau cum să o remediați.

Din fericire, este relativ simplu să vă faceți paginile mai ușor de utilizat și să remediați această problemă specială Lighthouse. De exemplu, puteți crește dimensiunea țintelor de atingere sau distanța dintre ele.

O introducere la problema „Țintele atingerii nu sunt dimensionate corespunzător”.

Înainte de a explora problema „Țintele de atingere nu sunt dimensionate corespunzător”, va trebui să știți puțin despre Lighthouse. Acest instrument open-source vă permite să evaluați calitatea și performanța paginilor dvs. web. De exemplu, puteți aduna informații despre accesibilitatea site-ului dvs., SEO, viteza paginii, design și multe altele.

Dacă aveți multă experiență în dezvoltarea web, puteți rula Lighthouse în Chrome DevTools sau din linia de comandă. Cu toate acestea, PageSpeed ​​Insights este, de asemenea, alimentat de Lighthouse și este adesea o alternativă bună pentru începători.

Pentru a obține o evaluare avansată a site-ului dvs., tot ce trebuie să faceți este să introduceți adresa URL a site-ului și să faceți clic pe Analizați :

Analiza va începe la scurt timp după. Apoi, puteți vedea detalii despre performanța și optimizarea paginii dvs. web. PageSpeed ​​Insights facilitează acest lucru prin clasificarea detaliilor sub titluri clare.

Dacă derulați până în jos, veți găsi secțiunea Mobile Friendly . Aici veți vedea informații despre țintele de atingere:

După cum puteți vedea, analiza noastră a returnat problema „Țintele de atingere nu sunt dimensionate corespunzător”. Dacă extindeți secțiunea, veți găsi informații mai detaliate despre fiecare dintre obiectivele dvs. de atingere.

Țintele de atingere sunt zonele paginii dvs. web cu care utilizatorii pot interacționa pe dispozitivele tactile. De exemplu, vizitatorii pot atinge imagini, butoane, linkuri sau elemente de formular.

Steagurile farului ating ținte care sunt prea mici (mai mici de 48 px pe 48 px). Veți vedea, de asemenea, mesajul de avertizare dacă țintele dvs. de atingere nu au suficient spațiu în jurul lor, rezultând ținte suprapuse.

S-ar putea să întâmpinați această problemă atunci când creați versiunea desktop a site-ului dvs. web fără a optimiza pentru experiența mobilă. Pe desktop, toate elementele paginii tale pot sta frumos împreună, dar dacă nu se pot adapta la diferite dimensiuni de ecran, acest lucru cauzează probleme.

Cum să remediați problema „Țintele atingerii nu sunt dimensionate corespunzător”.

Acum că știți mai multe despre Lighthouse și despre problema „Atingeți țintele nu sunt dimensionate corespunzător”, să aruncăm o privire la câteva modalități simple de a o remedia.

1. Măriți dimensiunea țintelor de atingere
2. Măriți distanța dintre țintele atingere

1. Măriți dimensiunea țintelor de atingere

Prima modalitate de a remedia problema „Țintele atingerii nu sunt dimensionate adecvat” este de a crește dimensiunea țintelor de atingere în sine. Deci, să luăm în considerare câteva elemente de design care servesc ca ținte de atingere.

După cum am menționat, linkurile, butoanele, pictogramele și elementele de formular pot servi toate ca ținte prin atingere sau „atingere”. Prin urmare, va trebui să vă asigurați că dimensiunea acestor caracteristici de design nu scade sub 48 px cu 48 px. În această secțiune, vă vom arăta cum să redimensionați butoanele și linkurile din paginile dvs.

Măriți dimensiunea butoanelor în WordPress

Pentru a redimensiona butoanele de pe site-ul dvs., va trebui să deschideți Personalizatorul WordPress. Puteți face acest lucru accesând Aspect > Personalizator din tabloul de bord. Apoi, selectați Butoane :

Acum, există câteva moduri prin care puteți crește dimensiunea butoanelor. În primul rând, puteți crește Greutatea folosind caseta drop-down. Acest lucru nu va modifica drastic dimensiunea țintei atingerii, dar va adăuga un plus de volum și definiție:

Pentru a optimiza și mai mult o țintă de atingere, îi puteți crește înălțimea liniei . Acest lucru va crește dimensiunea țintei pe verticală. În plus, dacă editați valoarea Letter Spacing , puteți extinde dimensiunea butonului pe orizontală:

Apoi, nu uitați să faceți clic pe Publicare pentru a salva modificările.

Măriți dimensiunea linkurilor în WordPress

Linkurile pot direcționa utilizatorii către alte pagini de pe site-ul dvs. Prin urmare, ar putea încuraja vizitatorii să rămână pe site-ul dvs. mai mult timp.

Cu toate acestea, pentru ca vizitatorii să „atingă” sau să atingă țintele dvs. de link, trebuie să le faceți clic pe acestea. Cel mai simplu mod de a face acest lucru este de a crește dimensiunea linkurilor.

Puteți face acest lucru direct în postarea sau pagina relevantă. De exemplu, puteți prezenta un bloc Query Loop, astfel încât utilizatorii să poată vedea o listă a postărilor dvs. de blog publicate:

În acest scenariu, fiecare titlu de postare poate conține un link. Între timp, ați putea prezenta un link Citiți mai mult pentru a conduce vizitatorii direct la postare.

Unul dintre cele mai bune lucruri despre utilizarea unui link în titlul postărilor tale este că este foarte simplu să mărești dimensiunea țintei atingerii. Tot ce trebuie să faceți este să dați clic pe titlul linkului. Apoi, navigați la Modificare nivel de titlu din bara de instrumente:

Aici, puteți crește dimensiunea link-ului, optând pentru un format H1 sau H2.

În plus, este posibil să aveți și linkuri în textul paragrafului. Puteți mări dimensiunea acestor ținte de atingere făcând clic pe element. Apoi, în setările Blocare, mergeți la Tipografie :

Aici, utilizați meniul derulant SIZE (PX) pentru a schimba de la Normal la o setare mai mare:

Apoi, asigurați-vă că salvați modificările.

2. Măriți distanța dintre țintele de atingere

A doua modalitate de a remedia problema „Țintele de atingere nu sunt dimensionate adecvat” în Lighthouse este de a mări distanța dintre țintele de atingere. Chrome spune că 8 px este de obicei suficient. Cu toate acestea, pentru ținte de atingere mai mici, poate fi necesar să măriți și mai mult distanța pentru a trece de auditul Lighthouse. Există câteva moduri în care puteți face acest lucru.

Ajustați proprietatea de umplutură

O modalitate de a mări spațiul dintre țintele atingere este ajustarea proprietății de umplutură a elementelor. Acest lucru va crește distanța dintre ținte prin adăugarea la marginile elementului.

Puteți face acest lucru cu butoanele dvs. deschizând Personalizatorul WordPress. Apoi, mergeți la Butoane . Veți găsi proprietatea Padding în partea de sus a setărilor generale :

Pentru a remedia problema „Țintele atingerii nu sunt dimensionate corespunzător”, pur și simplu creșteți umplutura din jurul butonului. Asigurați-vă că sunteți în PX și nu în EM sau REM .

Poate fi o idee bună să încercați mai întâi să creșteți umplutura pe fiecare parte cu 10 px. Apoi, puteți crește dimensiunea dintre ținte și mai mult, dacă este necesar.

S-ar putea să descoperiți că adăugarea mai multor umplutură amestecă unul dintre butoanele dvs. pe o linie nouă. În acest caz, puteți crește și valoarea de umplutură în partea de sus și de jos pentru a pune mai mult spațiu între ținte:

Asigurați-vă că faceți clic pe Publicare pentru a salva modificările.

Utilizați blocul WordPress Spacer

O altă abordare pentru adăugarea de spațiu între elementele paginii este utilizarea blocului WordPress Spacer. Tot ceea ce face acest lucru este să adauge puțin spațiu liber paginii tale, menținând țintele tale de atingere la o distanță mai mare unele de altele.

De exemplu, este posibil să aveți două butoane stivuite unul peste altul:

Deși poate părea că există suficient spațiu între aceste ținte tactile, atunci când previzualizați aspectul pe partea frontală, puteți vedea că butoanele aproape se suprapun:

În acest caz, puteți adăuga un bloc de distanță între butoane pentru a remedia problema „Țintele atingere nu sunt dimensionate corespunzător”. Pur și simplu faceți clic pe pictograma + dintre blocuri. Apoi, căutați „spacer”:

Adăugați blocul în pagina dvs. și acest lucru va crea instantaneu spațiu între elementele dvs. Acum, faceți clic pe Publicare pentru a salva modificările și pentru a vedea butoanele de pe front-end:

După cum puteți vedea, există acum un spațiu mai mare între țintele atingere.

Concluzie

Pentru a recapitula, iată două moduri de a remedia această problemă:

1. Măriți dimensiunea țintelor de atingere.
2. Măriți distanța dintre țintele atingere.

Aveți întrebări despre cum să remediați problema „Țintele atingerii nu sunt dimensionate corespunzător”? Spune-ne în comentariile de mai jos!