Što je mobile-first dizajn?

Mobile-first dizajn znači da web stranicu planiramo imajući mobilnog korisnika na umu od samog početka.

Ne radi se samo o tome da desktop verziju kasnije smanjimo dok ne stane na ekran mobitela.

Pravi mobile-first pristup pita:

• što korisnik prvo treba vidjeti
• koje informacije su najvažnije
• kako će koristiti navigaciju
• jesu li CTA gumbi dovoljno dostupni
• može li jednostavno ispuniti formu
• koliko sadržaja stane na ekran
• koje elemente treba pojednostaviti

To je važno jer se ponašanje korisnika na mobitelu razlikuje od ponašanja na velikom ekranu.

Korisnik često ima manje vremena, manje prostora i manje strpljenja.

Zato mobilna verzija ne smije biti samo umanjena kopija desktopa.

Zašto mobile-first?

Na velikom ekranu imamo puno prostora.

Možemo prikazati:

• veliku navigaciju
• nekoliko stupaca
• kompleksne grafike
• više sadržaja istovremeno

Na mobitelu je prostor puno ograničeniji.

To nas prisiljava da odlučimo što je stvarno važno.

Upravo zato mobile-first često vodi prema boljem dizajnu i na desktopu.

Ako ne možemo objasniti glavnu poruku jasno na malom ekranu, problem možda nije u veličini ekrana nego u samoj strukturi sadržaja.

Responsive nije isto

Responsive dizajn znači da se layout prilagođava različitim veličinama ekrana.

Mobile-first opisuje način razmišljanja i prioritizacije.

Možete imati tehnički responsive web koji je i dalje loš na mobitelu.

Primjerice, desktop navigacija može biti pretvorena u hamburger menu, ali:

• stavke su i dalje nejasne
• CTA je skriven
• meni je predug
• klikabilna područja su mala

Tehnički se prilagodio ekranu.

Korisnički problem nije riješen.

Krenite od sadržaja

Kod mobile-first dizajna sadržaj treba imati prioritet.

Na malom ekranu brzo postaje očito ako sekcija ima previše teksta.

Primjer:

H1 od četiri reda
podnaslov od šest redova
tri CTA gumba
velika fotografija

može zauzeti nekoliko cijelih ekrana prije nego što korisnik vidi ostatak stranice.

Bolji pristup je jasno odrediti:

• glavnu poruku
• jedno kratko objašnjenje
• primarni CTA
• eventualno sekundarni CTA

Detalji mogu doći niže.

Hero na mobitelu

Hero sekcija posebno je osjetljiva.

Na desktopu možemo imati:

tekst lijevo + ilustraciju desno

Na mobitelu oba elementa moraju završiti jedan ispod drugoga.

Tada treba odlučiti:

• ide li prvo tekst
• je li ilustracija uopće potrebna
• koliko visine zauzima
• treba li sekundarni CTA ostati
• treba li smanjiti dekorativne elemente

U većini slučajeva glavna poruka i CTA trebaju imati prednost nad dekorativnim vizualom.

Ako korisnik mora prvo scrollati preko velike slike da bi saznao što nudite, prioriteti su vjerojatno pogrešni.

Više o strukturi prvog ekrana možete pročitati u članku kako izgleda dobra početna stranica.

Naslovi

Naslov koji izgleda dobro na desktopu može na mobitelu postati prevelik.

Posebno kod dugih H1 naslova.

Ne treba ih umjetno skraćivati samo radi dizajna, ali treba prilagoditi:

• veličinu fonta
• line-height
• širinu
• razmak prema sljedećem elementu

Cilj je zadržati vizualnu hijerarhiju bez zauzimanja cijelog ekrana jednim naslovom.

Dužina redaka

Tekst na širokom desktop ekranu ne treba koristiti cijelu širinu.

Na mobitelu je taj problem manji, ali i dalje treba paziti na:

• padding
• veličinu fonta
• razmak između odlomaka

Ako tekst ide gotovo od ruba do ruba ekrana, može djelovati zbijeno.

Ako je padding prevelik, ostaje premalo prostora za sadržaj.

Treba pronaći ravnotežu.

Navigacija

Navigacija koja dobro radi na desktopu često treba potpuno drugačije ponašanje na mobitelu.

Najčešći pristup je hamburger menu.

