Site-ul pe telefon: 10 verificări înainte de lansare

Înainte să lansăm un site, îl deschidem pe un telefon adevărat și trecem prin zece verificări. Durează o oră și prinde aproape tot ce strică prima impresie. Contează și pentru Google: el folosește versiunea de mobil a site-ului ca să-l indexeze și să-l claseze.

Înainte de toate: telefonul e versiunea principală

Google spune direct că folosește conținutul versiunii de mobil, citit cu un crawler de smartphone, pentru indexare și clasare. Asta schimbă ordinea: nu faci site-ul pentru calculator și apoi „îl adaptezi”. Verifici întâi pe telefon.

Cele zece verificări

1. Pagina are eticheta viewport

Fără eticheta meta viewport, cu valoarea „width=device-width, initial-scale=1”, unele browsere de pe telefon desenează pagina ca pe un ecran lat de calculator și apoi o micșorează. Totul iese minuscul. Documentația MDN explică exact acest comportament.

2. Zoom-ul nu e blocat

Unele teme pun în aceeași etichetă „user-scalable=no”, ca să „nu se strice designul”. MDN avertizează că asta îi împiedică pe oamenii care văd slab să citească pagina. Lasă zoom-ul pornit.

3. Nu există derulare în lateral

Treci degetul spre stânga pe fiecare pagină. Dacă pagina se mișcă lateral, ceva e mai lat decât ecranul: o poză, un tabel, un iframe cu hartă. Se repară din CSS, dar trebuie găsit înainte.

4. Textul se citește fără zoom

Textul de bază trebuie citit cu telefonul ținut normal, în mână. Dacă te prinzi că mărești cu două degete ca să citești un paragraf, fontul e prea mic sau rândurile prea înghesuite.

5. Butoanele și linkurile se apasă ușor

Instrumentul Lighthouse din Chrome verifică „țintele de atingere”: un buton de 48 × 48 de pixeli nu pică niciodată testul, iar 8 pixeli între ținte sunt un punct de plecare bun. Cele mai des greșite: linkurile din meniu puse prea aproape și iconițele mici de rețele sociale din subsol.

6. Telefonul și adresa sunt apăsabile

Numărul de telefon pus ca link de tip „tel:” deschide direct apelul. Adresa cu link spre hartă deschide navigația. Pe telefon, oamenii nu copiază numere de mână.

7. Formularul merge cu degetul mare

Câmpul de email deschide tastatura cu „@”, câmpul de telefon deschide tastatura numerică. Tastatura nu acoperă butonul de trimitere. Trimite tu un mesaj de probă de pe telefon, pe date mobile, nu pe Wi-Fi. Mai multe în articolul despre formularul de contact.

8. Pagina se încarcă repede pe date mobile

Google măsoară experiența de încărcare prin Core Web Vitals. Pentru încărcare, ținta e Largest Contentful Paint (cât durează până apare cel mai mare element vizibil) de cel mult 2,5 secunde. Cel mai des, vinovata e poza mare de sus, pusă la rezoluția de pe aparatul foto. Despre formatul și mărimea pozelor am scris în articolul despre pozele de pe site.

9. Pagina nu sare în timp ce o citești

Ai apăsat pe un link, dar în ultima clipă s-a încărcat un banner și ai nimerit altceva. Asta măsoară Cumulative Layout Shift, iar web.dev recomandă un scor de cel mult 0,1. Se repară dând dimensiuni pozelor și rezervând loc pentru bannere și bara de cookie-uri.

10. Pe mobil e tot ce e pe desktop

E tentant să ascunzi secțiuni pe telefon „ca să fie mai curat”. Google cere ca site-ul de mobil să aibă același conținut ca cel de desktop, aceleași titluri, aceleași date structurate și același text alternativ la poze. Ce lipsește pe mobil, practic, lipsește pentru Google.

Cum testezi

Pe calculator, Chrome are un mod de dispozitiv în DevTools, care simulează ecranul unui telefon. E bun pentru prima trecere. Dar verificarea finală o facem pe telefoane reale, un Android și un iPhone, pe date mobile. Așa vezi ce vede clientul.

Dacă vrei să trecem împreună prin site-ul tău, vezi ce facem la Web.