Cum faci un site web adaptat pentru telefoane

Ca să faci un site web adaptat pentru telefoane, adaugă o etichetă meta viewport, construiește aspectul mobile-first cu lățimi flexibile și folosește puncte de întrerupere CSS ca să-l rearanjezi pe ecrane mai mari — așezând coloanele una sub alta, restrângând meniul și scalând imaginile ca să încapă. Apoi verifică fiecare pagină la lățimea unui telefon, pentru derulare laterală, text mic și butoane prea mici ca să le atingi. Pe un site construit cu AI, un prompt clar plus o verificare într-o previzualizare de dimensiunea unui telefon rezolvă de obicei cea mai mare parte.

Ce este de fapt designul responsive

Un site responsive folosește un singur set de pagini și de URL-uri care se adaptează la ecran. În loc de un site separat „m.”, CSS-ul schimbă aspectul la anumite lățimi, numite puncte de întrerupere. Elementele de bază:

• Eticheta meta viewport le spune browserelor mobile să folosească lățimea reală a dispozitivului.
• Aspecte fluide folosesc procente, flexbox și grid, în loc de lățimi fixe în pixeli.
• Media queries (sau clase de framework precum md: din Tailwind) schimbă aspectul peste o anumită lățime.
• Media flexibilă — imagini și videoclipuri care se micșorează ca să încapă în containerul lor.

Contează pentru că o mare parte din trafic probabil vine de pe telefoane și pentru că Google indexează versiunea mobilă a paginilor tale. Dacă un conținut sau un link există doar pe desktop, Google s-ar putea să nu le vadă nici el.

Opțiuni și compromisuri

Mobile-first este de obicei mai simplu: o singură coloană este cel mai ușor aspect, iar adăugarea de coloane pe măsură ce crește spațiul cere mai puțină muncă decât eliminarea lor.

Părțile care de obicei se strică

Eticheta viewport

Dacă o pagină arată ca un site de desktop minuscul pe telefon, lipsește eticheta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nu adăuga maximum-scale=1 sau user-scalable=no. Blocarea zoom-ului cu degetele face site-ul mai greu de folosit pentru persoanele cu deficiențe de vedere.

Lățimi fixe și derulare orizontală

Cea mai frecventă eroare responsive este ceva mai lat decât ecranul: un container cu width: 1200px fix, un tabel lat, un URL lung sau un bloc de cod, o imagine fără max-width: 100%. Întreaga pagină se derulează atunci lateral. Folosește max-width în loc de width, lasă textul să se rupă pe rânduri și dă elementelor late propria zonă de derulare.

Navigarea

Cinci linkuri de meniu de desktop încap rar pe telefon. Răspunsul obișnuit este un buton de meniu care deschide un panou. Păstrează vizibile cele două-trei acțiuni cele mai importante — „Rezervă”, „Coș”, „Autentificare” — și asigură-te că meniul funcționează cu tastatura și se închide ușor.

Text și zone de atingere

• Textul principal de aproximativ 16 px este un minim sensibil pe telefoane. Câmpurile cu text mai mic fac iPhone-urile să se mărească la atingere.
• Fă butoanele și linkurile ușor de apăsat. WCAG 2.2 AA stabilește un minim de 24 pe 24 de pixeli CSS (sau spațiere suficientă); în jur de 44 de pixeli este mai confortabil pentru degete.
• Lasă spațiu între linkurile alăturate, ca oamenii să nu apese pe cel greșit.

Tabele și date

Tabelele late sunt cea mai grea parte a unei aplicații responsive. Opțiuni, în ordinea preferinței: arată mai puține coloane pe telefoane, transformă fiecare rând într-un card sau pune tabelul într-un container cu derulare orizontală, cu prima coloană fixată. Alege în funcție de ce trebuie oamenii să compare.

Imagini și media

Folosește max-width: 100% și height: auto, servește fișiere mai mici pe ecrane mici cu srcset și setează lățimea și înălțimea ca să eviți săriturile de aspect. Videoclipurile și hărțile încorporate au nevoie de un wrapper responsive, ca să-și păstreze raportul de aspect. Imaginile mai mici fac și paginile mai rapide — vezi cum faci site-ul tău mai rapid.

Formulare

Așează etichetele deasupra câmpurilor, fă câmpurile de lățime completă și folosește tipurile de input potrivite (type="email", type="tel", inputmode="numeric"), ca telefoanele să afișeze tastatura corespunzătoare. Pune butonul de trimitere acolo unde îl poate atinge degetul mare și păstrează-l vizibil când se deschide tastatura.

Interacțiuni care depind doar de hover

