Site responsive pentru mobil — 10 greșeli care îți strică conversia

/* 1. Viewport meta tag — fundamental */
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */

/* 2. Font size minim pe mobile — evită zoom iOS */
body { font-size: 16px; }
input, select, textarea { font-size: 16px; }

/* 3. Tap target minim 44×44px */
.btn, a[role="button"] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
}

/* 4. Safe area iOS (notch) */
.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 5. Imagini responsive fără CLS */
img { max-width: 100%; height: auto; aspect-ratio: attr(width) / attr(height); }

10 greșeli responsive care îți strică conversia

Peste 70% din traficul pe site-urile românești de business vine de pe mobile. Dacă experiența pe telefon e proastă, pierzi 2 din 3 vizitatori.

1. Lipsește viewport meta tag

Fără el, iOS Safari desenează site-ul la 980px și face zoom. Uită de responsive.

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

2. Font sub 16px pe inputs = zoom iOS forțat

iOS Safari forțează zoom pe orice input cu font < 16px. Îți sparge layout-ul și UX-ul.

3. Tap targets prea mici

Apple HIG + Material recomandă min 44×44px (sau 48dp pe Android). Butoane mai mici → miss-taps → abandon.

4. Slider-uri / carouseluri în header

Pe mobile, nimeni nu swipe-uiește carouselul. 80% din useri văd doar primul slide. Folosește un hero static cu CTA clar.

5. Sidebar transformat în accordion infinit

Dacă sidebar-ul devine "accordion cu 20 de secțiuni expandabile", utilizatorul se pierde. Solutia: meniu principal cu maxim 5–7 link-uri.

6. Formular cu 10 câmpuri

Pe mobile, fiecare câmp = 1s pierdut. Cere doar strictul necesar — nume, email, mesaj. Restul colectezi în conversație.

7. Fără input types corecte

Tastatură potrivită crește conversia:

<input type="email">     <!-- @ pe tastatură -->
<input type="tel">        <!-- tastatură numerică -->
<input type="number">     <!-- doar cifre -->
<input type="date">       <!-- native date picker -->
<input inputmode="decimal"><!-- tastatură cu virgulă -->

8. Layout shifts (CLS) din imagini

Imaginile fără width și height setate = browser-ul desenează spațiu de 0px, apoi sare când se încarcă. Asta e Cumulative Layout Shift și Google te penalizează.

<img src="/poza.jpg" width="800" height="600" alt="...">

9. Ignori safe areas pe iPhone (notch)

Butoanele ascunse sub notch / home indicator → neapăsabile. Foloseste env(safe-area-inset-*).

10. Buton "trimite" ascuns sub tastatură

Când iOS deschide tastatura, viewport-ul se micșorează. Dacă butonul submit e fix-poziționat jos, dispare. Soluție: position: sticky sau dvh în loc de vh.

Testing rapid

1. Chrome DevTools → emulare Pixel 7 + iPhone 14 Pro
2. PageSpeed Insights — secțiunea Mobile
3. Mobile-Friendly Test de la Google
4. Real device pe ambele sisteme

Comenzi utile

# Lighthouse mobile pe CLI
npx lighthouse https://eduardweb.ro --preset=mobile

# Screenshot la viewport specific
npx puppeteer-screenshot --url=... --width=390 --height=844

Vrei audit mobile UX?

Îți trimit top 10 fix-uri prioritare în 48h — cere aici.