Danas većina ljudi ide na internet putem mobilnih naprava - tableta, telefona, u tom smislu optimizacija web stranica također doseže novi nivo. Ako korisnik uđe i vidi da web mjesto nije optimizirano 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%, izađite i počnite tražiti drugu prikladniju. I potvrdit će okvir da je resurs nevažan, odnosno da ne odgovara upitu za pretraživanje. Stoga dizajn stranice nužno mora biti prilagođen različitim mobilnim uređajima. Šta mobilna verzija web stranicu, kako je napraviti i koji je najbolji način da je primijenite? Pročitajte više u ovom članku.

Dakle, postoje četiri ključna načina da svoju web lokaciju učinite mobilnom.

Prvi metod - responzivni dizajn

Odgovarajući predlošci uključuju promjenu slike web lokacije ovisno o veličini ekrana. Obično su postavljeni na standardne 1600, 1500, 1280, 1100, 1024 i 980 piksela. Upiti se koriste za implementaciju. Istovremeno, ono se ne menja.

Prednosti ove metode uključuju:

• zgodan razvoj, budući da se struktura sama prilagođava parametrima ekrana, a bilo koje ažuriranje ne zahtijeva razvoj dizajna od nule, dovoljno je ispraviti CSS i HTML;
• jedan url adresa- korisnik ne mora pamtiti nekoliko imena, nema potrebe za preusmjeravanjem (preusmjeravanje s jedne adrese na drugu), što može zakomplicirati rad webmastera, a tražilici je lakše sortirati i rangirati resurs sa jednom adresom.

Naravno, responzivni predlošci imaju svoje nedostatke, koji su, inače, više od prednosti. Ipak, mnogi programeri pridržavaju se upravo ovog koncepta, na primjer, Google Corporation, čija mobilna verzija web stranice ima adaptivni dizajn... Dakle, nedostaci:

• Responzivni dizajn ne podržava iste zadatke na mobilnom uređaju kao na računaru. Ako je ovo, na primjer, mobilna verzija web stranice banke, gdje je veća vjerojatnost da će korisnika zanimati informacija o tečaju ili najbližim bankomatima, tada je ovaj dizajn sasvim dovoljan. Ali ako je ovo složen strukturirani resurs s mnogo odjeljaka i pododjeljaka, malo je vjerovatno da će se posjetiteljima svidjeti.
• Sporo učitavanje pretvara vašu omiljenu web lokaciju u omraženu web lokaciju. To se posebno odnosi na resurse u kojima ima mnogo animacija, video zapisa, skočnih prozora i drugih aktivnih elemenata. Zbog velike težine, stranica će se jednostavno "usporiti", korisnik će se naljutiti i otići, a pozicije za pretraživanje stranice će pasti.
• Nemogućnost onemogućavanja mobilne verzije je još jedan značajan nedostatak. Ako je element skriven takvim rasporedom, ne možete učiniti ništa da ga otvorite, za razliku od web-mjesta gdje ga možete onemogućiti i otići na običan domen.

Ipak, takva mobilna verzija web stranice brzo, bez posebnih vještina i troškova, omogućuje vam da prilagodite resurs bilo kojim gadgetima. No, zbog navedenih nedostataka, pogodan je za male, jednostavne resurse s najmanje informacija i multimedije, bez složene navigacije i animacije. Za složeno mjesto prikladne su 2 druge metode.

Drugi metod - zasebna verzija stranice

Ova metoda je vrlo česta i često uspješno čini web stranicu na mobilnom uređaju lakšom za čitanje. Njegova suština je 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 web stranice samo izgleda drugačije. Prednosti ove metode su očigledne:

• korisničko sučelje;
• lako se mijenjaju i uređuju, jer verzija postoji odvojeno od glavnog izvora;
• zbog male težine, zasebna verzija web stranice radi mnogo brže od responzivnog predloška;
• najčešće je moguće prebaciti se na glavnu verziju stranice s mobilnog telefona.

Ali i ovdje je bilo nekih nedostataka:

• Nekoliko adresa - desktop i mobilna verzija web stranice. Kako da natjeram korisnika da zapamti dvije opcije? Webmasteri često propisuju od desktop verzije do mobilne verzije, ali u isto vrijeme, ako ova stranica ne postoji u mobilnoj verziji, 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 web stranice s računara, ako korisnik slučajno uđe u nju, izgledat će smiješno, što također može utjecati na promet.
• Ova verzija je često jako isečena, desktop, pa će korisnik dobiti vrlo ograničenu funkcionalnost. Ali u isto vrijeme, ako nešto nedostaje, posjetitelj može otići puna verzija stranice.

