Vietnes mobilā versija: kā to izdarīt? Adaptīvs dizains

Satura rādītājs:

Vietnes mobilā versija: kā to izdarīt? Adaptīvs dizains
Vietnes mobilā versija: kā to izdarīt? Adaptīvs dizains
Anonim

Šodien lielākā daļa cilvēku tiešsaistē dodas, izmantojot mobilos sīkrīkus – planšetdatorus, telefonus, šajā ziņā jaunu līmeni sasniedz arī vietņu optimizācija. Ja lietotājs ienāk un redz, ka vietne nav optimizēta mobilajām ierīcēm: attēlu nevar apskatīt, pogas ir izkustinātas, fonti ir mazi un nesalasāmi, dizains ir šķībs - 99 no 100%, ka viņš izies. un sāc meklēt citu ērtāku. Un meklēšanas robots atzīmēs izvēles rūtiņu, ka resursam nav nozīmes, tas ir, tas neatbilst meklēšanas vaicājumam. Tāpēc lapas dizains ir jāpielāgo dažādām mobilajām ierīcēm. Kas ir vietnes mobilā versija, kā to izveidot un kāds ir labākais veids, kā to lietot? Vairāk lasiet šajā rakstā.

Tātad ir četri galvenie veidi, kā padarīt vietni piemērotu mobilajām ierīcēm.

kā izveidot vietnes mobilo versiju
kā izveidot vietnes mobilo versiju

Pirmā metode - atsaucīgs dizains

Adaptīvās veidnes maina vietnes attēlu atkarībā no ekrāna izmēra. Parasti tie ir iestatīti uz standarta 1600, 1500, 1280, 1100, 1024 un 980 pikseļiem. Ieviešanai tiek izmantoti CSS3 Media Queries. Pats vietnes dizains nemainās.

Šīs metodes priekšrocības ir šādas:

  • ērta izstrāde,tā kā struktūra pati pielāgojas ekrāna parametriem un jebkuram atjauninājumam nav nepieciešama dizaina izstrāde no nulles, pietiek ar CSS un HTML pielāgošanu;
  • viens URL – lietotājam nav jāatceras vairāki nosaukumi, nav nepieciešama pāradresācija (pāradresācija no vienas adreses uz citu), kas var apgrūtināt tīmekļa pārziņa darbu, kā arī vieglāk meklēt dzinējs, lai kārtotu un sakārtotu resursus ar vienu adresi.

Protams, adaptīvajām veidnēm ir savi trūkumi, kas, starp citu, ir vairāk nekā priekšrocības. Tomēr daudzi izstrādātāji ievēro šo koncepciju, piemēram, Google Corporation, kuras mobilajai vietnes versijai ir adaptīvs dizains. Tātad, trūkumi:

  • Adaptīvais dizains neatbalsta tos pašus uzdevumus mobilajā ierīcē kā personālajā datorā. Ja šī ir, piemēram, bankas mājaslapas mobilā versija, kur lietotājam, visticamāk, ir svarīga informācija par valūtas kursu vai tuvākajiem bankomātiem, tad ar šo dizainu pilnīgi pietiek. Bet, ja šis ir sarežģīts strukturēts resurss ar daudzām sadaļām un apakšsadaļām, tad apmeklētājiem diez vai patiks adaptīvais izkārtojums.
  • Lēna ielāde pārvērš iecienītāko vietni par naidīgu vietni. Tas jo īpaši attiecas uz resursiem, kur ir daudz animāciju, videoklipu, uznirstošo logu un citu aktīvu elementu. Lielā svara dēļ lapa vienkārši “palēnināsies”, lietotājs sadusmosies un aizies, un vietnes meklēšanas pozīcijas samazināsies.
  • Nespēja izslēgt mobilo versiju ir vēl viens būtisks trūkums. Ja kāds elements ir paslēpts ar šādu izkārtojumu, jūsneko nevar darīt, lai to atvērtu, atšķirībā no vietnēm, kurās varat to izslēgt un pārslēgties uz parastu domēnu.

Tomēr šāda vietnes mobilā versija ātri, bez īpašām prasmēm un izmaksām ļauj pielāgot resursu jebkuram sīkrīkam. Bet, ņemot vērā uzskaitītos trūkumus, tas būs piemērots maziem, vienkāršiem resursiem ar minimālu informāciju un multimediju, bez sarežģītas navigācijas un animācijas. Sarežģītai vietnei ir piemērotas 2 citas metodes.

vietnes dizains
vietnes dizains

Otrā metode - atsevišķa vietnes versija

Šī metode ir ļoti izplatīta un bieži vien ir veiksmīga, lai vietni padarītu lasāmāku mobilajā ierīcē. Tās būtība ir izveidot atsevišķu lapas versiju, kas izstrādāta lietojumprogrammai un atrodas atsevišķā URL vai apakšdomēnā, piemēram, m.vk.com. Tajā pašā laikā tiek saglabāta galvenā funkcionalitāte, vietnes dizains vienkārši izskatās savādāk. Šīs metodes priekšrocības ir acīmredzamas:

  • lietotājam draudzīgs interfeiss;
  • viegli mainīt un rediģēt, jo versija pastāv atsevišķi no galvenā resursa;
  • mazā svara dēļ atsevišķa vietnes versija darbojas daudz ātrāk nekā adaptīvā veidne;
  • visbiežāk no mobilā ir iespējams pāriet uz lapas galveno versiju.

Bet šeit bija arī daži trūkumi:

  • Vairākas adreses - vietnes versija datoriem un mobilajām ierīcēm. Kā likt lietotājam atcerēties divas iespējas? Tīmekļa meistari bieži nosaka novirzīšanu (novirzīšanu) no darbvirsmas versijas uz mobilo versiju, taču tajā pašā laikā, ja šī lapa atrodas mobilajā ierīcēversija nepastāv, lietotājs saņems kļūdu. Šeit rodas grūtības ar meklētājprogrammām, kurām ir grūti ierindot 2 vienādus resursus, un tas tieši ietekmē paaugstināšanu.
  • Vietnes mobilā versija no datora, ja lietotājs to apmeklēs nejauši, izskatīsies smieklīgi, kas var ietekmēt arī trafiku.
  • Šī versija bieži vien ir ļoti ierobežota, darbvirsmas, tāpēc lietotājs iegūs ļoti ierobežotas funkcionalitātes. Bet tajā pašā laikā, ja kaut kā trūkst, apmeklētājs var doties uz pilno lapas versiju.

Kopumā atsevišķa mobilā vietne sevi attaisno un ir visizplatītākais veids, kā pielāgot resursu mobilajām ierīcēm. Tas ir populārs lielos tiešsaistes veikalos, piemēram, Amazon.

adaptīvās veidnes
adaptīvās veidnes

Trešais ceļš - RESS dizains

Google meklētājprogramma aktīvi atbalsta šo mobilā dizaina virzienu. Šī ir vissarežģītākā, dārgākā, bet efektīvākā metode vietnes pielāgošanai tālrunim vai planšetdatoram. To sauc par RESS. Tas ir resursa mērķauditorijas atlase mobilajā lietojumprogrammā, ko var lejupielādēt katrai ierīcei atsevišķi. Android ierīcēm - ar GooglePlay un Apple - ar iTunes.

Šādas aplikācijas ir ātras, bezmaksas, ērtas, spēj uzņemt dažāda veida informāciju, savukārt tālruņa atmiņa un interneta trafiks netiek apēsta kā, apmeklējot vietni caur pārlūkprogrammu. Tiem ir viegli piekļūt, jo saite vienmēr būs pa rokai ekrānā, un pārlūkprogrammas adreses joslā nav jāievada sarežģīts nosaukums.

Ir, protams, šeit untās nepilnības, piemēram, izstrādes sarežģītība, liela skaita programmētāju augstās darbaspēka izmaksas, nepieciešamība izveidot vairākas izkārtojuma iespējas. Dažreiz lietojumprogramma neatpazīst mobilo ierīci. Nepieciešams regulārs tehniskais atbalsts, nepilnību novēršana. Tomēr šī iespēja tiek uzskatīta par labāko no trim piedāvātajām iespējām, jo tā darbojas produktīvi un nepārtraukti.

google vietne mobilajām ierīcēm
google vietne mobilajām ierīcēm

Lētākais veids, kā izveidot vietni mobilajām ierīcēm

Visas iepriekš minētās metodes ietver, lai arī ne vienmēr ilgu un grūtu, bet tomēr apmaksātu tīmekļa pārziņa darbu. Ja neredzat steidzamu vajadzību pēc šādas izstrādes, jums būs piemērota vienkārša un bezmaksas vietnes mobilā versija. Kāds ir vienkāršākais veids, kā to pagatavot?

Lejupielādējiet īpašas veidnes (spraudņus) adaptīvam dizainam. Piemēram, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile un citi. Tie palīdzēs vietni pareizāk attēlot tālrunī, savukārt saņemsiet dažus padomus, kas būtu jālabo, lai labāk pielāgotu lapu mobilajai versijai.

Protams, šī metode diez vai ir piemērota nopietniem resursiem. Drīzāk šī bezmaksas funkcija ir paredzēta mazām un vienkāršām vietnēm, emuāriem, ziņu plūsmām. Neaizmirstiet, ka Google meklētājprogramma, kā arī Yandex mūsdienās izvirza nopietnas prasības mobilajām versijām, tāpēc pastāv liela iespēja pazemināt savas pozīcijas, izmantojot šo metodi.

Izmantojot šo metodi, visticamāk, reklāmas un uznirstošie logi tiks izslēgtibaneri, taču lapa tiks ielādēta ātri un bez "aizkavēšanās".

vietnes mobilā versija android
vietnes mobilā versija android

Mobilo versiju izveides principi

Nav svarīgi, vai vietnes mobilā versija tika izveidota bez maksas vai ar tīmekļa pārziņu personāla palīdzību, tā tika izveidota RESS sistēmā vai izmantojot adaptīvu veidni. Vissvarīgākais ir tas, ka tā efektīvai darbībai ir jāievēro vairāki ārkārtīgi svarīgi principi. Tātad, kādai jābūt vietnes mobilajai versijai? Kā padarīt to produktīvu, efektīvu un produktīvu?

vietnes mobilā versija no datora
vietnes mobilā versija no datora

Noņemiet visu nevajadzīgo

Vietnes mobilās versijas izstrādātājam ir jātiecas uz minimālismu. Iedomājieties, cik grūti ir uztvert informāciju, kas ir pārpildīta ar krāsām, pogām, baneriem un kura jums ir bezgalīgi jāritina, meklējot pareizo materiālu. Mobilajam dizainam jābūt vienkāršam un tīram. Izvēlieties 2–3 krāsas, lai sadalītu telpu (piemēram, ar zīmolu). Labāk, ja viens no tiem ir b alts. Sadaliet maza ekrāna vietu saprotamās un salasāmās zonās. Virtuālajām atslēgām jābūt redzamām, lai lietotājs skaidri zinātu, kur nospiest un redzētu - šeit ir prece, šeit ir veidlapa datu aizpildīšanai, šeit ir informācija par piegādi un apmaksu.

Visas papildu iespējas, kas noderētu darbvirsmas versijā un atvieglotu lietotāja dzīvi, šeit radīs tikai grūtības. Atstājiet tikai vissvarīgākos elementus. Animācija, reklāmas baneri, multivide, visticamāk, tikai palēninās vietnes vai aplikācijas darbu un novērsīs uzmanību nogalvenais.

Izlīdzināšana

Līdzināšanas jautājums ir ne mazāk akūts, jo, ja tas tiek izdarīts nepareizi, lietotājs saņems tikai svarīgu vārdu galotnes. Izlīdzinājums pa kreisi un vertikāls ir vispārpieņemts. Iedomājieties, ka tālrunī ritiniet ziņu plūsmu. Jūs to darāt no augšas uz leju, nevis pa kreisi vai pa labi.

Apvienošanās

Kad nav iespējama gara pāreju ķēde, mēģiniet apvienot vairākus soļus vienā. Piemēram, vietnei ir nepieciešama datu ievade vairākos posmos - vārds, pēc tam adrese, kur katrā atsevišķā šūnā ir atsevišķa māja, iela, dzīvoklis utt. Lai nepiespiestu lietotāju mēģināt trāpīt daudzām mazām šūnām, palūdziet viņam aizpildīt tikai 2 - vārdu un adresi.

Un atvienošana

Dažreiz, gluži pretēji, ir nepieciešams nodalīt pārāk daudz informācijas. Piemēram, nolaižamajā izvēlnē ir saraksts ar vairāk nekā 80 pilsētām, kurās tiek veikta piegāde. Grupējiet tos pēc reģiona, lai lietotājam nebūtu jāritina šis milzīgais saraksts. Kad viņš virzīs kursoru virs reģiona centra vai reģiona, tiks parādīts cits pilsētu saraksts.

Saraksti

Starp citu, par sarakstiem. Tās ir divas – fiksētas alfabētiskā vai citā secībā un ar aizstāšanu. Viņu izvēle ir atkarīga no tā, kas tiks uzskaitīts.

Fiksētā funkcija ir noderīga, ja lietotājs precīzi zina, ko meklē. Piemēram, pilsēta, numurs vai datums. Otrā iespēja ir piemērota gariem sarežģītiem nosaukumiem vai gadījumiem, kad ir daudz viena un tā paša variācijuar tādu pašu nosaukumu, un katrs nolaižamais saraksts tuvina lietotāju mērķim. Automātiskās aizstāšanas iespēja biežāk tiek izmantota, ja apmeklētājam nepieciešama palīdzība. Piemēram, adīšanas vietne piedāvā iegādāties adāmadatas. Lietotājs ievada meklēšanas vaicājumu “Metāla adāmadatas”, un rīka padomos viņš redz “Adamadatas 5 mm”, “Adamadatas 4,5 mm” utt.

Automātiskā aizpilde

Šī prece ir īpaši aktuāla vietnēm, kas kaut ko pārdod tiešsaistē, un jums ir jāaizpilda standarta veidlapas par apmaksu, piegādi utt. Ja cilvēks iepērkas no tālruņa, tad visticamāk viņam nav laika. lai tiktu pie datora, kas nozīmē, ka pirkuma process jāveic pēc iespējas ātrāk un ērtāk.

Šim nolūkam veidlapās var būt jau aizpildīti dati, varat izmantot populārākās atbildes. Piemēram, ievadiet šodienas datumu, skaidras naudas maksājuma veidu, pilsētu, ja strādājat tajā pašā reģionā. Tos var mainīt, taču, ja jūs sasniedzat mērķi, lietotāja laiks tiks ietaupīts.

Viss lasīts, viss apskatīts

Veidojot vietnes mobilo versiju, atcerieties, ka ikviena tālruņi ir atšķirīgi, tāpat arī redze. Iespējams, jūsu vietne tiks skatīta no maza ekrāna, tāpēc fontiem jābūt vienkāršiem un salasāmiem, pogām jābūt pietiekami lielām, lai tās varētu noklikšķināt, nepārceļot uz citu lapu, un attēliem ir jāatveras atsevišķi, lieli, it īpaši, ja tas nonāk internetā. veikals.

Daži statistikas dati

Runājot par vietnes pielāgošanu mobilajām ierīcēm, nevar neizmantot statistiku, lai saprastu, cik svarīgs ir šis processtiešsaistes akcija.

Cipari ir šādi. Mūsdienās sīkrīkus izmanto 87% iedzīvotāju, šķiet, izņemot mazākos bērnus un dažus vecāka gadagājuma cilvēkus. Ekonomisti prognozē, ka nākamo 5 gadu laikā mobilā tirdzniecība pieaugs 100 reizes. Tajā pašā laikā tikai 21% vietņu ir pielāgotas darbam ar mobilajām ierīcēm. Tas nozīmē, ka ir aizņemta tikai neliela 5. daļa no interneta trafika un e-komercijas tirgus.

Padomājiet par šiem skaitļiem. Vai ir jēga pielāgot savu resursu? Protams, jā. Turklāt, lai gan šajā tirgū ir tik daudz vietas, varat tajā izveidot savu segmentu.

vietnes mobilā versija bez maksas
vietnes mobilā versija bez maksas

Kur nepieciešama mobilā versija

Mobilās versijas izmantošana ir lietderīga jebkurai platformai, kuras mērķis ir iegūt augstu vietu. Galu galā tas tieši ietekmē lietotāju, radot ērtus apstākļus, lai viņš varētu palikt jūsu vietnē.

Nevar pastāvēt bez mobilās versijas:

  • ziņu portāli, jo lielākā daļa tiek apskatīti no telefona pa ceļam uz darbu vai skolu;
  • sociālie tīkli - šī paša iemesla dēļ, plus ir tiešsaistes komunikācijas faktors, kas nozīmē, ka šim nolūkam ir jāizveido ērts, saprotams čats;
  • atsauces, navigācijas vietnes utt., kurp cilvēki dodas, kad kaut ko meklē;
  • interneta veikali - iespēja piesaistīt klientus, kuri netērē laiku iepērkoties, bet visu iegādājas caur mobilo internetu.

Secinājuma vietā

Šodien mobilās tehnoloģijas ir pieejamasaktīva izaugsme un attīstība, tāpēc, tiecoties pēc līdera pozīcijas tirgū, jebkuram uzņēmumam ir jānodrošina, lai tā interneta resurss atbilstu prasībām. Lietotāju pieaugošo prasību dēļ vietnes ir pastāvīgi jāatjaunina un jāpielāgo dažādām ierīcēm. Skaidrs, ka, ja cilvēkam ir neērti atrasties pie konkrēta resursa, viņš nevar tur iegūt informāciju par preci vai cenu, veikt pasūtījumu, uzzināt par piegādi, tad viņš atradīs vietni, kur tas viss kļūs iespējams. Tāpēc, lai uzvarētu konkursā, ir svarīgi, lai būtu elastīgs, ērts, funkcionāls un interesants resurss.

To palīdzēs izdarīt Android vai Ios vietnes mobilā versija. Lai to izdarītu, jāizvēlas viena no iepriekš minētajām pārprojektēšanas metodēm - adaptīvā veidne, jaunas vietnes izveide apakšdomēnā un pāradresācija uz to, bezmaksas veidņu izmantošana vai mobilās aplikācijas izveide, kas lietotājam atvieglos iekļūšanu. un esiet lapā.

Šī pieeja ne tikai palīdzēs saglabāt esošo klientu lojalitāti, bet arī sniegs iespēju piesaistīt jaunus apmeklētājus.

Ieteicams: