Responsive dizajn

Responsive dizajn je pristup izradi web stranica kod kojeg se ista stranica automatski prilagođava ekranu na kojem se gleda: mobitelu, tabletu, laptopu ili velikom monitoru. Jedan kod i jedan sadržaj, a raspored, veličina slova i slike mijenjaju se prema širini ekrana. Danas je to standard, jer većina posjeta gotovo svakoj stranici u BiH dolazi s mobitela.

Stranica koja to nije ne kvari se vidljivo. Ona se otvori, prikaže sve i tehnički radi, samo je za čitanje treba zumirati i pomjerati prstom lijevo-desno. Posjetilac koji to mora raditi rijetko dođe do broja telefona, pa firma vidi promet u analitici i istovremeno se pita zašto upita nema.

Zašto Google gleda mobilnu verziju vaše stranice

Google odavno koristi mobile-first indeksiranje: poziciju vaše stranice određuje na osnovu njene mobilne verzije, čak i kad pretražuje neko za desktopom. Stranica koja se na telefonu raspada ili traži zumiranje šalje loš signal i pretraživaču i posjetiocu.

Efekat ide i zaobilaznim putem. Posjetioci s mobitela brzo odustaju, pa raste bounce rate, a upiti izostaju iako prometa ima. Za firme koje žive od lokalnih pretraga to je posebno skupo, jer se lokalni SEO gotovo u cijelosti odvija na telefonu, često dok je čovjek u autu i traži nekoga odmah.

Šta stranicu tehnički čini responsive

• Fleksibilna mreža: elementi se slažu u postocima širine umjesto u fiksnim pikselima, pa se raspored sam preslaguje.
• Prilagodljive slike: skaliraju se s ekranom umjesto da ga probijaju.
• Media queries: pravila u kodu koja za različite širine ekrana primjenjuju različite stilove.
• Viewport meta tag: red koda koji pregledaču kaže da stranicu prikaže po širini uređaja.

Uz njih ide i nekoliko odluka koje nisu tehničke, nego dizajnerske. Koliko kolona se na telefonu spaja u jednu, šta se sakriva u meni, koji dio sadržaja ostaje u prvom ekranu. Te odluke donosi čovjek, a ne kod, i one razlikuju stranicu koja se na telefonu samo prikazuje od one koja se na telefonu koristi.

Ove detalje ne morate znati napamet. Bitno je da ih vaša stranica ima, a to se provjeri za minutu suženjem prozora pregledača na računaru. Ako se sadržaj pri sužavanju preslaguje, temelj postoji; ako se samo smanjuje kao slika, nema ga.

Mobile-first: prvo telefon, pa sve ostalo

Ozbiljna izrada danas počinje od mobilne verzije, pa se dizajn širi prema desktopu. Razlog je praktičan: na mali ekran stane samo ono bitno, pa vas ovaj pristup tjera da prvo posložite poruku, ponudu i CTA, a tek onda ukrase.

Stranica dizajnirana prvo za desktop, pa stisnuta na mobitel, obično se pozna po sitnoj dugmadi i tekstu koji se ne da čitati. Prepoznaje se i po redoslijedu: na desktopu je slika lijevo a tekst desno, a na telefonu se sve slaže jedno ispod drugog, pa velika fotografija zauzme cijeli prvi ekran i gurne ponudu ispod pregiba.

Zbog toga se kod mobile-first pristupa prvo odlučuje redoslijed sadržaja, pa tek onda izgled. Pitanje glasi šta korisnik mora vidjeti prvo ako od cijele stranice vidi samo jedan ekran. Za lokalnu firmu to je gotovo uvijek šta radite, gdje radite i kako vas dobiti, a sve ostalo može čekati niže.

Kako responsive dizajn utiče na upite

Na telefonu se odluka donosi brže nego na računaru. Čovjek koji traži majstora u Tuzli otvori tri stranice iz rezultata i zove onu na kojoj je broj vidljiv odmah. Sve što stoji između njega i tog broja je trošak.

Ima i drugi red posljedica, sporiji i teži za mjerenje. Neko ko na telefonu ne uspije poslati upit rijetko se žali; jednostavno ode kod sljedećeg iz rezultata i tamo ostane. Firma pri tome ne vidi nijedan negativan signal, samo tišinu, pa problem godinama ostane neprimijećen jer se u analitici prikazuje kao normalan promet.

Zato se prilagodba mobitelu u praksi ponaša kao CRO posao. Klikabilan broj telefona, forma s tri polja umjesto osam, dugme koje se ne skriva iza tastature: takve izmjene ne mijenjaju ni ponudu ni promet, a mijenjaju konverzijsku stopu. Kod landing stranica za oglase razlika je još izraženija, jer se tamo plaća svaki posjetilac koji odustane.

Responsive i brzina su dvije različite stvari

Stranica može biti savršeno prilagođena mobitelu i dalje se učitavati sporo. Za brzinu su zaduženi Core Web Vitals, Googleove metrike učitavanja i stabilnosti, koje su na mobilnim mjerenjima strože jer se uzima u obzir slabiji uređaj i sporija veza.

