+ 381 64 17 39 157 office@cyclopdesign.com

Responsivni dizajn web sajtova nam je predstavljen 2010. u istoimenom tekstu koji je na A List Apart objavio Itan Markot.

Iste godine, samo nekoliko nedelja ranije, iPad je postao prvi u aktuelnom talasu mobilnih tablet uređaja predstavljenih javnosti. Način na koji surfujemo webom i međusobno komuniciramo je time zauvek promenjen.

Od tog doba responsivni dizajn se lagano ali sigurno širi webom.

Za većinu korisnika mreže ovaj termin nema nikakvo značenje. Oni jednostavno samo žele sajtove koji će se otvarati na njihovim uređajima bez teškoća i zastoja. Ne žele da klikću na sićušne hiperlinkove koji će ih možda, a možda i neće, odvesti na željenu stranicu. Ono što svakako ne žele je beskrajno čekanje dok se stranica, pretrpana resaurce-heavy kodovima i slikama, ne učita. Korisnici žele brzo učitavajuće stranice, jednostavne za upotrebu, što bi responsivni dizajn trebalo da im pruži.

To je i razlog zbog koga ovo čitate. Pokušaćemo da to „trebalo“ pretvorimo u izvesnost.

 

Mobilna responsivnost je sada ranking factor

Google je pre par meseci objavio saopštenje koje je najavilo da će mobile friendly sajtovi ubuduće imati bolji ranking u odnosu na one koji to nisu.

„Od aprila 21. proširićemo upotrebu mobile friendly kriterijuma na rangiranje sajtova. Ova promena će uticati na mobilne pretrage na svim jezicima širom sveta i imaće značajan uticaj na rezultate pretrage. Posledično tome, korisnici će lakše nalaziti relevantne visoko kvalitetne rezultate pretrage optimizovane za njihove uređaje.“

Uprkos ovome taj datum je došao i prošao, a ništa se nije mnogo promenilo. Barem za sada. Ali garantujemo da je samo pitanje vremena kada će se to desiti.

Apdejt je nazvan Mobilgedon u SEO i marketinškim krugovima. Takođe je od velikog značaja za biznis, u stvari toliko značajan da je zauzeo mesto u udarnim vestima u USA i UK.

Ramotrićemo načine na koje možete da testirate vaše ili klijentove sajtove da biste videli da li su efektivno mobilno responsivni. Ukoliko otkrijete da je rezultat negativan videćete šta možete da preduzmete povodom toga.

 

Šta je to dobar responsivni dizajn?

responsive-dizajn

Responsivni dizajn se fluidno prilagođava svim rezolucijama i veličinama ekrana.

Poprilično jednostavno, cilj responsivnog dizajna je da obezbedi svakom korisniku, bez obzira na uređaj koji koristi, konzistentno upotrebljivo iskustvo pretraživanja.

Preciznije rečeno, to znači da bi sve funkcije trebalo da rade i ponašaju se na isti način na svakom od uređaja. Na vašem tipičnom blogu to može da se odnosi na sve, od social sharing button-a, preko mailing list sign up formulara, do navigacijskog menija. Nadalje, sadržaj bi trebalo da se lako čita, bez obzira na uređaj koji korisnik upotrebljava.

Postoje četiri tipične vrste ekrana:

  1. desktop
  2. laptop
  3. tablet
  4. smartphone

Tačne dimenzije svakog od navedenih naširoko variraju u zavisnosti od proizvođača. Vaš sajt bi trebalo da izgleda isto u svakoj varijanti. Provaljivanje načina kako da se to postigne zvuči zabavno, zar ne?

Da li vam je potreban responsivni sajt?

Brz odgovor glasi: svakako će vam biti potreban u budućnosti. To se ne dovodi u pitanje. Ali da li vam je potreban sada? Još jedan brz odgovor: skoro sigurno da.

Ukoliko ne provodite mnogo vremena posmatrajući podatke na Google Analytics-u, krajnje je vreme da to promenite. Naročito u pogledu proučavanja navika korisnika koji vašem sajtu pristupaju sa mobilnih uređaja. Možete imati uvid u njihov tačan broj. Takođe možete da saznate koliko se zadržavaju na sajtu i kakvu vrstu iskustva tu dobijaju.

U zavisnosti od toga kako nasetujete analitiku možete da otkrijete koji broj korisnika mobilnih uređaja postaje vaša stvarna mušterija, pridružuje se vašoj mailing listi i prijavljuje se za besplatnu probu vaše usluge ili softvera.

Da biste videli podatke ulogujte se na vaš Google Analytics account, izaberite sajt koji želite da pregledate i idite na: Audience > Mobile > Overview.

Ovde ćete videti analitiku za desktope, mobilne i tablete.

Ukoliko vaš sajt nije responsivan proverite sledeće podatke koji se odnose na to kako ljudi interaguju sa njim:

  • bounce rate
  • pages/session
  • avg session duration
  • goal conversion rate

 

U slučaju da su ove brojke značajno niže nego za desktop statistike, imate ozbiljan problem pred sobom. Podaci vam govore da ljudi sa mobilnim i tabletima nemaju dobro iskustvo prilikom posete vašem sajtu.

Ovo znači da je vreme da nešto preduzmete.

 

Testiranje vašeg sajta na mobilnu responsivnost

Ako niste sigurni da li je vaš sajt responsivan, prva stvar koju ćete morati da uradite je sprovođenje nekoliko testova. Na sreću postoji mnoštvo online alata koji mogu da vam pomognu u sklapanju slike o tome kako vaš sajt izgleda i funkcioniše na mobilnim uređajima.

