Lipsește eticheta viewport
E o singură linie în codul paginii, cu valoarea width=device-width, initial-scale=1. Fără ea, telefonul afișează pagina de calculator micșorată la lățimea ecranului. De aici textul minuscul și nevoia de zoom.
Problemă: mobil
Site-ul tău nu se vede bine pe telefon. Exact acolo unde te caută clienții.
Dacă site-ul nu se vede bine pe telefon, majoritatea vizitatorilor tăi îl văd stricat, pentru că pe telefon caută oamenii un meșter, un restaurant sau o programare. Pe calculatorul tău poate arăta perfect. Pe al lor, nu.
Te recunoști?
- Textul e atât de mic încât trebuie să mărești cu două degete ca să citești.
- Pagina fuge în lateral și trebuie să o tragi stânga-dreapta.
- Butoanele și linkurile sunt atât de apropiate încât apeși mereu pe cel greșit.
- Un pop-up acoperă tot ecranul, iar X-ul de închidere e minuscul sau iese din ecran.
- Numărul de telefon nu se poate apăsa: clientul trebuie să-l copieze de mână.
De ce se strică site-ul pe telefon
Lățimi fixe
Un container setat la 1200 de pixeli, un tabel lat, o poză sau o hartă cu lățime fixă. Ecranul telefonului e mult mai îngust, așa că pagina iese în afară și apare derularea laterală.
Pop-up-uri peste conținut
Banner de cookie-uri, fereastră de newsletter, chat și ofertă, toate odată. Pe un ecran mic nu mai rămâne nimic din pagină. Google recomandă explicit să nu acoperi conținutul pe mobil cu ferestre intruzive.
Ținte de atingere prea mici
Un deget nu e un cursor de mouse. Linkurile mici, lipite unele de altele, și meniurile care se deschid doar la trecerea mouse-ului nu funcționează pe telefon. Google recomandă ținte de atingere de aproximativ 48 × 48 de pixeli.
Design gândit doar pentru calculator
Site-urile vechi au fost construite pentru ecrane mari. Iar în constructoarele de site-uri, varianta de mobil se strică ușor când muți ceva pe varianta de desktop și nu verifici după aceea.
Ce poți face singur, pas cu pas
1. Testează pe telefoane reale
Deschide site-ul pe telefonul tău și pe unul de alt tip, Android și iPhone. Fă drumul unui client: găsește serviciul, apasă pe număr, trimite formularul. Ține telefonul și orizontal. Notează tot ce te enervează.
2. Verifică în Chrome, pe calculator
Deschide site-ul în Chrome, apasă F12, apoi Ctrl+Shift+M (pe Mac Cmd+Shift+M). Alege diferite telefoane din listă și derulează fiecare pagină. Dacă apare bara de derulare orizontală, ceva e prea lat.
3. Caută eticheta viewport
Apasă Ctrl+U ca să vezi codul paginii și caută cuvântul viewport. Dacă nu există, tema e foarte veche. Unele teme o pot adăuga din setări, dar de obicei e semn că tema trebuie schimbată.
4. Domolește pop-up-urile
Arată fereastra de newsletter doar pe calculator sau ca o bandă mică jos, nu peste tot ecranul. Bannerul de cookie-uri trebuie să lase pagina vizibilă și să aibă butoane mari, ușor de apăsat. Scoate chat-ul dacă nu răspunde nimeni la el.
5. Fă apăsabil ce contează
Pune numărul de telefon ca link de apel (tel:), ca să sune clientul cu o atingere. Butoanele principale trebuie să fie mari, cu spațiu în jur. Textul de bază să aibă în jur de 16 pixeli.
6. Îmblânzește elementele late
Pozele nu trebuie să depășească lățimea ecranului. Tabelele late se pun într-o cutie care se derulează separat sau se transformă în liste. În constructoare precum Wix, deschide editorul de mobil și verifică fiecare secțiune.
Când merită să chemi un profesionist
Dacă lipsește viewport-ul, dacă tema e veche sau dacă fiecare reparație strică altceva, peticirea costă mai mult decât rezolvă. Site-urile mele sunt gândite întâi pentru telefon și testate pe telefoane reale înainte de lansare, cu PageSpeed 90+ pe mobil garantat în scris. Un site nou pornește de la 499 € (≈ 2.630 lei); pentru mai multe pagini, pachetul Business costă 1.499 € (≈ 7.910 lei). Dacă vrei să păstrezi conținutul și doar să schimbi haina, uită-te la refacerea site-ului.
Întrebări frecvente
Contează pentru Google cum arată site-ul pe telefon?
Da. Google indexează și evaluează site-urile în primul rând după varianta de mobil. Dacă pe telefon lipsește conținut sau pagina e greu de folosit, asta contează.
Unde a dispărut testul Google pentru mobil?
Google a retras testul Mobile-Friendly și raportul de utilizare pe mobil din Search Console în decembrie 2023. Azi verifici cu Chrome pe calculator, cu PageSpeed Insights și, mai ales, cu telefoane reale.
Am nevoie de un site separat pentru mobil?
Nu. Un site responsive se adaptează singur la orice ecran, de la telefon la monitor mare. E și varianta pe care o recomandă Google. Două site-uri separate înseamnă dublu de întreținut.
Nu e mai bine o aplicație?
Pentru cele mai multe firme, aproape niciodată. Clienții te caută în Google și nu instalează o aplicație ca să afle programul sau numărul de telefon. Un site bun pe telefon face aceeași treabă.
Alte probleme frecvente
Vezi toate problemele →Fă un quiz de 2 minute →
Scris de Raul Gabriel Nagy
Fondatorul RAGANA Studio, web designer din 2009. Construiesc site-uri și magazine online pentru firme din România, Ungaria, Austria și Germania, și am propriul magazin online, raganadesign.shop. Povestea mea →
Actualizat:Vrei să rezolvăm împreună?
Scrie-mi pe WhatsApp sau trimite un mesaj. Îți răspund în aceeași zi lucrătoare, cu un preț fix dacă e nevoie de mine.