Pe scurt
Un site responsive este un site care își reorganizează singur conținutul după ecranul pe care e deschis, de la telefon la monitor: coloanele se rearanjează, imaginile se micșorează, textul rămâne lizibil fără zoom, iar butoanele se apasă ușor cu degetul. Este același site, cu aceeași adresă și același conținut, nu o versiune separată pentru mobil.
Ce înseamnă un site responsive
Un site responsive, în engleză responsive web design (RWD), este construit dintr-un singur cod care se adaptează la lățimea ecranului și la felul în care e folosit, cu mouse-ul sau cu degetul. „Responsive” înseamnă, literal, „care răspunde”: pagina răspunde la dispozitivul pe care e deschisă.
Wikipedia în română descrie responsive web design ca pe o filozofie de design și dezvoltare, nu ca pe o funcție bifată la final. Sinners Projects pornește de la ideea că o pagină responsive răspunde utilizatorului în funcție de dispozitivul pe care îl folosește, iar Webwave.ro pune accentul pe scop: site-ul trebuie să funcționeze fără probleme pe o multitudine de dispozitive și dimensiuni de ecran.
Cuvântul important este „funcționează”: un site care doar încape pe ecranul telefonului nu e neapărat responsive. Responsive e site-ul pe care, de pe telefon, găsești numărul și trimiți formularul la fel de ușor ca pe desktop.
Cum funcționează un site responsive
Un site responsive funcționează prin patru mecanisme: un layout fluid, puncte de schimbare (breakpoints), imagini flexibile și eticheta viewport. Toate se scriu în HTML și CSS, în același cod pentru toate dispozitivele.
Layout-ul fluid. Lățimile se definesc relativ, ca proporții din spațiul disponibil, nu ca valori fixe. Tehnicile CSS actuale, Flexbox și Grid, lasă elementele să treacă singure pe rândul următor când nu mai au loc, iar spațierile și mărimea textului pot crește sau scădea treptat, între o limită minimă și una maximă.
Breakpoints. Un breakpoint este lățimea de la care pagina își schimbă așezarea, de exemplu din trei coloane într-una sau dintr-un meniu complet într-un buton de meniu. Se definesc în CSS prin media queries. Breakpointurile bune se aleg după conținut, nu după un model de telefon: întrebarea corectă e „de la ce lățime începe să arate rău acest tabel sau acest meniu?”.
Imagini flexibile. Imaginile nu depășesc lățimea containerului și se micșorează proporțional. Un site bine făcut trimite, în plus, fiecărui ecran o imagine de mărimea potrivită, prin atributele srcset și sizes sau prin elementul picture, care permite și o încadrare mai strânsă pe subiect pe mobil.
Eticheta viewport. Este linia din antetul paginii care îi spune browserului de pe telefon să folosească lățimea reală a ecranului. Fără ea, browserele mobile afișează pagina ca pe un desktop și o micșorează până încape, chiar dacă CSS-ul are breakpoints.
Un exemplu minim, cu valori ilustrative:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img { max-width: 100%; height: auto; }
.servicii { display: grid; gap: 1rem; }
@media (min-width: 48rem) {
.servicii { grid-template-columns: repeat(3, 1fr); }
}
</style>
Pe telefon, serviciile apar unul sub altul; de la lățimea din media query în sus, se așază pe trei coloane. Abordarea se numește mobile-first: pornești de la ecranul mic și adaugi reguli pe măsură ce ecranul crește.
Responsive, adaptiv sau site separat pentru mobil: care e diferența
Un site poate fi servit pe telefon în trei feluri: responsive, cu un singur cod care se adaptează continuu, adaptiv, cu câteva machete fixe alese după dispozitiv, sau ca site separat pentru mobil, de obicei pe o subadresă de tipul m.domeniu.ro. Pentru un site de firmă construit acum, responsive este alegerea implicită.
| Aspect | Responsive | Adaptiv | Site separat (m.) |
|---|---|---|---|
| Cum se adaptează | Continuu, la orice lățime | Sare între câteva machete fixe | E o altă versiune, pe altă adresă |
| Adrese (URL-uri) | Aceeași adresă peste tot | De obicei aceeași adresă | Adrese diferite pentru mobil și desktop |
| Întreținere | Un singur cod, același conținut | Mai multe machete de întreținut | Două site-uri de ținut sincronizate |
| Între dimensiunile prevăzute | Arată corect | Poate lăsa spații goale sau elemente tăiate | Depinde de detectarea dispozitivului |
| Pentru Google | Cel mai simplu de indexat | Merge, dacă toate machetele au același conținut | Cere legături între versiuni (rel="alternate" și canonical) și redirecturi corecte |
Documentația Google Search Central recomandă designul responsive ca fiind modelul cel mai ușor de implementat și de întreținut. La un site m., orice text schimbat pe desktop trebuie schimbat și pe mobil, iar o pagină uitată într-una dintre versiuni devine o problemă de indexare.
De ce contează un site responsive pentru o afacere din România
Un site responsive contează pentru că, la o firmă locală, o mare parte din clienți te găsesc, te verifică și te contactează de pe telefon. Dacă site-ul nu funcționează acolo, pierzi cererea exact când omul era gata să sune. Cât de mare e partea asta la tine vezi în Google Analytics, în vizitele defalcate pe categorii de dispozitive.
- Google se uită întâi la versiunea de pe mobil. Potrivit documentației Google Search Central, Google indexează și clasează paginile în principal după versiunea lor de pe mobil, un mod de lucru numit indexare mobile-first. Afișarea pe telefon ține deci de partea tehnică a optimizării pentru Google.
- Recomandările circulă pe telefon. Un link trimis pe WhatsApp, o postare pe Facebook sau butonul „Site” din Profilul companiei pe Google se deschid, de obicei, pe telefon.
- Click-urile plătite ajung pe telefon. Dacă pagina spre care trimit reclamele nu funcționează pe mobil, plătești click-uri care nu pot deveni cereri. De aceea, landing page-urile pentru campanii se construiesc întâi pentru ecranul mic.
Să zicem că un cabinet veterinar din București e recomandat pe grupul de WhatsApp al unui bloc. Cine deschide linkul vede pe telefon prima pagină micșorată: programul e scris într-o imagine, cu litere mărunte, iar numărul de telefon stă în subsol, ca text pe care nu poți apăsa ca să suni. Omul închide pagina și sună la clinica pe care o găsește primul pe hartă. Recomandarea și-a făcut treaba; site-ul a pierdut-o.
Ce trebuie să includă un site responsive, dincolo de layout
Un site e cu adevărat responsive când pe telefon poate fi folosit, nu doar privit. Rearanjarea coloanelor e doar începutul.
- Zone de atingere destul de mari. Butoanele, linkurile din meniu și câmpurile de formular sunt suficient de mari și de distanțate încât să nu apeși din greșeală pe vecinul lor.
- Text lizibil fără zoom, cu rânduri nu prea lungi și contrast suficient, inclusiv afară, în soare. Textul scris peste fotografii devine primul ilizibil pe telefon.
- Formulare pentru degetul mare. Puține câmpuri, etichete vizibile și tipul potrivit de câmp: cel de telefon deschide tastatura numerică, cel de e-mail tastatura cu @. Pe iPhone, câmpurile cu text prea mic fac browserul să mărească pagina la atingere.
- Navigare fără hover. Pe un ecran tactil nu există „cursorul deasupra”, așa că un submeniu care se deschide doar la trecerea mouse-ului rămâne închis pe telefon.
- Viteză pe date mobile. Testul real este un telefon obișnuit pe o conexiune mobilă, nu laptopul de la birou. Ce anume încetinește un site și în ce ordine repari găsești în ghidul despre optimizarea vitezei, cu testul făcut pe mobil.
- Apel și WhatsApp la o atingere distanță. Numărul de telefon e un link de apel (
tel:), iar butoanele de apel și de WhatsApp stau acolo unde vizitatorul ia decizia: în primul ecran, lângă fiecare serviciu sau într-o bară fixă în partea de jos. - Tabele care nu împing pagina în lateral. Pe telefon devin carduri sau se derulează în interiorul lor.
- Zoom permis. O etichetă viewport care blochează zoomul îi încurcă tocmai pe cei care văd mai slab.
Cum testezi dacă un site este responsive
Un site responsive se testează în trei feluri: în modul pentru dispozitive al browserului, pe telefoane reale și cu PageSpeed Insights sau Lighthouse pe mobil. Fiecare prinde alte probleme, așa că niciunul nu le înlocuiește pe celelalte.
- Modul pentru dispozitive din browser. În Chrome, deschide instrumentele pentru dezvoltatori (F12 pe Windows, Cmd+Option+I pe Mac) și pornește bara de dispozitive (Ctrl+Shift+M, respectiv Cmd+Shift+M); Firefox și Safari au un Responsive Design Mode asemănător. Nu te opri la modelele de telefon din listă: trage încet de marginea ferestrei, de la cea mai îngustă lățime la cea mai lată, și urmărește unde se rupe ceva.
- Telefoane reale. Browserul simulează lățimea, nu și degetul, tastatura care acoperă o bună parte din pagină sau semnalul slab. Testează pe un Android și pe un iPhone, pe date mobile și într-o fereastră privată, ca un vizitator nou.
- Sarcinile reale, cap-coadă. Fă ce face un client: caută serviciul în meniu, sună de pe site, trimite formularul, deschide WhatsApp-ul, întoarce telefonul orizontal. Apoi verifică dacă formularul a ajuns unde trebuia.
- PageSpeed Insights și Lighthouse pe mobil. PageSpeed Insights deschide implicit rezultatul pentru mobil și arată, când site-ul are destule vizite, date de la utilizatori reali, apoi un diagnostic de laborator. Lighthouse, inclus în Chrome, semnalează și probleme de accesibilitate, cum ar fi contrastul slab sau câmpurile fără etichetă. Testează și o pagină de serviciu și pagina de contact, nu doar prima pagină.
Testul separat de compatibilitate cu dispozitivele mobile pe care îl oferea Google a fost retras, așa că instrucțiunile care încă îl recomandă sunt depășite.
Un scenariu frecvent: pe desktop și în modul pentru dispozitive totul e în regulă. Pe un telefon real, într-o fereastră privată, butonul fix de WhatsApp din colțul din dreapta jos stă sub bannerul de cookie-uri și nu poate fi apăsat până la acceptarea lor. Cine lucrează la site a acceptat demult cookie-urile și nu vede problema; fiecare vizitator nou o vede.
Checklist înainte să declari site-ul responsive:
- Pagina nu se derulează în lateral la nicio lățime de ecran.
- Textul se citește fără zoom, iar zoomul funcționează.
- Numărul de telefon pornește apelul, iar butonul de WhatsApp deschide conversația.
- Meniul și submeniurile se deschid și se închid la atingere.
- Formularul se trimite de pe telefon și ajunge unde trebuie.
- Nimic nu acoperă butoanele principale: nici bannerul de cookie-uri, nici chatul, nici un pop-up.
Greșeli frecvente la un site responsive
Cele mai multe greșeli vin dintr-un site gândit pentru desktop și adaptat la final pentru telefon. Telefonul nu este o versiune micșorată a desktopului.
- Desktopul strâns în telefon. Varianta de mobil e ce rămâne după ce coloanele cad una sub alta: secțiuni foarte lungi, ierarhie pierdută, butonul principal la câteva ecrane distanță.
- Conținut scos de pe mobil. Ca pagina să pară mai scurtă, unele texte sau secțiuni dispar din versiunea mobilă. Cum Google indexează în principal versiunea de pe mobil, ce lipsește acolo poate să nu mai conteze nici în căutări. Conținutul strâns în acordeoane rămâne în pagină; cel eliminat, nu.
- Pop-up-uri care acoperă conținutul. O fereastră de abonare care umple ecranul imediat după intrare, cu un X minuscul. Documentația Google Search Central le recomandă site-urilor să evite ferestrele intruzive care acoperă conținutul principal.
- Text în imagini și meniuri în PDF. Pe telefon, clientul mărește, trage de pagină și renunță. Textul scris în pagină se adaptează la ecran și poate fi citit și de Google.
- Testat doar pe telefonul celui care a făcut site-ul, mare, nou și pe Wi-Fi, nu pe telefoanele și pe datele mobile ale clienților.
Site vechi care nu e responsive: îl repari sau îl refaci?
Un site vechi care nu e responsive se poate repara când structura lui e deja fluidă și doar câteva componente se rup pe telefon. Trebuie refăcut când a fost construit pe lățime fixă, doar pentru desktop, sau când are o versiune m. separată, întreținută în paralel.
| Situația | Ce faci de obicei |
|---|---|
| Site-ul se adaptează, dar un tabel, meniul sau câteva imagini ies din ecran | Reparații punctuale în CSS |
| Arată bine pe telefon, dar se încarcă greu pe date mobile | Întâi optimizare de viteză |
| Layout pe lățime fixă, construit doar pentru desktop | Refacere sau, cel puțin, redesign al șabloanelor |
| Site separat pentru mobil (m.) | Refacere pe un singur site responsive, cu redirecturi de la adresele m. la paginile echivalente |
Un scenariu frecvent: o firmă de transport are un site vechi, pe lățime fixă, iar cineva adaugă eticheta viewport ca să-l „facă responsive”. Rezultatul e mai rău: browserul afișează pagina la lățimea telefonului, dar conținutul are în continuare lățimea desktopului, așa că vizitatorul derulează în lateral ca să citească un rând. Aici nu există reparație punctuală; layout-ul se rescrie de la bază.
Dacă se rup câteva componente, repari. Dacă problema apare pe fiecare pagină, pentru că așa e construit șablonul, refacerea iese, de obicei, mai ieftin decât un șir de reparații. Variantele dintre redesign și refacere și pașii prin care relansezi fără să pierzi pozițiile din Google sunt în ghidul despre momentul în care un site trebuie refăcut.
La Magnitude Web, un proiect de creare site de prezentare include layout-uri pentru telefon, tabletă și desktop, desenate în Figma. Tipografia, imaginile, butoanele și formularele sunt ajustate pentru fiecare breakpoint relevant și testate pe mai multe dispozitive, iar Core Web Vitals sunt verificate pe mobil și pe desktop. Construim în cod, pe React și Next.js, Nuxt, Svelte sau HTML, CSS și JavaScript, iar un site de prezentare pornește de la 400 €.
Termeni pe care merită să îi știi
Termenii de mai jos apar în orice discuție cu un designer sau un developer despre afișarea pe telefon.
- Media query: regula CSS care schimbă așezarea paginii de la un anumit breakpoint.
- Mobile-first: designul și codul pornesc de la ecranul mic și se extind spre cel mare.
- Indexare mobile-first: Google indexează și clasează paginile în principal după versiunea lor de pe mobil.
- Core Web Vitals: indicatorii Google pentru încărcare, reacția la interacțiuni și stabilitatea vizuală, măsurați separat pe mobil și pe desktop.
- Landing page: o pagină cu un singur obiectiv, pe care ajunge vizitatorul după un click pe o reclamă; ce conține o pagină de destinație bună.
Întrebări frecvente
Ce înseamnă responsive în română?
„Responsive” se traduce prin „care răspunde” sau „care reacționează”. Un site responsive reacționează la ecranul pe care e deschis și își adaptează așezarea, imaginile și textul, ca să poată fi folosit la fel de bine pe telefon, tabletă și desktop.
Ce este un site responsive design?
Formularea vine de la responsive web design: un site construit cu un singur cod, care se adaptează la orice lățime de ecran. „Site responsive” și „site cu design responsive” înseamnă același lucru.
Cum îmi dau seama dacă site-ul meu este responsive?
Deschide-l pe telefon: dacă textul se citește fără zoom, pagina nu se derulează în lateral, iar butoanele se apasă ușor, e responsive. Apoi verifică-l în modul pentru dispozitive din Chrome și în PageSpeed Insights, pe mobil.
Mai am nevoie de o aplicație mobilă dacă site-ul e responsive?
Pentru majoritatea firmelor care vor să fie găsite și contactate, nu. Reea.net, într-o comparație între site-urile responsive și aplicațiile mobile, observă că site-urile sunt mult mai ușor de promovat între utilizatori, prin transmiterea unui simplu link. O aplicație are sens când clienții o folosesc foarte des, de exemplu pentru un cont deschis zilnic.
Contează pentru Google dacă site-ul este responsive?
Da. Potrivit documentației Google Search Central, Google indexează și clasează paginile în principal după versiunea lor de pe mobil, iar designul responsive e modelul pe care documentația îl recomandă ca fiind cel mai ușor de implementat și de întreținut. Ce lipsește din versiunea de pe mobil contează, așadar, și pentru căutările de pe desktop.