Ali hamburger sam po sebi ne rješava UX.

Treba provjeriti:

• jesu li stavke jasne
• koliko ih ima
• postoji li CTA
• može li se meni jednostavno zatvoriti
• može li korisnik scrollati ako je meni dug
• jesu li podizbornici jednostavni

Ako desktop meni ima deset glavnih stavki i veliki mega-menu, možda je problem već u strukturi.

Dobro planirana struktura web stranice olakšava i mobilnu navigaciju.

CTA gumbi

Mobilni CTA treba biti lako kliknuti prstom.

To znači:

• dovoljno veliku visinu
• dovoljno razmaka
• jasan tekst
• dobar kontrast

Dva mala gumba jedan pored drugoga mogu izgledati uredno na desktopu.

Na mobitelu često je bolje prikazati ih jedan ispod drugoga.

Primjer:

Zatražite ponudu

Pogledajte projekte

Tako oba CTA-a imaju dovoljno prostora i korisnik ih lakše koristi.

Detaljnije o CTA pozicijama pročitajte u članku gdje postaviti CTA na web stranici.

Sticky elementi

Sticky CTA ili navigacija mogu biti vrlo korisni na mobitelu.

Ali ekran je mali.

Ako istovremeno imate:

• sticky header
• cookie banner
• chat
• sticky CTA
• browser kontrole

korisniku može ostati vrlo malo prostora za stvarni sadržaj.

Svaki fiksni element treba opravdati prostor koji zauzima.

Jedan koristan sticky CTA može pomoći.

Četiri fiksna elementa najčešće smetaju.

Kontakt na mobitelu

Mobilni korisnik često želi brzo kontaktirati tvrtku.

Zato je dobro omogućiti:

• klik na broj telefona
• klik na e-mail
• jednostavan pristup kontakt formi

Za lokalne djelatnosti gumb:

Nazovite

može biti posebno važan.

Korisnik već ima telefon u ruci.

Nema razloga tražiti od njega da kopira broj i ručno otvara aplikaciju za pozive.

Forme

Forma koja je jednostavna na desktopu može postati naporna na mobitelu.

Treba provjeriti:

• veličinu inputa
• razmake
• keyboard type
• dropdownove
• error poruke
• CTA button
• broj polja

Duga forma izgleda još duže kada je svako polje u zasebnom retku.

Zato na mobitelu posebno vrijedi pravilo:

tražite samo informacije koje stvarno trebate.

Detaljnije smjernice možete pronaći u članku kako napraviti dobru kontakt formu.

Prava tipkovnica

Kod mobilnih formi input type ima praktičan utjecaj.

Ako korisnik unosi:

• e-mail → treba dobiti e-mail tipkovnicu
• telefon → numeričku ili telefonsku
• broj → odgovarajuću numeričku

To smanjuje broj nepotrebnih koraka.

Mali tehnički detalj može značajno poboljšati iskustvo.

Kartice

Desktop layout često koristi tri ili četiri kartice u jednom redu.

Na mobitelu se one najčešće prikazuju vertikalno.

To može dovesti do vrlo dugačke stranice.

Ako imate osam kartica, korisnik možda mora scrollati kroz nekoliko ekrana s gotovo identičnom strukturom.

Tada vrijedi razmisliti:

• trebaju li sve kartice biti prikazane
• može li sadržaj biti kraći
• treba li koristiti drugi layout
• može li dio sadržaja biti grupiran

Responsive dizajn nije samo promjena broja stupaca.

Ponekad treba promijeniti način prikaza sadržaja.

Tablice

Tablice su jedan od čestih mobilnih problema.

Na desktopu možemo jednostavno usporediti:

Paket	Basic	Standard	Premium

Na mobitelu takva tablica može biti preširoka.

Moguća rješenja su:

• horizontalni scroll
• kartice
• accordion
• prikaz jednog paketa po ekranu
• pojednostavljena tablica

Odabir ovisi o tome što korisnik treba usporediti.

Ne treba automatski smanjiti tekst dok cijela tablica ne stane na ekran.

Cjenici

Kod cjenika je posebno važno da mobilni korisnik lako vidi:

• naziv paketa
• cijenu
• što je uključeno
• CTA

Ako su tri paketa prikazana kao dugačke kartice, treba paziti da korisnik može razumjeti razlike bez stalnog scrollanja gore-dolje.

