Većina posjeta poslovnoj stranici danas dolazi s mobitela, a većina stranica se i dalje dizajnira na velikom ekranu. Otud razmak između onoga što naručitelj vidi kad odobrava dizajn i onoga što vidi njegov kupac.
Responzivni dizajn se često shvaća kao „stranica se smanji". To je najmanji dio posla.
Što responzivno stvarno znači
Ne isto na manjem ekranu, nego odluka što na manjem ekranu ostaje.
Na 360 piksela širine nema mjesta za sve što stane na 1.400. Ako se sve zadrži i samo smanji, dobije se stranica na kojoj se sve može pročitati uz zumiranje i ništa se ne može pritisnuti bez promašaja.
Prava odluka je: što je ovdje najvažnije, i što odlazi.
Što se najčešće lomi na mobitelu
Izbornik. Sve stavke stanu u traku na velikom ekranu, na malom ne. Ako se pretvore u izbornik od dvanaest stavki, nitko ga ne prolazi do kraja.
Tablice. Pet stupaca na 360 piksela ne postoji. Ili se prelamaju u kartice, ili se pomiču vodoravno unutar svog okvira — nikad tako da cijela stranica ide lijevo-desno.
Obrasci. Polja preuska za prst, datumi koji se ne otvaraju, tipkovnica koja pokrije polje koje se ispunjava.
Prevelik tekst u naslovu. Naslov koji je na velikom ekranu efektan na malom zauzme cijeli prvi ekran.
Elementi koji se ne mogu pogoditi. Poveznice preblizu jedna drugoj. Površina za dodir bi trebala biti barem 44 piksela.
Fiksne trake. Zaglavlje, traka za kolačiće i chat prozor zajedno pojedu trećinu ekrana.
Vodoravno pomicanje. Jedan element širi od ekrana i cijela stranica se pomiče postrance. Sitnica koja odaje da mobitel nije provjeren.
Što maknuti, a ne smanjiti
Ovo je dio koji razlikuje dobru mobilnu stranicu od smanjene:
- Ukrasne slike koje na velikom ekranu daju dojam, a na malom troše prostor i podatke.
- Sporedne informacije koje mogu doći niže ili u razmotavi odjeljak.
- Više poziva na akciju. Na mobitelu jedan.
- Animacije koje troše bateriju i procesor.
Manje elemenata na mobitelu nije osiromašena stranica nego stranica koja poštuje uvjete u kojima se čita.
Redoslijed je važniji nego na velikom ekranu
Na velikom ekranu oko preskače. Na malom se sadržaj čita redom, odozgo prema dolje.
Zato prvi ekran mora reći tri stvari: što nudite, kome, i što sad napraviti. Ako se do toga mora pomicati, dio ljudi neće.
Brzina je dio priče
Mobilni posjetitelj je češće na slabijoj vezi i na slabijem uređaju. Ista stranica koja se na računalu otvori za sekundu na telefonu se otvara tri.
Zato mobilna verzija ne bi smjela slati iste ogromne slike koje se šalju na veliki ekran. Detalji su u tekstu što stranicu čini brzom.
Kako provjeriti
Na stvarnom telefonu. Ne samo u emulaciji preglednika — dodir, tipkovnica i stvarna brzina se tamo ne vide.
Na starijem telefonu, ako ga imate. Ono što je na novom neprimjetno na tri godine starom je vidljivo.
Provjerite obrazac do kraja. Ispunite ga i pošaljite s telefona. Ovo je korak koji se najčešće preskoči, a najskuplje košta.
Isprobajte na suncu. Slab kontrast se vani ne vidi.
Provucite kroz PageSpeed Insights i gledajte mobilnu ocjenu.
Česta pitanja
Treba li mi zasebna mobilna stranica?
Ne. Zasebne mobilne stranice su prošlost i nose dvostruko održavanje i probleme s adresama.
Treba li mi aplikacija?
Za većinu poslova ne. Dobra stranica na mobitelu radi isti posao bez instalacije.
Radi li to i na tabletu?
Da, ako je napravljeno kako treba. Tablet je najčešće zanemaren i tamo se lome rasporedi u dva stupca.
Koliko poskupljuje izradu?
Ništa, ako se radi od početka. Naknadno prilagođavanje gotove stranice je zaseban posao.
Kako provjeriti svoju stranicu
Otvorite je na telefonu i pokušajte poslati upit. Ako vas išta usput zasmeta, zasmetat će i kupca.
Pošaljite adresu pa ćemo proći gdje se lomi.