Mobile-first dizajn znači da se web stranica prvo osmisli za ekran mobitela, a tek onda za računalo. Razlog je jednostavan: većina posjeta danas dolazi s mobitela, a Google za rangiranje gleda upravo mobilnu verziju tvoje stranice. Ako tvoj web na mobitelu izgleda kao stisnuta verzija one za računalo, gubiš i posjetitelje i poziciju u tražilici. Evo što mobile-first znači u praksi i kako provjeriš svoju stranicu za 5 minuta.
Što zapravo znači mobile-first
Godinama se web radio ovako: dizajner složi lijepu stranicu za veliki monitor, a onda je na kraju "prilagodi" za mobitel. Rezultat znaš i sama: sitna slova, gumbi po kojima ne možeš pogoditi prstom i meniji koji se raspadaju.
Mobile-first okreće redoslijed. Prvo se dizajnira mala verzija za mobitel, pa se onda širi prema tabletu i računalu. Mali ekran te prisili na disciplinu: stane samo ono najvažnije, poruka mora biti jasna u dvije rečenice, a glavni gumb (nazovi, rezerviraj, pošalji upit) mora biti odmah pri ruci.
"Mali ekran je najbolji urednik: sve što nije bitno jednostavno ne stane."
Zašto je to važno za tvoj biznis
Razmisli kako ljudi uopće dođu do tvoje stranice. Netko te pronađe na Instagramu ili Facebooku, klikne link u objavi i eto ga na tvom webu. Netko te potraži na Googleu dok čeka kavu. Sve se to događa na mobitelu. Za male biznise, frizerske salone, apartmane, obrte i restorane, mobilni posjetitelji često čine i preko dvije trećine ukupnog prometa.
Drugi razlog je Google. Google već godinama koristi takozvano mobile-first indeksiranje: kad procjenjuje tvoju stranicu, gleda njezinu mobilnu verziju, a ne onu za računalo. Ako je mobilna verzija spora i nespretna, padaš u rezultatima pretrage za sve korisnike, uključujući i one na računalu.
Najčešće greške koje tjeraju posjetitelje
Ovo su stvari koje na mobitelu najčešće otjeraju čovjeka s male poslovne stranice:
- Sitna slova - tekst koji se mora zumirati da bi se pročitao
- Preblizu gumbi - dva linka toliko blizu da prstom uvijek pogodiš krivi
- Skočni prozori - popup koji prekrije cijeli ekran, a križić za zatvaranje je nemoguće pogoditi
- Preteške slike - stranica se učitava toliko dugo da čovjek odustane prije nego išta vidi
- Vodoravno pomicanje - sadržaj širi od ekrana pa se stranica "klima" lijevo-desno
- Skriveni kontakt - broj telefona koji se ne može kliknuti za poziv nego se mora prepisivati
Brza provjera tvoje stranice u 5 minuta
Ne trebaš alate ni stručnjaka za prvu procjenu. Uzmi svoj mobitel i prođi kroz ovih pet koraka:
- Otvori svoju stranicu i broji sekunde do učitavanja: sve preko 3 sekunde je predugo
- Pročitaj naslovnicu bez zumiranja: je li odmah jasno što nudiš i za koga
- Probaj palcem jedne ruke kliknuti glavni gumb i stavke menija: ide li bez promašaja
- Klikni broj telefona: otvara li se poziv odmah
- Ispuni kontakt formu: koliko polja ima i muči li te tipkanje (više od 3-4 polja je previše)
Ako želiš vidjeti kako stranica izgleda na različitim veličinama ekrana, otvori je u Chromeu na računalu, pritisni F12 i klikni ikonu mobitela u kutu alata za razvoj. Tako je vidiš očima korisnika raznih uređaja bez da ijedan posjeduješ.
Česta greškaProvjeravanje stranice isključivo na vlastitom računalu. Ti svoju stranicu gledaš na velikom monitoru dok je uređuješ, a tvoji kupci je gledaju na mobitelu u autobusu. Navika koja sve mijenja: svaku promjenu na webu odmah pogledaj i na svom mobitelu.
Najčešća pitanja
Što znači mobile-first dizajn?
Mobile-first znači da se stranica prvo osmisli za mali ekran mobitela, a tek onda proširi za tablet i računalo. Time se dizajner prisili da najvažniji sadržaj stavi na vrh, a sve nebitno izbaci.
Je li responzivan dizajn isto što i mobile-first?
Nije isto. Responzivna stranica se prilagođava veličini ekrana, ali može biti dizajnirana prvo za računalo pa "stisnuta" na mobitel. Mobile-first kreće od mobitela, pa je mobilno iskustvo promišljeno, a ne naknadno prilagođeno.
Kako provjerim kako moja stranica izgleda na mobitelu?
Najjednostavnije: otvori je na svom mobitelu i prođi kroz nju kao kupac. Na računalu možeš u Chromeu pritisnuti F12 pa ikonu mobitela (Toggle device toolbar) i vidjeti stranicu u raznim veličinama ekrana.
Utječe li mobilna verzija stranice na Google poziciju?
Da. Google već godinama koristi mobile-first indeksiranje, što znači da za rangiranje gleda mobilnu verziju tvoje stranice, a ne onu za računalo. Loša mobilna verzija znači lošiju poziciju i na računalima.
Dora Šušković Stipanović radi kao specijalistica digitalnog marketinga u jednom od najvećih webshopova u Hrvatskoj, uz freelance projekte u marketingu i web dizajnu. Vodila je Canva AI edukacije za međunarodnu tvrtku i javnu instituciju, a kroz Kužiš dijeli praktične digitalne alate i AI savjete za male biznise i obrte.