Ako želite napraviti WordPress stranicu prilagođenu mobilnim uređajima, ovaj detaljni vodič je isključivo za vas.

Jeste li znali da 9 od 10 mobilnih pretraživanja vodi do akcije, a više od polovice njih dovodi do prodaje?

Upotreba mobilnog interneta raste kao nikada prije. Prestiže upotrebu interneta na stolnim računalima, sve više i više ljudi sada koristi pametne telefone i tablete za pretraživanje informacija na mreži.

To je glavni razlog zašto većina web-mjesta za e-trgovinu sada izrađuje mobilne aplikacije kako bi povećala svoju prodaju i interakciju s korisnicima. Ako vaša web stranica ili blog još nisu prilagođeni mobilnim uređajima, trebali biste odmah razmisliti o tome da svoj dizajn učinite responzivnim ili ćete izgubiti puno potencijalnih kupaca, prometa i prodaje.

Zašto svojoj konkurenciji dati prednost ako nemate dizajn prilagođen mobilnim uređajima? Učinite svoju web stranicu prilagođenom mobilnim uređajima i uskoro ćete primijetiti nagrađujuće rezultate.

Zašto napraviti WordPress stranicu prilagođenu mobilnim uređajima ?

Ako je vaša web stranica prilagođena mobilnim uređajima, evo što se događa;

  • vidjet ćete povećanje prometa
  • možete povećati svoje pretplatnike tako što ćete imati responzivne obrasce za uključivanje putem e-pošte i odredišne ​​stranice
  • ostvarit ćete veću prodaju (korisnici mobilnog interneta uglavnom se oslanjaju na tražilice za pretraživanje informacija, tako da su oni visokokvalitetni kupci koji su spremni kupiti)

Pa što čekaš? Učinite svoj blog lakšim za korisnike i počnite privlačiti više ljudi. Uronimo u detalje kako bismo saznali više.

Sadržaj:

Vrhunski vodič za izradu WordPress stranice prilagođene mobilnim uređajima

Kako svoju WordPress stranicu učiniti prilagođenom mobilnim uređajima

Što je web stranica prilagođena mobilnim uređajima?

S milijardama ljudi koji diljem svijeta koriste mobitele za pregledavanje informacija, korištenje mobilnih stranica postaje trend.

Čak i Google nagrađuje stranice optimizirane za mobilne korisnike jer pružaju brže i bolje iskustvo za korisnike.

Web-mjesto prilagođeno mobilnim uređajima automatski će otkriti okruženje koje svaki posjetitelj koristi za pristup vašem web-mjestu i zatim ga prikazati u formatu koji je najprikladniji za taj uređaj (kao što su pametni telefoni, tableti i tako dalje).

Evo kako izgleda responzivna naspram neresponzivne mobilne web-lokacije:

Kako napraviti WordPress stranicu prilagođenu mobilnim uređajima

Kao što možete vidjeti gore, mobilno responzivno web mjesto pravilno učitava sve svoje elemente poput logotipa, teksta, gumba, navigacije, izbornika itd. na mobilnom telefonu, dok neresponzivni dizajn izgleda neuredno na mobilnom uređaju.

Prema Statisti, postotak web prometa s mobilnih uređaja i dalje raste. Broj globalnih korisnika mobilnog interneta porastao je za više od 10% u posljednje 4 godine.

I ne samo to, indeks penetracije korisnika mobilnog interneta sada iznosi 61,2%, što predstavlja nešto više od 2 milijarde ljudi koji pristupaju internetu putem mobilnih uređaja. To je zanimljiva statistika, zar ne?

Zato biste se trebali usredotočiti na to da svoju web-lokaciju učinite upotrebljivom ako još nije responzivna.

Uz to, postoji razlika između responzivne web stranice i web stranice prilagođene mobilnim uređajima. Što je to?

Responzivna web stranica radi za sva stolna računala, tablete i pametne telefone također s istim sadržajem jer automatski prilagođava izgled, dok je web stranica prilagođena mobilnim uređajima zapravo zasebna verzija web stranice za stolna računala koja je dizajnirana posebno za pametne telefone.

Ukratko, mobilni responzivni dizajn može poboljšati vaše rangiranje, korisničko iskustvo, prodaju i ukupne konverzije na mreži.

Kako znate je li vaša web stranica prilagođena mobilnim uređajima?

Želite li znati je li vaša stranica prilagođena mobilnim uređajima ili ne?

Kako biste provjerili mobilnu responzivnost svoje web-lokacije, možete upotrijebiti Googleov besplatni alat koji je poznat kao Alat za testiranje prilagođen mobilnim uređajima koji vam pokazuje koliko lako posjetitelj može koristiti vašu stranicu na mobilnom uređaju.

