9. јун 2026.·7 min čitanja·Nikola Teofilović

Mobile-first dizajn sajta: šta to znači u praksi i zašto je važno za biznis

70%+ posetilaca dolazi sa telefona. Mobile-first nije 'ista stranica samo uža', već drugačiji pristup od početka. Vodič kroz konkretne razlike i checklist.

70-80% posetilaca tvog sajta dolazi sa telefona. Ako je tvoj sajt dizajniran prvo za desktop pa "prilagođen" za mobile, gubiš većinu publike. Mobile-first ne znači "ista stranica samo uža" · to je drugačiji pristup od početka. Ovaj vodič pokriva razliku u praksi i konkretnu checklist.

Google od 2021. koristi mobile-first indexing · gleda mobilnu verziju tvog sajta za rangiranje. Ako je mobilna verzija siromašnija od desktop-a, rangirate se po siromašnijoj verziji bez obzira što ti misliš da je desktop "prava" verzija.

Šta je mobile-first dizajn (i šta nije)

Mobile-first znači da dizajniraš i razvijaš sajt prvo za telefon, pa onda širiš za veće ekrane. Suprotno od onoga što su agencije godinama radile · "uradimo desktop pa ćemo da prilagodimo". Razlika u rezultatu je dramatična jer kad počneš od telefona, prinuđen si na konkretne odluke koje desktop dozvoljava da se izbegnu.

Mobile-first nije:

Skidanje delova sa desktop-a dok ne stane na telefon
Hamburger meni umesto pune navigacije
Smanjenje fonta da se sve nabije u 360px
Hiding kolona kroz CSS @media query

Mobile-first jeste:

Hierarchy odluka: šta je najvažnije, to ostaje; sve ostalo se izbacuje ili premešta
Dizajn za palac · sve interaktivno mora da bude u zoni gde palac dohvaća
Single column layout · tekst i sadržaj jedan ispod drugog
Forme koje se otvaraju na ceo ekran, dugmad veličine 44x44px+

10 stavki na mobile-first checklist

1. Hero sekcija staje na jedan ekran

Naslov + pod-headline + jedan CTA · sve u 100vh telefona. Ako je hero duži od ekrana, posetilac mora da skroluje pre nego što razume šta nudiš. To je trenje koje sebi sami praviš. ( Šta ide u hero sekciju pokriva framework od 4 elementa.)

2. Tekst čitljiv bez zumiranja

Minimum font size: 16px za body tekst. Manje od toga i korisnici počnu da pinch-zoom-uju · što je signal da si pogrešio. Headings idu nelinearno · H1 može biti 32-48px, H2 24-32px, H3 18-22px.

3. Touch targets minimum 44x44 pixel-a

Apple, Google, i WCAG svi se slažu: nijedan tap target ne sme biti manji od 44x44px. Dugmad, linkovi u menu-u, checkbox-ovi, sve. Manje od toga i korisnik klikne pogrešno, frustrira se, ode. Posebno važno za glavno CTA dugme koje nosi konverziju.

4. Nav koji ne krije sve

Hamburger meni je default izbor, ali sakrije ti glavne CTA-e iza klika. Razmišlja o sticky bottom bar-u sa 2-3 glavna akcijska dugmeta (Pozovi, Razglednica, Forma) · ili bar hamburger plus jedan vidljiv CTA u nav-u.

5. Forme: jedno polje po redu, full width

Side-by-side polja izgledaju dobro na desktopu, na telefonu su nečitljiva. Svako polje zauzima ceo ekran horizontalno. Label iznad polja, ne placeholder umesto label-a (placeholder se gubi čim krenete da kucate).

6. Slike optimizovane za mobilnu rezoluciju

Najveća greška: hero slika 3000x2000px posluživana na telefon koji je 360x640. To opterećuje mobile podatke i pravi LCP od 5+ sekundi. Koristi srcset ili Next.js Image koji automatski servira rezoluciju koja odgovara veličini ekrana.

7. Brzina · ne više od 2 sekunde za LCP na 4G

Testiraj sajt na throttled 4G u Chrome DevTools-u, ne na svom Wi-Fi-ju. Ako LCP prelazi 2.5 sekunde, gubiš 30%+ posetilaca pre nego što sajt učita. Skidanje slika, deferiranje JavaScript-a koji nije kritičan, manje fontova · sve pomaže. (Brzina je i SEO faktor · on-page checklist ima više detalja.)

8. Sticky CTA na dnu ekrana

Za sajtove koji prodaju · sticky "Pozovi" ili "Naruči" dugme koje ostaje vidljivo dok korisnik skroluje. Ne mora da bude veliko · 50-60px visine pun ekran. To je razlika 15-25% u konverziji u retail-u i lokalnim service biznisima.

9. Bez horizontal scroll-a

Ništa, ali baš ništa ne sme da pravi horizontal scroll. Tabele · ili se prelome u kartice, ili se vrate ispod scroll-a sa jasnom oznakom "swipe →". Slike · width: 100%, never overflow. Footer · stack-uj sve u kolone.

10. Klikni-da-pozoveš + klikni-da-uputiš

Svaki telefonski broj mora da bude <a href="tel:...">. Svaka adresa <a href="https://maps.google.com/?q=...">. Email <a href="mailto:...">. Ovo su slobodne pobede koje većina sajtova zaboravlja.

Test koji možeš da uradiš za 5 minuta: otvori sajt na svom telefonu, drži ga jednom rukom, i pokušaj sa palcem da uradiš ono što hoćeš da posetilac uradi (npr. zatraži ponudu). Ako moraš da prebaciš ruke ili koristiš drugu ruku za poseban tap · sajt ti nije mobile-first.

Mobile-first nije trend, već default način kako web danas radi. Sajt koji nije mobile-first odbacuje 70%+ potencijalnih kupaca pre nego što je rekao prvu reč.

Pogledaj kako pravimo mobile-first sajtove →