Dobar mobilni SEO traži oboje: prilagodbu i brzinu. Posjetioca gubi i stranica koja se loše vidi i ona koja se predugo učitava. Najčešći krivac za sporost na mobitelu su neoptimizovane fotografije, jer se ista slika od nekoliko megabajta šalje i telefonu i desktopu.

Vrijedi provjeriti i kako se stranica ponaša dok se učitava. Ako se sadržaj pomjeri nakon što se slika ili oglas konačno pojave, korisnik promaši dugme koje je htio pritisnuti. Na desktopu se to jedva primijeti, na telefonu je čest razlog zašto neko odustane prije nego što je uopšte vidio ponudu.

Šta se najčešće lomi na malom ekranu

Isti problemi se ponavljaju iz projekta u projekat:

• Tabele i cjenovnici: probijaju širinu i tjeraju bočno pomjeranje.
• Popup prozori: prekriju cijeli ekran, a dugme za zatvaranje je izvan vidljivog dijela.
• Tekst preko slika: na malom ekranu se ne može pročitati jer se slika drukčije kadrira.
• Forme: tastatura prekrije dugme za slanje, pa korisnik misli da ga nema.
• Navigacija: meni s petnaest stavki koji se na telefonu otvara preko cijelog ekrana.
• Telefonski broj kao slika: ne može se kliknuti ni kopirati, pa se prepisuje ručno.

Svaka od ovih sitnica košta upite koje nikad ne vidite, jer se odustajanje ne bilježi nigdje osim u prometu koji je došao i otišao.

Greške koje najčešće viđamo

Prva je stranica rađena prije mnogo godina, kad je mobitel bio sporedan, koja se otada samo krpi. Svaka nova zakrpa rješava jedan ekran i kvari drugi. Kad se ovakvo krpljenje sabere kroz nekoliko godina, ispadne skuplje od nove stranice na savremenom temelju.

Druga je testiranje samo na vlastitom uređaju. Vlasnik ima novi telefon i brzu vezu, pa mu sve izgleda dobro. Kupci imaju starije uređaje, manje ekrane i mobilnu vezu izvan grada. Provjerite stranicu na barem tri različita telefona i bez wi-fi mreže.

Treća je dizajn koji je odobren isključivo kao slika na velikom monitoru. Klijent vidi lijep raspored u prezentaciji, a mobilna verzija se dogovara na kraju, kad je za ozbiljne izmjene kasno. Tražite da vam se mobilni prikaz pokaže prije desktop verzije.

Četvrta je skrivanje sadržaja na mobitelu. Neko riješi problem uskog ekrana tako što jednostavno sakrije dijelove stranice, pa mobilni posjetilac ne vidi cijene, uslove ili kontakt. Google indeksira mobilnu verziju, pa sakriven sadržaj za pretragu praktično ne postoji.

Peta je zanemarivanje slika. Fotografije se ubace u punoj rezoluciji jer tako izgledaju najbolje na monitoru, a onda telefon svaku od njih preuzima u cijelosti. Skaliranje i savremeni formati rješavaju ovo bez vidljive razlike u kvalitetu.

Šesta je forma koja traži previše. Na desktopu je osam polja podnošljivo, na telefonu je to prepreka koju većina neće preći. Za prvi kontakt treba ime, kontakt i kratka poruka, a ostalo se pita kasnije.

Lista za provjeru na vlastitom telefonu

Uzmite telefon, isključite wi-fi i prođite kroz stranicu kao kupac koji vas prvi put vidi.

• Čita li se tekst bez zumiranja, s fontom koji nije sitniji od 16 piksela?
• Možete li pogoditi svako dugme prstom iz prve, bez promašaja?
• Pomjera li se stranica samo vertikalno, bez bočnog pomicanja?
• Vide li se ponuda, dugme i broj telefona bez ijednog skrola?
• Poziva li klik na broj telefona zaista, umjesto da ga morate prepisivati?
• Možete li poslati upit do kraja, a da vam tastatura ne prekrije dugme?
• Zatvara li se popup iz prve, bez traženja sitnog iksa?
• Otvara li se stranica u razumnom roku na mobilnoj mreži, izvan wi-fi zone?

Popravka ili nova stranica

Sitnice poput fonta, dugmadi i formi mogu se popraviti na postojećoj stranici, često za nekoliko sati rada. Ako je stranica starija i sam temelj joj nije prilagodljiv, prepravljanje obično košta više od nove izrade web stranice na savremenom temelju, a rezultat ostane kompromis.

Najbrži test za tu odluku već ste uradili gore. Ako ste na svojoj stranici zapeli na tri ili više stavki iz liste, a stranica je starija od pet godina, razgovor o novoj se isplati prije nego o zakrpama.

Pri toj odluci vrijedi računati i ono što se ne vidi na ponudi. Nova stranica donosi priliku da se popravi struktura, brzina i način na koji se prikupljaju upiti, dok zakrpe rješavaju samo ono na šta neko pokaže prstom.