Općenito, zasebna mobilna web stranica opravdava se i najčešći je način prilagođavanja resursa mobilnim uređajima. Popularna je kod velikih internetskih prodavača poput Amazona.

Treći način je RESS dizajn

Google tražilica aktivno podržava ovaj smjer mobilnog dizajna. Ovo je najteža, najskuplja, ali najefikasnija metoda prilagođavanja web stranice telefonu ili tabletu. Zove se RESS. Ovo cilja resurs u mobilnoj aplikaciji, koji se može preuzeti za svaki uređaj zasebno. Za android - sa GooglePlay -om, i za Apple - sa iTunes -om.

Takve aplikacije su brze, besplatne, praktične, imaju mogućnost postavljanja različitih vrsta informacija, dok memorija telefona i internetski promet nisu pojedeni kao prilikom posjete web mjestu putem preglednika. Lako im je pristupiti, jer će veza uvijek biti pri ruci na ekranu i nema potrebe za unosom složenog imena u adresnu traku pretraživača.

Naravno, tu postoje i nedostaci, kao što su složenost razvoja, visoka cijena rada za veliki broj programera i potreba da se napravi nekoliko opcija rasporeda. Ponekad aplikacija ne prepoznaje mobilni uređaj. Regular tehnička podrška, ispravljanje nedostataka. Ipak, ova opcija se smatra najboljom od tri predložene zbog svog produktivnog rada bez problema.

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 web stranice. Kako je najlakše napraviti?

Preuzmite posebne predloške (dodatke) za responzivan dizajn. Na primjer, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile i drugi. Oni će vam pomoći da ispravnije prikažete web lokaciju na telefonu, dok ćete primiti nekoliko savjeta koje treba ispraviti kako bi se stranica bolje prilagodila mobilnoj verziji.

Naravno, malo je vjerovatno da će ova metoda biti prikladna za ozbiljne resurse. Tačnije, jeste besplatna prilika namijenjeno malim i jednostavnim web stranicama, blogovima, sažecima vijesti. Ne zaboravite da Google tražilica, baš kao i Yandex, danas nameće ozbiljne zahtjeve mobilnim verzijama, pa postoji velika šansa za smanjenje njihove pozicije pomoću ove metode.

Ovom metodom, najvjerovatnije, oglasi i pop-up baneri će biti odsječeni, ali će se stranica učitati brzo i bez zastoja.

Principi kreiranja mobilnih verzija

Nije važno je li mobilna verzija web stranice napravljena besplatno ili uz pomoć osoblja webmastera, napravljena je na RESS sistemu ili korištenjem adaptivnog predloška. Što je najvažnije, potrebno je pridržavanje nekoliko kritičnih principa da bi bio efikasan. Dakle, koja bi trebala biti mobilna verzija stranice? Kako to učiniti produktivnim, efikasnim i produktivnim?

Uklanjamo sve nepotrebno

Minimalizam je ono čemu bi programer mobilne verzije web stranice trebao težiti. Zamislite koliko je teško percipirati informacije prepune cvijeća, dugmadi, transparenata i koje morate beskrajno listati u potrazi za potrebnim materijalom. Mobilni dizajn treba da bude jednostavan i čist. Odaberite 2-3 boje da odvojite prostor (npr. brend). Bolje ako je jedan od njih bijel. Podijelite prostor na malom ekranu na jasna i čitljiva područja. Virtuelni ključevi mora biti vidljivo da korisnik jasno zna gdje da klikne i vidi - ovdje je proizvod, ovdje je formular za popunjavanje podataka, ovdje su podaci o dostavi i plaćanju.

Sve dodatne opcije koje bi bile korisne u desktop verziji i olakšale bi život korisnicima ovdje će donijeti samo poteškoće. Ostavite samo najvažnije elemente. Animacija, reklamni baneri, multimedija, najvjerojatnije će samo usporiti rad web stranice ili aplikacije i odvratiti pažnju od glavne stvari.

Poravnanje

Pitanje poravnanja nije ništa manje akutno, jer ako se to učini pogrešno, korisnik će primiti samo završetak važnih riječi. Općenito je prihvaćeno lijevo i okomito poravnanje. Zamislite da listate vijesti na svom telefonu. To radite odozgo prema dolje, ali ne lijevo ili desno.

Union

Kad ne postoji mogućnost dugog lanca prijelaza, pokušajte kombinirati nekoliko koraka u jedan. Na primjer, web mjesto zahtijeva unos podataka u nekoliko faza - ime, zatim adresa, gdje se u svakoj zasebnoj ćeliji nalaze zasebne kuće, ulice, stanovi itd. Ime i adresa.

I isključenje

Ponekad je, naprotiv, potrebno i da prekinete vezu veliki broj informacije. Na primjer, u padajućem izborniku imate popis više od 80 gradova u kojima se vrši dostava. Grupirajte ih po regijama tako da korisnik ne mora listati kroz ovu ogromnu listu. Kada pređe iznad regionalnog centra ili regije, ispada još jedna lista gradova.

Liste

Usput, o listama. Postoje dvije - fiksne po abecednom ili drugom redoslijedu i sa zamjenom. Njihov izbor ovisi o tome što će biti navedeno.

Fixed je koristan ako korisnik tačno zna šta traži. Na primjer, grad, broj ili datum. Druga je opcija prikladna za dugačka, složena imena ili za slučajeve gdje postoji mnogo varijacija istog imena, a svaka dovodi korisnika na korak do cilja. Opcija automatskog dovršavanja češće se koristi kada posjetitelju treba pomoć. Na primjer, stranica za pletenje nudi kupovinu igala za pletenje. Korisnik unese upit za pretragu „Metalne igle za pletenje“, a u opisu alata vidi „igle za pletenje 5 mm“, „igle za pletenje 4,5 mm“ itd.

Automatsko dovršavanje

Ovo se posebno odnosi na web stranice na kojima nešto prodaju putem Interneta, a vi morate popuniti standardne oblike plaćanja, dostave itd. Kupovine se moraju obaviti što je brže moguće i prikladnije.

U tu svrhu obrasci mogu sadržavati već ispunjene 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 vrijeme će biti ušteđeno.

Sve je čitljivo, sve je vidljivo

Kada dizajnirate mobilnu verziju stranice, imajte na umu da su svi telefoni različiti, pa tako i njihova vizija. Možda će se vaša web stranica gledati s malog ekrana, pa bi fontovi trebali biti jednostavni i čitljivi, gumbi moraju biti dovoljno veliki da ih možete kliknuti bez odlaska na drugu stranicu, a slike bi se trebale otvarati zasebno, velike, posebno kada dolazi u Internet prodavnicu.

Malo statistike

Govorimo o prilagođavanju web stranice mobilnih uređaja, ne možemo a da ne pribjegnemo statistici kako bismo shvatili koliko je ovaj proces važan za internetsku promociju.

Brojevi su sljedeći. Danas 87% stanovništva očigledno koristi gadgete, osim najmanje djece i starijih osoba. Ekonomisti predviđaju 100-struki rast mobilne trgovine u narednih 5 godina. Istovremeno, samo 21% sajtova je prilagođeno za rad sa mobilnim uređajima. To znači da internet promet i tržište e-trgovine zauzima samo mali 5. dio.

Razmislite o ovim brojevima. Ima li smisla prilagoditi vaš resurs? Naravno da. Štoviše, sve dok na ovom tržištu postoji toliko slobodnog prostora, možete uzeti svoj vlastiti segment.

Gdje vam treba mobilna verzija?

Korištenje mobilne verzije preporučljivo je za svaku platformu koja želi dobiti visoku ocjenu. Na kraju krajeva, ovo ima izravan utjecaj na korisnika, stvarajući mu ugodne uvjete za boravak na vašoj web stranici.

Bez mobilne verzije ne može postojati sljedeće:

• portali za vijesti, budući da ih većina gleda s telefona na putu do posla ili učenja;
• društvene mreže - iz istog razloga, plus postoji faktor online komunikacije, što znači da za to treba kreirati zgodan, razumljiv razgovor;
• stranice za pomoć, stranice sa navigacijom, itd., na koje se ljudi obraćaju kada nešto traže;
• internetske trgovine - prilika za privlačenje kupaca koji ne gube vrijeme na kupovinu, već sve kupuju Mobilni internet.

Umesto zaključka

Danas su mobilne tehnologije u fazi aktivnog rasta i razvoja, stoga, težeći liderskoj poziciji na tržištu, svaka kompanija mora osigurati da njen internetski resurs zadovoljava zahtjeve. Zbog sve većih zahtjeva korisnika, stranice se moraju stalno modernizirati i prilagođavati različitim uređajima. Jasno je da ako je osobi nezgodno biti na ovom ili onom resursu, ne može tamo dobiti informacije o proizvodu ili cijeni, naručiti, saznati o isporuci, tada će pronaći web mjesto na kojem sve to postaje moguće. Stoga je za pobjedu u konkurenciji važno imati fleksibilan, zgodan, funkcionalan i zanimljiv resurs.

