Danas većina ljudi ide na internet putem mobilnih uređaja - tableta, telefona, s tim u vezi, optimizacija web stranica također dostiže novi nivo. Ako korisnik dođe i vidi da stranica nije optimizirana za mobilne uređaje: slika se ne može pogledati, dugmad su pomaknuta, fontovi su mali i nečitljivi, dizajn je iskrivljen - 99 od 100% kojih će izaći i počnite tražiti drugu pogodniju. I robot za pretraživanje će označiti kućicu da je resurs nebitan, odnosno da se ne podudara s upitom za pretraživanje. Stoga dizajn stranice mora biti prilagođen različitim mobilnim uređajima. Šta je mobilna verzija sajta, kako je napraviti i koji je najbolji način da je primenite? 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
Reaktivni šabloni menjaju sliku sajta u zavisnosti od veličine ekrana. 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 ekrana, a bilo koje ažuriranje ne zahtijeva razvoj dizajna od nule, dovoljno je podesiti CSS i HTML;
- jedan URL – korisnik ne mora pamtiti više 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 sa jednom adresom.
Naravno, adaptivni šabloni imaju svoje nedostatke, koji su, inače, 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 PC-u. Ako je ovo, na primjer, mobilna verzija web stranice banke, gdje je vjerojatnije da će korisniku biti važni podaci o tečaju ili najbližim bankomatima, onda je ovaj 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 stranicu u omraženu. Ovo se posebno odnosi na resurse u kojima ima animacija, videa, iskačućih prozora i drugih aktivnih elemenata u izobilju. Zbog velike težine, stranica će jednostavno "usporiti", korisnik će se naljutiti i otići, a pozicije pretraživanja stranice će pasti.
- Nemogućnost isključivanja mobilne verzije je još jedan značajan nedostatak. Ako je neki element skriven takvim rasporedom, vine možete ništa učiniti da ga otvorite, za razliku od stranica na kojima ga možete isključiti i prebaciti na regularnu domenu.
Međutim, takva mobilna verzija stranice brzo, bez posebnih vještina i troškova, omogućava vam da prilagodite resurs bilo kojim gadžetima. 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 lokaciju, 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 suština kreiranje zasebne verzije stranice, nacrtane za aplikaciju i koja se nalazi na zasebnom URL-u ili poddomenu, na primjer, m.vk.com. Istovremeno, glavna funkcionalnost je očuvana, dizajn stranice samo izgleda drugačije. Prednosti ove metode su očigledne:
- sučelje prilagođeno korisniku;
- lako za promjenu i uređivanje jer verzija postoji odvojeno od glavnog izvora;
- zbog male težine, zasebna verzija stranice radi mnogo brže od adaptivnog šablona;
- najčešće je moguće otići na glavnu verziju stranice sa mobilnog.
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 u isto vrijeme, ako je ova stranica u mobilnoj verzijiverzija ne postoji, korisnik će dobiti grešku. Ovdje nastaju poteškoće sa pretraživačima, kojima je teško rangirati 2 identična resursa, a to direktno utiče na promociju.
- Mobilna verzija stranice sa kompjutera, ako je korisnik greškom posjeti, izgledat će smiješno, što može uticati i 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 predstavlja najčešći 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 pretraživač aktivno podržava ovaj pravac mobilnog dizajna. Ovo je najkompleksniji, najskuplji, ali najefikasniji način prilagođavanja stranice na telefon ili tablet. Zove se RESS. Ovo je ciljanje resursa u mobilnu aplikaciju koja se može preuzeti za svaki uređaj posebno. Za android - sa GooglePlay, a za Apple - sa iTunes.
Ovakve aplikacije su brze, besplatne, praktične, imaju mogućnost prihvatanja raznih vrsta informacija, dok se memorija telefona i internet saobraćaj ne jedu kao kada se sajt posećuje preko pretraživača. Lako im je pristupiti, jer će veza uvijek biti na ekranu pri ruci i nema potrebe da unosite složeno ime u adresnu traku pretraživača.
Postoje, naravno, ovdje injegovi nedostaci, kao što su složenost u razvoju, visoka cijena rada velikog broja programera, potreba da se napravi nekoliko opcija rasporeda. Ponekad aplikacija ne prepoznaje mobilni uređaj. Potrebna je redovna tehnička podrška, ispravljanje nedostataka. Ipak, ova opcija se smatra najboljom od tri predložene zbog svog produktivnog, neprekidnog rada.
Najjeftiniji način da napravite mobilnu web stranicu
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. Koji je najlakši način da to napravite?
Preuzmite posebne šablone (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 šta treba ispraviti kako bi se stranica bolje prilagodila mobilnoj verziji.
Naravno, ova metoda je teško pogodna za ozbiljne resurse. Umjesto toga, ova besplatna funkcija namijenjena je malim i jednostavnim stranicama, blogovima, novostima. Ne zaboravite da Google pretraživač, kao i Yandex, danas postavlja ozbiljne zahtjeve za mobilne verzije, tako da postoji velika šansa da snizite svoje pozicije koristeći ovu metodu.
Ovom metodom, najvjerovatnije će oglasi i skočni prozori biti odsječenibaneri, ali stranica će se učitati brzo i bez “zastoja”.
Principi za kreiranje mobilnih verzija
Nije bitno da li je mobilna verzija sajta kreirana besplatno ili uz pomoć osoblja webmastera, napravljena je na RESS sistemu ili pomoću adaptivnog šablona. Ono što je najvažnije, za njegov efikasan rad potrebno je pridržavati se nekoliko izuzetno važnih principa. Dakle, koja bi trebala biti mobilna verzija stranice? Kako to učiniti produktivnim, efikasnim 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, dugmadi, banera i koje morate beskrajno listati u potrazi za pravim materijalom. Dizajn mobilnog uređaja trebao bi biti jednostavan i čist. Odaberite 2-3 boje da podijelite prostor (na primjer, brendiran). Bolje ako je jedan od njih bijeli. Podijelite prostor malog ekrana na razumljive i čitljive zone. Virtuelni ključevi treba da budu vidljivi tako da korisnik jasno zna gde da pritisne i vidi - ovde je proizvod, ovde je formular za popunjavanje podataka, ovde su podaci o isporuci 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 baneri, multimedija, najvjerovatnije će samo usporiti rad stranice ili aplikacije i odvratiti pažnju odmain.
Poravnanje
Pitanje poravnanja nije ništa manje akutno, jer ako se uradi pogrešno, korisnik će dobiti samo završetke važnih riječi. Općenito je prihvaćeno poravnanje lijevo i okomito. Zamislite sebe kako skrolujete kroz 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, gdje se u svakoj pojedinačnoj ćeliji nalazi posebna kuća, ulica, stan itd., zamolite ga da popuni samo 2 - ime i adresu.
I prekid veze
Ponekad, naprotiv, potrebno je izdvojiti previše informacija. Na primjer, u padajućem izborniku imate listu od više od 80 gradova u kojima se vrši dostava. Grupirajte ih po regionima tako da korisnik ne mora da se kreće kroz ovu ogromnu listu. Kada pređe preko regionalnog centra ili regije, ispasti će još jedna lista gradova.
Listings
Usput, o listama. Postoje dva od njih - fiksirani po abecednom ili drugom redu i sa zamjenom. Njihov izbor zavisi od toga šta će biti na listi.
Fiksno je korisno ako korisnik tačno zna šta traži. Na primjer, grad, broj ili datum. Druga opcija je prikladna za duga složena imena ili za slučajeve u kojima postoji mnogo varijacija jednog te istogistog imena, a svaka padajuća lista dovodi korisnika korak bliže cilju. Opcija automatske zamjene se češće koristi kada je posjetitelju potrebna pomoć. Na primjer, stranica za pletenje nudi kupovinu igala za pletenje. Korisnik unese upit za pretragu “Igle za pletenje metala”, a u tooltip-u vidi “Igle za pletenje 5 mm”, “Igle za pletenje 4,5 mm” itd.
Automatsko popunjavanje
Ova stavka je posebno relevantna za sajtove koji prodaju nešto online, a morate ispuniti standardne formulare za plaćanje, dostavu itd. Ako osoba obavi kupovinu sa telefona, onda najvjerovatnije nema vremena da dođete do računara, što znači da proces kupovine treba da bude što brži i praktičniji.
Za ovo, obrasci mogu sadržavati već popunjene podatke, možete pribjeći najpopularnijim odgovorima. Na primjer, unesite današnji datum, gotovinski način plaćanja, grad ako radite u istoj regiji. Mogu se mijenjati, ali ako pogodite metu, korisnikovo vrijeme će biti ušteđeno.
Sve se pročita, sve se pogleda
Kada dizajnirate mobilnu verziju stranice, imajte na umu da su svi telefoni različiti, pa tako i njihov vid. Možda će se vaša stranica gledati sa malog ekrana, tako da fontovi trebaju biti jednostavni i čitljivi, dugmad treba da budu dovoljno velika da se na njih može kliknuti bez prelaska na drugu stranicu, a slike treba da se otvaraju odvojeno, velike, posebno kada dolazi na internet. store.
Neke statistike
Govoreći o prilagođavanju 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 gadžete koristi 87% stanovništva, očigledno, osim najmanje djece i nekih starijih ljudi. Ekonomisti predviđaju da će mobilna trgovina porasti 100 puta u narednih 5 godina. Istovremeno, samo 21% sajtova je prilagođeno za rad sa mobilnim uređajima. To znači da je samo mali 5. dio internet prometa i tržišta e-trgovine zauzet.
Razmislite o ovim brojevima. Ima li smisla prilagođavati svoj resurs? Naravno da. Štaviše, dok na ovom tržištu ima toliko prostora, možete kreirati svoj segment na njemu.
Gdje vam treba mobilna verzija
Korišćenje mobilne verzije ima smisla za bilo koju platformu koja ima za cilj visok rang. Na kraju krajeva, ovo je direktan uticaj na korisnika, stvarajući mu ugodne uslove da ostane na vašoj stranici.
Ne može postojati bez mobilne verzije:
- novinski portali, jer se većina njih gleda sa telefona na putu do posla ili škole;
- društvene mreže - iz istog razloga, plus postoji faktor online komunikacije, što znači da za ovo treba kreirati zgodan, razumljiv chat;
- reference, navigacijske stranice, itd., gdje ljudi idu kada nešto traže;
- online prodavnice - prilika za privlačenje kupaca koji ne gube vrijeme na kupovinu, već sve kupuju putem mobilnog interneta.
Umjesto zaključka
Danas su mobilne tehnologije na tržištuaktivan rast i razvoj, stoga, težeći liderstvu na tržištu, svaka kompanija mora osigurati da njen internet 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 tamo dobiti informacije o proizvodu ili cijeni, naručiti, saznati o isporuci, tada će pronaći stranicu na kojoj će sve to postati moguće. Stoga, da biste pobijedili na takmičenju, važno je imati fleksibilan, praktičan, funkcionalan i zanimljiv resurs.
Mobilna verzija Android ili Ios web stranice će vam pomoći u tome. Da biste to učinili, trebate odabrati jednu od gore navedenih metoda redizajniranja - adaptivni predložak, kreiranje nove stranice na poddomeni i preusmjeravanje na nju, korištenje besplatnih predložaka ili kreiranje 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.