Ponekad je korisno jasno označiti ključne razlike, umjesto ponavljanja cijelog popisa za svaki paket.

Legatech pakete za izradu web stranica možete pogledati na stranici izrada web stranica – cijena i paketi.

Slike

Fotografija širine 2.000 piksela ne mora se učitavati u istoj veličini na mobitelu.

Treba koristiti odgovarajuće dimenzije i formate.

Velike slike mogu:

• povećati vrijeme učitavanja
• trošiti mobilni promet
• usporiti prikaz sadržaja

Posebno treba paziti na hero fotografije.

One su često među najvećim resursima na stranici.

Video

Video u hero sekciji može izgledati atraktivno na desktopu.

Na mobitelu može predstavljati:

• velik download
• sporije učitavanje
• veću potrošnju podataka
• slabije performanse

Treba procijeniti daje li video dovoljno vrijednosti.

Ponekad je kvalitetna statična slika bolji izbor za mobilni uređaj.

Animacije

Mobilni uređaji nemaju uvijek iste performanse kao desktop računala.

Kompleksne animacije mogu dovesti do:

• trzanja
• sporog scrolla
• kašnjenja interakcija
• većeg trošenja baterije

Animacije treba koristiti tamo gdje pomažu iskustvu.

Ne zato što ih framework omogućuje.

Hover ne postoji

Desktop dizajn često koristi hover za:

• prikaz dodatnih informacija
• otkrivanje CTA-a
• promjenu slike
• otvaranje menija

Na touch uređajima nema klasičnog hover ponašanja.

Ako je važna informacija dostupna samo kada korisnik prijeđe mišem preko elementa, mobilni korisnik može ostati bez nje.

Važan sadržaj mora biti dostupan i bez hovera.

Klikabilna područja

Nije dovoljno da ikona bude vidljiva.

Treba biti i lako klikabilna.

Primjerice, mala ikona “X” za zatvaranje modala može biti vrlo frustrirajuća ako korisnik mora nekoliko puta pokušavati pogoditi točno nekoliko piksela.

Klikabilna površina može biti veća od same vizualne ikone.

To poboljšava preciznost bez promjene dizajna.

Modali

Modali mogu biti posebno problematični na mobitelu.

Treba provjeriti:

• stane li sadržaj
• može li se scrollati
• je li close gumb dostupan
• što se događa kada se otvori tipkovnica
• prekriva li modal cijeli ekran

Kompleksne forme unutar malog modala često je bolje prikazati kao zasebnu stranicu.

Popupovi

Popup koji zauzme cijeli mobilni ekran može vrlo brzo frustrirati korisnika.

Posebno ako se pojavi odmah nakon dolaska.

Ako popup koristite, razmislite o:

• vremenu prikaza
• veličini
• lakoći zatvaranja
• stvarnoj vrijednosti za korisnika

Mobile-first pristup često znači koristiti manje agresivne obrasce.

Accordion

Accordion može biti koristan način za organizaciju sadržaja na malom ekranu.

Posebno za:

• FAQ
• tehničke detalje
• sekundarne informacije

Ali ne treba skrivati sav sadržaj u accordion.

Ako korisnik mora otvoriti šest sekcija samo da bi shvatio što usluga uključuje, napravili smo dodatne korake bez potrebe.

Koristite accordion za sekundarne detalje, ne za osnovnu poruku.

Redoslijed sadržaja

Na desktopu dva elementa mogu biti paralelna.

Na mobitelu moraju imati redoslijed.

Primjer:

Desktop:

Tekst    Slika

Mobile:

Tekst
Slika

ili:

Slika
Tekst

Ne treba automatski pratiti redoslijed HTML strukture.

Treba razmisliti što korisnik prvo treba vidjeti.

Ako slika samo podržava tekst, najčešće sadržaj treba imati prednost.

Nemojte skrivati previše

Ponekad se mobilna verzija pojednostavljuje tako da se pola sadržaja potpuno ukloni.

To može biti problem.

Mobilni korisnik ne treba nužno manje informacija.

I dalje želi znati:

• cijenu
• što je uključeno
• proces
• reference

Treba pojednostaviti način prikaza, a ne nužno ukloniti važne informacije.

Brzina je još važnija

Mobilni korisnik možda nije na brzom Wi-Fi-ju.

Može koristiti slabiju mobilnu mrežu.