Sjajno radi i potpuno je besplatan za korištenje, a vi samo trebate unijeti URL stranice ili URL početne stranice svoje web-lokacije kako biste vidjeli rezultate na njihovom alatu.

Evo kako to izgleda:

Kako napraviti WordPress stranicu prilagođenu mobilnim uređajima

Kao što možete vidjeti gore, unijeli smo URL i to nam pokazuje da je stranica prilagođena mobilnim uređajima (što znači da je stranica jednostavna za korištenje na mobilnom uređaju).

Također vam pokazuje dodatne resurse na kojima možete dobiti izvješća o mobilnoj upotrebljivosti cijele web-lokacije kako biste u potpunosti analizirali svoju web-lokaciju u pogledu odziva.

Općenito, testiranje mobilnog odziva provodi se kako bi se osiguralo da svi korisnici vaše web stranice imaju najbolje iskustvo gledanja na svojim uređajima, a to mogu biti prijenosna računala, stolna računala, tableti i tako dalje.

Osim alata za testiranje prilagođenog Googleu, možete koristiti i sljedeće online alate koji su potpuno besplatni za testiranje odziva vaše web stranice.

Svi gore navedeni alati korisni su da biste saznali je li vaša stranica prilagođena mobilnim uređajima ili ne, a možete provjeriti responzivnost bilo koje stranice samo jednim klikom iz vlastitog preglednika unosom URL-a bilo koje stranice.

Razgovarajmo sada o nekim PROVJERENIM načinima za izradu mobilne verzije vaših WordPress stranica.

Koristite WordPress temu koja odgovara mobilnim uređajima: 3 glavne teme

Jedan od najjednostavnijih načina za stvaranje stranice prilagođene mobilnim uređajima je korištenje teme prilagođene mobilnim uređajima za vaše WordPress web stranice. Iako postoji gomila opcija, ovdje je popis 3 najbolje teme koje možete upotrijebiti za dobivanje responzivnog dizajna sa sjajnim značajkama po pristupačnoj cijeni.

1. Divi

Divi je jedan od WordPress teme najpopularniji premium koji koristi više od 800 ljudi diljem svijeta. Daje vam mnoštvo tema prilagođenih mobilnim uređajima uz Divi, koji je vrhunski alat za izradu tema i vizualnih stranica.

Divi je isključivo dizajniran za pružanje boljeg iskustva na radnoj površini, uključujući iskustvo mobilnog odgovora korisnicima.

Omogućuje vam da prilagodite svoje web mjesto onako kako želite jer možete prilagoditi veličinu fonta na razmacima posebno za različite mobitele. Također možete dodijeliti jedinstvene veličine teksta i vrijednosti razmaka za mobitele i tablete bez umanjivanja doživljaja stolnog računala.

Evo kako to izgleda:

Kako napraviti WordPress stranicu prilagođenu mobilnim uređajima

Kao što možete vidjeti gore, omogućuje vam da prilagodite svoj dizajn u 3 odjeljka na ploči Mobilni stilovi, a to su Tablet, Phone i Mobile Menu. Možete pristupiti svakom od njih i prilagoditi sve, uključujući boju teksta, logotipe i još mnogo toga. lako.

Koja je cijena Divi?

Sjajna stvar kod korištenja Elegant Themes je pristupačna cijena gdje možete zgrabiti sve njihove vrhunske teme uz samo plaćanje 80 USD, što znači da plaćate samo 0,79 USD po temi.

Elegantne teme dolaze u 2 cjenovna plana navedena u nastavku.

1. Godišnji pristup: Ovo je najjeftinija opcija koja košta 80 USD za 1 godinu (s našim ekskluzivnim popustom) i dobit ćete pristup preko 80 tema s 5 dodataka i Divi programom za izradu tema.

2. Doživotni pristup: Ako želite doživotni pristup stiliziranim temama, onda je ovaj paket za vas koji košta 224 dolara za cijeli život, gdje dobivate doživotna ažuriranja, teme i preuzimanja dodataka s doživotnom podrškom.

Dobre vijesti za vas. Ako želite zgrabiti Divi builder sa stiliziranim temama, možete upotrijebiti našu ekskluzivnu vezu kako biste odmah dobili popust od 10% na njihove cijene.

Kliknite ovdje za preuzimanje Divi

Ako niste zadovoljni temom ili značajkama, također možete zatražiti puni povrat novca u roku od 30 dana od kupnje. Dakle, nećete ništa izgubiti.

2. Okvir Geneze

Tražite vrhunski tematski okvir koji ne samo da odgovara mobilnim uređajima, već je brži i prilagođen SEO-u? Onda biste trebali isprobati okvir Genesis jer vam daje doživotni pristup i neograničeno korištenje stranice.

Kolika je cijena Genesis Frameworka ?

Genesis nudi dva plana cijena navedena u nastavku.

1. Okvir Genesis: Ovo je samo goli okvir koji je sve što vam treba i koji vas košta 59,95 USD što je jednokratna naknada i dobit ćete neograničeno korištenje stranice kao i doživotni pristup uključujući doživotna ažuriranja.

2. Pro Plus članstvo: Ovaj paket vam omogućuje preuzimanje njihove cijele kolekcije tema koja vas košta 499,95 USD i jednokratna je naknada s neograničenim korištenjem web mjesta i doživotnim pristupom te je izvrstan paket za web dizajnere i programere.

Kliknite ovdje za preuzimanje Genesis za WordPress

3. GenerirajPress

Ako tražite WordPress teme premium pristupačno i brže, generiranje Press je samo za tebe.

Koliko to kosta?

GeneratePress vas košta samo 49,95 USD za 1 godinu. Također ćete dobiti 40% popusta za sljedeću godinu ako ste postojeći kupac.

Brza napomena: Također vam nudi besplatnu verziju koju možete preuzeti s njihove web stranice, ali vam daje osnovne i ograničene značajke.

Kliknite ovdje za preuzimanje GeneratePress premium

Koristite WordPress dodatke za mobitele: 4 najbolja dodatka za responzivnost vaše stranice

Sjajna stvar u korištenju WordPress CMS-a je to što vam daje tonu mobilnih dodataka koji vam pomažu da svoju web-lokaciju jednostavno pretvorite u onu prilagođenu mobilnim uređajima. Ovdje je popis 4 najbolja dodatka koji vašu web-lokaciju čine mobilnom responzivnom (a nekoliko njih je premium, ali vrijedi svakog penija).

WPtouch

WPtouch je jedan od najčešće korištenih mobilnih dodataka za WordPress stranice. Instalira ga i koristi više od 500 stranica diljem svijeta, a nalazi se i na Googleovoj užoj listi najboljih WordPress mobilnih rješenja.

Ovaj će dodatak odmah aktivirati mobilnu verziju vaše web stranice koja će proći Google Mobile test. Također vam pomaže da jednostavno prilagodite izgled svoje web-lokacije i omogućite brže pregledavanje posjetiteljima na mobilnim uređajima bez izmjene koda teme.

Također nudi vrhunsku verziju dodatka koji se zove WPtouch Pro (i košta vas 79 USD za 1 korištenje web-mjesta) i koristi svoje teme za mobilne posjetitelje, a vaša tema za radnu površinu neće se promijeniti tako da sadržaj vašeg bloga ostaje isti.

Štoviše, s njihovom Pro opcijom također možete kontrolirati svoje izbornike, stranice, uređaje i čak odrediti različite početne i odredišne ​​stranice za svoj blog.

WP Mobile izbornik

WP Mobile Menu jedan je od najbolji WordPress dodaci koji vam pruža responzivni mobilni izbornik u kojem možete jednostavno prilagoditi stil svojih mobilnih izbornika po želji.

Vašim mobilnim posjetiteljima omogućuje izvanredno iskustvo pristupa sadržaju vaše stranice, bez obzira na uređaj koji koriste tijekom pregledavanja, uključujući pametni telefon, tablet ili stolno računalo.

iThemes mobilni dodatak

Ovo NIJE besplatni dodatak jer je vrhunski mobilni dodatak tvrtke iThemes koji je vrlo popularan i koristi ga mnogi ljudi diljem svijeta.

Daje vam mnoštvo opcija zajedno s ugrađenim upraviteljem stiliziranja kako bi vaše web mjesto bilo responzivno na svim uređajima. Također vam nudi teme spremne za mobilne uređaje za optimizaciju vaše web stranice za mobilne korisnike.

U ponudi su različite opcije cijena, a osnovni plan počinje od samo 45 USD i daje vam pristup 2 licence, što je idealna opcija za blogere i vlasnike pojedinačnih stranica.

S upraviteljem mobilnih stilova možete jednostavno promijeniti osnovne stilove i sheme boja vaše mobilne teme i ona se može prilagoditi bilo kojom temom koju koristite i neće utjecati na vaš dizajn.

DodirniteDodirnite

Ovo je još jedan široko korišten premium mobilni dodatak iz CodeCanyona (Envato Market) koji vam daje najfleksibilniji i najsvestraniji WordPress mobilni izbornik.

