Uzmite telefon i otvorite svoj sajt. Da li morate da zumirate prstima da biste pročitali tekst? Da li dugmad “beže” ispod prsta? Ako je odgovor da — svaki dan gubite ljude koji su vas već pronašli, ali su otišli pre nego što su uspeli da vas kontaktiraju.

O čemu zapravo pričamo kad kažemo “responsive”

Responsive web dizajn znači da se isti sajt, na istom URL-u, automatski prilagođava veličini ekrana na kom se otvara. Nema posebne “mobilne verzije” — postoji jedan sajt koji zna da promeni raspored zavisno od toga da li ga gleda neko na telefonu, tabletu ili velikom monitoru.

Na desktopu to može biti tri kolone i horizontalna navigacija. Na telefonu — jedna kolona, hamburger meni, dugmad dovoljno velika da se pogode prstom bez preciznosti hirurga.

Brojevi koji objašnjavaju zašto je ovo hitno

U Srbiji danas više od 65% internet saobraćaja dolazi sa mobilnih uređaja. To znači da više od polovine ljudi koji prvi put vide vaš sajt — vide ga na malom ekranu.

Istraživanja pokazuju da 88% korisnika se ne vraća na sajt koji im je na telefonu pravio probleme. Prosečan posetilac napusti loše prilagođen mobilni sajt za manje od tri sekunde. Ovo nisu apstraktni brojevi — to su konkretni ljudi koji su vas tražili i otišli konkurenciji.

Zašto Google ovo posebno prati

Od 2019. godine Google koristi takozvano Mobile-First Indexing — što praktično znači da Google prvo gleda mobilnu verziju vašeg sajta kada odlučuje gde ćete se rangirati, i to čak i za pretrage koje neko radi sa računara.

Drugim rečima: loš mobilni prikaz vas kažnjava na celokupnom Google rangu, ne samo kod mobilnih korisnika.

Responsive dizajn nasuprot staroj praksi dva sajta

Nekada su firme pravile dva odvojena sajta — jedan na glavnoj adresi, jedan na “m.” poddomenu za mobilne. Ta praksa je danas zastarela iz nekoliko razloga: dupliranje posla pri svakom ažuriranju, zbunjivanje Google-a duplim sadržajem i mobilna verzija koja skoro uvek zaostaje jer se na nju zaboravi prva.

Jedan responsive sajt rešava sve to — jedno ažuriranje, jedan URL, jedna verzija istine.

Mobile-first kao filozofija, ne samo tehnika

Mobile-first pristup znači da dizajn kreće od najmanjeg ekrana, ne od najvećeg. Zvuči kontraintuitivno, ali ima logiku — lakše je dodati elemente za veći ekran nego oduzimati ih sa malog. Kad dizajner mora da stane sve bitno na ekran od šest inča, prirodno prioritizuje ono što je zaista važno. Rezultat je jasniji sajt čak i na desktopu.

Kako da proverite svoj sajt za dva minuta

Otvorite ga na svom telefonu i pokušajte da dođete do kontakt forme bez zumiranja
Ukucajte adresu u Google PageSpeed Insights (pagespeed.web.dev) — dobijate mobilnu i desktop ocenu odvojeno
U Chrome-u pritisnite F12, pa Ctrl+Shift+M za prikaz mobilnog uređaja direktno u browseru

Ako sajt padne test

Dve realne opcije. Ako radite na WordPress-u sa relativno novijom temom (posle 2017. godine), često je dovoljna promena teme na modernu, responsive po defaultu — brzo i relativno jeftino. Ako je sajt star i tehnički zastareo, redizajn od nule sa mobile-first pristupom je bolje dugoročno rešenje, iako zahteva veću investiciju.

Šta konkretno proveriti na mobilnom prikazu

Tekst čitljiv bez zumiranja (minimalno 16px)
Dugmad velika bar 44×44 piksela
Bez horizontalnog skrolovanja
Slike se ne seku na ivicama
Meni radi kao hamburger ili slično prilagođeno rešenje
Forme se popunjavaju bez muke na malom ekranu
Telefonski broj je klikabilan i odmah otvara poziv

Šta se konkretno lomi na telefonu

„Nije prilagođen telefonu” zvuči kao jedan problem, a u praksi je uvek nekoliko konkretnih stvari. Evo redosleda po tome koliko koja košta.

Broj telefona koji nije dugme. Najskuplja i najlakša za popravku. Ako je broj napisan kao običan tekst ili je deo slike, čovek mora da ga prepiše — i deo njih neće. Kod delatnosti gde ljudi zovu, ovo jedno menja više od svega ostalog na stranici.

Slova koja se ne čitaju. Tekst ispod određene veličine tera na uvećavanje, a svako uvećavanje gubi deo posetilaca. Poseban slučaj je svetlosivi tekst na belom, koji na suncu praktično nestaje.

Dugmad koja se promašuju. Dugme uže od otprilike širine prsta, ili dva dugmeta jedno uz drugo bez razmaka. Najgori slučaj je dugme uz samu ivicu ekrana, koje prekriva prst kojim se telefon drži.

Prozori koji prekriju ekran. Obaveštenje o kolačićima, ponuda koja iskoči, prozorčić za ćaskanje. Na računaru zauzimaju deo ekrana, na telefonu ga prekriju ceo — i ako se dugme za zatvaranje ne vidi, čovek odlazi.

