Više od 60 procenata korisnika vašeg sajta dolazi sa telefona. Taj broj raste godinama i na većini poslovnih kategorija mobilni je odavno prestignao desktop. Uprkos tome, mnogi sajtovi imaju mobilni prikaz koji je tek skupljeni desktop — ista navigacija, isti raspored, samo manji. Rezultat je loše iskustvo koje korisnika tera da ode pre nego što pročita prvu rečenicu.

Web sajt prikazan na više uređaja — desktop, tablet i mobilni telefon

Responsive i Mobile-first nisu isti pristup

Responsive dizajn znači da se sajt prilagođava veličini ekrana — elementi se premeste i promene veličinu. Mobile-first znači da se dizajn počinje od mobilnog prikaza i proširuje prema desktop-u, ne obrnuto. Razlika je kritična: responsive sajt koji počne od desktop dizajna i skupi se za mobilni često ne funkcioniše dobro na telefonu jer je osnovna logika rasporeda dizajnirana za veliki ekran.

Mobile-first pristup forsira prioritizaciju sadržaja od samog početka — šta je zaista važno da korisnik na telefonu vidi odmah, a šta može biti sekundarno. To vodi do jasnijeg, čišćeg dizajna koji funkcioniše na svim uređajima.

Touch vs miš — potpuno drugačija fizika interakcije

Miš ima preciznost na piksel. Prst ima površinu od 40–57 piksela. Element koji je lako kliknuti mišem — mali link u navigaciji, tanak border — nemoguće je tačno tapnuti prstom. Dugmad i linkovi na mobilnom treba da imaju minimalnu površinu od 44×44 piksela. Elementi koji su previše blizu jedan drugom dovode do slučajnih tapova na pogrešan element i frustriraju korisnika.

Korisnica koja pregleda sadržaj na pametnom telefonu

Hijerarhija sadržaja na telefonu funkcioniše drugačije

Na desktop-u korisnik vidi celu stranicu odjednom i odlučuje kuda da ide. Na telefonu vidi mali vertikalni deo stranice i skroluje. Ono što se vidi pre prvog skrolanja mora da komunicira suštinu poruke i dati razlog za dalje čitanje. Najvažnija poruka i poziv na akciju moraju biti na vrhu, vidljivi bez skrolanja.

Hamburger meni koji sakriva celokupnu navigaciju funkcioniše na mobilnom, ali sadržaj koji je zatrpan pod tri nivoa menija ostaje nevidljiv većini korisnika. Mobilna navigacija mora da eksponira najvažnije puteve direktno.

Brzina na mobilnom — poseban set zahteva

Mobilni korisnici su često na sporijoj mreži od desktop korisnika. 4G veza nije isto što i fiber. Slike koje se učitavaju brzo na desktop-u mogu biti spore na telefonu. Slike treba servirati u responzivnim veličinama — desktop verzija može biti 1200px široka, mobilna 600px — i to nisu iste datoteke, to su dve različite verzije koje server šalje u zavisnosti od uređaja.

Lazy loading — učitavanje slika samo kad korisnik skroluje do njih — dodatno ubrzava inicijalno učitavanje stranice na mobilnom i direktno utiče na Core Web Vitals vrednosti.

Zaključak

Mobilni prikaz sajta nije funkcija „prilagodi za telefon" koja se uključi na kraju projekta. To je poseban dizajn sistem sa sopstvenim pravilima interakcije, hijerarhije sadržaja i tehničkih zahteva. Sajt koji tretira mobilni kao sekundarnu varijantu desktop dizajna gubi većinu svojih posetilaca. Sajt koji počinje od mobilnog — i gradi prema gore — ima solidnu osnovu za sve uređaje.

Mobilni dizajn sajta nije mini desktop — evo zašto