Mobilioji svetainės versija: kaip tai padaryti? Adaptyvus dizainas

Turinys:

Mobilioji svetainės versija: kaip tai padaryti? Adaptyvus dizainas
Mobilioji svetainės versija: kaip tai padaryti? Adaptyvus dizainas
Anonim

Šiandien dauguma žmonių prisijungia prie interneto per mobiliąsias programėles – planšetinius kompiuterius, telefonus, šiuo atžvilgiu svetainės optimizavimas taip pat pasiekia naują lygį. Jei vartotojas įeina ir mato, kad svetainė nėra optimizuota mobiliesiems įrenginiams: vaizdo nematote, mygtukai pasislinko, šriftai maži ir neįskaitomi, dizainas iškreiptas – 99 iš 100% išeis ir pradėkite ieškoti kito patogesnio. Ir paieškos robotas pažymės langelį, kad išteklius yra nesvarbus, tai yra, jis neatitinka paieškos užklausos. Todėl puslapio dizainas turi būti pritaikytas įvairiems mobiliesiems įrenginiams. Kas yra mobilioji svetainės versija, kaip ją sukurti ir koks geriausias būdas ją pritaikyti? Skaitykite daugiau šiame straipsnyje.

Taigi yra keturi pagrindiniai būdai, kaip padaryti svetainę pritaikytą mobiliesiems.

kaip sukurti mobiliąją svetainės versiją
kaip sukurti mobiliąją svetainės versiją

Pirmasis metodas – jautrus dizainas

Reaguojantys šablonai keičia svetainės vaizdą, priklausomai nuo ekrano dydžio. Paprastai jie nustatomi į standartinius 1600, 1500, 1280, 1100, 1024 ir 980 pikselių. Diegimui naudojamos CSS3 medijos užklausos. Pats svetainės dizainas nesikeičia.

Šio metodo pranašumai:

  • patogi plėtra,kadangi pati struktūra prisitaiko prie ekrano parametrų, o bet koks atnaujinimas nereikalauja dizaino kūrimo nuo nulio, užtenka pakoreguoti CSS ir HTML;
  • vienas URL – vartotojui nereikia atsiminti kelių pavadinimų, nereikia peradresavimo (peradresavimo iš vieno adreso į kitą), kuris gali apsunkinti žiniatinklio valdytojo darbą ir lengviau atlikti paiešką variklis ištekliui rūšiuoti ir reitinguoti vienu adresu.

Žinoma, prisitaikantys šablonai turi savo trūkumų, kurie, beje, yra daugiau nei privalumai. Nepaisant to, daugelis kūrėjų laikosi šios koncepcijos, pavyzdžiui, „Google Corporation“, kurios mobilioji svetainės versija yra pritaikyta. Taigi, trūkumai:

  • Reaguojantis dizainas nepalaiko tų pačių užduočių mobiliajame telefone, kaip ir asmeniniame kompiuteryje. Jeigu tai, pavyzdžiui, mobilioji banko interneto svetainės versija, kurioje vartotojui greičiausiai bus svarbi informacija apie valiutos kursą ar artimiausius bankomatus, tuomet tokio dizaino visiškai pakanka. Tačiau jei tai sudėtingas struktūrinis išteklius su daug skilčių ir poskyrių, lankytojams vargu ar patiks prisitaikantis išdėstymas.
  • Lėtas įkėlimas mėgstamą svetainę paverčia nekenčiama. Tai ypač pasakytina apie išteklius, kuriuose gausu animacijų, vaizdo įrašų, iššokančiųjų langų ir kitų aktyvių elementų. Dėl didelio svorio puslapis tiesiog „sulės“, vartotojas supyks ir išeis, o svetainės paieškos pozicijos kris.
  • Negalėjimas išjungti mobiliosios versijos yra dar vienas reikšmingas trūkumas. Jei koks nors elementas yra paslėptas dėl tokio išdėstymo, jūsnieko negalite padaryti, kad jį atidarytumėte, kitaip nei svetainėse, kuriose galite jį išjungti ir perjungti į įprastą domeną.

Tačiau tokia mobilioji svetainės versija greitai, be ypatingų įgūdžių ir išlaidų leidžia pritaikyti išteklius bet kurioms programėlėms. Tačiau, atsižvelgiant į išvardintus trūkumus, jis tiks mažiems, paprastiems ištekliams su minimaliu informacijos ir daugialypės terpės kiekiu, be sudėtingos navigacijos ir animacijos. Sudėtingai svetainei tinka 2 kiti metodai.

svetainės dizainas
svetainės dizainas

Antras būdas – atskira svetainės versija