Sadržaj koji se pomera dok se učitava. Čovek krene da pritisne dugme, u tom trenutku se učita slika iznad, sve se pomeri i pritisne pogrešno. Deluje kao sitnica i jedan je od najiritantnijih problema koji postoji.

Tabele i široke slike koje izlaze van ekrana i teraju na pomeranje cele stranice u stranu.

Kako se svaka stavka popravlja

Dobra vest je da nijedna od navedenih ne traži prepravku celog sajta. Kod većine sajtova su to izmene od nekoliko sati ukupno.

Broj telefona se pretvara u vezu koja otvara poziv. Izmena od pet minuta.
Veličina i boja slova se menja u podešavanjima teme, bez diranja koda kod većine tema.
Dugmad se povećavaju i razmiču, sa dovoljnim razmakom od ivice.
Prozori se podešavaju da se ne otvaraju odmah i da imaju vidljivo dugme za zatvaranje.
Pomeranje sadržaja se rešava tako što se slikama unapred odredi prostor koji zauzimaju.
Tabele se stavljaju u okvir koji se pomera zasebno, umesto da se pomera cela stranica.

Redosled je jasan: prvo ono što se tiče kontakta, pa čitljivost, pa ostalo. Prve dve stavke se mere u broju poziva.

Zašto ovo utiče i na rangiranje

Google već godinama ocenjuje sajt po onome što se vidi na telefonu, ne na računaru. To znači da sadržaj koji se na telefonu sakriva praktično ne postoji za rangiranje.

Najčešće se to dešava nenamerno — deo teksta se sakrije da bi stranica izgledala urednije na malom ekranu, ili se sadržaj učitava tek na klik. Ono što se ne prikaže, ne računa se.

Uz to se ocenjuje i kako se stranica ponaša tokom učitavanja, takođe na telefonu i na sporijoj vezi. Zato se merenje nikada ne radi na računaru u kancelariji — o brojevima u tekstu o Core Web Vitals i o samom indeksiranju u tekstu o indeksiranju po mobilnoj verziji.

Popravka ili nov sajt

Pitanje koje se postavlja kada se vidi koliko toga ne radi. Odgovor zavisi od jedne stvari — da li tema uopšte podržava prilagođavanje.

Ako podržava a stvari su loše podešene, sve navedeno se popravlja u okviru postojećeg sajta i to je znatno jeftinije od izrade. Kod većine sajtova iz poslednjih godina to je slučaj.

Ako je sajt napravljen tako da ima fiksnu širinu i ne prilagođava se, popravka je skuplja od nove izrade. Tada se ne krpi nego se pravi iznova — i to je jedini slučaj u kom je redizajn stvarno neophodan, o čemu u tekstu o tome kada je vreme za redizajn.

Poseban slučaj je sajt sa odvojenom mobilnom verzijom na zasebnoj adresi. To danas stvara više problema nego koristi — dupli sadržaj, dvostruko održavanje i rizik da se verzije raziđu. Rešenje je jedan sajt koji se prilagođava.

Česta pitanja

Koliko posetilaca dolazi sa telefona?

Kod većine malih firmi kod nas to je znatno preko polovine, a kod nekih delatnosti i preko tri četvrtine. Tačan broj za vaš sajt vidi se u alatu za merenje posete i vredi ga pogledati pre svake odluke.

Kako da proverim svoj sajt?

Otvorite ga na sopstvenom telefonu i pokušajte da uradite ono zbog čega ljudi dolaze — nađite cenu, pozovite, pošaljite upit. Ne gledajući nego radeći. Ceo spisak je u tekstu o proveri stanja sajta.

Da li je dovoljno da smanjim prozor pregledača?

Nije. To pokazuje raspored ali ne i kako se sajt ponaša na sporijoj vezi, ni kako se dugmad pogađaju prstom. Provera se radi na stvarnom telefonu.

Šta ako je sajt star?

Deo grešaka se ispravlja bez prepravke. Ako se ispostavi da se ne isplati, to je jasan znak da je vreme za nov sajt — o ostalim propustima u tekstu o mobilnoj verziji.

Da li aplikacija rešava problem?

Ne. Aplikaciju treba preuzeti, a čovek koji vas prvi put nađe u pretrazi to neće uraditi. Sajt mora da radi na telefonu bez obzira na sve ostalo.

Šta se dobija kada se ovo sredi

Efekat se ne meri utiskom nego brojevima, i vidi se brzo jer se ne čeka na rangiranje.

Prvi broj je broj poziva, kod delatnosti gde ljudi zovu. Pretvaranje broja telefona u dugme je izmena od pet minuta i kod zapuštenih sajtova se razlika vidi već iste nedelje.

Drugi je udeo posetilaca sa telefona koji pošalju upit. Meri se odvojeno od onih sa računara — kod sajtova koji nisu prilagođeni ta razlika ume da bude višestruka, i to je najjasniji dokaz da problem postoji.

Treći je udeo onih koji odu sa prve stranice. Ako naglo padne posle popravke, znači da su ljudi ranije odlazili zato što nisu mogli da koriste sajt, ne zato što ih ponuda nije zanimala.

Responsive dizajn danas nije “plus” na cenovniku — to je minimum ispod kog sajt praktično ne treba da izlazi u javnost. Ako niste sigurni gde stoji vaš sajt, pošaljite nam link — pogledamo mobilnu verziju i kažemo iskreno da li je problem.