Mobilna verzija web stranice Android ili Ios pomoći će vam u tome. Da biste to učinili, morate odabrati jednu od gore navedenih metoda redizajniranja - adaptivni predložak, kreiranje nove web stranice na poddomeni i odlazak na nju preusmjeravanjem, koristeći besplatni šabloni ili kreiranje mobilne aplikacije s kojom korisnik može prikladnije ući i biti na stranici.

Svi smo čuli statistiku: 2014. je godina kada više ljudi koristi pametne telefone za pristup internetu nego računare ili prijenosne računare. ... Ne želite da vaša web lokacija ostane zaostala, ali kako točno programirate svoju web lokaciju za ovaj mobilni web? Postoje tri glavne opcije, svaka sa svojim prednostima i nedostacima. U ovom ćemo članku pogledati prednosti i nedostatke svake od njih kako bismo odabrali najbolji način za razvoj vaše web stranice.

Opcija 1: Responzivni dizajn

Responzivni dizajn određuje rezoluciju ekrana na kojoj se stranice pregledavaju pomoću medijskih upita, a zatim prilagođava veličinu stranice i izgled u skladu s tim. Google izjavio da preferira responzivni web dizajn, što ga čini teškim u ovoj raspravi.

pros :

1. Samo jedna verzija svake stranice. Stranica se prilagođava vrsti uređaja za prikaz sadržaja (određuje se tip uređaja, a zatim se prikazuje drugačiji sadržaj).
2. Ovaj pristup uvelike pojednostavljuje održavanje web mjesta.
3. Responzivni dizajn ne oslanja se na otkrivanje korisničkog agenta kao druga dva. Detection Korisnički agent(tj. otkrivanje koji preglednik ili uređaj traži web stranicu) nije loše samo po sebi, ali nije savršeno, a ako dođe do greške u procesu, korisnici mogu dobiti pogrešna verzija svoju web lokaciju. Osim toga, paukove pretraživanja oslobađa od pretraživanja i indeksiranja vaše web stranice, pod raznim Korisnički agent- to znači da će vaša stranica biti bolje indeksirana.
4. Responzivni dizajn web stranica se brže učitava u pretraživačima. Budući da svi uređaji primaju isti sadržaj, ne postoji postupak za otkrivanje mogućeg preusmjeravanja zahtjeva zbog korisničkog agenta. Svi znaju da je brzina važna.

Minusi:

1. Biće potrebno neko vrijeme i trud da se redizajn postojeće stranice. Dakle, ako imate veliku web lokaciju, kretanje prema responzivnom dizajnu možda nije najbolji izbor.
2. Ovisno o tome gdje se vaša web lokacija nalazi, može biti teško istisnuti sadržaj na ekran mobitela.
3. Stavke za navigaciju nisu uvijek prikazane u ispravnoj veličini, a pri lebdenju, površinske stavke uopće ne rade ekrani osetljivi na dodir... To može uzrokovati promjene u navigaciji.
4. Postoje trenuci kada responsive stranice sa veliki iznos slike se učitavaju sporije uz brži odziv dizajna.

Ako se odlučite za responzivno web mjesto, imajte na umu da biste svakako trebali testirati svoju web stranicu na različitim preglednicima i uređajima (ili upotrijebiti dobru Korisnički agent emulator) prije pokretanja web stranice.

Dobar primjer responzivnog dizajna je web stranica site :

Mobilna verzija prilično lijepo mijenja web stranicu.

Opcija 2: Dinamično serviranje

Suština dinamičkog posluživanja ili preusmjeravanja je da ono prvo definira Korisnički agent posjetitelja (tj. koji uređaj koristi za pregled vaše stranice), a zatim se vrši preusmeravanje na nivou servera na željeni URL. Dinamičko prosljeđivanje može se izvršiti na nekoliko načina.

Jedan od načina implementacije dinamičkog preusmjeravanja je jednosmjerno preusmjeravanje, u kojem se mobilni korisnici preusmjeravaju sa glavne obične stranice na njenu mobilnu verziju.

Drugi tip, dvosmjerno preusmjeravanje, je kada se korisnici preusmjeravaju i s mobilne verzije na redovnu. Dijelovi koda odgovorni za takvo preusmjeravanje ponekad se nazivaju kontrolne oznake. Kada se ovo implementira, tag je specificiran rel = "alternativan" na redovnoj verziji, pokazujući na mobilnu stranicu; a na mobilnom web mjestu postavlja se oznaka rel = "alternativan" označavajući glavnu punu verziju stranice.

Pros:

1. Pošto se preusmjeravanje vrši na nivou servera, postojaće samo jedno Url za svaku stranicu.
2. Dinamičko preusmjeravanje poziva dobro funkcionira i za obične telefone - mobilne telefone koji imaju fiksne funkcije, ali nisu tako opsežni kao pametni telefoni. Na primjer, mobilni telefoni obično ne mogu preuzeti aplikacije, ali općenito imaju određeno iskustvo pretraživanja weba. Velika razlika je u tome što mobilni telefoni ne mogu podnijeti CSS tako da ne mogu dobro raditi responzivni dizajn. Stoga je važno znati svoju publiku i koju vrstu mobilnih uređaja koristi.
3. Ako ga želite imati posebno za svoje mobilne korisnike, tada će vam ova opcija omogućiti da to učinite, budući da se za mobilne korisnike i korisnike uobičajene verzije prikazuje drugačiji kôd Html.

Minusi:

1. Takva implementacija udvostručuje količinu posla, jer morate napraviti zasebnu web lokaciju za mobilne uređaje, s posebnim skupom indeksiranih Html zahteva odvojenu SEO.
2. Potrebna lista nizova vrijednosti korisničkog agenta također zahtijeva stalno održavanje, jer se novi nizovi moraju dodati prilikom objavljivanja novog mobilnog uređaja.
3. Na kraju, imajte na umu da ćete morati koristiti " Variraju HTTP zaglavlje“Ako vaša stranica dinamički prikazuje sadržaj. Naslov pomaže pri preuzimanju sadržaja na pravi način i pomaže mašini web lokacije da ga pravilno kešira. Google prikazuje detalje o tome kako dodati ovo zaglavlje ( https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving) .

Opcija 3: mobilna web lokacija

Ova opcija, kako naziv govori, uključuje stvaranje posebne domene posebno za mobilne korisnike. Najčešći primjeri su m.domain.ru ili mobile.domain.ru... Ovo je popularna opcija za velika preduzeća. maloprodaja... Ova metoda uključuje razvoj sadržaja posebno za posjetitelje koji koriste mobilni (i nema preusmjeravanja na nivou servera).

Pros:

1. Za velike web stranice sa stotinama hiljada ili miliona stranica implementacija responzivnog dizajna zahtijevat će previše posla. U slučaju mobilne web stranice, bit će moguće postupno izgraditi mobilnu verziju web stranice (to je kao zasebna web lokacija) i bit će mnogo manje posla.
2. Kao i kod dinamičkih preusmjeravanja, mobilna web lokacija izgleda bolje mobilnim telefonima nego responzivna web stranica. Ovisno o demografiji vaše stranice, ovo možda nije kriterij; ali za neka preduzeća ovo je važno.

Minusi:

1. Vaša web lokacija za mobilne uređaje neće imati koristi od pozitivnog rasta vašeg profila povratne veze na glavnu stranicu (osim ako niste primijenili dvosmjerna preusmjeravanja). Dakle, ako želite da vas korisnici mobilnih telefona mogu pronaći u organskoj pretrazi, ova točka može biti posebno negativna.
2. Vaša mobilna stranica će zahtijevati nešto dodatni posao na SEO. Morat ćete dostaviti zasebne XML karte web stranica za Google i Yandex. Osim toga, morat ćete urediti svoje meta oznake. Meta tagovi za mobilne uređaje bi trebali biti kraći od obične stranice.

Evo primjera kada je mobilna web lokacija ispravna. NYTimes.com ima glavno mjesto za posjetitelje desktop računara:

I mobile.nytimes.com za mobilne posetioce:

Kao što vidite, sadržaj je značajno formatiran i smanjen kako bi bio čitljiv na mobilnom uređaju.

zaključci

Uraditi pravi izbor za svoju web lokaciju, svakako se zapitajte koliko vaših posjetitelja koristi mobilne uređaje za pristup vašoj web stranici. Provjeri. Ako je ukupni postotak mobilnog saobraćaja je blizu razine od 5%, onda vjerojatno ne možete žuriti s implementacijom dizajna za mobilne uređaje.

Ako se prognoze ostvare, upotreba mobilnih uređaja će nastaviti da raste. Tada će one čije se web lokacije neće ispravno prikazati na mobilnim uređajima izgubiti značajan dio prometa pretraživanja i više. Napravite web stranice "za ljude" i bit ćemo sretni zbog vas!

Svake godine posjetitelji sve više pristupaju internetu i kupuju s mobilnih uređaja. Od njih, prema podacima Yandex.Metrice od proljeća 2016., 29% svih posjeta web stranicama dolazi u Rusiji, a ta brojka stalno raste.

Pretraživači, koji se uvijek zalažu za jednostavnost za krajnje korisnike, preporučuju da svoje web stranice učinite probavljivim za različite uređaje. Mobile SERP rangiranje sada uzima u obzir da li je stranica optimizirana za pametne telefone/tablete ili ne. Stoga je prilikom izrade web stranice bolje razmisliti o tome odmah. Ako web mjesto već postoji i radi, potrebno ga je optimizirati kako bi bili u korak s vremenom i ne izgubili potencijalne kupce pomoću mobilnih uređaja.

Postoje dvije mogućnosti za optimizaciju web stranice za pametne telefone i tablete: prilagodljivi izgled i mobilna verzija. Razmotrimo kako se ove metode razlikuju, saznajmo njihove prednosti i nedostatke.

Adaptivni dizajn

Glavna karakteristika je da se svi elementi interfejsa automatski prilagođavaju različitim veličinama ekrana. Zbog toga su takve stranice podjednako dobro i zgodno prikazane personalni računari, laptopovi, pametni telefoni i tableti.

Prednosti:

• stranica se uvijek prilagođava trenutnoj rezoluciji ekrana - pri promjeni orijentacije na mobilnom uređaju ili kada se smanji prozor preglednika na radnoj površini;
• nema potrebe za postavljanjem preusmeravanja;
• stranica se bolje rangira u rezultatima pretraživanja za mobilne uređaje;
• jednostavnost upravljanja web lokacijom jer se sadržaj automatski prilagođava različitim uređajima;
• ušteda - adaptivni izgled web stranice koštat će vas manje od razvoja zasebne web stranice za mobilne uređaje.

Nedostaci:

Glavni nedostatak ove opcije je što ne rješava problem brzine učitavanja web stranice. I na računaru i na mobilnom uređaju, kada otvorite responzivnu web lokaciju, učitava se ista količina informacija. Stoga je važno uzeti u obzir da će se web mjesto koje se odmah otvori na računaru, pametnom telefonu ili tabletu pomoću mobilnog interneta polako otvarati.

mobilna verzija

Mobilna verzija pretpostavlja da se kreiraju dvije stranice: glavna za gledanje sa računara i mobilna za pametne telefone i tablete.

Prednosti:

• baš kao i responzivni izgled, mobilna verzija bolje se rangira u rezultatima pretraživanja za mobilne uređaje;
• mogućnost objavljivanja na web stranici samo funkcionalnosti i sadržaja koji su potrebni za pametne telefone i tablete;
• jelovnici, navigacija i drugi elementi dizajna mogu se u potpunosti prilagoditi potrebama mobilnih korisnika;
• glavna (za računare) i mobilna verzija mogu se menjati nezavisno jedna od druge;
• brzo učitavanje.

Nedostaci:

• potreba da se troše resursi na podršku i upravljanje dvama resursima u isto vrijeme, da se prati relevantnost informacija o oba;
• kada objavljujete sadržaj, prvo ga morate prilagoditi za mobilne uređaje, a zatim ga dva puta objaviti: na glavnoj i mobilnoj verziji;
• potreba za postavljanjem preusmjeravanja;
• problem sa dupliranim sadržajem - jedan članak ima dvije različite adrese, što negativno utiče na indikator jedinstvenosti i efikasnost prikaza u pretraživačima;
• mobilna verzija web stranice zahtijeva velika ulaganja: morate uzeti u obzir troškove razvoja, ažuriranja mobilne verzije i kupovine zasebne domene.

Rezultati poređenja

Na temelju gore navedenih prednosti i nedostataka dviju opcija za optimizaciju web stranice za mobilne uređaje, preporučujemo prelazak na responzivni izgled: ova opcija nije samo jeftinija u smislu troškova i vremena u odnosu na mobilnu verziju, već vam omogućuje i za jednostavno upravljanje web lokacijom.

Iskustvo platforme za kreiranje web stranica Nethouse

Na bazi Nethouse -a trenutno radi više od 50.000 aktivnih resursa: internetske trgovine, web stranice kompanija i stručnjaka, odredišne ​​stranice, portfelji i blogovi. U prosincu 2016. pokrenuli smo nove responzivne predloške i ponudili korisnicima da se prebace na njih u nekoliko klikova mišem, bez gubljenja informacija i potpuno besplatno.

Do danas je oko 25% naših korisnika prešlo na responzivne predloške. Pogledajmo kako je to utjecalo na statistiku njihovih web stranica.

1. Pretražite promet.

Neki su se naši korisnici zabrinuli da bi prijelaz na responzivni dizajn mogao negativno utjecati na promet, pa će morati pričekati da se oporavi. Donji grafikoni pokazuju da se to nije dogodilo.

2. Pretražite mobilni promet.

Tražilice rangiraju responzivne web stranice više u rezultatima pretraživanja za mobilne uređaje, a Google, čak i u verziji rezultata pretraživanja za računare, web lokacije bez odziva označava retkom "Vaša stranica nije optimizirana za pametne telefone". Grafikoni u nastavku pokazuju da se nakon prelaska na prilagodljivi izgled, promet pretraživanja sa pametnih telefona stalno povećava.

3. Faktori ponašanja.

Responzivni dizajn ne samo da izgleda sjajno i izvana zadovoljava sve zahtjeve suvremenih trendova, već i poboljšava pokazatelje ponašanja web stranica, poput stope napuštanja početne stranice, dubine pregledavanja i vremena na web mjestu, što je posebno važno za promet s mobilnih uređaja. Grafikoni u nastavku prikazuju promjene statistike o faktorima ponašanja u poređenju s periodima "prije" promjene predloška i "poslije".

Da biste utvrdili što je bolje - responzivni dizajn ili mobilna verzija web stranice, prvo morate razumjeti zašto je sve to potrebno.

Prema podacima comscore.com, postotak korisnika koji pregledavaju web stranice s mobilnih uređaja povećava se svake godine:

Aktivna baza pretplatnika mobilni prenos podaci, svijet, milion ljudi, 2007–2015

S tim u vezi, razvijeni su novi algoritmi za pretraživače, kao i uvedeni dodatni faktori rangiranja: sada rezultati pretrage uzimaju u obzir koliko je stranica prilagođena mobilnim uređajima (pogodna za gledanje na mobilnim uređajima). U Google-u je algoritam prilagođen mobilnim uređajima pokrenut 21. aprila 2015. godine, u Yandexu - “Vladivostok” 2. februara 2016. godine.

Desktop verzija web stranice i prilagođena verzija za mobilne uređaje

Kako tražilice utvrđuju je li stranica web stranice prilagođena mobilnim uređajima:

• stranice moraju sadržavati sadržaj koji ne zahtijeva horizontalno pomicanje ili skaliranje za gledanje;
• stranica ne bi trebala sadržavati elemente koji ne rade na mnogim mobilnim uređajima - Flash, Java apleti i Silverlight dodaci;
• tekstovi na stranicama moraju biti čitljivi bez skaliranja;
• Veze trebaju biti dovoljno razmaknute da se na njih lako klikne.

Ono što je najvažnije, pretraživači nedvosmisleno ocjenjuju web stranice - prilagođene mobilnim uređajima ili ne.

Korištenje Google alata PageSpeed ​​Insights(https://developers.google.com/speed/pagespeed/) možete odrediti koliko se brzo učitavaju stranice vaše stranice, kao i njihovu upotrebljivost. PageSpeed ​​može biti u rasponu od 0 do 100 za brzinu stranice i korisničko iskustvo, na primjer:

Rezultati od 85 bodova i više smatraju se dobrim.

Ako stranica web stranice ne ispunjava zahtjeve usluge, izdaje se izvještaj u obliku preporuka za uklanjanje problema, na primjer:

Ova usluga može se koristiti za početnu dijagnostiku i identifikaciju problema na web stranici.

Kada je potrebno razviti mobilnu ili responzivnu verziju za web stranice?

Da biste razumjeli je li vrijedno prilagoditi web lokaciju "mobilnoj" publici, morate je analizirati u sustavima za web analitiku (Yandex.Metrica ili Google analytics) po posjećenosti u kontekstu uređaja s kojih korisnici posjećuju web lokaciju. Ako više od 15% publike koristi pametne telefone ili tablete, preporučuje se razvoj responzivnog izgleda ili mobilne verzije. Ovdje je važno uzeti u obzir i promet na web lokaciji. Na primjer, za web lokacije s velikim brojem posjetitelja (od 1.000.000 i više) ova traka se smanjuje jer se tako veliki segment prometa web lokacije ne može zanemariti.

Mobilna verzija web stranice

mobilna verzija- zasebna verzija ili zasebni predložak prilagođen za prikaz na mobilnim uređajima. Možda neće prikazati sve blokove koji se nalaze na glavnoj verziji stranice.

"Posebna značajka" mobilne verzije: kada se prebacite na nju, URL se mijenja u adresnoj traci preglednika - dodaje se prefiks "m.", Na primjer: m.example.ru.

Pogled na monitoru računara i na mobilnom uređaju: mobilna verzija se razlikuje od glavne

Primjer web stranice s prilagođenom mobilnom verzijom: http://www.lamoda.ru/ (m.lamoda.ru).

Glavne prednosti mobilne verzije stranice

• Mala težina i, kao rezultat toga, velika brzina preuzimanja. Ovo je bitno za korisnike koji imaju mala brzina Pristup internetu (GPRS ili slab 3G).
• Korisnikov izbor koju verziju će gledati (mobilnu ili glavnu).
• Usklađenost sa zahtjevima pretraživača za praktičnost gledanja stranice na mobilnim uređajima.

Nedostaci mobilne verzije

• Ako je potrebno izvršiti izmjene na web mjestu, morat će se unijeti u redovnu verziju web stranice i mobilnu verziju, odnosno obim posla se udvostručuje.
• Prilikom razvoja često morate odbaciti dio sadržaja.
• Budući da su mobilna i glavna verzija web stranice na različitim domenama, to se ne poboljšava faktori ponašanja glavni domen, odnosno biće mana za SEO optimizaciju.

Ovo je poseban dizajn web stranica u kojem elementi stranice mijenjaju svoju veličinu i položaj pri različitim rezolucijama prikaza. Stranica se automatski prilagođava veličini uređaja na kojem je otvorena, bilo da se radi o PC monitoru, pametnom telefonu ili tabletu. Zahvaljujući ovoj vrsti izgleda, stranica će biti prikladno i jasno prikazana različitim uređajima... Korištenjem tehnologija prilagodljivog dizajna funkcionalnost web mjesta uopće ne trpi.

Pogled na monitor računara i na mobilni uređaj - adaptivna verzija se razlikuje od glavne

Primjer web stranice s prilagodljivom verzijom: http://www.mvideo.ru/.

Prednosti responzivnog dizajna za mobilne uređaje

• Jedan URL za sav sadržaj.
• Fleksibilno sučelje - možete prilagoditi udoban prikaz stranice za bilo koju širinu ekrana.
• Responzivan dizajn zadovoljava zahtjeve tražilica za praktičnim pregledom web stranice na mobilnim uređajima.
• Ako web lokacija ima responzivnu verziju, faktori ponašanja postaju bolji na mobilnim uređajima, pa se time poboljšavaju ukupne performanse web stranice. Za rangiranje u rezultatima pretrage, ovo će biti veliki plus.

Nedostaci responzivnog dizajna za mobilne uređaje

• Potreba za kreiranjem zasebnih izgleda stranica web stranice za svaku rezoluciju prikaza.
• Odzivna verzija, za razliku od mobilne verzije, ne može se prebaciti na normalan način rada... Odnosno, korisnik nema izbor prikaza stranice. Nedostatak je relevantan ako postoje greške u adaptivnoj verziji - na primjer, elementi su prikazani pogrešno.
• Složenost dodavanja novog predloška stranice, jer će ih trebati konfigurirati za ispravan prikaz na adaptivnoj verziji. Ako dodate informacije postojećim predlošcima stranica, neće biti problema s prikazom.

Što je bolje: responzivni izgled za mobilne uređaje ili mobilna verzija web stranice?

Najbolje rješenje za web stranicu je korištenje responzivnog izgleda za mobilne uređaje. Unatoč brojnim nedostacima, web lokacija s prilagodljivim izgledom funkcionalnija je. Također, prisutnost predložaka stranica implicira jednostavnost dodavanja sadržaja na web mjesto, za razliku od mobilne verzije, u kojoj se rad na dodavanju sadržaja duplicira, budući da zapravo postoje dvije različite web lokacije. Veliki plus je činjenica da responzivna verzija poboljšava faktore ponašanja glavne web stranice. Ovo je korisno u smislu promocije i upotrebljivosti. Na osnovu toga, preporučujemo da se odlučite u korist responzivnog izgleda.