Adaptacija web-mjesta za mobilne uređaje: kompletan vodič

Dobro znate zašto trebate prilagoditi stranicu za mobilni promet, zar ne? Postoji još jedan razlog za vas: Google će uskoro označiti ikone prilagođene mobilnim uređajima na stranici s prikazom pomoću ikona za mobilne uređaje za gledanje na malim zaslonima pametnih telefona i tableta. Ikona sama po sebi ne znači ništa. To je ono što je važno: vlasnici će primati web-lokacije s prometom koje nisu prilagođene mobilnim gadgetima.

Želite pobijediti u stalnoj borbi za prisustvo? Tada ćete trebati cjeloviti vodič za prilagodbu web-lokacija za mobilni promet.

Što se događa ako zanemarite interese mobilnih korisnika

Prema comScore, u siječnju 2014. udio mobilnog prometa u Sjedinjenim Američkim Državama po prvi puta premašio je udio posjeta web-lokacijama s računala. Prema Kokoc Grupi, situacija u Rusiji je drugačija: od sredine 2014. oko 80% korisnika posjećivalo je web-mjesta pomoću stolnih računala, uključujući prijenosna računala. Međutim, u Runetu postoji naglašen trend porasta prometa u pokretnoj mreži. Obratite pažnju na raspored korištenja operativnih sustava od strane domaćih korisnika.

Povećanje učestalosti korištenja Android OS-a je impresivno, zar ne? Usput, možete brzo odrediti udio mobilnih korisnika vaše web-lokacije pomoću usluge Google Analytics. Za ovo:

  • Odaberite izbornik "Pregled publike" i upotrijebite opciju "Dodaj segment".
  • Na stranici koja se otvori, označite okvir pokraj opcije "Promet s mobilnih uređaja", "Promet s tablet računala" i "Promet s pametnih telefona i tablet računala". Kliknite "Primijeni".
  • U odjeljku "Pregled publike" procijenite udio ukupnog mobilnog prometa, kao i udio prometa prema vrsti uređaja.
Vidi također: Popis pitanja za provjeru mobilne verzije web-lokacije

Tražilice ne mogu zanemariti interese mobilnih korisnika. Stoga će vam uskratiti promet ako ne učinite stranicu prikladnom za korištenje uz pomoć tablet računala i pametnih telefona. Zauvijek ćete izgubiti mnoge korisnike: istraživanje Equation Researcha pokazuje da se 46% korisnika nikada ne vraća na web-lokaciju ako prvo iskustvo posjeta pomoću mobilnog gadgeta nije uspjelo. Konačno, učinkovitost vašeg resursa će stalno padati: postojeći korisnici neće moći sudjelovati u raspravama, naručivati, pretplatiti se na newsletter i obavljati druge radnje ako koriste pametni telefon ili tablet.

Ne sviđa ti se ova perspektiva? Zatim prilagodite web-lokaciju mobilnom prometu.

Za što treba težiti: znakovi resursa prilagođenog mobilnim uređajima

Kada uđete u web stranicu koja je neprijateljska prema mobilnim korisnicima pametnim telefonom, to odmah shvaćate. I koje objektivne karakteristike odgovaraju resursu prilagođenom za male ekrane? Navedene su u nastavku:

  • Web-lokacija se brzo učitava. Nema "teških" fotografija, bljeskalica, nepotrebnih elemenata grafičkog dizajna.
  • Jednostavna navigacija. Resursi prilagođeni mobilnom prometu trebali bi imati samo vertikalno pomicanje, prikladan modul za pretraživanje, navigacijski izbornik Home, Up i Back. Trebala bi biti dostupna i mogućnost poziva s web-lokacije. U najmanju ruku, korisnik mora vidjeti telefonski broj u zaglavlju resursa.
  • Stavke izbornika i obrasci trebaju biti jednostavni za uporabu. Korisnik bi trebao moći jednostavno kliknuti odabranu vezu prstom ili odabrati željenu kontrolu.
  • Sadržaj na web-lokaciji treba biti čitljiv. Korisnik ne bi trebao poduzimati dodatne radnje za čitanje teksta.
  • Mogućnost prijelaza na punu verziju stranice. Resurs ne bi trebao biti prisiljen preusmjeriti posjetitelje na glavnu stranicu mobilne verzije, ako pokušaju pregledati internu stranicu pune verzije pomoću pametnog telefona ili tableta.
  • Funkcionalnost i sposobnost obavljanja radnji konverzije. Mobilni posjetitelj ne bi trebao imati problema s narudžbom, pretplatom na newsletter, preuzimanjem dokumenata itd.

Kako to postići u praksi? Čitajte dalje.

Korak 1: Provjerite koristite li dizajn pogodan za mobilne uređaje.

Otvorite svoju web-lokaciju pomoću pametnog telefona ili tableta i uživajte u praktičnosti njezina korištenja. Ako nemate pri ruci mobilni gadget, koristite alat Screenfly. To vam omogućuje da procijenite izgled stranice na zaslonima različitih uređaja. Jednostavno unesite URL resursa u adresnu traku i odaberite gadget u horizontalnom izborniku.

Ako vidite da web-lokaciju treba prilagoditi mobilnom prometu, morate odabrati jednu od dvije mogućnosti: stvaranje mobilne verzije web-lokacije ili korištenje odgovarajućeg dizajna.

Mobilna verzija web-lokacije

Mobilna verzija web-mjesta je izbor za vlasnike internetskih trgovina, web-usluge, velike web-lokacije. Možete kontaktirati web-programere i zatražiti njihovu pomoć. Ako koristite WordPress, tada imate priliku sami kreirati mobilnu verziju stranice u nekoliko klikova. Da biste to učinili, možete koristiti dodatke:

  • WPtouch Pro. Nakon što ste jednom platili 49 USD, možete odabrati jednu od predloženih mobilnih tema za WordPress i koristiti je cijelo vrijeme.
  • DudaMobile. Osnovna funkcionalnost ovog dodatka dostupna je besplatno. Ako istovremeno plaćate 159 USD, dobit ćete pristup naprednim značajkama i podršci.
  • WP Mobile Edition. Ovaj dodatak automatski prepoznaje značajke mobilnog gadgeta i za posjetitelja prikazuje odgovarajuću mobilnu verziju web-lokacije.

Možete samostalno pronaći dodatke koji vam omogućuju brzo prilagođavanje resursa za Joomla, Drupal i druge popularne CMS-ove mobilnom prometu.

Vidi također: 14 kul čipova s ​​11 najboljih mobilnih stranica

Prilagodljiv dizajn

Odgovarajući dizajn osigurava ispravan prikaz web-lokacije na zaslonima programčića različitih veličina zaslona. Možete kontaktirati web-programere ili instalirati predloške s odgovarajućim rasporedom za popularne "motore".

Dvije prednosti adaptivnog dizajna nad mobilnom verzijom stranice zaslužuju posebno spominjanje. Prvo, Google sam preporučuje korištenje odgovarajućeg izgleda. Drugo, ova metoda prilagodbe za mobilni promet omogućuje vam spremanje jednog dizajna web-lokacije kada se prikaže na zaslonu bilo kojeg gadgeta.

Odgovarajući WordPress predlošci dostupni su na Wordpress.org.

Korak 2: Zamijenite veze na gumbe za dodir.

Kada vlasnici mobilnih naprava dođu na neprilagođena mjesta, odmah razvijaju takozvani sindrom debelih prstiju. Nemojte žuriti s otvaranjem medicinskih referentnih knjiga, ovaj slengovski izraz nije povezan s bolestima. Uslužitelji upotrebljavaju taj sindrom za opisivanje pogrešaka do kojih korisnik dolazi klikom na vezu ili navigacijsku stavku.

Koju veličinu treba imati gumb ili element navigacije za mobilnog korisnika kako bi ga uspješno koristio? Usredotočite se na sljedeće preporuke:

  • Apple preporučuje da programeri sučelja za pametne telefone kreiraju gumbe i navigacijske elemente minimalne veličine od 44 do 44 piksela.
  • Nokia smatra da je minimalna veličina kontrole 48 x 48 piksela ili 0,7 0,7 cm.
  • Microsoft smatra da je optimalna veličina gumba 34 x 34 piksela.

Imajte na umu da vlasnici mobilnih gadgeta ne mogu udobno koristiti web-lokaciju ako u tekstu ima previše veza koje se nalaze jedna uz drugu.

Kako stvoriti gumbe i navigacijske elemente prilagođene mobilnim uređajima

Možete naručiti funkcionalne gumbe s individualnim dizajnom ili koristiti alate za predloške. Ako koristite WordPress, imajte na umu sljedeće dodatke:

  • Stojeće kutije u boji i gumbi. Pomoću ovog dodatka možete stvoriti praktične gumbe različitih veličina i boja. Također vam omogućuje stvaranje kontekstnog izbornika prilagođenog mobilnim korisnicima.
  • Odgovarajući izbornik. Uz ovaj dodatak možete napraviti zgodan izbornik hamburgera.
Vidi također: Top 10 web stranica s prilagodljivim rasporedom

Korak 3: Provjerite koristite li prikladne obrasce.

Što je mobilni promet za? Točno, pretvoriti ga u pretplate, narudžbe proizvoda itd. Vlasnici web stranica vrlo često koriste različite oblike kao elemente konverzije. Zamislite što će se dogoditi ako obrasci nisu prilagođeni za ispunjavanje na mobilnom gadgetu.

Kako provjeriti jesu li obrasci na vašoj web-lokaciji prilagođeni mobilnom prometu? Vrlo je jednostavno: idite na stranicu pomoću pametnog telefona ili tableta i pokušajte ispuniti obrazac. Ako morate povećati obrazac, ne možete razumjeti koje podatke trebate unijeti u određeno polje, a obrazac nije prikladan za mobilnu web-lokaciju.

Možete naručiti razvoj prikladnih obrazaca za mobilnu web-lokaciju, kao i koristiti predložak rješenja za popularni CMS.

  • SumoMe. Besplatni dodatak koji vam omogućuje stvaranje zgodnih mobilnih obrazaca.
  • OptinMonster. Plaćeni dodatak za izradu mobilnih obrazaca.
  • Clickbank. Ova usluga će trebati vlasnike internetskih trgovina. Omogućuje vam "vezanje" za stranicu prilagođenu mobilnoj prometnoj korpi za obradu i plaćanje narudžbi.
  • Gumroad. Još jedna usluga za obradu i plaćanje narudžbi, prijateljskih za mobilne korisnike.
  • Authorize.net. Usluga za primanje uplata s mobilnih web-lokacija.

Korak 4: Ponudite korisnicima čitljiv sadržaj

Korisnici mobilnih gadgeta s malim zaslonima često odlaze na internet kako bi riješili određeni problem: usporedite cijene proizvoda u različitim trgovinama, pronađite kontaktne podatke prodavatelja, pročitajte upute za korištenje lijeka. Oni dolaze na vašu stranicu zahvaljujući jasnom i atraktivnom naslovu. Na stranici moraju pronaći sadržaj prilagođen za čitanje s malog zaslona.

Na engleskom jeziku postoji riječ snackable (od engleskog. "Snack" - predjelo). Sadržaj za mobilne korisnike trebao bi biti snackable: prikladan za brzo čitanje ili čak skeniranje površine u pokretu.

Praktično čitanje sadržaja s mobilnog zaslona ispunjava sljedeće značajke:

  • Počinje kratkim, informativnim i zadivljujućim naslovom. Usredotočite se na duljinu od 10 riječi. Naslov bi trebao biti velikog tiska.
  • Tekst treba kombinirati u sekcije, od kojih svaka počinje kratkim, informativnim i provokativnim podnaslovom. Podnaslovi bi se trebali vizualno razlikovati od teksta.
  • Tekst bi trebao biti numeriran ili popisan s grafičkim oznakama. Pomoću mobilnih korisnika brzo dobivaju ključne informacije.
  • Tekst bi trebao biti vizualni sadržaj. Ona dodatno strukturira tekst i olakšava njegovu percepciju.

Korak 5: Prilagodite e-poštu s malog zaslona.

E-poštu možete prilagoditi za čitanje s zaslona mobilnih gadgeta pomoću sljedećih alata za slanje e-pošte:

  • MailChimp.
  • Aweber.
  • Stalni kontakt.

Odabirom poštanske usluge, provjerite jeste li učinili sve kako biste pročitali vaša pisma.

Pridružite se mobilnoj evoluciji i ne gubite promet.

Internet polako, ali sigurno postaje mobilni. Darwin je također otkrio da najprilagodljivije vrste preživljavaju u procesu evolucije. Ako želite osvojiti konkurenciju za promet, imate samo jedan izbor: prilagoditi stranicu za čitanje s ekrana mobilnih gadgeta.

U našoj agenciji možete naručiti prilagodljiv izgled stranice. Sve pojedinosti pročitajte link.

Pogledajte videozapis: After the Tribulation (Studeni 2019).

Loading...

Ostavite Komentar