„Site-ul e responsive" a devenit o bifă pe ofertă, nu o realitate verificată. În practică, multe site-uri „responsive" au butoane pe care nu poți da click cu degetul, texte de 11 pixeli și un meniu care acoperă tot ecranul. Iar în România majoritatea traficului vine de pe telefon, așa că versiunea mobilă este site-ul tău.
De ce contează mai mult decât crezi
Google folosește mobile-first indexing: evaluează versiunea mobilă a paginii pentru poziționare, nu pe cea de desktop. Deci experiența pe telefon influențează direct și clasarea în căutări, nu doar conversiile.
Checklistul în 12 puncte
1. Textul se citește fără să apropii ecranul
Minimum 16px pentru textul de bază, înălțime de rând 1,5–1,8. Titlurile scad proporțional pe ecrane mici, nu rămân la 48px.
2. Butoanele au minimum 44×44 px
Cât suprafața unui deget. Între două butoane lasă cel puțin 8px, altfel utilizatorul apasă greșit.
3. Nimic nu iese lateral
Fără scroll orizontal. Cauze frecvente: imagini cu lățime fixă, tabele largi, elemente cu width în pixeli. Regula de bază: img { max-width: 100%; height: auto; }.
4. Meniul se deschide și se închide simplu
Buton clar, zonă de închidere evidentă, linkurile suficient de distanțate. Meniul nu trebuie să blocheze scroll-ul paginii după ce se închide.
5. Telefonul e apelabil, adresa deschide harta
Pe mobil, un număr de telefon trebuie să fie <a href="tel:...">. Adresa poate deschide direct aplicația de hărți.
6. Formularele folosesc tastatura potrivită
type="tel", type="email", inputmode="numeric". Un câmp de telefon care deschide tastatura alfabetică pierde completări.
7. Imaginile sunt servite la dimensiunea corectă
Nu trimite un JPG de 3000px pe un ecran de 390px. Folosește srcset sau imagini redimensionate; vezi ghidul de optimizare a imaginilor.
8. Conținutul important e sus
Ce faci, unde ești și butonul de acțiune trebuie să fie vizibile fără scroll. Sliderele mari și videoclipurile decorative împing informația utilă în jos.
9. Fără ferestre pop-up care acoperă tot
Google penalizează interstițialele intruzive pe mobil. Un banner discret de cookie-uri, nu un ecran complet care nu se poate închide.
10. Elementele nu sar la încărcare
Layout Shift (CLS) apare când imaginile nu au dimensiuni declarate sau fonturile se încarcă târziu. Declară width și height pe imagini.
11. Se încarcă rapid pe 4G
Nu pe wifi-ul de la birou. Testează cu limitare de rețea — detalii în ghidul de viteză.
12. Poți completa o cerere cu o singură mână
Testul final: pe telefon, într-un autobuz, cu o mână. Dacă reușești să trimiți o cerere în sub un minut, site-ul e bun.
Cum testezi corect, gratuit
- Pe telefoanele reale pe care le ai la îndemână — un iPhone și un Android ieftin acoperă majoritatea cazurilor.
- DevTools în Chrome (F12, apoi modul dispozitiv): verifică 360px, 390px și 768px lățime.
- PageSpeed Insights — raportul mobil arată și viteza, și problemele de utilizare.
- Search Console — raportul de utilizabilitate pe mobil îți spune ce a văzut Google; vezi primii pași în Search Console.
Testul de trei secunde: deschide site-ul pe telefonul tău și dă-l unei persoane care nu îl cunoaște. Dacă în trei secunde nu poate spune ce vinzi, problema nu e tehnică, e de conținut.
Greșeli frecvente în România
- Meniu cu 12 intrări comprimat pe ecran de 5 inch.
- PDF-uri cu oferte în loc de pagini web (imposibil de citit pe telefon).
- Numere de telefon puse ca imagine, ca să nu fie „luate de roboți".
- Galerii de poze de 5 MB fiecare, direct din telefonul fotografului.
- Text alb pe fundal deschis, care pe telefon, în soare, dispare complet.
Concluzie
Un site responsive nu este cel care „se strânge" pe telefon, ci cel pe care poți face ce ai venit să faci, cu degetul mare, în drum spre casă. Parcurge checklistul o dată la șase luni — se strică lucruri, mai ales după adăugarea de conținut nou.