Pe telefoane nu există hover. Tooltip-urile, meniurile derulante și previzualizările care apar doar la hover sunt invizibile pentru utilizatorii care folosesc atingerea. Fă-le să funcționeze și la atingere.

Prompturi care funcționează

Pentru o construcție nouă, spune-o de la început:

Construiește-l mobile-first. O singură coloană pe telefoane, două coloane de la lățimea tabletei, aspect complet pe desktop. Fără derulare orizontală la 320 px lățime, textul principal de cel puțin 16 px, zone de atingere de cel puțin 44 px, un buton de meniu pe ecranele mici și tabele care se transformă în carduri pe telefoane.

Pentru o pagină existentă, descrie ce vezi:

Pe telefoane, pagina /pricing se derulează lateral, iar cele trei carduri de planuri sunt strânse unul lângă altul. Așază cardurile vertical sub 768 px, fă tabelul de comparație să se deruleze orizontal în propriul container, cu coloana de funcționalități fixată, și păstrează neschimbat aspectul de desktop.

Verifică fiecare pagină la 375 px lățime. Listează tot ce depășește, se suprapune, are text mai mic de 16 px sau zone de atingere mai mici de 44 px, sau funcționează doar la hover, apoi repară fiecare punct.

Pas cu pas

1. Confirmă eticheta viewport din antetul paginii.
2. Testează la 320–375 px lățime în modul dispozitiv din browser sau într-o previzualizare de dimensiunea unui telefon. Derulează fiecare pagină de sus în jos.
3. Rezolvă mai întâi derularea orizontală. Găsește elementul care este prea lat; totul este greu de evaluat până nu dispare.
4. Pune în ordine navigarea: buton de meniu, acțiunile-cheie vizibile.
5. Verifică textul, zonele de atingere și formularele în fiecare flux important — înscriere, căutare, finalizare comandă, contact.
6. Tratează tabelele și media: carduri sau containere cu derulare, imagini și elemente încorporate responsive.
7. Verifică dimensiunile intermediare. Trage lent lățimea de la telefon la desktop; aspectele se strică adesea în jurul lățimii tabletei.
8. Testează pe un telefon real. Emulatoarele ratează lucruri precum tastatura de pe ecran care acoperă un buton, decupajele ecranului și cât de rapid pare site-ul pe date mobile.

Greșeli frecvente

• Testarea doar la o dimensiune de telefon. Verifică un telefon mic, un telefon mare și o tabletă.
• Ascunderea conținutului pe mobil ca să încapă. Google indexează versiunea mobilă, iar utilizatorii de telefon vor aceleași informații.
• Dezactivarea zoom-ului în eticheta viewport.
• Imagini de dimensiune desktop pe telefoane, care costă timp de încărcare și trafic de date.
• Elemente fixe care se adună: un antet lipit, un banner de cookie-uri și un balon de chat pot acoperi jumătate din ecranul telefonului.
• Pop-up-uri care nu pot fi închise pe un ecran mic, pentru că butonul de închidere este în afara ecranului.

Listă de verificare pentru mobil

• Eticheta meta viewport prezentă; zoom-ul nu este dezactivat
• Fără derulare orizontală la 320 px pe nicio pagină
• Textul principal ~16 px; câmpurile nu declanșează zoom
• Zone de atingere suficient de mari și distanțate
• Meniul funcționează pe telefoane și cu tastatura
• Tabelele sunt lizibile pe telefoane (carduri, mai puține coloane sau container cu derulare)
• Imaginile și elementele încorporate se scalează; fișiere de dimensiune potrivită
• Formularele folosesc tipurile de input potrivite; butonul de trimitere este accesibil
• Nimic important nu depinde de hover
• Testat pe cel puțin un telefon real

Aspectul responsive face parte și din accesibilitate: WCAG cere ca conținutul să funcționeze la 320 px lățime și la zoom de 200%. Dacă construiești o aplicație pe care oamenii o vor folosi zilnic pe telefoane, cum construiești o aplicație web adaptată pentru mobil merge mai departe, inclusiv cu PWA-uri instalabile.

Designul responsive pe Mythex

Mythex construiește aplicații web responsive, iar pe Pro le poate împacheta ca aplicații Android și iPhone. În spațiul de lucru, apasă pe iconița de telefon de deasupra Preview (Switch to Mobile) ca să vezi aplicația într-un cadru de dimensiunea unui telefon și trage de marginea cadrului ca să încerci alte lățimi (Preview and Code). Documentația are un prompt scurt de pornire pentru repararea aspectului pe ecrane mici, în prompturile pentru adaptarea la mobil. Verifică și pe un telefon real — deschide URL-ul publicat sau trimite un link de previzualizare și deschide-l pe telefon.

Întrebări