Ce înseamnă un site responsive și cum verifici dacă al tău este

Un site responsive își schimbă așezarea ca să se potrivească ecranului pe care e deschis. Pe laptop poate ai trei coloane una lângă alta. Pe telefon, același conținut se așază într-o singură coloană, meniul se strânge într-un buton, iar textul se citește fără zoom. E același site, la aceeași adresă, cu același conținut, aranjat pentru fiecare ecran.

De ce contează mai mult ca înainte

În septembrie 2026, telefoanele au adus aproape 59% din vizualizările de pagini din toată lumea, după StatCounter, față de vreo 39% calculatoarele și sub 2% tabletele. La site-ul tău împărțirea poate fi alta, iar instrumente ca Google Analytics ți-o arată, dar pe internet, în ansamblu, telefoanele sunt acum majoritare.

Și Google se uită întâi la varianta de telefon. Documentația lui spune că folosește versiunea de mobil a conținutului unui site, vizitată cu robotul pentru smartphone, ca să-l indexeze și să-l claseze. Trecerea s-a încheiat în iulie 2024, iar Google a anunțat atunci că un site al cărui conținut nu poate fi accesat deloc de pe un dispozitiv mobil nu va mai fi indexat. Dintre variantele de a face un site pentru telefon, recomandă designul responsive, pentru că e cel mai ușor de făcut și de întreținut.

Înainte să devină normal designul responsive, multe firme aveau un site separat pentru mobil, de multe ori la o adresă ca m.exemplu.ro, cu paginile lui, care trebuiau ținute la zi separat. Un site responsive are un singur set de pagini, o singură adresă de dat mai departe și un singur loc unde modifici.

Cum funcționează, pe scurt

Trei lucruri fac aproape toată treaba. Primul e o singură linie din codul paginii, eticheta viewport, care îi spune browserului de pe telefon să folosească lățimea reală a ecranului. Fără ea, browserele de mobil așază pagina ca și cum ecranul ar fi mult mai lat, de multe ori 980 de pixeli, și apoi micșorează totul ca să încapă. De asta unele site-uri vechi apar minuscule și trebuie să mărești cu degetele ca să citești.

Al doilea e o așezare flexibilă, cu lățimi date ca parte din ecran, nu ca număr fix de pixeli, astfel încât o coloană poate ocupa o treime din ecranul unui laptop și toată lățimea unui telefon. Al treilea sunt media queries: reguli din stilurile site-ului care schimbă așezarea la anumite lățimi de ecran. Pozele urmează aceeași idee. Se micșorează odată cu spațiul în care stau, fără să iasă din el, iar un site făcut bine le trimite ecranelor mici fișiere mai mici.

Designul responsive merge și în cealaltă direcție. Pe un monitor foarte lat, o pagină care întinde textul pe tot ecranul se citește greu, pentru că ochiul se pierde între capătul unui rând și începutul următorului. Site-urile bine făcute limitează lățimea textului și lasă fundalul să umple restul.

Cum îți verifici site-ul

Începe cu cel mai simplu test. Pe calculator, deschide site-ul și trage încet de marginea ferestrei browserului ca s-o îngustezi. Un site responsive se rearanjează pe măsură ce tragi. Dacă se taie bucăți din pagină, apare o bară de derulare pe orizontală sau textul se strânge într-o fâșie îngustă, ceva nu se adaptează.

Ca să vezi mai bine, folosește modul pentru dispozitive din Chrome. Apasă F12 ca să deschizi instrumentele pentru dezvoltatori, apoi dă click pe iconița mică cu telefon și tabletă de sus sau apasă Ctrl+Shift+M (Cmd+Shift+M pe Mac). Poți alege modele de telefoane cunoscute sau poți scrie orice lățime. Google îl descrie ca pe o primă aproximare a unui telefon real: așezarea o să fie corectă, dar nu-ți arată cum se descurcă un telefon mai vechi cu pagina.

Așa că termină pe telefoane adevărate. Folosește-l pe al tău și, dacă poți, împrumută unul mai vechi sau cu ecran mai mic. Treci prin paginile pe care oamenii le folosesc cel mai des: prima pagină, o pagină de produs sau de serviciu, formularul de contact și pagina de plată, dacă ai una.

Ideal e să încerci și pe un iPhone, și pe un telefon cu Android. Folosesc motoare de browser diferite, WebKit la Safari și Blink la Chrome, așa că o pagină poate arăta bine pe unul și stricat pe celălalt. Întoarce telefonul pe orizontală măcar o dată. Unele așezări care merg în poziție verticală se strică pe orizontală.

Articolele mai vechi te pot trimite la Mobile-Friendly Test de la Google. Google l-a retras în decembrie 2023, împreună cu raportul Mobile Usability din Search Console. Lighthouse, care e inclus în Chrome, și PageSpeed Insights acoperă acum mare parte din ce făcea el.

La ce să te uiți pe telefon

Întâi, derularea pe orizontală. Pe telefon ar trebui să derulezi doar în jos. Dacă pagina alunecă într-o parte, ceva e mai lat decât ecranul, de obicei o poză, un tabel sau un videoclip încorporat.

Apoi textul. Ar trebui să-l poți citi fără zoom. Dacă trebuie să mărești cu degetele, textul e prea mic sau paginii îi lipsește eticheta viewport.

Verifică dacă butoanele și linkurile se apasă ușor cu degetul mare. Ghidurile de accesibilitate web, WCAG 2.2, cer minimum 24 pe 24 de pixeli pentru orice element pe care apeși sau destul spațiu liber în jurul celor mai mici. Problema obișnuită sunt linkurile înghesuite în subsol sau în meniu.

Completează-ți singur formularul de contact pe telefon. Uită-te să nu dispară câmpurile în spatele tastaturii, ca la câmpul de email să apară o tastatură cu @ și ca butonul de trimitere să poată fi atins.

Atenție la ferestrele pop-up. O fereastră care acoperă toată pagina e mult mai enervantă pe telefon, unde ca s-o închizi trebuie să nimerești un X minuscul. Google recomandă să nu folosești ferestre care ascund toată pagina și sugerează în locul lor bannere, cu excepția celor cerute de lege, cum ar fi verificarea vârstei.

La final, deschide meniul, apasă pe elementele lui și închide-l la loc, iar pe drum uită-te la poze și la videoclipuri. Ar trebui să încapă pe ecran fără să fie întinse sau tăiate în locuri ciudate.

Dacă nu e responsive

Dacă site-ul tău e făcut pe o platformă de site-uri sau pe un sistem ca WordPress, uită-te întâi la temă sau la șablon. Multe teme actuale sunt responsive, iar dacă o schimbi sau o actualizezi pe a ta s-ar putea să rezolvi mare parte din problemă.

Problemele mici, cum ar fi un tabel sau o poză prea lată, se rezolvă de obicei repede. Dacă tot site-ul a fost făcut acum mulți ani doar pentru calculator, adaptarea pagină cu pagină poate dura mai mult decât refacerea așezării. Asta e o discuție cu un programator, iar lista de probleme găsite pe telefonul tău e cel mai bun lucru pe care să-l iei cu tine.