Saidi mobiiliversioon: kuidas seda teha? Adaptiivne disain

Sisukord:

Saidi mobiiliversioon: kuidas seda teha? Adaptiivne disain
Saidi mobiiliversioon: kuidas seda teha? Adaptiivne disain
Anonim

Tänapäeval liigub enamik inimesi veebi läbi mobiilividinate – tahvelarvutite, telefonide, sellega seoses on uuele tasemele jõudmas ka veebilehtede optimeerimine. Kui kasutaja siseneb ja näeb, et sait pole mobiilseadmete jaoks optimeeritud: pilti ei saa vaadata, nupud on välja nihkunud, fondid on väikesed ja loetamatud, kujundus on viltu - 99 100% -st, et ta lahkub ja hakake otsima teist mugavamat. Ja otsingurobot märgib kasti, et ressurss on ebaoluline, see tähendab, et see ei vasta otsingupäringule. Seetõttu tuleb lehe kujundust kohandada erinevatele mobiilsetele seadmetele. Mis on saidi mobiiliversioon, kuidas seda teha ja kuidas seda kõige paremini rakendada? Lisateavet leiate sellest artiklist.

Nii et saidi mobiilisõbralikuks muutmiseks on neli peamist viisi.

kuidas saidist mobiiliversiooni teha
kuidas saidist mobiiliversiooni teha

Esimene meetod – tundlik disain

Reageerivad mallid muudavad saidi pilti olenev alt ekraani suurusest. Reeglina on need seatud standardsetele 1600, 1500, 1280, 1100, 1024 ja 980 pikslitele. Rakendamiseks kasutatakse CSS3 meediapäringuid. Saidi kujundus ise ei muutu.

Selle meetodi eelised on järgmised:

  • mugav arendus,kuna struktuur ise kohandub ekraani parameetritega ja iga värskendus ei nõua disaini nullist väljatöötamist, piisab CSS-i ja HTML-i näppimisest;
  • üks URL – kasutajal pole vaja mitut nime meelde jätta, pole vaja ümbersuunamist (ümbersuunamist ühelt aadressilt teisele), mis võib veebihalduri töö keerulisemaks teha ning otsingut on lihtsam teha mootor ressursi sortimiseks ja järjestamiseks ühe aadressiga.

Muidugi on kohanduvatel mallidel omad puudused, mis, muide, on rohkem kui eelised. Sellegipoolest järgivad seda kontseptsiooni paljud arendajad, näiteks Google Corporation, kelle saidi mobiiliversioon on kohandatava kujundusega. Niisiis, puudused:

  • Reagatiivne disain ei toeta mobiilis samu ülesandeid kui arvutis. Kui tegemist on näiteks panga veebilehe mobiiliversiooniga, kus kasutajale on suurema tõenäosusega oluline info kursi või lähimate sularahaautomaatide kohta, siis sellest kujundusest täiesti piisab. Kuid kui see on keeruka struktureeritud ressurss, millel on palju jaotisi ja alajaotisi, siis ei meeldi külastajatele kohanduv paigutus.
  • Aeglane laadimine muudab lemmiksaidi vaenu õhutavaks saidiks. See kehtib eriti ressursside kohta, kus on palju animatsioone, videoid, hüpikaknaid ja muid aktiivseid elemente. Suure kaalu tõttu leht lihts alt "aeglustub", kasutaja vihastab ja lahkub ning saidi otsingupositsioonid langevad.
  • Suutmatus mobiiliversiooni välja lülitada on veel üks oluline puudus. Kui mõni element on sellise paigutusega peidetud, siis teieselle avamiseks ei saa te midagi teha, erinev alt saitidest, kus saate selle välja lülitada ja tavalisele domeenile lülituda.

Saidi selline mobiiliversioon võimaldab aga kiiresti, ilma eriliste oskuste ja kuludeta kohandada ressurssi mis tahes vidinatega. Kuid loetletud puudusi silmas pidades sobib see väikestele, lihtsatele ressurssidele minimaalse teabe ja multimeediaga, ilma keeruka navigeerimise ja animatsioonita. Keerulise saidi jaoks sobivad 2 muud meetodit.

saidi kujundus
saidi kujundus

Teine meetod – saidi eraldi versioon