Uskoro ćemo se pozabaviti tim testovima. Ali za početak hajde da uradimo najjednostavniju od svih provera.

Ako ste za desktopom idite na sajt koji želite da testirate, pustite ga da se učita, zatim napravite vaš browser screen užim. Dok ovo radite, ako sajt ima reponsivan dizajn, elementi stranice će padati dole jedan preko drugog, ali ćete još uvek moći da vidite celu stranicu pomoću skrolovanja.

Ukoliko koristite mobilni uređaj, prosto posetite sajt koji testirate i vidite kako se renderuje na vašoj mašini. Ako izgleda identično verziji koju vidite na desktopu, samo smanjeno, vaš sajt nije responsivan.

 

Testiranje više uređaja upotrebom online emulatora

Prethodna dva testa su jednostavna, ali šta da radimo sa mnoštvom mašina koje ljudi koriste? Od iPad-a, preko Google Nexus-a, do Samsung Galaxy smartphone-a. Kako vaš sajt izgleda na njima?

Na sreću ne morate da potrošite bogatstvo na svaki dostupan uređaj na tržištu. Umesto toga upotrebite neki od sajtova sa emulatorima sposbnim da izvedu vama potrebne testove.

Evo pregleda nekih od njih.

 

MobileTest.me

mobiletestme

Ovaj sajt testira vaš sajt na emulatorima šest popularnih mobilnih uređaja, uključujući iPhone 5, HTC ONE i Google Nexus.

Da biste testirali sajt kliknite na uređaj koji vas zanima i unesite URL sajta ili stranice koju želite da proverite. Za nekoliko sekundi emulator će prikazati kako to izgleda na datom uređaju. I ne samo to, stranica se linkuje i ostali podaci ostaju aktivni, tako da možete da pretražujete sajt pomoću emulatora.

Use MobileTest.me.

 

Responsinator

responsinator

Izvanredan emulator koji se uglavnom fokusira na Apple uređaje, ali takođe uključuje i par Android mašina. Umesto da testirate svaki uređaj, kao i na MobileTest.me, samo unesete URL i skrolujete nadole.

Dok to radite videćete kako sajt izgleda na popularnim uređajima u portret i landscape modovima.

Use Responsinator.

 

Am I Responsive

amiresponsive

Isti postupak primenjuje se i ovde: unesite URL i dobićete rezultate. Ovoga puta ne skrolujete, rezultati za uređaje će se pojaviti na vrhu ekrana. Kada kliknete na ekran nekog od njih moći ćete da skrolujete i da normalno koristite sajt.

Use Am I Responsive.

 

Google’s Mobile Friendly Test

Ovaj je vredan pomena. U pitanju je Google-ov alat.

Ovaj test će analizirati URL i prijaviti da li stranica ima mobile friendly dizajn.

Use Google’s Mobile-Friendly Test.

google

Šta je sledeće?

Pošto smo dovoljno naglasili značaj responsivnog dizajna i proverili kako vaš sajt izgleda na različitm uređajima, došli smo do toga da je potrebno preduzeti neke korake.

Naravno ovo se odnosi na situacije u  kojima vaš sajt ne radi na svim uređajima. Ukoliko je sve u redu ne zaboravite da ga konstantno poboljšavate, zarad vas i vaših korisnika.

Ukoliko vaš sajt ne radi imate tri opcije:

  1. Zamenite trenutni dizajn responsivnim. Ovo bi možda moglo da bude iz „skuplja dara nego mera“ kategorije.
  2. Koristite mobilnu temu. Ovo anulira ključne principe responsivnog dizajna, konzistentnost i upotrebljivost
  3. Usvojite svežu responsivnu temu ili dizajn. Iako ne najjeftinija opcija, početak od nule je verovatno jedina opcija koja nije kompromis bilo kakve vrste.

Jednom kada ste instalirali novu temu, vreme je da je isprobate. Sledeće tri stvari su stavke na koje bi trebalo da obrastite pažnju tokom testiranja:

  1. Da li je korisnicima lako da prate navigaciju na vašem sajtu?
  2. Da li je sadržaj lako čitljiv?
  3. Da li korisnici mogu lako da prate vaše pozive na akciju?

Prođite kroz sve delove vašeg sajta kao da ste korisnik i ispravite sve nepravilnosti na koje naiđete.

Zaključak

Moguće je da je Google malo zakasnio sa odlukom da „utera“ ljude u responsivni dizajn.

Dugo vremena su veliki sajtovi i veliki biznis vukli pete po podu kada je u pitanju prebacivanje na responsivnost. Ovaj potencijalni gubitak u saobraćaju i prodaji je odličan signal za njih da se upuste u promene. Za freelance web dizajnere i kreatore tema bi ovo mogao da bude uvod u najužurbaniji deo njihove karijere, dok klijenti žure da uhvate ritam. Koliko vaših klijenata još uvek nema responsivne sajtove? Da ne pominjemo ukupnu količinu neresponsivnih sajtova koji čekaju da budu apdejtovani. Ono što je sigurno je da vas očekuje dosta posla, naročito ako uspete da im jasno objasnite značaj responsivnog dizajna.

Online emulatori su odličan alat pomoću koga klijentima možete da ukažete na nedostatke njihovih zastarelih sajtova u poređenju sa konkurencijom. Takođe bi trebalo i da vam pomognu da lakše prodate svoje usluge.

Share this:

Pin It on Pinterest

Share This