Šis metodas yra labai dažnas ir dažnai sėkmingas, kad svetainė būtų lengviau skaitoma mobiliajame įrenginyje. Jo esmė yra sukurti atskirą puslapio versiją, skirtą programai ir esančią atskirame URL arba padomenyje, pavyzdžiui, m.vk.com. Tuo pačiu išsaugomas pagrindinis funkcionalumas, svetainės dizainas tiesiog atrodo kitaip. Šio metodo pranašumai yra akivaizdūs:

  • naudotojui patogi sąsaja;
  • lengva keisti ir redaguoti, nes versija egzistuoja atskirai nuo pagrindinio š altinio;
  • dėl mažo svorio atskira svetainės versija veikia daug greičiau nei prisitaikantis šablonas;
  • dažniausiai į pagrindinę puslapio versiją galima pereiti iš mobiliojo telefono.

Tačiau čia taip pat buvo keletas trūkumų:

  • Keli adresai – svetainės versija staliniams kompiuteriams ir mobiliesiems. Kaip priversti vartotoją atsiminti dvi parinktis? Žiniatinklio meistrai dažnai nurodo peradresavimą (peradresavimą) iš darbalaukio versijos į mobiliąją versiją, tačiau tuo pat metu, jei šis puslapis yra mobiliajameversija neegzistuoja, vartotojas gaus klaidos pranešimą. Čia kyla sunkumų su paieškos sistemomis, kurioms sunku suskirstyti į 2 identiškus išteklius, o tai turi tiesioginės įtakos reklamai.
  • Mobilioji svetainės versija iš kompiuterio, jei vartotojas joje apsilankys per klaidą, atrodys juokingai, o tai taip pat gali turėti įtakos srautui.
  • Ši versija dažnai yra labai apribota, darbalaukyje, todėl vartotojas turės labai ribotas funkcijas. Bet tuo pačiu metu, jei kažko trūksta, lankytojas gali pereiti į pilną puslapio versiją.

Apskritai, atskira svetainė mobiliesiems pasiteisina ir yra labiausiai paplitęs būdas pritaikyti išteklius mobiliesiems įrenginiams. Jis populiarus didelėse internetinėse parduotuvėse, pvz., „Amazon“.

adaptyvūs šablonai
adaptyvūs šablonai

Trečias būdas – RESS dizainas

Google paieškos variklis aktyviai palaiko šią mobiliojo dizaino kryptį. Tai pats sudėtingiausias, brangiausias, bet efektyviausias būdas pritaikyti svetainę telefonui ar planšetiniam kompiuteriui. Jis vadinamas RESS. Tai nukreipiama į išteklius į mobiliąją programą, kurią galima atsisiųsti kiekvienam įrenginiui atskirai. Android – su GooglePlay, o Apple – su iTunes.

Tokios aplikacijos yra greitos, nemokamos, patogios, talpina įvairaus tipo informaciją, o telefono atmintis ir interneto srautas nesuvalgo, kaip lankantis svetainėje per naršyklę. Juos lengva pasiekti, nes nuoroda visada bus po ranka esančiame ekrane ir nereikia įvesti sudėtingo pavadinimo naršyklės adreso juostoje.

Žinoma, čia yra irjo trūkumai, tokie kaip kūrimo sudėtingumas, didelės daugelio programuotojų darbo sąnaudos, poreikis atlikti keletą išdėstymo variantų. Kartais programa neatpažįsta mobiliojo įrenginio. Būtinas nuolatinis techninis aptarnavimas, trūkumų taisymas. Nepaisant to, ši parinktis laikoma geriausia iš trijų siūlomų dėl produktyvaus ir nepertraukiamo veikimo.

google svetainė mobiliesiems
google svetainė mobiliesiems

Pigiausias būdas sukurti svetainę mobiliesiems

Visi aukščiau pateikti metodai apima, nors ir ne visada ilgą ir sunkų, bet vis tiek mokamą žiniatinklio valdytojo darbą. Jei nematote skubaus tokio kūrimo poreikio, jums tiks paprasta ir nemokama mobilioji svetainės versija. Koks yra lengviausias būdas tai padaryti?

Atsisiųskite specialių šablonų (įskiepių), skirtų prisitaikančiam dizainui. Pavyzdžiui, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile ir kt. Jie padės teisingiau atvaizduoti svetainę telefone, o gausite keletą patarimų, ką reikėtų taisyti, kad puslapis būtų geriau pritaikytas mobiliajai versijai.

Žinoma, šis metodas vargu ar tinka rimtiems ištekliams. Atvirkščiai, ši nemokama funkcija skirta mažoms ir paprastoms svetainėms, tinklaraščiams, naujienų kanalams. Nepamirškite, kad „Google“paieškos sistema ir „Yandex“šiandien kelia rimtus reikalavimus mobiliosioms versijoms, todėl yra didžiulė galimybė sumažinti savo pozicijas naudojant šį metodą.

Taikant šį metodą, skelbimai ir iššokantieji langai greičiausiai bus išjungtireklamjuosčių, tačiau puslapis bus įkeltas greitai ir be „vėlavimo“.

mobilioji svetainės versija android
mobilioji svetainės versija android

Mobiliųjų versijų kūrimo principai

Nesvarbu, ar mobilioji svetainės versija buvo sukurta nemokamai, ar padedant žiniatinklio valdytojams, ji buvo sukurta naudojant RESS sistemą arba naudojant adaptyvų šabloną. Svarbiausia, kad jis veiktų efektyviai, reikia laikytis kelių itin svarbių principų. Taigi, kokia turėtų būti mobilioji svetainės versija? Kaip padaryti, kad jis būtų produktyvus, efektyvus ir produktyvus?

mobilioji svetainės versija iš kompiuterio
mobilioji svetainės versija iš kompiuterio

Pašalinkite viską, kas nereikalinga

Minimalizmo turėtų siekti mobiliosios svetainės versijos kūrėjas. Įsivaizduokite, kaip sunku suvokti informaciją, kurioje gausu spalvų, mygtukų, reklamjuosčių ir kurią reikia be galo slinkti ieškant tinkamos medžiagos. Mobilusis dizainas turi būti paprastas ir švarus. Norėdami padalinti erdvę, pasirinkite 2–3 spalvas (pavyzdžiui, firminę). Geriau, jei vienas iš jų yra b altas. Padalinkite mažo ekrano erdvę į suprantamas ir skaitomas zonas. Turėtų būti matomi virtualūs klavišai, kad vartotojas aiškiai žinotų kur paspausti ir matytų – čia prekė, čia duomenų užpildymo forma, čia informacija apie pristatymą ir apmokėjimą.

Visos papildomos parinktys, kurios būtų naudingos darbalaukio versijoje ir palengvintų vartotojo gyvenimą, čia tik sukels sunkumų. Palikite tik svarbiausius elementus. Animacija, reklaminiai baneriai, multimedija greičiausiai tik sulėtins svetainės ar programos darbą ir atitrauks dėmesį nuopagrindinis.

Išlygiavimas

Lygiavimo klausimas yra ne mažiau opus, nes jei jis bus atliktas neteisingai, vartotojas gaus tik svarbių žodžių galūnes. Išlygiuotas kairėje ir vertikalioje pusėje yra visuotinai priimtas. Įsivaizduokite, kad slenkate per naujienų kanalą savo telefone. Darote tai iš viršaus į apačią, o ne į kairę ar dešinę.

Suvienijimas

Kai nėra ilgos perėjimų grandinės galimybės, pabandykite sujungti kelis žingsnius į vieną. Pavyzdžiui, svetainėje reikia įvesti duomenis keliais etapais – pavadinimas, tada adresas, kur kiekvienoje atskiroje ląstelėje yra atskiras namas, gatvė, butas ir tt Kad nebūtų priversti vartotoją bandyti pataikyti į daugybę mažų langelių, paprašykite jo užpildyti tik 2 - vardą ir adresą.

Ir atsijungimas

Kartais, priešingai, reikia atskirti per daug informacijos. Pavyzdžiui, išskleidžiamajame meniu yra daugiau nei 80 miestų, kuriuose vykdomas pristatymas, sąrašas. Sugrupuokite juos pagal regioną, kad vartotojui nereikėtų slinkti šio didžiulio sąrašo. Kai jis užves pelės žymeklį virš regiono centro arba regiono, kitas miestų sąrašas išeis.

Sąrašai

Beje, apie sąrašus. Jų yra dvi – fiksuotos abėcėlės ar kita tvarka ir su pakaitalais. Jų pasirinkimas priklauso nuo to, kas bus pateikta sąraše.

Pataisyta yra naudinga, jei vartotojas tiksliai žino, ko ieško. Pavyzdžiui, miestas, numeris arba data. Antrasis variantas tinka ilgiems sudėtingiems pavadinimams arba tais atvejais, kai yra daug vieno ir to paties variantųtuo pačiu pavadinimu, o kiekvienas išskleidžiamasis sąrašas priartina vartotoją žingsniu arčiau tikslo. Automatinio pakeitimo parinktis dažniau naudojama, kai lankytojui reikia pagalbos. Pavyzdžiui, mezgimo svetainėje siūloma įsigyti mezgimo adatų. Vartotojas įveda paieškos užklausą „Metalinės mezgimo adatos“, o patarime mato „Mezgimo adatos 5 mm“, „Mezgimo adatos 4,5 mm“ir kt.

Automatinis pildymas

Ši prekė ypač aktuali svetainėms, kuriose kažkas prekiaujama internetu, todėl reikia užpildyti standartines mokėjimo, pristatymo ir pan. formas. Jei žmogus perka iš telefono, greičiausiai jis neturi laiko prie kompiuterio, o tai reiškia, kad pirkimo procesas turi vykti kuo greičiau ir patogiau.

Dėl to formose gali būti jau užpildytų duomenų, galite pasitelkti populiariausius atsakymus. Pavyzdžiui, jei dirbate tame pačiame regione, įveskite šios dienos datą, mokėjimo grynaisiais pinigais būdą, miestą. Juos galima pakeisti, bet jei pasieksite tikslą, naudotojo laikas bus sutaupytas.

Viskas skaitoma, viskas peržiūrima

Kurdami mobiliąją svetainės versiją atminkite, kad visų telefonai skiriasi, o taip pat ir regėjimas. Galbūt jūsų svetainė bus peržiūrima iš mažo ekrano, todėl šriftai turi būti paprasti ir įskaitomi, mygtukai turi būti pakankamai dideli, kad juos būtų galima spustelėti neperkeliant į kitą puslapį, o vaizdai turėtų atsidaryti atskirai, dideli, ypač kai jis ateina į internetą. parduotuvė.

Šiek tiek statistikos

Kalbant apie svetainės pritaikymą mobiliesiems įrenginiams, negalima nesinaudoti statistika, kad suprastumėte, koks svarbus šis procesasreklama internete.

Skaičiai yra tokie. Šiandien programėlėmis naudojasi 87% gyventojų, matyt, išskyrus pačius mažiausius vaikus ir kai kuriuos pagyvenusius žmones. Ekonomistai prognozuoja, kad per ateinančius 5 metus mobilioji prekyba išaugs 100 kartų. Tuo pačiu metu tik 21% svetainių yra pritaikytos darbui su mobiliaisiais įrenginiais. Tai reiškia, kad užimta tik nedidelė 5 dalis interneto srauto ir elektroninės prekybos rinkos.

Pagalvokite apie šiuos skaičius. Ar prasminga pritaikyti savo išteklius? Žinoma taip. Be to, nors šioje rinkoje yra tiek daug vietos, joje galite išskirti savo segmentą.

Mobilioji svetainės versija nemokamai
Mobilioji svetainės versija nemokamai

Kur jums reikia mobiliosios versijos

Mobiliosios versijos naudojimas yra prasmingas bet kuriai platformai, kurios tikslas – gauti aukštą reitingą. Galų gale, tai daro tiesioginį poveikį vartotojui, sukuriant jam patogias sąlygas likti jūsų svetainėje.

Negali egzistuoti be mobiliosios versijos:

  • naujienų portalai, nes dauguma jų žiūrima iš telefono pakeliui į darbą ar mokyklą;
  • socialiniai tinklai – dėl tos pačios priežasties, be to, yra internetinio bendravimo veiksnys, vadinasi, tam reikėtų sukurti patogų, suprantamą pokalbį;
  • nuorodos, naršymo svetainės ir kt., kur žmonės eina, kai ko nors ieško;
  • internetinės parduotuvės – galimybė pritraukti pirkėjus, kurie negaišta laiko apsipirkti, o viską perka mobiliuoju internetu.

Vietoj išvados

Šiandien mobiliosios technologijos yra prieinamosaktyvus augimas ir plėtra, todėl, siekdama lyderystės rinkoje, bet kuri įmonė turi užtikrinti, kad jos interneto resursas atitiktų keliamus reikalavimus. Dėl augančių vartotojo poreikių, svetaines tenka nuolat atnaujinti ir pritaikyti įvairiems įrenginiams. Akivaizdu, kad jei žmogui nepatogu būti prie konkretaus š altinio, jis negali ten gauti informacijos apie prekę ar kainą, pateikti užsakymo, sužinoti apie pristatymą, tada jis suras svetainę, kurioje visa tai bus įmanoma. Todėl, norint laimėti konkursą, svarbu turėti lankstų, patogų, funkcionalų ir įdomų š altinį.

Tai padaryti padės mobilioji Android arba Ios svetainės versija. Norėdami tai padaryti, turite pasirinkti vieną iš aukščiau pateiktų pertvarkymo būdų – adaptyvų šabloną, naujos svetainės sukūrimą padomenyje ir nukreipimą į ją, nemokamus šablonus arba mobiliosios aplikacijos, kuri palengvins vartotojui įėjimą, kūrimą. ir būti puslapyje.

Šis požiūris ne tik padės išlaikyti esamų klientų lojalumą, bet ir suteiks galimybę pritraukti naujų lankytojų.

Rekomenduojamas: