Ngayon, karamihan sa mga tao ay nag-online sa pamamagitan ng mga mobile na gadget - mga tablet, telepono, sa bagay na ito, ang pag-optimize ng website ay umaabot na rin sa isang bagong antas. Kung ang isang user ay pumasok at nakitang ang site ay hindi na-optimize para sa mga mobile device: ang imahe ay hindi matingnan, ang mga pindutan ay inilipat na, ang mga font ay maliit at hindi nababasa, ang disenyo ay skewed - 99 sa 100% na siya ay lalabas at magsimulang maghanap ng isa pang mas maginhawa. At susuriin ng search robot ang kahon na ang mapagkukunan ay hindi nauugnay, iyon ay, hindi ito tumutugma sa query sa paghahanap. Samakatuwid, ang disenyo ng pahina ay dapat na iakma sa iba't ibang mga mobile device. Ano ang isang mobile na bersyon ng site, kung paano ito gawin, at ano ang pinakamahusay na paraan upang ilapat ito? Magbasa pa sa artikulong ito.
Kaya mayroong apat na pangunahing paraan upang gawing pang-mobile ang iyong site.
Unang Paraan - Tumutugon na Disenyo
Ang Mga template na tumutugon ay nagbabago sa larawan ng site depende sa laki ng screen. Bilang panuntunan, nakatakda ang mga ito sa karaniwang 1600, 1500, 1280, 1100, 1024 at 980 pixels. Para sa pagpapatupad, ginagamit ang CSS3 Media Query. Ang mismong disenyo ng site ay hindi nagbabago.
Ang mga bentahe ng pamamaraang ito ay kinabibilangan ng:
- maginhawang pag-unlad,dahil ang istraktura mismo ay umaangkop sa mga parameter ng screen, at ang anumang pag-update ay hindi nangangailangan ng pagbuo ng disenyo mula sa simula, sapat na upang i-tweak ang CSS at HTML;
- isang URL – hindi kailangang matandaan ng user ang ilang pangalan, hindi na kailangan ng pag-redirect (pag-redirect mula sa isang address patungo sa isa pa), na maaaring gawing kumplikado ang gawain ng isang webmaster, at mas madali para sa isang paghahanap engine upang pag-uri-uriin at pagraranggo ang isang mapagkukunan na may iisang address.
Siyempre, ang mga adaptive na template ay may kani-kaniyang disbentaha, na kung saan ay higit pa sa mga pakinabang. Gayunpaman, maraming mga developer ang sumusunod sa konseptong ito, halimbawa, ang Google Corporation, na ang mobile na bersyon ng site ay may adaptive na disenyo. Kaya, mga disadvantages:
- Ang tumutugon na disenyo ay hindi sumusuporta sa parehong mga gawain sa mobile gaya ng ginagawa nito sa PC. Kung ito ay, halimbawa, isang mobile na bersyon ng website ng isang bangko, kung saan ang impormasyon tungkol sa exchange rate o ang pinakamalapit na mga ATM ay mas malamang na maging mahalaga sa user, kung gayon ang disenyo na ito ay sapat na. Ngunit kung isa itong kumplikadong structured resource na may maraming seksyon at subsection, halos hindi magugustuhan ng mga bisita ang adaptive na layout.
- Ang mabagal na paglo-load ay ginagawang kasuklam-suklam ang isang paboritong site. Ito ay totoo lalo na para sa mga mapagkukunan kung saan ang mga animation, video, pop-up at iba pang aktibong elemento ay napakarami. Dahil sa mataas na timbang, ang page ay "babagal" lang, magagalit ang user at aalis, at babagsak ang mga posisyon sa paghahanap ng site.
- Ang kawalan ng kakayahang i-off ang mobile na bersyon ay isa pang makabuluhang disbentaha. Kung ang ilang elemento ay nakatago sa pamamagitan ng gayong layout, ikawwala kang magagawa para buksan ito, hindi tulad ng mga site kung saan maaari mo itong i-off at lumipat sa isang regular na domain.
Gayunpaman, ang ganitong mobile na bersyon ng site nang mabilis, nang walang mga espesyal na kasanayan at gastos, ay nagbibigay-daan sa iyong iangkop ang mapagkukunan sa anumang mga gadget. Ngunit, sa pagtingin sa mga nakalistang pagkukulang, ito ay angkop sa maliit, simpleng mapagkukunan na may minimum na impormasyon at multimedia, nang walang kumplikadong nabigasyon at animation. Para sa isang kumplikadong site, 2 iba pang paraan ang angkop.
Ikalawang paraan - isang hiwalay na bersyon ng site
Ang paraang ito ay napakakaraniwan at kadalasan ay matagumpay sa paggawa ng site na mas nababasa sa isang mobile device. Ang kakanyahan nito ay lumikha ng isang hiwalay na bersyon ng pahina, iginuhit para sa application at matatagpuan sa isang hiwalay na URL o subdomain, halimbawa, m.vk.com. Kasabay nito, ang pangunahing pag-andar ay napanatili, ang disenyo ng site ay mukhang naiiba. Ang mga pakinabang ng pamamaraang ito ay halata:
- user-friendly interface;
- madaling baguhin at i-edit dahil ang bersyon ay umiiral nang hiwalay sa pangunahing mapagkukunan;
- dahil sa mababang timbang, ang isang hiwalay na bersyon ng site ay gumagana nang mas mabilis kaysa sa adaptive na template;
- pinaka madalas na posibleng pumunta sa pangunahing bersyon ng page mula sa mobile.
Ngunit may ilang mga kakulangan din dito:
- Maramihang address - desktop at mobile na bersyon ng site. Paano maaalala ng gumagamit ang dalawang pagpipilian? Ang mga web master ay madalas na nagrereseta ng pag-redirect (redirect) mula sa desktop na bersyon patungo sa mobile na bersyon, ngunit sa parehong oras, kung ang pahinang ito ay nasa mobilebersyon ay hindi umiiral, ang gumagamit ay makakatanggap ng isang error. Dito, lumilitaw ang mga paghihirap sa mga search engine, na nahihirapang mag-rank ng 2 magkatulad na mapagkukunan, at direktang nakakaapekto ito sa promosyon.
- Ang mobile na bersyon ng site mula sa isang computer, kung binisita ito ng user nang hindi sinasadya, ay magmumukhang katawa-tawa, na maaari ring makaapekto sa trapiko.
- Ang bersyon na ito ay kadalasang pinipigilan nang husto, desktop, kaya ang user ay makakakuha ng napakalimitadong functionality. Ngunit sa parehong oras, kung may nawawala, maaaring pumunta ang bisita sa buong bersyon ng page.
Sa pangkalahatan, binibigyang-katwiran ng isang hiwalay na mobile site ang sarili nito at ito ang pinakakaraniwang paraan upang iangkop ang isang mapagkukunan para sa mga mobile device. Sikat ito sa malalaking online na tindahan gaya ng Amazon.
Ikatlong paraan - disenyo ng RESS
Google search engine ay aktibong sumusuporta sa direksyong ito ng disenyong pang-mobile. Ito ang pinaka-kumplikado, magastos, ngunit epektibong paraan upang iakma ang site sa isang telepono o tablet. Ito ay tinatawag na RESS. Ito ay nagta-target ng mapagkukunan sa isang mobile application na maaaring i-download para sa bawat device nang hiwalay. Para sa android - na may GooglePlay, at para sa Apple - na may iTunes.
Ang ganitong mga application ay mabilis, libre, maginhawa, may kakayahang tumanggap ng iba't ibang uri ng impormasyon, habang ang memorya ng telepono at trapiko sa Internet ay hindi kinakain tulad ng kapag bumibisita sa isang site sa pamamagitan ng browser. Madaling i-access ang mga ito, dahil palaging nasa screen ang link, at hindi na kailangang maglagay ng kumplikadong pangalan sa address bar ng browser.
Mayroon, siyempre, dito atang mga pagkukulang nito, tulad ng pagiging kumplikado sa pag-unlad, ang mataas na halaga ng paggawa ng isang malaking bilang ng mga programmer, ang pangangailangan na gumawa ng ilang mga pagpipilian sa layout. Minsan ang mobile device ay hindi kinikilala ng application. Regular na teknikal na suporta, pagwawasto ng mga pagkukulang ay kinakailangan. Gayunpaman, ang opsyong ito ay itinuturing na pinakamahusay sa tatlong iminungkahing dahil sa produktibo at walang patid na operasyon nito.
Ang pinakamurang paraan para gumawa ng mobile website
Lahat ng mga pamamaraan sa itaas ay kinabibilangan, kahit na hindi palaging mahaba at mahirap, ngunit may bayad pa rin na gawain ng isang webmaster. Kung hindi mo nakikita ang isang kagyat na pangangailangan para sa naturang pag-unlad, isang simple at libreng mobile na bersyon ng site ang babagay sa iyo. Ano ang pinakamadaling paraan para gawin ito?
Mag-download ng mga espesyal na template (plugin) para sa tumutugon na disenyo. Halimbawa, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile at iba pa. Makakatulong sila na ipakita ang site nang mas tama sa telepono, habang makakatanggap ka ng ilang tip sa kung ano ang dapat itama para mas maiangkop ang page sa mobile na bersyon.
Siyempre, ang paraang ito ay halos hindi angkop para sa mga seryosong mapagkukunan. Sa halip, ang libreng tampok na ito ay inilaan para sa maliliit at simpleng mga site, blog, mga feed ng balita. Huwag kalimutan na ang Google search engine, pati na rin ang Yandex, ay gumagawa ngayon ng mga seryosong kahilingan sa mga mobile na bersyon, kaya may malaking pagkakataon na ibaba ang iyong mga posisyon gamit ang paraang ito.
Sa paraang ito, malamang, mapuputol ang mga ad at pop-upmga banner, ngunit mabilis na maglo-load ang page at walang “lags”.
Mga Prinsipyo sa paggawa ng mga mobile na bersyon
Hindi mahalaga kung ang mobile na bersyon ng site ay ginawa nang libre o sa tulong ng isang staff ng mga webmaster, ito ay ginawa sa RESS system o gamit ang adaptive template. Pinakamahalaga, para sa epektibong operasyon nito, kinakailangan na sumunod sa ilang napakahalagang prinsipyo. Kaya, ano ang dapat na mobile na bersyon ng site? Paano ito gagawing produktibo, mahusay at produktibo?
Alisin ang lahat ng hindi kailangan
Minimalism ang dapat pagsikapan ng developer ng mobile na bersyon ng site. Isipin kung gaano kahirap makita ang impormasyon na puno ng mga kulay, mga pindutan, mga banner, at kung saan kailangan mong walang katapusang mag-scroll sa paghahanap ng tamang materyal. Ang disenyo ng mobile ay dapat na simple at malinis. Pumili ng 2-3 kulay upang hatiin ang espasyo (halimbawa, may tatak). Mas maganda kung puti ang isa sa kanila. Hatiin ang espasyo ng isang maliit na screen sa mga naiintindihan at nababasang mga zone. Dapat na nakikita ang mga virtual key upang malinaw na malaman ng user kung saan pipindutin at makita - narito ang produkto, narito ang form para sa pagpuno ng data, narito ang impormasyon sa paghahatid at pagbabayad.
Lahat ng karagdagang opsyon na magiging kapaki-pakinabang sa desktop na bersyon at magpapadali sa buhay para sa user ay magdadala lamang ng mga paghihirap dito. Iwanan lamang ang pinakamahalagang elemento. Ang animation, mga banner sa advertising, multimedia, malamang, ay magpapabagal lamang sa gawain ng site o application at makagambala sapangunahing.
Alignment
Ang isyu ng pagkakahanay ay hindi gaanong talamak, dahil kung ginawa nang hindi tama, makukuha lamang ng gumagamit ang mga pagtatapos ng mahahalagang salita. Karaniwang tinatanggap ang left-aligned at vertical alignment. Isipin ang iyong sarili na nag-i-scroll sa feed ng balita sa iyong telepono. Ginagawa mo ito mula sa itaas hanggang sa ibaba, hindi sa kaliwa o kanan.
Pagiisa
Kapag walang posibilidad ng mahabang chain ng mga transition, subukang pagsamahin ang ilang hakbang sa isa. Halimbawa, ang site ay nangangailangan ng pagpasok ng data sa ilang mga yugto - isang pangalan, pagkatapos ay isang address, kung saan sa bawat indibidwal na cell mayroong isang hiwalay na bahay, kalye, apartment, atbp. Upang hindi pilitin ang gumagamit na subukang matumbok ang maraming maliliit na cell, hilingin sa kanya na punan ang 2 lamang - pangalan at tirahan.
At pagkakadiskonekta
Minsan, sa kabaligtaran, kinakailangan na paghiwalayin ang napakaraming impormasyon. Halimbawa, sa drop-down na menu mayroon kang listahan ng higit sa 80 lungsod kung saan isinasagawa ang paghahatid. Igrupo ang mga ito ayon sa rehiyon upang ang user ay hindi na kailangang mag-scroll sa malaking listahang ito. Kapag nag-hover siya sa sentro ng rehiyon o rehiyon, isa pang listahan ng mga lungsod ang mawawala.
Mga Listahan
Nga pala, tungkol sa mga listahan. Mayroong dalawa sa kanila - naayos sa alpabetikong o iba pang pagkakasunud-sunod at may pagpapalit. Ang kanilang pagpili ay depende sa kung ano ang ililista.
Ang Fixed ay kapaki-pakinabang kung alam ng user kung ano mismo ang hinahanap nila. Halimbawa, lungsod, numero o petsa. Ang pangalawang opsyon ay angkop para sa mahabang kumplikadong mga pangalan o para sa mga kaso kung saan maraming mga pagkakaiba-iba ng isa at parehoang parehong pangalan, at dinadala ng bawat drop-down na listahan ang user ng isang hakbang na mas malapit sa layunin. Ang pagpipiliang awtomatikong pagpapalit ay mas madalas na ginagamit kapag ang isang bisita ay nangangailangan ng tulong. Halimbawa, nag-aalok ang isang site ng pagniniting upang bumili ng mga karayom sa pagniniting. Ang user ay pumapasok sa query sa paghahanap na "Metal knitting needles", at sa tooltip ay makikita niya ang "Knitting needles 5 mm", "Knitting needles 4.5 mm", atbp.
Autofill
Ang item na ito ay partikular na nauugnay para sa mga site na nagbebenta ng isang bagay online, at kailangan mong punan ang mga karaniwang form para sa pagbabayad, paghahatid, atbp. Kung bumili ang isang tao mula sa isang telepono, malamang na wala siyang oras upang makapunta sa isang computer, na nangangahulugan na ang proseso ng pagbili ay dapat gawin nang mabilis at maginhawa hangga't maaari.
Para dito, ang mga form ay maaaring naglalaman ng napunan na data, maaari kang gumamit sa pinakasikat na mga sagot. Halimbawa, ilagay ang petsa ngayon, paraan ng pagbabayad ng cash, lungsod kung nagtatrabaho ka sa parehong rehiyon. Maaaring baguhin ang mga ito, ngunit kung maabot mo ang target, mase-save ang oras ng user.
Lahat ay nabasa, lahat ay tinitingnan
Kapag nagdidisenyo ng mobile na bersyon ng site, tandaan na ang mga telepono ng lahat ay magkakaiba, at gayundin ang kanilang paningin. Marahil ay titingnan ang iyong site mula sa isang maliit na screen, kaya ang mga font ay dapat na simple at nababasa, ang mga pindutan ay dapat sapat na malaki upang sila ay ma-click nang hindi dinadala sa isa pang pahina, at ang mga imahe ay dapat bumukas nang hiwalay, malaki, lalo na kapag napupunta ito sa Internet. tindahan.
Ilang istatistika
Sa pagsasalita tungkol sa pag-adapt ng site sa mga mobile device, hindi maiiwasang gumamit ng mga istatistika upang maunawaan kung gaano kahalaga ang prosesong ito para saonline na promosyon.
Ang mga numero ay ang mga sumusunod. Ngayon, ang mga gadget ay ginagamit ng 87% ng populasyon, tila, maliban sa pinakamaliliit na bata at ilang matatandang tao. Hinuhulaan ng mga ekonomista na lalago ng 100 beses ang mobile commerce sa susunod na 5 taon. Kasabay nito, 21% lang ng mga site ang iniangkop upang gumana sa mga mobile device. Nangangahulugan ito na isang maliit na ika-5 bahagi lamang ng trapiko sa Internet at ang e-commerce market ang okupado.
Pag-isipan ang mga numerong ito. Makatuwiran ba na iakma ang iyong mapagkukunan? Oo naman. Bukod dito, habang napakaraming espasyo sa market na ito, maaari mong ukit ang sarili mong segment dito.
Kung saan kailangan mo ng mobile na bersyon
Ang paggamit ng mobile na bersyon ay makatuwiran para sa anumang platform na naglalayong makakuha ng mataas na ranggo. Pagkatapos ng lahat, ito ay direktang epekto sa user, na lumilikha ng mga kumportableng kondisyon para manatili siya sa iyong site.
Hindi maaaring umiral nang walang mobile na bersyon:
- mga portal ng balita, dahil karamihan sa mga ito ay tinitingnan mula sa telepono habang papunta sa trabaho o paaralan;
- social network - para sa parehong dahilan, at mayroong isang online na kadahilanan ng komunikasyon, na nangangahulugang isang maginhawa, naiintindihan na chat ang dapat gawin para dito;
- reference, navigational site, atbp., kung saan pumupunta ang mga tao kapag may hinahanap sila;
- mga online na tindahan - isang pagkakataon upang maakit ang mga customer na hindi nag-aaksaya ng oras sa pamimili, ngunit binibili ang lahat sa pamamagitan ng mobile Internet.
Sa halip na isang konklusyon
Ngayon, ang mga teknolohiya sa mobile ay nasaaktibong paglago at pag-unlad, samakatuwid, nagsusumikap para sa pamumuno sa merkado, dapat tiyakin ng anumang kumpanya na ang mapagkukunan ng Internet nito ay nakakatugon sa mga kinakailangan. Dahil sa dumaraming pangangailangan ng user, kailangang patuloy na i-upgrade at iakma ang mga site sa iba't ibang device. Malinaw na kung ang isang tao ay hindi maginhawa na maging sa isang partikular na mapagkukunan, hindi siya makakakuha ng impormasyon tungkol sa isang produkto o presyo doon, maglagay ng isang order, alamin ang tungkol sa paghahatid, pagkatapos ay mahahanap niya ang site kung saan ang lahat ng ito ay magiging posible. Samakatuwid, upang manalo sa kumpetisyon, mahalagang magkaroon ng flexible, maginhawa, functional at kawili-wiling mapagkukunan.
Ang mobile na bersyon ng Android o Ios website ay makakatulong upang gawin ito. Upang gawin ito, kailangan mong pumili ng isa sa mga pamamaraan sa muling pagdidisenyo sa itaas - isang adaptive na template, paggawa ng bagong site sa isang subdomain at pag-redirect dito, gamit ang mga libreng template, o paggawa ng mobile application na magpapadali para sa user na makapasok at nasa page.
Ang diskarteng ito ay hindi lamang makakatulong na mapanatili ang katapatan ng mga umiiral nang customer, ngunit magbibigay din ito ng pagkakataong makahikayat ng mga bagong bisita.
