Mobile-first dizajn: zašto je važan i kako ga primeniti

Mobile-first nije pomodna fraza - to je metodologija dizajna gde se sajt prvo crta za telefon (320-414px širine), pa se širi do desktopa. Više od 65% saobraćaja u Srbiji dolazi sa mobilnih uređaja, a Google koristi mobile-first indeksiranje (njegov bot prvo posećuje mobilnu verziju tvog sajta). U našoj usluzi web dizajn svaki sajt pravimo mobile-first - a u ovom vodiču ti pokazujemo tačno kako taj proces izgleda i kako da ga primeniš na svom sajtu.

Šta je mobile-first

Mobile-first je metodologija dizajna i razvoja gde proces počinje sa najmanjom širinom ekrana (mobilni telefon, ~320px) i progresivno se proširuje na tablet i desktop. Suprotno od 'desktop-first' pristupa gde se prvo crta za najveći ekran pa se 'sažima' za telefon.

Razlog: ograničenja mobilnog ekrana (mali prostor, palac kao alat, sporiji internet) prisiljavaju dizajnera da se fokusira samo na ono što je zaista važno. Kad se sajt širi na desktop - ima dovoljno mesta za sve. Obrnuti pristup često znači sajt koji 'pada na lice' kad se otvori na telefonu.

U praksi to izgleda ovako: dizajner prvo pravi wireframe za širinu od 360-390px (najčešće rezolucije telefona kod nas), definiše redosled sadržaja, veličinu dugmadi i navigaciju - pa tek onda razmišlja kako se sve to 'rasprostire' na 1280px. Termin je popularizovao Luke Wroblewski još 2009. godine, ali je tek sa Google-ovim mobile-first indeksiranjem prestao da bude opcija i postao standard.

Zašto je važan

Četiri konkretna razloga:

1. Saobraćaj

65-70% saobraćaja u Srbiji dolazi sa mobilnih uređaja (Google Analytics agregatni podaci 2025). Za neke industrije (e-commerce, hrana, lokalne usluge) to je 80%+. Pogledaj svoj Analytics: ako većina poseta dolazi sa telefona, a bounce rate je na mobile-u osetno viši nego na desktopu - to je najjasniji signal da sajt nije rađen mobile-first.

2. SEO ranking

Google od 2019. koristi mobile-first indeksiranje - njihov crawler primarno posećuje mobilnu verziju. Ako je mobilna verzija slabija od desktop-a (skriven sadržaj, sporije učitavanje, elementi koji se preklapaju), gubiš pozicije čak i u desktop pretrazi.

3. Konverzija

Loše mobile iskustvo direktno ubija konverziju. Stopa napuštanja korpe je 85% na mobile-u (vs 73% desktop). Sitno dugme koje palac promašuje ili forma koja se raspada na telefonu koštaju te stvarnih upita i porudžbina. Detaljnije u članku 10 grešaka koje ubijaju konverziju.

4. Jeftinije je uraditi odmah nego prepravljati

Prepravka desktop-first sajta u pravi mobile-first retko prolazi kao 'sitna dorada' - u praksi znači ponovni dizajn i razvoj frontenda. Ako sajt tek praviš, mobile-first pristup ne košta ništa dodatno. Ako ga budeš naknadno ispravljao, platićeš posao dvaput.

Razlika - mobile-first vs responsive

Često se mešaju ali nisu isto:

Responsive sajt: prilagođava se različitim širinama ekrana (mobile, tablet, desktop). Može biti dizajniran desktop-first pa zatim 'sažet' za mobile - što je čest izvor problema (sitne dugmad, tekst koji prelazi van ekrana, elementi nabijeni jedan preko drugog).

Mobile-first sajt: i on je responsive, ali je primarni fokus dizajna mobilna verzija. Desktop dolazi posle, kao 'rasprostiranje' istog koncepta. Rezultat: nijedna verzija ne pati.

Praktičan test za tvoj sajt: otvori ga na telefonu i iskreno se zapitaj - da li ovo izgleda kao stranica dizajnirana za telefon, ili kao smanjena desktop stranica? Horizontalno skrolovanje, tekst od 12px i dugmad koje moraš da ciljaš su znaci 'sažetog' responsive sajta, ne mobile-first pristupa.

Ključni principi mobile-first dizajna

Touch targets minimum 44x44px

Apple Human Interface Guidelines i Material Design oba kažu - dugmad i interaktivni elementi minimum 44x44px (oko 11mm), inače palac promaši. Ovo važi i za razmake: dva linka nabijena jedan uz drugi znače pogrešne klikove i frustraciju.

Tipografija minimum 16px

Tekst manji od 16px na mobile-u prisiljava korisnika na pinch-zoom, što je iritantno. iPhone Safari 'kaže' korisniku da zumira ako je font ispod 16px - i pri tome menja layout. Pravilo: body tekst nikad manji od 16px.

Hijerarhija - jedan glavni cilj po stranici

Mobile ekran ima manje prostora - svaki element koji ne podržava glavni cilj je smetnja. Hero, jedan ključni CTA, zatim sekundarne informacije. Ne 12 stvari koje korisnik 'može da uradi'.

Thumb-zone: bitne stvari u donjoj trećini ekrana

Većina ljudi drži telefon jednom rukom, a palac najlakše dohvata donju trećinu ekrana. Zato glavni CTA, navigacija i korpa idu dole, ne u gornji desni ugao. Ovaj obrazac je postao jedan od dominantnih u mobilnom UX-u - detaljnije smo ga obradili u tekstu o UX trendovima za 2026.

Vertikalna navigacija

Hamburger meni je standard. Forme - jedna kolona, ne dve. Kartice (cards) jedna ispod druge, ne pored. Izuzetak: e-commerce katalog gde 2 kolone proizvoda mogu da rade.

Kako ga primeniti korak po korak

Principi su jasni, ali kako izgleda sam proces? Ovo je redosled koji koristimo na projektima - i koji možeš da primeniš i sam, čak i ako sajt radiš u gotovom alatu:

1. Popiši sadržaj pre dizajna. Šta korisnik na telefonu mora da vidi u prvih 5 sekundi? Za lokalni biznis to su obično: čime se baviš, gde se nalaziš, broj telefona i jedan jasan CTA.
2. Wireframe na 360px. Skiciraj mobilnu stranicu u jednoj koloni - redosled blokova je najvažnija odluka koju donosiš. Ako nešto ne staje ili deluje nebitno, izbaci ga (na desktopu ga uvek možeš vratiti).
3. Napravi listu prioriteta. Poređaj elemente po važnosti: mobile prikazuje top 5, desktop može svih 10. Tako unapred znaš šta sme da 'ispadne' na malom ekranu.
4. Postavi pravila dizajna: body tekst minimum 16px, dugmad 44x44px, dovoljni razmaci za precizan tap, kontrast čitljiv na suncu.
5. Tek onda desktop: raširi layout u 2-3 kolone, dodaj sekundarne sekcije, povećaj tipografiju i slike.
6. Razvoj mobile-first CSS-om i testiranje na pravim uređajima (detalji u naredne dve sekcije).

Konkretan primer iz prakse - sajt restorana. Mobilna verzija: hero sa nazivom i dugmetom 'Rezerviši sto', klik-to-call broj telefona, meni kao jednostavna lista, mapa. Desktop verzija dodaje galeriju, priču o kuhinji i Instagram feed. Niko ništa nije izgubio - ali gost koji te traži sa telefona za tri sekunde nalazi ono zbog čega je došao.

Tehnička primena (CSS)

Mobile-first u CSS-u znači da default stilovi gađaju mobile, a media query-ji proširuju za veće ekrane:

• .container { padding: 1rem; } - default mobile
• @media (min-width: 768px) { .container { padding: 2rem; } } - tablet
• @media (min-width: 1280px) { .container { padding: 4rem; } } - desktop

Suprotno od desktop-first pristupa gde bi koristio max-width: 768px (teži za održavanje, više CSS koda, više prepisivanja stilova).

Breakpoints koje preporučujemo za 2026: 320px (najmanji mobile), 768px (tablet), 1024px (mali laptop), 1280px (standardni desktop), 1920px (veliki desktop).

Dve tehnike koje štede vreme: fluid tipografija sa clamp() - npr. font-size: clamp(1rem, 2.5vw, 1.25rem) skalira font automatski, bez media query-ja - i srcset atribut za slike, gde telefon dobija sliku od 400px širine umesto desktop verzije od 1600px. To drastično ubrzava učitavanje na mobilnim mrežama, a brzina na telefonu je deo mobile-first priče koliko i layout.

Kako testirati

Tri brza testa:

1. Otvori sajt na pravom telefonu (ne samo Chrome DevTools mobile mode) - i to jednom rukom, palcem. Odmah ćeš osetiti šta ne možeš da dohvatiš.
2. Prođi kroz sve glavne flow-ove: čitanje, klik na CTA, popunjavanje forme, kupovina. Broji korake i zapiši gde si zastao.
3. Pusti PageSpeed Insights (pagespeed.web.dev) - mobilni rezultat pokazuje i brzinu i osnovne UX probleme (sitni touch targets, sadržaj širi od ekrana, sitan font).

Bonus: testiraj na 'sporijem' telefonu - svi sajtovi rade odlično na novom iPhone-u, ali šta sa 5 godina starim Samsungom? Chrome DevTools > Performance ima 'CPU throttling' opciju - 4x slower simulira jeftiniji uređaj. Isto važi za mrežu: 'Slow 4G' u DevTools-u ti pokazuje kako sajt izgleda korisniku u autobusu, ne na kancelarijskom Wi-Fi-ju.

Česta pitanja

Da li mobile-first znači da desktop verzija ispada lošija?

Ne. Desktop verzija dobija sve što i inače - više kolona, veće slike, dodatne sekcije. Razlika je samo u redosledu odlučivanja: prvo se reši teži problem (mali ekran), pa se rešenje širi. U praksi mobile-first sajtovi imaju čistiji i fokusiraniji desktop, jer je svaki element morao da 'zasluži' svoje mesto.

Imam postojeći sajt - da li moram kompletan redizajn?

Ne nužno. Prvo testiraj (sekcija iznad): ako su problemi kozmetički - sitan font, mala dugmad, slika koja se razliva - to se rešava doradom CSS-a. Ako je struktura rađena desktop-first pa se raspada na telefonu, krpljenje obično ispadne skuplje i sporije od redizajna. Pošten audit ti kaže u kojoj si grupi.

Da li je dovoljno da kupim 'responsive' temu?

Gotove teme jesu tehnički responsive, ali su pravljene da izgledaju dobro u demo-u, sa desetinama sekcija i efekata. Bez prilagođavanja često dobiješ spor sajt pretrpan elementima koji na telefonu smetaju. Tema može biti dobra polazna tačka, ali mobile-first razmišljanje - šta izbaciti, šta staviti prvo - i dalje mora neko da uradi.

Koliko sve ovo košta?

Mobile-first je pristup, ne dodatna stavka na fakturi - ozbiljan izvođač ga podrazumeva u ceni izrade sajta. Ono što realno košta jeste naknadna prepravka desktop-first sajta, koja se u praksi često svede na cenu novog frontenda. Zato je pitanje za izvođača pre početka: 'Da li dizajnirate mobile-first?' - i traži da ti pokažu mobilne verzije prethodnih radova.

Zaključak

Mobile-first nije trend nego polazna tačka: većina tvojih posetilaca je na telefonu, Google rangira tvoju mobilnu verziju, a konverzija se lomi upravo na malom ekranu. Redosled je jednostavan - prvo sadržaj i mobilni ekran, pa desktop. Ako danas uradiš samo jednu stvar, otvori svoj sajt na telefonu, jednom rukom, i prođi kroz put do poziva ili porudžbine.

Ako nisi siguran kako tvoj sajt stoji, pošalji nam ga na besplatan mobile audit - proći ćemo kroz brzinu, touch targets i mobilnu konverziju i reći ti šta konkretno da popraviš. A ako sajt tek praviš, naš tim za dizajn i razvoj sajtova svaki projekat radi mobile-first od prvog wireframe-a.