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). U našoj usluzi web dizajn svaki sajt pravimo mobile-first.

Šta je mobile-first

Mobile-first je metodologija dizajna i razvoja gde se proces počinje sa najmanjom širinom ekrana (mobilni telefon, ~320px) i progresivno 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 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.

Zašto je važan

Tri 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%+.

2. SEO ranking

Google od 2019. koristi mobile-first indeksiranje - njihov crawler primarno posećuje mobilnu verziju. Ako je mobile slabija od desktop-a, 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). Detaljnije u članku 10 grešaka koje ubijaju konverziju.

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).

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

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.

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'.

Vertikalna navigacija

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

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 gde bi koristio max-width: 768px (težak za održavanje, više CSS koda).

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

Kako testirati

Tri brza testa:

1. Otvori sajt na pravom telefonu (ne samo Chrome DevTools mobile mode)
2. Probaj sve glavne flow-ove: čitanje, klik na CTA, popunjavanje forme, kupovina
3. Proveri Mobile Friendly Test (search.google.com/test/mobile-friendly) - Google ti kaže ako ima problema

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.

Hoćeš pravi mobile-first sajt? Naš web dizajn i web development sve sajtove pravimo mobile-first. Kontaktiraj nas kroz formu - dajemo besplatan mobile audit tvog postojećeg sajta.