Više od 60 posto posetilaca vaš sajt vidi prvi put na telefonu. Ako taj prvi utisak nije savršen, oni ne dolaze ponovo.
Mobile-first dizajn znači da dizajn počinje od najmanjih ekrana i širi se ka većima, a ne obratno. Dugo je industrijski standard bio desktop-first, pa se sajt prilagođavao mobilnom telefonima. Taj pristup daje mobilno iskustvo koje izgleda kao naknadna misao jer upravo to i jeste. Danas, kada Google indeksira mobilnu verziju sajta i kada je telefonski saobraćaj dominantan, mobile-first nije trend, to je osnova od koje svaki ozbiljan projekat mora da polazi.
Zašto mobile-first nije samo o veličini ekrana
Razlika između desktop i mobilnog iskustva nije samo u širini ekrana. Mobilni korisnik drži telefon u ruci dok hoda, stoji u redu ili leži na sofi. Pažnja mu je podeljena. Palac je jedini prst kojim navigira i veliki deo ekrana je van domašaja tog palca. Veza može da bude spora. Kontekst upotrebe je potpuno drugačiji od sedenja za računarom sa fokusiranom namerom.
Mobilni dizajn koji samo smanjuje desktop verziju nikada ne rešava te probleme. Dugmad koja su premala za palac, tekst koji se mora zumirati, meniji koji podrazumevaju hover, forme sa deset polja koje je mučno popuniti na telefonu. Sve to uzrokuje odlazak korisnika, a ti odlasci su vidljivi i Googleu.
Principi dobrog mobile-first dizajna
Počnite sa najvažnijim sadržajem. Na malom ekranu nema mesta za sve, što vas prisiljava da odlučite šta je stvarno bitno. Taj proces je zapravo blagodet jer otkriva šta na sajtu treba istaknuti, a šta je dekoracija. Hijerarhija sadržaja postaje jasna kad nemate luksuza prostora.
Dugmad i elementi za klik treba da budu najmanje 44x44 piksela, što je standard koji preporučuju i Apple i Google. Razmak između klikabilnih elemenata treba da bude dovoljno velik da se ne klikne na pogrešan. Forme treba da imaju polja koja otvaraju pravi tip tastature, broj za telefon, email za email adresu, i nikad ne smeju da zahtevaju previše podataka odjednom.
- Tap targets najmanje 44x44 piksela sa dovoljnim razmakom između
- Tekst čitljiv bez zumiranja, minimalno 16px za body text
- Navigacija koja radi jednom rukom, hamburgermeni ili bottom navigation bar
- Forme skraćene na minimum neophodnih polja
- Hero sadržaj i CTA vidljivi bez scrollovanja na 375px širini
Mobile-first nije kompromis prema malom ekranu, to je disciplina koja pravi bolje digitalne proizvode za sve ekrane.
Responsive vs adaptive dizajn
Responsive dizajn koristi fleksibilne grid sisteme i media query-je da jedan isti HTML kod izgleda dobro na svim ekranima. Adaptive dizajn detektuje uređaj i servuje posebne verzije sajta. Responsive je danas standard jer je lakši za održavanje i Google ga preporučuje. Adaptive ima smisla samo u specifičnim slučajevima kada mobilno i desktop iskustvo treba biti fundamentalno različito.
Fluid typography i fluid spacing su napredna tehnika gde veličina fonta i razmaci automatski skaliraju između minimalnih i maksimalnih vrednosti za svaku veličinu viewport-a. Korisnik na 375px vidi kompaktniji layout, korisnik na 1440px vidi prostran layout, a sve se radi CSS-om bez breakpoint-ova koji preskaču.
Performanse na mobilnom: poseban izazov
Mobilne veze su sporije i manje pouzdane od desktop-a. Sajt koji se učitava za tri sekunde na fiber-u može da traje i osam sekundi na prosečnoj mobilnoj mreži. WebP slike, lazy loading i minimalan JavaScript su neophodni, ali specifično za mobilni treba obratiti pažnju i na veličinu font fajlova i trećih strana koje se pozivaju.
Testiranje na emulatoru u DevTools nije dovoljno. Testirajte na pravim uređajima, po mogućnosti na starijim Android telefonima jer oni imaju slabiji procesor koji realističnije prikazuje iskustvo prosečnog korisnika. Google radi isto pri merenju Core Web Vitals u polju.
Google Mobile-First Indexing: šta to znači za vas
Google od 2023. koristi isključivo mobilnu verziju sajta za indeksiranje i rangiranje. Ako mobilna verzija ima manje sadržaja od desktop, rangiraće se po manje sadržaju. Ako mobilna verzija nema strukturirane podatke koje ima desktop, Google ih neće videti. Paritet između mobilne i desktop verzije je obavezan.
Proverite u Google Search Console pod sekcijom Indexing, Crawl Stats, koji user agent Googlebot koristi za vaš sajt. Ako piše Googlebot Smartphone, a to bi trebalo biti za sve moderne sajtove, Google vas gleda isključivo kroz mobilnu leću. Nemojte da vam mobilna verzija bude siromašnija.
Mobile UX koji povećava konverzije
Bottom navigation bar, koji je popularan u app dizajnu, sve više prelazi na mobilne sajtove jer su navigacione opcije u domašaju palca. Sticky CTA dugme koje prati korisnika dok scrolluje, posebno na landing stranicama i stranicama proizvoda, dramatično povećava konverzije na mobilnom.
U izreklamiraj.me pravimo sajtove i landing stranice koji su mobile-first od prvog wireframe-a. Ne prilagođavamo desktop, gradimo od telefona naviše. Sa iskustvom iz više od decenije web projekata, znamo razliku između sajta koji izgleda mobilno i sajta koji stvarno radi za mobilnog korisnika.
Ako vaš sajt nije dizajniran sa telefonom kao polaznom tačkom, možda gubite više od polovine potencijalnih kupaca na prvoj prepreci. Izreklamiraj.me projektuje i razvija web sajtove, landing stranice i prodavnice po mobile-first principu, sa fokusom na performanse i konverzije. Zakažite besplatnu konsultaciju i pogledaćemo zajedno kako vaš sajt funkcioniše na telefonu i gde su najveće mogućnosti za poboljšanje.