See meetod on väga levinud ja on sageli edukas saidi mobiilseadmes loetavamaks muutmisel. Selle olemus on luua rakenduse jaoks eraldi lehe versioon, mis asub eraldi URL-il või alamdomeenil, näiteks m.vk.com. Samal ajal säilib põhifunktsionaalsus, saidi kujundus näeb lihts alt erinev välja. Selle meetodi eelised on ilmsed:

  • kasutajasõbralik liides;
  • lihtne muuta ja redigeerida, kuna versioon eksisteerib põhiressursist eraldi;
  • väikse kaalu tõttu töötab saidi eraldi versioon palju kiiremini kui adaptiivne mall;
  • kõige sagedamini on võimalik mobiilist minna lehe põhiversioonile.

Kuid siin oli ka mõningaid puudusi:

  • Mitu aadressi – saidi laua- ja mobiiliversioon. Kuidas panna kasutaja kaks võimalust meelde? Veebimeistrid kirjutavad sageli ette ümbersuunamise (ümbersuunamise) töölauaversioonilt mobiiliversioonile, kuid samal ajal, kui see leht on mobiilisversiooni pole olemas, kuvatakse kasutajale veateade. Siin tekivad raskused otsingumootoritega, millel on raske järjestada kahte identset ressurssi ja see mõjutab otseselt reklaamimist.
  • Saidi mobiiliversioon arvutist, kui kasutaja seda kogemata külastab, näeb naeruväärne, mis võib samuti liiklust mõjutada.
  • See versioon on lauaarvuti jaoks sageli tugev alt piiratud, nii et kasutajal on väga piiratud funktsionaalsus. Kuid samal ajal, kui midagi on puudu, saab külastaja minna lehe täisversioonile.

Üldiselt õigustab eraldi mobiilisait end ja on kõige levinum viis ressurssi mobiilseadmete jaoks kohandada. See on populaarne suurte veebipoodide, nagu Amazon, seas.

adaptiivsed mallid
adaptiivsed mallid

Kolmas viis – RESS-i disain

Google'i otsingumootor toetab aktiivselt seda mobiilidisaini suunda. See on kõige keerulisem, kulukam, kuid tõhusam viis saidi kohandamiseks telefoni või tahvelarvutiga. Seda nimetatakse RESSiks. See on ressursi sihtimine mobiilirakendusse, mille saab alla laadida iga seadme jaoks eraldi. Androidile – GooglePlayga ja Apple’ile – iTunesiga.

Sellised rakendused on kiired, tasuta, mugavad, suudavad mahutada erinevat tüüpi teavet, samas kui telefoni mälu ja Interneti-liiklus ei söö ära nagu brauseri kaudu saiti külastades. Neile on lihtne juurde pääseda, kuna link on alati ekraanil käepärast ja pole vaja brauseri aadressiribale keerulist nime sisestada.

Muidugi on siin jaselle puudused, nagu arenduse keerukus, suure hulga programmeerijate kõrge tööjõukulu, vajadus teha mitu paigutusvalikut. Mõnikord ei tunne rakendus mobiilseadet ära. Vajalik on regulaarne tehniline tugi, puuduste parandamine. Sellegipoolest peetakse seda kolmest pakutud valikust parimaks tänu selle produktiivsele ja katkematule tööle.

google mobiili veebisait
google mobiili veebisait

Odavaim viis mobiiliveebisaidi loomiseks

Kõik ül altoodud meetodid hõlmavad, ehkki mitte alati pikka ja rasket, kuid siiski tasustatud veebihalduri tööd. Kui te ei näe sellise arenduse järele tungivat vajadust, sobib teile saidi lihtne ja tasuta mobiiliversioon. Kuidas on seda kõige lihtsam teha?

Laadige alla spetsiaalsed mallid (pluginad) tundliku disaini jaoks. Näiteks WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile ja teised. Need aitavad saiti telefonis korrektsem alt kuvada, samas saate mõned näpunäited selle kohta, mida tuleks parandada, et leht paremini mobiiliversiooniga kohandada.

Muidugi ei sobi see meetod tõsiste ressursside jaoks. Pigem on see tasuta funktsioon mõeldud väikestele ja lihtsatele saitidele, ajaveebidele, uudistevoogudele. Ärge unustage, et Google'i otsingumootor ja ka Yandex esitavad tänapäeval mobiiliversioonidele tõsiseid nõudmisi, seega on selle meetodi abil suur võimalus oma positsioone alandada.