TapTap je prilagodljiv i jedan je od nevjerojatnih i jednostavnih za korištenje WordPress mobilnih izbornika koji su trenutno dostupni na webu. Bilo da se radi o trgovini e-trgovine ili web-mjestu s portfeljem, možete prilagoditi sve, od fontova, veličina fontova, ikona, boja, gumba i logotipa do pozadina, poravnanja i više.

Ovo je premium dodatak tvrtke CodeCanyon, a standardna jednokratna licenca ovog dodatka košta 26 USD, gdje možete dobiti jednogodišnja ažuriranja i korisničku podršku.

Najbolja stvar kod korištenja ovog dodatka za mobilni izbornik je to što možete jednostavno pregledati sve promjene koje napravite na svojoj web stranici u stvarnom vremenu (i pomaže vam da brzo prilagodite svoj mobilni izbornik).

Koristite Accelerated Mobile Pages (AMP)

Brzina web stranice jedan je od glavnih faktora rangiranja za Google.

Kako bi se smanjilo vrijeme učitavanja, Google nudi novi pristup poznat kao Accelerated Mobile Pages (AMP) za mobilne korisnike.

Evo primjera rezultata pretraživanja AMP-a iz New York Timesa:

Kako napraviti WordPress stranicu prilagođenu mobilnim uređajima

Kao što možete vidjeti gore, AMP stranice se učitavaju brzo i pružaju vrlo brzo iskustvo za korisnike koji pregledavaju online informacije sa svojih mobilnih uređaja.

Najveća prednost AMP stranica je što se učitavaju vrlo brzo. Na primjer, kada netko traži nešto na Googleu, AMP veze se pojavljuju na vrhu i kada se klikne rezultat, učitava se gotovo trenutno.

Još jedan razlog da razmislite o implementaciji AMP-a za svoje web stranice je taj što vam daje dodatna ograničenja znakova za naslove.

Znali vi to ili ne, Google ima ograničenje naslova od 78 znakova za pametne telefone. Za stolna računala to je 70.

To znači da ako koristite više od 70 znakova (za stolna računala) i 78 znakova (za mobilne uređaje) u naslovima, dodatni znakovi su skraćeni tako da se ne pojavljuju.

Dakle, možete dodati više znakova svojim mobilnim naslovima kako biste dobili točnija podudaranja pretraživanja od mobilnih korisnika kako biste povećali ukupni promet pretraživanja s pametnih telefona.

Sada se postavlja pitanje: kako implementirati AMP za WordPress stranice?

Srećom, ima ih nekoliko WordPress plugins koji vam pomažu da jednostavno omogućite i implementirate AMP verziju za svoje WordPress stranice.

Ovdje je popis nekih nevjerojatnih AMP dodataka koje možete koristiti za implementaciju AMP verzije za svoje mobilne korisnike.

Pogreške koje treba izbjegavati dok svoje WordPress web stranice prilagođavate mobilnim uređajima

Korištenje slika bez optimizacije: većina ljudi indeksira Google slike i koristi slike izravno na svojim postovima na blogu čak i ne brinući o optimizaciji. Prestanite to činiti ako ste i vi jedan od njih, jer na vrijeme učitavanja vaše stranice uvelike utječu slike koje koristite.

Upotrijebite dodatke kao što je WP Smush.it da optimizirate svoje slike ili ih još bolje optimizirajte korištenjem besplatnih alata za optimizaciju slika čak i prije upotrebe slika na svojim postovima.

Pretjerali ste s java skriptom: Jeste li znali da se većina početnika igra s CSS datotekama i Java skriptom, a da zapravo ne zna kako se igrati s kodom? Ako ste jedan od njih, nemojte se nesvjesno petljati s Java ili CSS kodom ili ćete najvjerojatnije na kraju uništiti vrijeme učitavanja svoje web stranice.

Ne testiram svoje web stranice: provjerite otvaraju li se vaše web stranice ispravno na različitim mobilnim uređajima i tabletima. Možete koristiti MobileTest.me, QuirkTools itd. za prikaz vaše web stranice na različitim razlučivostima zaslona.

Ostali izvori:

Zaključak

Postoje doslovno milijarde ljudi koji koriste pametne telefone za sve, od pregleda automobila do popusta do kupnje na mreži. Nije važno koristite li WordPress stranicu ili trgovinu e-trgovine, responzivan dizajn poboljšava vaš ukupni rezultat.

Što mislite o WordPress stranicama optimiziranim za mobilne uređaje? Imate li kakvih pitanja ? Podijelite svoje mišljenje u komentarima.