Danas većina ljudi ide online putem mobilnih gadgeta - tableta, telefona, s tim u vezi optimizacija web stranica također dostiže novu razinu. Ako korisnik dođe i vidi da stranica nije optimizirana za mobilne uređaje: slika se ne može vidjeti, gumbi su se pomaknuli, fontovi su mali i nečitljivi, dizajn je iskrivljen - 99 od 100% koje će izaći i počnite tražiti drugu prikladniju. I robot za pretraživanje će označiti okvir da je resurs nebitan, odnosno da ne odgovara upitu za pretraživanje. Stoga dizajn stranice mora biti prilagođen raznim mobilnim uređajima. Što je mobilna verzija stranice, kako je napraviti i koji je najbolji način za primjenu? Pročitajte više u ovom članku.
Dakle, postoje četiri ključna načina da svoju web lokaciju učinite prilagođenom mobilnim uređajima.
Prva metoda - responzivni dizajn
Responzivni predlošci mijenjaju sliku stranice ovisno o veličini zaslona. U pravilu su postavljeni na standardne 1600, 1500, 1280, 1100, 1024 i 980 piksela. Za implementaciju se koriste CSS3 medijski upiti. Sam dizajn stranice se ne mijenja.
Prednosti ove metode uključuju:
- pogodan razvoj,budući da se sama struktura prilagođava parametrima zaslona, a bilo kakvo ažuriranje ne zahtijeva razvoj dizajna od nule, dovoljno je podesiti CSS i HTML;
- jedan URL – korisnik ne mora pamtiti nekoliko imena, nema potrebe za preusmjeravanjem (preusmjeravanje s jedne adrese na drugu), što može otežati rad webmastera, a i lakše je pretraživati motor za sortiranje i rangiranje resursa s jednom adresom.
Naravno, adaptivni predlošci imaju svoje nedostatke, koji su, usput rečeno, više od prednosti. Ipak, mnogi programeri se pridržavaju ovog koncepta, na primjer, Google Corporation, čija mobilna verzija stranice ima prilagodljiv dizajn. Dakle, nedostaci:
- Responzivni dizajn ne podržava iste zadatke na mobilnom uređaju kao na računalu. Ako se radi o, primjerice, mobilnoj verziji web stranice banke, gdje je vjerojatnije da će korisniku biti važni podaci o tečaju ili najbližim bankomatima, onda je ovakav dizajn sasvim dovoljan. Ali ako je ovo složen strukturirani resurs s mnogo odjeljaka i pododjeljaka, posjetiteljima se teško da će se svidjeti prilagodljivi izgled.
- Sporo učitavanje pretvara omiljenu web-lokaciju u omraženu. To se posebno odnosi na resurse u kojima ima animacija, videa, skočnih prozora i drugih aktivnih elemenata u izobilju. Zbog velike težine, stranica će se jednostavno "usporiti", korisnik će se naljutiti i otići, a pozicije pretraživanja stranice će pasti.
- Nemogućnost isključivanja mobilne verzije još je jedan značajan nedostatak. Ako je neki element skriven takvim rasporedom, vine možete učiniti ništa da biste ga otvorili, za razliku od web-mjesta na kojima ga možete isključiti i prebaciti na običnu domenu.
Međutim, takva mobilna verzija stranice brzo, bez posebnih vještina i troškova, omogućuje prilagodbu resursa svim gadgetima. No, s obzirom na navedene nedostatke, odgovarat će malim, jednostavnim resursima s minimumom informacija i multimedije, bez složene navigacije i animacije. Za složenu stranicu prikladne su još 2 metode.
Druga metoda - zasebna verzija stranice
Ova metoda je vrlo česta i često je uspješna u tome da web mjesto učini čitljivijim na mobilnom uređaju. Njegova je bit stvoriti zasebnu verziju stranice, nacrtanu za aplikaciju i smještenu na zasebnom URL-u ili poddomeni, na primjer, m.vk.com. Istodobno, glavna funkcionalnost je očuvana, dizajn stranice samo izgleda drugačije. Prednosti ove metode su očite:
- sučelje prilagođeno korisniku;
- jednostavno mijenjati i uređivati jer verzija postoji odvojeno od glavnog izvora;
- zbog male težine, zasebna verzija stranice radi mnogo brže od prilagodljivog predloška;
- najčešće je moguće otići na glavnu verziju stranice s mobitela.
Ali i ovdje je bilo nekih nedostataka:
- Više adresa - desktop i mobilna verzija stranice. Kako natjerati korisnika da zapamti dvije opcije? Web majstori često propisuju preusmjeravanje (preusmjeravanje) sa desktop verzije na mobilnu verziju, ali istovremeno, ako je ova stranica u mobilnoj verzijiverzija ne postoji, korisnik će dobiti pogrešku. Ovdje nastaju poteškoće s tražilicama kojima je teško rangirati 2 identična resursa, a to izravno utječe na promociju.
- Mobilna verzija stranice s računala, ako je korisnik greškom posjeti, izgledat će smiješno, što također može utjecati na promet.
- Ova verzija je često jako smanjena, desktop, tako da će korisnik dobiti vrlo ograničenu funkcionalnost. Ali u isto vrijeme, ako nešto nedostaje, posjetitelj može otići na punu verziju stranice.
Općenito, zasebna mobilna stranica opravdava se i najčešći je način prilagođavanja resursa za mobilne uređaje. Popularan je u velikim online trgovinama kao što je Amazon.
Treći način - RESS dizajn
Google tražilica aktivno podržava ovaj smjer mobilnog dizajna. Ovo je najsloženija, najskuplja, ali učinkovita metoda za prilagodbu stranice na telefon ili tablet. Zove se RESS. Ovo je ciljanje resursa u mobilnu aplikaciju koja se može preuzeti za svaki uređaj zasebno. Za android - s GooglePlayom, a za Apple - s iTunes.
Ovakve aplikacije su brze, besplatne, praktične, imaju mogućnost smještaja raznih vrsta informacija, dok se memorija telefona i internetski promet ne jedu kao kada posjetite stranicu putem preglednika. Lako im je pristupiti jer će veza uvijek biti na ekranu pri ruci i nema potrebe unositi složeno ime u adresnu traku preglednika.
Ima, naravno, ovdje injegovi nedostaci, kao što su složenost u razvoju, visoka cijena rada velikog broja programera, potreba za izradom nekoliko opcija izgleda. Ponekad aplikacija ne prepoznaje mobilni uređaj. Potrebna je redovita tehnička podrška, ispravljanje nedostataka. Ipak, ova se opcija smatra najboljom od tri predložene zbog svog produktivnog, neprekidnog rada.
Najjeftiniji način izrade mobilnog web-mjesta
Sve gore navedene metode uključuju, iako ne uvijek dug i težak, ali ipak plaćeni rad webmastera. Ako ne vidite hitnu potrebu za takvim razvojem, odgovarat će vam jednostavna i besplatna mobilna verzija stranice. Kako je najlakše napraviti?
Preuzmite posebne predloške (dodatke) za responzivni dizajn. Na primjer, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile i drugi. Oni će vam pomoći da se stranica ispravnije prikaže na telefonu, dok ćete dobiti nekoliko savjeta što treba ispraviti kako biste stranicu bolje prilagodili mobilnoj verziji.
Naravno, ova metoda nije prikladna za ozbiljne resurse. Umjesto toga, ova besplatna značajka namijenjena je malim i jednostavnim stranicama, blogovima, novostima. Ne zaboravite da Google tražilica, kao i Yandex, danas postavlja ozbiljne zahtjeve za mobilne verzije, tako da postoji velika šansa da snizite svoje pozicije pomoću ove metode.
Ovom metodom najvjerojatnije će oglasi i skočni prozori biti odrezanibanneri, ali stranica će se učitati brzo i bez "zastoja".
Načela za izradu mobilnih verzija
Nije bitno da li je mobilna verzija stranice kreirana besplatno ili uz pomoć osoblja webmastera, napravljena je na RESS sustavu ili pomoću adaptivnog predloška. Ono što je najvažnije, za njegovo učinkovito djelovanje potrebno je pridržavati se nekoliko iznimno važnih načela. Dakle, koja bi trebala biti mobilna verzija stranice? Kako ga učiniti produktivnim, učinkovitim i produktivnim?
Uklonite sve nepotrebno
Minimalizam je ono čemu bi programer mobilne verzije stranice trebao težiti. Zamislite koliko je teško percipirati informacije koje su prepune boja, gumba, bannera i koje morate beskrajno listati u potrazi za pravim materijalom. Dizajn mobilnog uređaja trebao bi biti jednostavan i čist. Odaberite 2-3 boje za podjelu prostora (na primjer, s markom). Bolje ako je jedan od njih bijeli. Podijelite prostor malog ekrana na razumljive i čitljive zone. Virtualni ključevi trebaju biti vidljivi kako bi korisnik jasno znao gdje pritisnuti i vidjeti - ovdje je proizvod, ovdje je obrazac za popunjavanje podataka, ovdje su podaci o dostavi i plaćanju.
Sve dodatne opcije koje bi bile korisne u desktop verziji i olakšale život korisniku ovdje će donijeti samo poteškoće. Ostavite samo najvažnije elemente. Animacija, reklamni banneri, multimedija, najvjerojatnije, samo će usporiti rad stranice ili aplikacije i odvratiti pozornost odglavni.
Poravnanje
Pitanje poravnanja nije ništa manje akutno, jer ako se radi pogrešno, korisnik će dobiti samo završetke važnih riječi. Općenito je prihvaćeno poravnanje ulijevo i okomito. Zamislite da skrolujete kroz feed vijesti na svom telefonu. Radite to od vrha do dna, a ne lijevo ili desno.
Ujedinjenje
Kada ne postoji mogućnost dugog lanca prijelaza, pokušajte spojiti nekoliko koraka u jedan. Na primjer, stranica zahtijeva unos podataka u nekoliko faza - ime, zatim adresu, pri čemu se u svakoj pojedinoj ćeliji nalazi zasebna kuća, ulica, stan itd. Kako ne bi natjerali korisnika da pokuša pogoditi mnogo malih ćelija, zamolite ga da ispuni samo 2 - ime i adresu.
I prekid veze
Ponekad, naprotiv, potrebno je odvojiti previše informacija. Na primjer, u padajućem izborniku imate popis više od 80 gradova u kojima se vrši dostava. Grupirajte ih po regijama kako se korisnik ne bi morao pomicati kroz ovaj ogroman popis. Kada zadržite pokazivač iznad regionalnog centra ili regije, ispasti će drugi popis gradova.
Listings
Usput, o popisima. Dva su od njih - fiksna po abecednom ili drugom redu i sa zamjenom. Njihov izbor ovisi o tome što će biti na popisu.
Fiksno je korisno ako korisnik točno zna što traži. Na primjer, grad, broj ili datum. Druga je opcija prikladna za duga složena imena ili za slučajeve u kojima postoji mnogo varijacija jednog te istogistog naziva, a svaki padajući popis dovodi korisnika korak bliže cilju. Opcija automatske zamjene češće se koristi kada posjetitelj treba pomoć. Na primjer, stranica za pletenje nudi kupnju igala za pletenje. Korisnik upisuje upit za pretraživanje “Igle za pletenje metala”, a u opisu alata vidi “Igle za pletenje 5 mm”, “Igle za pletenje 4,5 mm” itd.
Automatsko popunjavanje
Ova je stavka posebno relevantna za web-lokacije koje prodaju nešto online, a morate ispuniti standardne obrasce za plaćanje, dostavu itd. Ako osoba obavi kupnju s telefona, onda najvjerojatnije nema vremena doći do računala, što znači da proces kupovine treba biti što brži i praktičniji.
Za to obrasci mogu sadržavati već popunjene podatke, možete pribjeći najpopularnijim odgovorima. Na primjer, unesite današnji datum, način plaćanja gotovinom, grad ako radite u istoj regiji. Mogu se mijenjati, ali ako pogodite metu, korisnikovo će vrijeme biti ušteđeno.
Sve se čita, sve se gleda
Kada dizajnirate mobilnu verziju web-mjesta, imajte na umu da su svi telefoni različiti, pa tako i njihov vid. Možda će se vaša stranica gledati s malog zaslona, pa bi fontovi trebali biti jednostavni i čitljivi, gumbi trebaju biti dovoljno veliki da se mogu kliknuti bez prelaska na drugu stranicu, a slike bi se trebale otvarati zasebno, velike, posebno kada dolazi na internet. trgovina.
Neke statistike
Govoreći o prilagodbi stranice mobilnim uređajima, ne može se pomoći da ne pribjegnemo statistici kako bismo shvatili koliko je ovaj proces važan zaonline promocija.
Brojevi su sljedeći. Danas gadgete koristi 87% stanovništva, očito, osim najmanje djece i nekih starijih ljudi. Ekonomisti predviđaju da će mobilna trgovina porasti 100 puta u sljedećih 5 godina. Istovremeno je samo 21% stranica prilagođeno za rad s mobilnim uređajima. To znači da je samo mali 5. dio internetskog prometa i tržišta e-trgovine zauzet.
Razmislite o ovim brojevima. Ima li smisla prilagoditi svoj resurs? Naravno da. Štoviše, dok na ovom tržištu ima toliko prostora, na njemu možete oblikovati svoj segment.
Gdje vam treba mobilna verzija
Korištenje mobilne verzije ima smisla za svaku platformu koja ima za cilj dobiti visoku poziciju. Uostalom, ovo je izravan utjecaj na korisnika, stvarajući mu ugodne uvjete za boravak na vašoj web-lokaciji.
Ne može postojati bez mobilne verzije:
- novinski portali, jer se većina njih gleda s telefona na putu do posla ili škole;
- društvene mreže - iz istog razloga, plus postoji faktor online komunikacije, što znači da za to treba stvoriti prikladan, razumljiv chat;
- reference, navigacijske stranice, itd., kamo ljudi idu kada nešto traže;
- online trgovine - prilika za privlačenje kupaca koji ne gube vrijeme na kupnju, već kupuju sve putem mobilnog interneta.
Umjesto zaključka
Danas su mobilne tehnologije na tržištuaktivan rast i razvoj, stoga, težeći vodstvu na tržištu, svaka tvrtka mora osigurati da njezin internetski resurs ispunjava zahtjeve. Zbog sve većih zahtjeva korisnika, stranice se moraju stalno nadograđivati i prilagođavati različitim uređajima. Jasno je da ako je osobi nezgodno biti na određenom resursu, ne može dobiti informacije o proizvodu ili cijeni tamo, naručiti, saznati o isporuci, tada će pronaći mjesto na kojem će sve to postati moguće. Stoga je za pobjedu u konkurenciji važno imati fleksibilan, praktičan, funkcionalan i zanimljiv resurs.
Mobilna verzija web-mjesta Android ili Ios pomoći će u tome. Da biste to učinili, trebate odabrati jednu od gore navedenih metoda redizajniranja - adaptivni predložak, stvaranje nove stranice na poddomeni i preusmjeravanje na nju, korištenje besplatnih predložaka ili izradu mobilne aplikacije koja će korisniku olakšati ulazak i budi na stranici.
Ovaj pristup ne samo da će pomoći u održavanju lojalnosti postojećih kupaca, već će također pružiti priliku za privlačenje novih posjetitelja.
