Өнөөдөр ихэнх хүмүүс таблет, гар утас гэх мэт гар утасны хэрэгслээр онлайнаар холбогддог, энэ талаар вэбсайтын оновчлол нь шинэ түвшинд хүрч байна. Хэрэв хэрэглэгч орж ирээд сайтыг хөдөлгөөнт төхөөрөмжид тохируулаагүй болохыг харвал: зургийг харах боломжгүй, товчлуурууд нь нүүсэн, фонтууд нь жижиг, унших боломжгүй, дизайн нь хазайсан - 100% -ийн 99 нь гарах болно. өөр илүү тохиромжтойг хайж эхлээрэй. Хайлтын робот нь нөөц нь хамааралгүй, өөрөөр хэлбэл хайлтын асуулгад тохирохгүй байгаа нүдийг шалгах болно. Тиймээс хуудасны дизайн нь янз бүрийн хөдөлгөөнт төхөөрөмжид тохирсон байх ёстой. Сайтын гар утасны хувилбар гэж юу вэ, үүнийг хэрхэн хийх вэ, үүнийг ашиглах хамгийн сайн арга юу вэ? Энэ нийтлэлээс дэлгэрэнгүй уншина уу.
Тиймээс сайтаа гар утсанд ээлтэй болгох дөрвөн үндсэн арга бий.
Нэгдүгээр арга - Хариуцлагатай дизайн
Responsive загварууд нь дэлгэцийн хэмжээнээс хамааран сайтын зургийг өөрчилдөг. Дүрмээр бол тэдгээрийг 1600, 1500, 1280, 1100, 1024, 980 пикселийн стандартаар тохируулдаг. Хэрэгжүүлэхийн тулд CSS3 Media Queries ашигладаг. Сайтын дизайн өөрөө өөрчлөгдөхгүй.
Энэ аргын давуу талууд нь:
- тохиромжтой хөгжүүлэлт,Бүтэц нь өөрөө дэлгэцийн параметрт дасан зохицдог тул аливаа шинэчлэлт нь дизайныг эхнээс нь боловсруулах шаардлагагүй тул CSS болон HTML-г өөрчлөхөд хангалттай;
- нэг URL – хэрэглэгч хэд хэдэн нэрийг санах шаардлагагүй, дахин чиглүүлэх (нэг хаягаас нөгөө хаяг руу чиглүүлэх) шаардлагагүй бөгөөд энэ нь вэбмастерын ажлыг хүндрүүлдэг бөгөөд хайлт хийхэд хялбар байдаг. нэг хаягтай нөөцийг эрэмбэлэх, эрэмбэлэх хөдөлгүүр.
Мэдээжийн хэрэг, дасан зохицох загварууд нь давуу талуудаас илүү сул талуудтай байдаг. Гэсэн хэдий ч олон хөгжүүлэгчид энэ үзэл баримтлалыг баримталдаг, жишээлбэл, сайтын гар утасны хувилбар нь дасан зохицох загвартай Google корпораци. Тиймээс сул талууд:
- Responsive дизайн нь компьютер дээрхтэй адил гар утсан дээрх ажлуудыг дэмждэггүй. Хэрэв энэ нь жишээлбэл, валютын ханш эсвэл хамгийн ойрын АТМ-ийн талаарх мэдээлэл нь хэрэглэгчдэд илүү чухал байх магадлалтай банкны вэбсайтын гар утасны хувилбар юм бол энэ загвар нь хангалттай юм. Гэхдээ хэрэв энэ нь олон хэсэг, дэд хэсгүүдээс бүрдсэн нарийн төвөгтэй бүтэцтэй эх сурвалж юм бол зочдод дасан зохицох зохион байгуулалт таалагдахгүй байх болно.
- Удаан ачаалах нь дуртай сайтыг үзэн ядсан сайт болгон хувиргадаг. Энэ нь ялангуяа хөдөлгөөнт дүрс, видео, попап болон бусад идэвхтэй элементүүд элбэг байдаг нөөцийн хувьд үнэн юм. Маш их жинтэй тул хуудас зүгээр л удааширч, хэрэглэгч уурлаж, орхиж, сайтын хайлтын байрлал буурах болно.
- Мобайл хувилбарыг унтрааж чадахгүй байгаа нь бас нэг чухал дутагдал юм. Хэрэв зарим элемент ийм зохион байгуулалтаар далдлагдсан бол таТа үүнийг унтрааж, ердийн домайн руу сэлгэх боломжтой сайтуудаас ялгаатай нь нээхийн тулд юу ч хийж чадахгүй.
Гэсэн хэдий ч сайтын ийм гар утасны хувилбар нь тусгай ур чадвар, зардалгүйгээр хурдан хугацаанд нөөцийг ямар ч хэрэгсэлд тохируулах боломжийг олгодог. Гэхдээ жагсаасан дутагдлуудыг харгалзан үзэхэд энэ нь нарийн төвөгтэй навигаци, хөдөлгөөнт дүрсгүй, хамгийн бага мэдээлэл, мультимедиа бүхий жижиг, энгийн нөөцөд тохирох болно. Нарийн төвөгтэй сайтын хувьд өөр 2 арга тохиромжтой.
Хоёр дахь арга - сайтын тусдаа хувилбар
Энэ арга нь маш түгээмэл бөгөөд мобайл төхөөрөмж дээр сайтыг илүү унших боломжтой болгоход амжилттай байдаг. Үүний мөн чанар нь програмд зориулж зурсан, тусдаа URL эсвэл дэд домайн, жишээлбэл, m.vk.com дээр байрлах хуудасны тусдаа хувилбарыг бий болгох явдал юм. Үүний зэрэгцээ үндсэн функц нь хадгалагдан үлдсэн бөгөөд сайтын загвар нь зүгээр л өөр харагдаж байна. Энэ аргын давуу тал нь ойлгомжтой:
- хэрэглэгчдэд ээлтэй интерфэйс;
- хувилбар нь үндсэн эх сурвалжаас тусдаа байгаа тул өөрчлөх, засварлахад хялбар;
- бага жинтэй тул сайтын тусдаа хувилбар нь дасан зохицох загвараас хамаагүй хурдан ажилладаг;
- ихэнхдээ гар утаснаасаа хуудасны үндсэн хувилбар руу орох боломжтой.
Гэхдээ энд бас сул талууд байсан:
- Олон хаяг - сайтын ширээний болон гар утасны хувилбар. Хэрэглэгчид хоёр сонголтыг хэрхэн санаж байх вэ? Вэб мастерууд ихэвчлэн ширээний хувилбараас гар утасны хувилбар руу чиглүүлэх (дахин чиглүүлэх) зааж өгдөг, гэхдээ хэрэв энэ хуудас гар утсан дээр байгаа бол.хувилбар байхгүй бол хэрэглэгч алдаа хүлээн авах болно. Энд хайлтын системд 2 ижил нөөцийг эрэмбэлэхэд бэрхшээлтэй тулгардаг бөгөөд энэ нь сурталчилгаанд шууд нөлөөлдөг.
- Компьютерээс сайтын гар утасны хувилбар нь хэрэглэгч санамсаргүйгээр зочилсон тохиолдолд инээдтэй харагдах бөгөөд энэ нь замын хөдөлгөөнд нөлөөлж болзошгүй.
- Энэ хувилбар нь ихэвчлэн десктопын хувьд маш хязгаарлагдмал байдаг тул хэрэглэгч маш хязгаарлагдмал функцтэй байх болно. Гэхдээ үүнтэй зэрэгцэн ямар нэг зүйл дутуу байвал зочин хуудасны бүтэн хувилбар руу очих боломжтой.
Ерөнхийдөө гар утасны тусдаа сайт нь өөрийгөө зөвтгөдөг бөгөөд гар утасны төхөөрөмжид зориулсан нөөцийг тохируулах хамгийн түгээмэл арга юм. Энэ нь Amazon зэрэг томоохон онлайн дэлгүүрүүдэд алдартай.
Гурав дахь арга - RESS дизайн
Google хайлтын систем нь гар утасны дизайны энэ чиглэлийг идэвхтэй дэмждэг. Энэ нь сайтыг утас, таблет дээр тохируулах хамгийн төвөгтэй, өртөг өндөртэй боловч үр дүнтэй арга юм. Үүнийг RESS гэж нэрлэдэг. Энэ нь төхөөрөмж тус бүрд тусад нь татаж авах боломжтой гар утасны програм руу нөөцийг чиглүүлж байна. Android-д - GooglePlay-тэй, Apple-д - iTunes-тэй.
Ийм төрлийн программууд нь хурдан, үнэ төлбөргүй, тохиромжтой, төрөл бүрийн мэдээллийг багтаах чадвартай, харин утасны санах ой болон интернетийн урсгалыг хөтчөөр дамжуулан сайтад зочилж байгаа шиг иддэггүй. Холбоос нь үргэлж дэлгэцэн дээр байх тул хөтчийн хаягийн мөрөнд нарийн төвөгтэй нэр оруулах шаардлагагүй тул тэдгээрт хандахад хялбар байдаг.
Мэдээж энд бас байдагхөгжлийн нарийн төвөгтэй байдал, олон тооны програмистуудын хөдөлмөрийн өндөр өртөг, хэд хэдэн байршлын хувилбаруудыг хийх хэрэгцээ гэх мэт дутагдалтай талууд. Заримдаа хөдөлгөөнт төхөөрөмж нь програмаар танигддаггүй. Тогтмол техникийн дэмжлэг үзүүлэх, дутагдлыг засах шаардлагатай. Гэсэн хэдий ч энэ сонголт нь бүтээмжтэй, тасралтгүй ажилладаг тул санал болгож буй гурваас хамгийн шилдэг нь гэж тооцогддог.
Мобайл вэб сайт хийх хамгийн хямд арга
Дээрх бүх аргууд нь үргэлж урт бөгөөд хэцүү биш боловч вэбмастерын цалинтай ажлыг багтаадаг. Хэрэв та ийм хөгжүүлэлтийг яаралтай хийх шаардлагагүй гэж үзвэл сайтын энгийн бөгөөд үнэгүй гар утасны хувилбар танд тохирох болно. Үүнийг хийх хамгийн хялбар арга юу вэ?
Мэдрэмжтэй дизайн хийхэд зориулсан тусгай загваруудыг (залаас) татаж авна уу. Жишээлбэл, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile болон бусад. Тэд сайтыг утсан дээр илүү зөв харуулахад туслах бөгөөд та хуудсыг мобайл хувилбарт илүү сайн тохируулахын тулд юуг засах хэрэгтэй талаар цөөн хэдэн зөвлөгөө авах болно.
Мэдээж энэ арга нь ноцтой нөөцөд тохиромжгүй. Үүний оронд энэ үнэгүй функц нь жижиг, энгийн сайтууд, блогууд, мэдээ мэдээллийн хэрэгслүүдэд зориулагдсан болно. Google хайлтын систем, мөн Yandex нь өнөөдөр гар утасны хувилбаруудад ноцтой шаардлага тавьж байгаа тул энэ аргыг ашиглан байр сууриа бууруулах асар их боломж байгааг бүү мартаарай.
Энэ аргын тусламжтайгаар зар сурталчилгаа болон попап цонхыг таслах магадлалтай.баннер, гэхдээ хуудас хурдан бөгөөд "хоцролгүй" ачаалах болно.
Мобайл хувилбар үүсгэх зарчим
Сайтын гар утасны хувилбар нь үнэ төлбөргүй эсвэл вэбмастеруудын тусламжтайгаар хийгдсэн эсэх нь хамаагүй, үүнийг RESS систем дээр хийсэн эсвэл дасан зохицох загвар ашиглан хийсэн. Хамгийн чухал нь үр дүнтэй ажиллахын тулд хэд хэдэн чухал зарчмуудыг дагаж мөрдөх шаардлагатай. Тэгэхээр сайтын гар утасны хувилбар ямар байх ёстой вэ? Үүнийг хэрхэн бүтээмжтэй, үр ашигтай, үр дүнтэй болгох вэ?
Шаардлагагүй бүх зүйлийг устгана
Минимализм бол сайтын мобайл хувилбарыг хөгжүүлэгчид хичээх ёстой зүйл юм. Өнгө, товчлуур, баннераар дүүрэн, шаардлагатай материалыг хайж олохын тулд эцэс төгсгөлгүй гүйлгэх шаардлагатай мэдээллийг олж авахад хичнээн хэцүү болохыг төсөөлөөд үз дээ. Гар утасны загвар нь энгийн бөгөөд цэвэрхэн байх ёстой. Орон зайг хуваахын тулд 2-3 өнгө сонгох хэрэгтэй (жишээлбэл, бренд). Тэдний нэг нь цагаан өнгөтэй байвал дээр. Жижиг дэлгэцийн орон зайг ойлгомжтой, унших боломжтой бүсэд хуваа. Виртуал түлхүүрүүд нь харагдахуйц байх ёстой бөгөөд ингэснээр хэрэглэгч хаана дарж, харахаа тодорхой мэддэг байх ёстой - энд бүтээгдэхүүн, энд өгөгдөл бөглөх маягт, хүргэлт, төлбөрийн мэдээлэл энд байна.
Ширээний хувилбарт хэрэг болох, хэрэглэгчийн амьдралыг хөнгөвчлөх бүх нэмэлт сонголтууд энд зөвхөн хүндрэл авчрах болно. Зөвхөн хамгийн чухал элементүүдийг үлдээгээрэй. Хөдөлгөөнт дүрс, сурталчилгааны баннер, мультимедиа нь сайт эсвэл програмын ажлыг удаашруулж, анхаарал сарниулах магадлалтай.үндсэн.
Зохицуулах
Тэгшүүлэх асуудал тийм ч хурц биш, учир нь буруу хийсэн тохиолдолд хэрэглэгч зөвхөн чухал үгсийн төгсгөлийг авах болно. Зүүн болон босоо байрлалыг ерөнхийд нь хүлээн зөвшөөрдөг. Өөрийгөө утсан дээрх мэдээний сувгийг гүйлгэж байна гэж төсөөлөөд үз дээ. Та үүнийг баруун эсвэл зүүн тийш биш дээрээс доош хийнэ.
Нэгдэх
Шилжилтийн урт гинжин хэлхээ байхгүй үед хэд хэдэн алхамыг нэг алхам болгон нэгтгэхийг хичээ. Жишээлбэл, сайт нь хэд хэдэн үе шаттайгаар өгөгдөл оруулахыг шаарддаг - нэр, дараа нь хаяг, тусдаа нүд бүрт тусдаа байшин, гудамж, орон сууц гэх мэт. Хэрэглэгчийг олон жижиг нүдийг цохихыг оролдохгүй байхын тулд., түүнээс зөвхөн 2 - нэр, хаягийг бөглөхийг хүс.
Ба салгах
Заримдаа эсрэгээрээ хэт их мэдээллийг салгах шаардлага гардаг. Жишээлбэл, унадаг цэсэнд хүргэлт хийгддэг 80 гаруй хотын жагсаалт байдаг. Хэрэглэгч энэ том жагсаалтыг гүйлгэх шаардлагагүй болгохын тулд тэдгээрийг бүс нутгаар бүлэглээрэй. Түүнийг бүсийн төв эсвэл бүс нутаг дээр аваачихад өөр хотуудын жагсаалт хасагдана.
Жагсаалт
Дашрамд хэлэхэд жагсаалтын тухай. Тэдгээрийн хоёр нь цагаан толгойн үсгийн дарааллаар эсвэл өөр дарааллаар, орлуулалттай байдаг. Тэдний сонголт юуг жагсаахаас хамаарна.
Хэрэв хэрэглэгч яг юу хайж байгаагаа мэдэж байвал энэ нь ашигтай. Жишээлбэл, хот, дугаар эсвэл огноо. Хоёрдахь сонголт нь урт нарийн төвөгтэй нэрс эсвэл нэг төрлийн олон хувилбартай тохиолдолд тохиромжтойижил нэртэй бөгөөд унадаг жагсаалт бүр нь хэрэглэгчийг зорилгодоо нэг алхам ойртуулдаг. Зочдод тусламж хэрэгтэй үед автоматаар орлуулах сонголтыг ихэвчлэн ашигладаг. Жишээлбэл, сүлжмэлийн сайт нь сүлжмэлийн зүү худалдаж авахыг санал болгодог. Хэрэглэгч "Метал сүлжмэлийн зүү" гэсэн хайлтын асуулгад орж, зааварт "Нэхмэлийн зүү 5 мм", "Нэхмэлийн зүү 4.5 мм" гэх мэтийг харна.
Автоматаар бөглөх
Энэ зүйл нь онлайнаар ямар нэгэн зүйл зардаг сайтуудад онцгой хамаатай бөгөөд та төлбөр тооцоо, хүргэлт гэх мэт стандарт маягтуудыг бөглөх хэрэгтэй. Хэрэв хүн утаснаас худалдан авалт хийсэн бол түүнд цаг зав гарахгүй байх магадлалтай. компьютерт хүрэхийн тулд, энэ нь худалдан авалтыг аль болох хурдан бөгөөд хялбар хийх ёстой гэсэн үг юм.
Үүний тулд маягтууд аль хэдийн бөглөсөн өгөгдөл агуулсан байж магадгүй тул та хамгийн түгээмэл хариултуудыг ашиглаж болно. Жишээлбэл, хэрэв та нэг бүс нутагт ажиллаж байгаа бол өнөөдрийн огноо, бэлэн мөнгө төлөх арга, хот зэргийг оруулна уу. Тэдгээрийг өөрчилж болно, гэхдээ хэрэв та зорилтот түвшинд хүрсэн бол хэрэглэгчийн цагийг хэмнэх болно.
Бүх зүйл уншигдаж, бүх зүйл харагдаж байна
Сайтын гар утасны хувилбарыг зохиохдоо хүн бүрийн гар утас өөр өөр байдгаас гадна нүдний хараа ч өөр байдгийг санаарай. Магадгүй таны сайт жижиг дэлгэцээс харагдах тул фонтууд нь энгийн бөгөөд уншигдахуйц байх ёстой, товчлуурууд нь өөр хуудас руу шилжихгүйгээр дарахад хангалттай том байх ёстой бөгөөд зургууд нь тусад нь, ялангуяа том хэмжээтэй байх ёстой. Энэ нь интернетэд ирдэг. дэлгүүр.
Зарим статистик
Сайтыг мобайл төхөөрөмжид дасан зохицох тухай ярихад энэ үйл явц хэр чухал болохыг ойлгохын тулд статистик мэдээлэлд хандахаас өөр аргагүй.онлайн сурталчилгаа.
Тоонууд дараах байдалтай байна. Өнөөдөр гаджетыг хүн амын 87% нь бага насны хүүхдүүд болон зарим өндөр настангуудыг эс тооцвол ашигладаг бололтой. Ирэх 5 жилд гар утасны худалдаа 100 дахин өснө гэж эдийн засагчид таамаглаж байна. Үүний зэрэгцээ сайтуудын зөвхөн 21% нь хөдөлгөөнт төхөөрөмжтэй ажиллахад тохирсон байдаг. Энэ нь интернэт траффик болон цахим худалдааны зах зээлийн дөнгөж 5-ны багахан хэсгийг эзэлдэг гэсэн үг.
Эдгээр тоог бодоорой. Өөрийн нөөцийг тохируулах нь утга учиртай юу? Мэдээж хэрэг тийм. Түүгээр ч зогсохгүй энэ зах зээлд маш их орон зай байгаа ч та өөрийн гэсэн сегментийг энд сийлж болно.
Танд гар утасны хувилбар хэрэгтэй байгаа газар
Мобайл хувилбарыг ашиглах нь өндөр зэрэглэл тогтоох зорилготой аливаа платформд утга учиртай. Эцсийн эцэст энэ нь хэрэглэгчдэд шууд нөлөөлж, таны сайтад үлдэх тав тухтай нөхцлийг бүрдүүлдэг.
Мобайл хувилбаргүйгээр байж болохгүй:
- мэдээний порталууд, учир нь ихэнх нь ажил, сургууль руугаа явах замдаа утаснаасаа хардаг;
- нийгмийн сүлжээ - ижил шалтгаанаар, мөн онлайн харилцааны хүчин зүйл байдаг бөгөөд энэ нь тохиромжтой, ойлгомжтой чат үүсгэх ёстой гэсэн үг юм;
- хүмүүс ямар нэг зүйл хайж байхдаа очдог лавлагаа, навигацийн сайт гэх мэт;
- онлайн дэлгүүрүүд - дэлгүүр хэсэх цаг заваа үрэхгүй, харин гар утасны интернетээр бүх зүйлийг худалдаж авдаг үйлчлүүлэгчдийг татах боломж.
Дүгнэлтийн оронд
Өнөөдөр гар утасны технологиудидэвхтэй өсөлт, хөгжил, тиймээс зах зээлд манлайлахыг эрмэлзэж буй аливаа компани интернетийн нөөц нь шаардлагад нийцэж байгаа эсэхийг баталгаажуулах ёстой. Хэрэглэгчийн өсөн нэмэгдэж буй эрэлт хэрэгцээний улмаас сайтууд байнга шинэчлэгдэж, өөр өөр төхөөрөмжид дасан зохицох шаардлагатай болдог. Хэрэв хүн тодорхой эх сурвалж дээр ажиллахад тохиромжгүй бол тэнд бүтээгдэхүүн, үнийн талаар мэдээлэл авч чадахгүй, захиалга өгөх, хүргэлтийн талаар олж мэдэх боломжгүй бол энэ бүхэн боломжтой болох сайтыг олох нь ойлгомжтой. Тиймээс тэмцээнд түрүүлэхийн тулд уян хатан, тохиромжтой, ажиллагаатай, сонирхолтой нөөцтэй байх нь чухал.
Android эсвэл Ios вэб сайтын гар утасны хувилбар нь үүнийг хийхэд тусална. Үүнийг хийхийн тулд та дээрх дахин дизайны аргуудын аль нэгийг сонгох хэрэгтэй - дасан зохицох загвар, дэд домайн дээр шинэ сайт үүсгэж, түүн рүү дахин чиглүүлэх, үнэгүй загвар ашиглах, эсвэл хэрэглэгчдэд нэвтрэхэд хялбар болгох мобайл програм үүсгэх. мөн хуудсанд байгаарай.
Энэ арга нь одоо байгаа үйлчлүүлэгчдийн үнэнч байдлыг хадгалахад туслах төдийгүй шинэ зочдыг татах боломжийг олгоно.