Zato je posebno važno optimizirati:

• slike
• fontove
• JavaScript
• third-party skripte
• video

Web koji je prihvatljiv na brzom uredskom internetu može biti vrlo spor na stvarnom mobilnom uređaju.

Testirajte stvarni uređaj

Browser developer tools su korisni, ali nisu dovoljni.

Dobro je web otvoriti i na stvarnom mobitelu.

Tada možete primijetiti:

• gumb koji je premalen
• sticky element koji smeta
• tipkovnicu koja prekriva formu
• scroll koji nije ugodan
• tekst koji izgleda drugačije nego u simulatoru

Stvarno korištenje često otkrije probleme koje desktop pregled ne pokazuje.

Testirajte više veličina

“Mobile” nije jedna veličina.

Postoje:

• manji telefoni
• veliki telefoni
• tableti

Ne treba optimizirati svaki model zasebno.

Ali layout treba biti dovoljno fleksibilan da se ponaša dobro između breakpointa.

Fiksne dimenzije često uzrokuju probleme.

Nemojte projektirati samo za jedan uređaj

Česta greška je:

Na mom iPhoneu izgleda dobro.

To nije dovoljno.

Responsive web treba funkcionirati na širokom rasponu uređaja.

Zato treba testirati ponašanje layouta, ne samo nekoliko točnih rezolucija.

Mobile i SEO

Mobilno iskustvo ima utjecaj i na ukupnu kvalitetu stranice iz perspektive tražilica.

Ali čak i bez SEO-a, postoji puno jednostavniji razlog za dobar mobilni web:

velik dio stvarnih korisnika koristi mobitel.

Ako im stranica nije upotrebljiva, gubite potencijalne klijente bez obzira na pozicije na Googleu.

Zato mobile nije dodatna tehnička optimizacija.

On je dio osnovnog korisničkog iskustva.

Najčešće greške

Desktop se samo smanji

Layout tehnički stane na ekran, ali sadržaj nije prilagođen.

Prevelik hero

Korisnik nekoliko puta scrolla prije nego što vidi drugu sekciju.

Premali CTA

Gumbe je teško koristiti prstom.

Previše sticky elemenata

Ostaje malo prostora za sadržaj.

Loše tablice

Korisnik ne može usporediti informacije.

Hover sadržaj

Važne informacije nisu dostupne touch korisniku.

Teške slike i video

Web je prespor na mobilnoj mreži.

Loša forma

Previše polja i neodgovarajuća tipkovnica.

Premali tekst

Korisnik mora zumirati sadržaj.

Kako krenuti?

Kod nove stranice mobile-first pristup može izgledati ovako:

1. definirajte najvažniji sadržaj
2. složite mobilni redoslijed sekcija
3. odredite glavni CTA
4. pojednostavite navigaciju
5. dizajnirajte forme za touch
6. optimizirajte slike
7. tek zatim širite layout za veće ekrane

Tako desktop verzija postaje proširenje kvalitetne osnovne strukture.

Ne obrnuto.

Ne znači mobile-only

Mobile-first ne znači zanemariti desktop.

Poslovni korisnici, primjerice, mogu vrlo često pregledavati određene B2B stranice na laptopu ili velikom monitoru.

Cilj je napraviti iskustvo koje radi na svim uređajima.

Mobile-first samo pomaže da najvažnije stvari definiramo prije nego što nam veliki ekran omogući da dodamo previše elemenata.

Jednostavnije često radi bolje

Mobilni ekran vrlo brzo pokaže je li dizajn nepotrebno kompleksan.

Ako stranica ima:

• jasnu poruku
• dobru strukturu
• čitljiv sadržaj
• nekoliko jasnih CTA-ova
• jednostavnu navigaciju

velik dio posla je već napravljen.

Ne treba svaki slobodni dio ekrana ispuniti elementom.

Korisnik treba moći brzo razumjeti sadržaj i nastaviti prema svom cilju.

Ako želite vidjeti kako se mobile iskustvo uklapa u širu kvalitetu stranice, pročitajte što čini dobar poslovni web.

Ako korisnici dolaze na web, ali brzo odlaze, pogledajte i zašto korisnici napuštaju web stranicu.

Ako planirate novi poslovni web, naše pakete i cijene izrade web stranica možete pogledati na stranici usluge.