Mobilna verzija web mjesta: kako to učiniti? Prilagodljiv dizajn

Danas većina ljudi ide putem interneta putem mobilnih gadgeta - tableta, telefona, u tom pogledu, optimizacija web mjesta također dolazi na novu razinu. Ako korisnik dođe i vidi da je stranica nije optimizirana za mobilne uređaje: Ne možete vidjeti sliku, skine gumb, mala i nečitljiv fontove, dizajn iskrivljena - 99 od 100% da će izaći i da će početi tražiti još više zgodan. robot za pretraživanje

Dakle, postoje četiri ključna načina prilagodbe web lokacije na mobilnu verziju.

Prvi put - prilagodljiv dizajn

Prilagodljivi predlošci uključuju promjenu slike web mjesta ovisno o veličina zaslona. U pravilu, postavljeni su na standardne 1600, 1500, 1280, 1100, 1024 i 980 piksela. Za implementaciju primijenite CSS3 medijski upiti. Dizajn stranice ne mijenja se u isto vrijeme.

Prednosti ove metode su:

• zgodan dizajn, budući da se sama struktura prilagođava parametrima zaslona, ​​a svako ažuriranje ne zahtijeva razvoj dizajna ispočetka, samo ispravite CSS i HTML;
• jedan URL - korisnik ne treba zapamtiti nekoliko imena, nema potrebe za preusmjeravanje (prosljeđivanje s jedne adrese na drugu), što može otežati rad webmasteri i tražilice lakše sortirati i rang resurs s jednom adresom.

Naravno, prilagodljivi predlošci također imaju svoje nedostatke, koji su, usput, više nego zasluga. Ipak, mnogi razvojni programeri pridržavaju se ovog koncepta, primjerice korporacija Google, čija mobilna inačica ima adaptivni dizajn. Dakle, nedostaci su:

• Adaptibilan dizajn ne podržava iste poslove na mobilnom uređaju kao na računalu. Ako je, na primjer, mobilna inačica web stranice banke, gdje je vjerojatnije da će korisnik imati informacije o tečaju ili najbližim bankomatima, onda je to dovoljno. Ali ako je to složeni strukturirani resurs s mnogim dijelovima i pododjeljcima, onda prilagodljiv izgled malo je vjerojatno da će molimo posjetitelje.
• Sporo učitavanje pretvara vašu omiljenu stranicu u mržnju. To se posebno odnosi na resurse, u kojima obiluju animacije, video isječci, skočni prozori i drugi aktivni elementi. Zbog teške težine, stranica će jednostavno "usporiti", korisnik će se ljutiti i otići, a tražilice mjesta će pasti.
• Nesposobnost onesposobljavanja mobilne verzije još je jedan značajan nedostatak. Ako je neki element skriven takvim izgledom, ne možete ništa učiniti da biste ga otvorili, za razliku od web mjesta na kojima se može onemogućiti i prijeći na redovitu domenu.

Ipak, takva mobilna verzija web-lokacije brzo, bez posebnih vještina i troškova, omogućuje prilagodbu resursa na bilo koji gadget. Ali prikladno je, s obzirom na navedene nedostatke, malim, jednostavnim resursima s minimalnim informacijama i multimedijom, bez složene navigacije i animacije. Za složeno mjesto prikladne su dvije druge metode.

Druga metoda je zasebna verzija stranice

Ova metoda je vrlo česta i često uspješno čini mjesto na mobilnom uređaju prikladnijima za percepciju. Njegova je suština stvoriti zasebnu verziju stranice, nacrtanu za aplikaciju i koja se nalazi na zasebnom URL-u ili poddomenama, na primjer, m.vk.com. Istovremeno, sačuvana je glavna funkcionalnost, dizajn stranica jednostavno izgleda drugačije. Prednosti ove metode su očite:

• user friendly sučelje;
• lako je mijenjati i izvršiti uređivanja jer verzija postoji zasebno od glavnog resursa;
• zbog male težine zasebne verzije stranice puno je brže od prilagodljivog predloška;
• najčešće postoji prilika za odlazak na glavnu verziju stranice s mobilnim uređajem.

Ali i ovdje, bilo je nedostataka:

• Nekoliko adresa - stolna i mobilna verzija web mjesta. Kako da korisnik zapamti dvije opcije? Webmasteri često predviđaju preusmjeravanje (preusmjeravanje) s verzije dekreta na mobilni uređaj, ali istodobno, ako ta stranica ne postoji u mobilnoj verziji, korisnik će primiti pogrešku. Ovdje postoje poteškoće s tražilicama, koje je teško rangirati 2 istovjetna resursa, a to izravno utječe na napredak.
• Mobilna inačica web mjesta s računala, ako korisnik pogrešno ode na njega, izgledat će smiješno, što također može utjecati na pohađanje.
• Ova verzija je često jako ograničena, desktop, pa će korisnik dobiti vrlo ograničenu funkcionalnost. No istovremeno, ako nešto nedostaje, posjetitelj može ići na punu verziju stranice.

Općenito, jedan mobilni web site opravdava i najčešći je način prilagodbe resursa za mobilne uređaje. Popularna je s velikim online trgovinama, primjerice Amazon.

Treći put je dizajn RESS-a

Google tražilica aktivno podržava ovaj smjer mobilnog dizajna. Ovo je najsloženija, skupo, ali učinkovitija metoda za prilagodbu web mjesta na telefonu ili tabletu. Zove se RESS. Ovo je ciljanje resursa u mobilnoj aplikaciji, koja se može preuzeti za svaki uređaj zasebno. Za android - s GooglePlay, i za Apple - s iTunesom.

Takve aplikacije su brze, besplatne, prikladne, imaju mogućnost prilagodbe raznih vrsta informacija, dok se memorijska memorija i internetski promet ne jedu kao kod posjeta web-mjestu putem preglednika. Jednostavno je unositi, jer će veza uvijek biti na zaslonu i ne morate unijeti složeno ime u adresnu traku preglednika.

Postoje, naravno, ovdje i njegove nedostatke, kao što su složenost u razvoju, visoki troškovi rada velikog broja programera, potrebu za izvršavanjem nekoliko verzija izgleda. Ponekad aplikacija ne prepoznaje mobilni uređaj. Potrebna je redovita tehnička podrška, ispravak nedostataka. Ipak, ova opcija se smatra najboljim od tri ponuđena zbog svoje produktivne, glatke operacije.

Najjeftiniji način izrade mobilne web lokacije

Sve gore navedene metode pretpostavljaju, iako ne uvijek dugu i složenu, ali još uvijek plaćenu radnju webmastera. Ako ne vidite hitnu potrebu za takvim razvojem, možete upotrijebiti jednostavnu i besplatnu mobilnu verziju web mjesta. Kako olakšati?

Preuzmite posebne predloške (dodatke) prilagodljivog dizajna. Na primjer, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile i drugi. Pomoći će vam da ispravno prikazujete web mjesto u telefonu, istodobno ćete dobiti nekoliko savjeta koji bi trebali biti ispravljeni radi bolje prilagodbe stranice mobilnoj verziji.

Naravno, ova metoda teško je pogodna za ozbiljne resurse. Umjesto toga, ova je besplatna prilika namijenjena malim i jednostavnim web stranicama, blogovima, vijestima. Ne zaboravite da Google tražilica, poput Yandexa, danas postavlja ozbiljne zahtjeve u verzijama za mobilne uređaje, tako da postoji velika prilika da smanjite pozicije pomoću ove metode.

Ovom metodom najvjerojatnije će se oglašavati i pop-up banneri odrezati, ali stranica će se učitati brzo i bez "zaostajanja".

Načela stvaranja mobilnih verzija

Nije bitno ako ste besplatno kreirali mobilnu verziju web mjesta ili uz pomoć osoblja webmastera, napravljena je na sustavu RESS ili pomoću prilagodljivog predloška. Najvažnije je da se za svoj djelotvoran rad traži da se pridržavaju nekoliko vrlo važnih načela. Dakle, što bi trebalo biti mobilna inačica web mjesta? Kako je produktivno, učinkovito i produktivno?

Uklonimo sve nepotrebne

Minimalizam je nešto što bi trebao težiti razvojnom programeru mobilne inačice web mjesta. Zamislite koliko je teško zamijetiti informacije koje su pune boja, gumbi, bannera i koje morate stalno pomicati u potrazi za pravim materijalom. Mobilni dizajn trebao bi biti jednostavan i čist. Odaberite 2-3 boje da biste odvojili prostor (na primjer, označen). Bolje je ako je jedan od njih bijeli. Podijelite prostor malog zaslona u jasne i čitljive zone. Virtualni ključevi moraju biti vidljivi tako da korisnik jasno zna gdje kliknuti i vidio - to je roba, evo obrasca za popunjavanje podataka, ovdje su informacije o isporuci i plaćanju.

Sve dodatne opcije koje bi bile korisne u inačici stolnog računala i olakšale život korisnicima donijet će samo komplikacije. Ostavite samo najvažnije elemente. Animacija, reklamni banneri, multimedija, najvjerojatnije, samo će usporiti web mjesto ili aplikaciju i odvratiti od glavne stvari.

poravnanje

Problem izjednačavanja je jednako akutan, jer ako to učinite neispravno, korisnik će dobiti samo završetak važnih riječi. Usklađivanje lijevo i okomito se smatra zajedničkim. Zamislite kako prolazite kroz vijesti na telefonu. To činite s vrha prema dolje, ali ne s lijeve ili desne strane.

unija

Kada ne postoje mogućnosti dugog lanca prijelaza, pokušajte kombinirati nekoliko koraka u jedan. Na primjer, stranica potrebno je unijeti podatke u nekoliko faza - .. Ime, onda je adresa gdje se u svakoj stanici su odvojena kuća, ulica, stan, itd Da ne bi prisiliti korisnika da pokuša da se na setu malih stanica, zamolite ih da ispunite samo dva - ime i adresu.

I odvajanje

Ponekad, naprotiv, trebate odspojiti previše informacija. Na primjer, na padajućem izborniku imate popis od više od 80 gradova u kojima se isporuka odvija. Grupirajte ih po regijama tako da korisnik ne mora kretati kroz ovaj ogroman popis. Kada ukazuje na regionalni centar ili područje, drugi popis gradova će ispasti.

arena

Usput, o popisima. Dva su fiksna abecednim ili drugim redoslijedom i zamjenom. Izbor njih ovisi o tome što će biti navedeno.

Fiksno je prikladno u slučaju da korisnik zna točno ono što traži. Na primjer, grad, broj ili datum. Druga je opcija prikladna za dugo kompleksna imena ili za slučajeve gdje postoje mnoge varijacije istog imena, a svaka od njih padajući popis korisnik donosi korak bliže cilju. Varijanta s automatskom zamjenom češće se koristi kada posjetitelj treba pomoć. Na primjer, stranica za pletenje ponude za kupnju pletenih igala. Korisnik ulazi u upit za pretraživanje "Igle za metalne pletenice", a na vrhu zaslona vidi "Zvučnici 5 mm", "Zvuči 4,5 mm" itd.

samodovršetka

Ova točka je osobito vrijedi za stranice koje prodaju nešto online i morate ispuniti u standardnom obliku plaćanja, isporuke i tako dalje. N. Ako osoba čini kupnju s telefona, a zatim najvjerojatnije, on nema vremena da se na računalo, što znači da u procesu morate kupovati što je brže i praktičnije.

Ako ovaj obrazac može sadržavati već popunjene podatke, možete se pridružiti najpopularnijim odgovorima. Na primjer, umetnite današnji datum, način plaćanja u gotovini, grad, ako radite u jednoj regiji. Mogu se mijenjati, ali ako pogodite cilj, vrijeme korisnika bit će spremljeno.

Sve se pročita, sve je vidljivo

Stvaranje dizajna mobilne inačice web mjesta, ne zaboravite da su svi telefoni različiti, i viziju previše. Možda je vaša stranica će biti pregledani s malom ekranu, tako da font bi trebao biti jednostavan i čitljiv, gumb - dovoljno velik da bi mogli iskoristiti, a ne da se na sljedeću stranicu, a slike moraju biti otvoreni odvojeno, velika, pogotovo kada je riječ o internetu u trgovinu.

Neke statistike

Govoreći o prilagodbi web mjesta mobilnim uređajima, ne možete se pridržavati statistike kako biste shvatili koliko je važan ovaj proces za promicanje mreže.

Brojke su kako slijedi. Danas gadgete koriste 87% stanovništva, očito, osim najmlađe djece i nekih starijih osoba. Ekonomisti predviđaju rast mobilne trgovine 100 puta za iduće 5 godine. Istovremeno, samo 21% web sučelja prilagođeno je radu s mobilnim uređajima. Stoga internetski promet i tržište e-trgovine zauzimaju samo mali petosjedbeni dio.

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

Gdje je potrebna mobilna verzija?

Preporučuje se mobilna verzija za bilo koju platformu koja nastoji postići visoku ocjenu. Uostalom, to je izravan utjecaj na korisnika, stvarajući mu udobne uvjete za boravak na vašoj web-lokaciji.

Bez mobilne inačice ne može postojati:

• vijesti portala, budući da je većina njih koja gleda kroz telefon na putu za rad ili studij;
• društvene mreže - iz istog razloga, plus postoji faktor komunikacije on-line, što znači da prikladan, razumljiv chat bi trebao biti stvoren za to;
• referentne stranice, web stranice s navigacijom, itd., gdje se ljudi okreću kada su u potrazi za nečim;
• online trgovinama - prilika za privlačenje kupaca koji ne troše vrijeme na shopping putovanja, ali sve kupuju putem mobilnog interneta.

Umjesto zaključivanja

Danas mobilne tehnologije su u fazi aktivnog rasta i razvoja, dakle, nastoji biti lider na tržištu, bilo koja tvrtka mora osigurati da njezina online resurs ispuniti zahtjeve. Zbog sve većih zahtjeva korisnika, web stranice moraju se stalno nadograditi i prilagoditi različitim uređajima. Jasno je da ako osoba koja je neugodno da se na određeni resurs, to ne može biti tu da biste dobili informacije o proizvodu ili cijenu, narudžbu, raspitajte se o isporuci, on će pronaći mjesto gdje će sve to biti moguće. Stoga, kako bi se osvojila konkurencija, važno je imati fleksibilan, praktičan, funkcionalan i zanimljiv resurs.

Mobilna inačica Android ili Ios web stranice pomoći će to učiniti. Da biste to učinili, odaberite jedan od navedenih načina za redizajn - Adaptive predložak, stvarajući novi site na poddomene i prijelaz na nju preusmjeravanjem korištenje besplatno predložaka ili izradite mobilnu aplikaciju putem koje korisnik može jednostavno ući i ostati na stranici.

Takav pristup pomaže ne samo održavanju lojalnosti postojećih kupaca već i prilika za privlačenje novih posjetitelja.