Selle meetodi puhul katkestatakse suure tõenäosusega reklaamid ja hüpikaknadbännereid, kuid leht laaditakse kiiresti ja ilma viivitusteta.

saidi mobiiliversioon android
saidi mobiiliversioon android

Mobiiliversioonide loomise põhimõtted

Pole vahet, kas saidi mobiiliversioon loodi tasuta või veebihaldurite abiga, see tehti RESS-süsteemis või adaptiivse malli abil. Kõige tähtsam on see, et selle tõhusaks toimimiseks on vaja järgida mitut äärmiselt olulist põhimõtet. Niisiis, milline peaks olema saidi mobiiliversioon? Kuidas muuta see tootlikuks, tõhusaks ja tootlikuks?

saidi mobiiliversioon arvutist
saidi mobiiliversioon arvutist

Eemaldage kõik mittevajalik

Saidi mobiiliversiooni arendaja peaks püüdlema minimalismi poole. Kujutage ette, kui raske on tajuda teavet, mis on täis värve, nuppe, bännereid ja mida peate õige materjali otsimiseks lõputult sirvima. Mobiilne disain peaks olema lihtne ja puhas. Valige ruumi jagamiseks 2-3 värvi (näiteks kaubamärgiga). Parem, kui üks neist on valge. Jagage väikese ekraani ruum arusaadavateks ja loetavateks tsoonideks. Virtuaalsed võtmed peaksid olema nähtavad, et kasutaja teaks selgelt, kuhu vajutada ja näeks - siin on toode, siin on andmete täitmise vorm, siin on teave kohaletoimetamise ja maksmise kohta.

Kõik lisavalikud, mis töölauaversioonis kasulikud oleksid ja kasutaja elu lihtsamaks teevad, toovad siin vaid raskusi. Jätke ainult kõige olulisemad elemendid. Animatsioon, reklaambännerid, multimeediumid tõenäoliselt ainult aeglustavad saidi või rakenduse tööd ja tõmbavad tähelepanu kõrvalepeamine.

Joondamine

Joondamise küsimus pole vähem terav, sest kui seda valesti teha, saab kasutaja ainult oluliste sõnade lõpud. Vasakpoolne ja vertikaalne joondus on üldiselt aktsepteeritud. Kujutage ette, et kerite oma telefoni uudistevoogu. Teete seda ül alt alla, mitte vasakule või paremale.

Ühendamine

Kui pikka üleminekute ahelat pole võimalik teha, proovige ühendada mitu sammu üheks. Näiteks nõuab sait andmete sisestamist mitmes etapis – nimi, seejärel aadress, kus igas üksikus lahtris on eraldi maja, tänav, korter jne. Et mitte sundida kasutajat püüdma tabada paljusid väikeseid lahtreid, paluge tal sisestada ainult 2 - nimi ja aadress.

Ja ühenduse katkestamine

Mõnikord, vastupidi, on vaja eraldada liiga palju teavet. Näiteks on rippmenüüs loend enam kui 80 linnast, kus kohaletoimetamine toimub. Rühmitage need piirkondade kaupa, et kasutaja ei peaks seda tohutut loendit läbi kerima. Kui ta hõljutab kursorit piirkonna keskuse või piirkonna kohal, kuvatakse välja teine linnade loend.

Kirjed

Muide, loendite kohta. Neid on kaks – fikseeritud tähestikulises või muus järjekorras ja asendusega. Nende valik sõltub sellest, mida loetletakse.

Fikseeritud on kasulik, kui kasutaja teab täpselt, mida ta otsib. Näiteks linn, number või kuupäev. Teine võimalus sobib pikkade keerukate nimede jaoks või juhtudel, kui ühest ja samast on palju variatsioonesama nimega ja iga rippmenüü viib kasutaja eesmärgini sammu võrra lähemale. Automaatse asendamise võimalust kasutatakse sagedamini siis, kui külastaja vajab abi. Näiteks pakub kudumiskoht osta kudumisvardaid. Kasutaja sisestab otsingupäringu “Metallist kudumisvardad” ja vihjes näeb “Kudumisvardad 5 mm”, “Kudumisvardad 4,5 mm” jne.

Automaatne täitmine

See üksus on eriti asjakohane saitide puhul, mis müüvad midagi Internetis ja peate täitma standardvormid maksmiseks, kohaletoimetamiseks jne. Kui inimene sooritab ostu telefonist, siis tõenäoliselt pole tal aega arvutini jõudmiseks, mis tähendab, et ostuprotsess tuleks teha võimalikult kiireks ja mugavaks.

Selleks võivad vormid sisaldada juba täidetud andmeid, võite kasutada kõige populaarsemaid vastuseid. Näiteks sisestage tänane kuupäev, sularahamakseviis, linn, kui töötate samas piirkonnas. Neid saab muuta, kuid kui tabate sihtmärki, säästetakse kasutaja aega.

Kõik loetakse, kõike vaadatakse

Saidi mobiiliversiooni kujundamisel pidage meeles, et igaühe telefonid on erinevad ja nii ka nende nägemine. Võib-olla vaadatakse teie saiti väikeselt ekraanilt, nii et fondid peaksid olema lihtsad ja loetavad, nupud peaksid olema piisav alt suured, et neid saaks klõpsata ilma teisele lehele viimata, ja pildid peaksid avanema eraldi, suurelt, eriti kui see tuleb Internetti. poodi.

Mõned statistikat

Rääkides saidi kohandamisest mobiilseadmetega, ei saa jätta kasutamata statistikat, et mõista, kui oluline see protsess onvõrgureklaam.

Numbrid on järgmised. Tänapäeval kasutab vidinaid ilmselt 87% elanikkonnast, välja arvatud kõige väiksemad lapsed ja mõned vanurid. Majandusteadlased ennustavad, et mobiilne kaubandus kasvab järgmise 5 aasta jooksul 100 korda. Samal ajal on vaid 21% saitidest kohandatud mobiilseadmetega töötamiseks. See tähendab, et hõivatud on vaid väike 5. osa Interneti-liiklusest ja e-kaubanduse turust.

Mõelge nendele numbritele. Kas on mõtet oma ressurssi kohandada? Muidugi jah. Pealegi, kuigi sellel turul on nii palju ruumi, saate sellel oma segmendi välja lõigata.

saidi mobiiliversioon tasuta
saidi mobiiliversioon tasuta

Kus vajate mobiiliversiooni

Mobiiliversiooni kasutamine on mõistlik mis tahes platvormi puhul, mille eesmärk on saavutada kõrge asetus. Lõppude lõpuks mõjutab see kasutajat otse, luues talle mugavad tingimused teie saidil viibimiseks.

Ei saa eksisteerida ilma mobiiliversioonita:

  • uudisteportaalid, sest enamikku vaadatakse telefonist teel tööle või kooli;
  • sotsiaalvõrgustikud - samal põhjusel, lisaks on olemas võrgusuhtlusfaktor, mis tähendab, et selleks tuleks luua mugav ja arusaadav vestlus;
  • viited, navigatsioonisaidid jne, kuhu inimesed lähevad, kui nad midagi otsivad;
  • veebipoed – võimalus meelitada ligi kliente, kes ei raiska aega ostlemisele, vaid ostavad kõike mobiilse interneti kaudu.

Järelduse asemel

Täna on mobiilsed tehnoloogiad kasutuselaktiivne kasv ja areng, seetõttu peab iga ettevõte turul liidripositsiooni poole püüdlema tagama, et tema Interneti-ressurss vastab nõuetele. Kasutaja kasvavate nõudmiste tõttu tuleb saite pidev alt täiendada ja kohandada erinevatele seadmetele. On selge, et kui inimesel on ebamugav teatud ressursi peal viibida, ta ei saa se alt teavet toote või hinna kohta, ei saa tellimust esitada, tarne kohta teada, siis leiab ta saidi, kus see kõik võimalikuks saab. Seetõttu on konkursi võitmiseks oluline paindlik, mugav, funktsionaalne ja huvitav ressurss.

Seda aitab teha Androidi või iOS-i veebisaidi mobiiliversioon. Selleks peate valima ühe ül altoodud ümberkujundamise meetoditest - adaptiivne mall, alamdomeenile uue saidi loomine ja sellele ümbersuunamine, tasuta mallide kasutamine või mobiilirakenduse loomine, mis hõlbustab kasutajal sisenemist. ja ole lehel.

See lähenemisviis mitte ainult ei aita säilitada olemasolevate klientide lojaalsust, vaid annab ka võimaluse meelitada ligi uusi külastajaid.

Soovitan: