sushiandbox.ru Компьютер эзэмших - Интернет. Skype. Нийгмийн сүлжээ. Windows дээрх хичээлүүд.
Унших хугацаа: 18 минут
Бид танд материалыг илгээх болно:
Хэрэв таны сайт мобайл төхөөрөмжид тохируулагдаагүй бол санаа зовох зүйл байхгүй, гэхдээ Yandex хайлтын системд ийм дасан зохицсон сайтуудыг илүү өндөрт эрэмбэлдэг.
Энэ нийтлэлээс та дараахь зүйлийг сурах болно.
- Хөдөлгөөнт төхөөрөмжид сайтын дасан зохицох нь юу вэ
- Үүнийг яаж шалгах вэ
- Google-д зориулсан сайтын дасан зохицох
- Сайтыг өөрөө өөртөө тохируулах
- Wordpress-т зориулсан хамгийн сайн, үнэгүй залгаас
- Онлайнаар мобайл төхөөрөмжид зориулсан вэбсайтад дасан зохицох шилдэг 6 үйлчилгээ
Яагаад хөдөлгөөнт дасан зохицох шаардлагатай байна вэ?
Тэдгээрийг нөхцөлт байдлаар гадаад ба дотоод гэж хуваадаг. Өөрөөр хэлбэл, гадны PFs нь жишээ нь, үр дүнгээс сайт руу орох холбоос дээр дарах явдал юм Хайлтын үр дүн, үзсэн хуудасны тоо, сайтад зарцуулсан нийт хугацаа нь дотоод байна.
Google ижил төстэй системийг ашигладаг болохыг анхаарна уу. Гэхдээ энэ хайлтын систем нь улам бүр урагшилж, сайтын гар утасны төхөөрөмжид дасан зохицсон нөөцүүд хайлтын үр дүнд илүү өндөр гарч ирнэ гэж мэдэгдэв.
Дараа нь бид дотоод PF-ийн талаар ярих болно. Өөрийгөө бодоод үзээрэй, хэрэв зочдод сайттай ажиллах, түүн дээр бүтээгдэхүүн хайж олох, захиалах нь тохиромжтой бол тэр үйлчлүүлэгчдийн ангилалд шилжих магадлал өндөр байдаг.
Үүнтэй ижил зарчим ажилладаг Хайлтын системүүд: үүн дээр байх эхний секундэд илүү олон зочид нөөцийг орхих тусам хүмүүсийн шаардлагад нийцэж байгаа үзүүлэлт бага байх болно. 10 секундээс бага хугацаатай хэрэглэгчийн сессийг сайтад зочилсон нийт тоонд харьцуулсан харьцааг bounce rate гэж нэрлэдэг.
Жишээлбэл, Оросын нэг сайтын энэ үзүүлэлтийг авч үзье.
Хэрэв сайтыг хөдөлгөөнт төхөөрөмжид тохируулаагүй, өөрөөр хэлбэл сайтыг буруу харуулсан бол ухаалаг утас, таблетаас гарах хурд нь компьютерээс 2-2.5 дахин их байна.
Эдгээр тоо баримтууд нь PF-ийн түвшинд сөргөөр нөлөөлөөд зогсохгүй үйлчилгээ, барааг бодитоор төлж чадах боломжит худалдан авагчдыг алдаж байгааг харуулж байна.
Зөвшөөрч байна, хэрэглээний давтамж нэмэгдэж байна гар утасны интернетүнэхээр гайхалтай. Хөдөлгөөнт төхөөрөмж ашиглан ямар ч эх сурвалж дээр зочдын эзлэх хувийг хялбархан олж мэдэх боломжтой Google Analytics. Энэ үзүүлэлтийг харахын тулд та дараах алхмуудыг хийх хэрэгтэй.
Хайлтын системүүд таблет болон бусад төхөөрөмжүүдийн хэрэглэгчдийн тав тухыг үргэлж анхаарч үздэг нь нууц биш бөгөөд хэрэв та сайтыг хөдөлгөөнт төхөөрөмжид тохируулахаас татгалзвал замын хөдөлгөөнгүй үлдэх эрсдэлтэй гэсэн үг юм.
Энэ алдаанаас болж маш олон хэрэглэгчид таныг үүрд орхих болно гэдгийг Equation Research-ийн судалгаагаар нотолсон гэдгийг санаарай. Хүмүүсийн 46% нь гар утасны төхөөрөмжтэй ажиллахад сэтгэл хангалуун бус байгаа сайтад зочлохоо больсон болохыг мэргэжилтнүүд олж мэдэв.
Таны ойлгож байгаагаар, үр дүнд нь гунигтай үр дагавар таныг хүлээж байна: нөөцийн бүтээмжийн түвшин тасралтгүй буурах болно, учир нь аль хэдийн хуримтлагдсан үзэгчид ухаалаг утас эсвэл таблетаас хандаж, харилцах, захиалга өгөх, мэдээллийн товхимол хүлээн авах боломжгүй болно. , гэх мэт.
Хэрэв та энэхүү үйл явдлын хөгжилд сэтгэл хангалуун бус байвал сайтыг хөдөлгөөнт төхөөрөмжид тохируулахыг танд зөвлөж байна.
Аль нь илүү дээр вэ - мэдрэмжтэй дизайн эсвэл гар утасны хувилбар
Эхлээд эдгээр хоёр ойлголтын ялгааг ойлгоцгооё.
Хариуцлагатай дизайн нь зөвхөн тухайн сайтад хэрэглэгчийн хүссэн төхөөрөмжөөс зохих ёсоор харагдахуйц харагдах байдлыг бий болгоход ашиглагддаг.
Харин гар утасны хувилбар нь үндсэндээ шинэ хувилбар, ашиглан сайтын хэрэглэгчдийн хэрэгцээг хангах зорилгоор тусгайлан зохион бүтээсэн зөөврийн төхөөрөмжүүд. Одоо хоёулангийнх нь талаар илүү дэлгэрэнгүй ярилцъя.
Дасан зохицох загвар
Энэ сонголт нь бага хэмжээний хөрөнгө оруулалт хийснээр сайтыг гаджетаас ашиглан зочдод ээлтэй болгох боломжийг олгодог.
Үнэн хэрэгтээ сайтыг хөдөлгөөнт төхөөрөмжид тохируулахдаа хуудасны хэмжээ, хэмжээ бүхий сайтын элементүүдийн энгийн хослол байдаг. тусгай төхөөрөмж. Үүний үр дүнд ийм сайтуудыг ашиглахад хялбар байдаг, гэхдээ та тэдгээрийн дутагдлыг мэдэж байх хэрэгтэй.
Юуны өмнө энэ нь ачаалагдсан хуудасны хэмжээ юм. Хэдийгээр энэ нь хөдөлгөөнт төхөөрөмж дээр харагдах боловч жин нь хэвээр байх болно. Үүнээс болж гар утасны интернетийн хурд нь утастай интернетээс бага байдаг тул хэрэглэгч хүлээхээс залхаж, табыг хаадаг тул хуудсыг ачаалахад удаан хугацаа шаардагдана.
гар утасны хувилбар
Гар утасны хувилбар нь ихэвчлэн үндсэн дэд домайн дээр байрладаг: m.site.ru, mobile.site.ru. Хэрэв бид SEO-ийн үүднээс ярих юм бол энэ функцийг эерэгээр тодорхойлоход хэцүү байдаг, учир нь энэ тохиолдолд үндсэн хувилбараас гар утасны хувилбар руу олон нөхцөлт чиглүүлэлтүүдийг ашигладаг. Эцсийн эцэст хайлтын системийн үүднээс site.ru/page болон m.site.ru/page нь өөр өөр хуудас хэвээр байна.
Хөдөлгөөнт хувилбар нь дасан зохицох загвартай харьцуулахад жин багатай, илүү хурдан ачаалагддаг тул шаардлагагүй функцуудыг энд устгаж, бие даасан дизайн нь сайттай харилцах ажлыг хөнгөвчлөх болно гэдгийг хэлэх нь зүйтэй болов уу.
Мэдээжийн хэрэг, энэ хувилбар нь өмнөх хувилбараас илүү үнэтэй байх болно. Сонголтуудын алинд нь давуу эрх олгохоо сонгоход хялбар болгохын тулд бид тэдгээрийн онцлогуудыг онцлон тэмдэглэв.
- Жижиг сайтыг хөдөлгөөнт төхөөрөмжид дасан зохицох нь утгагүй юм, жишээлбэл, бид гоо сайхны салоны сайтын тухай ярьж байгаа бол ердийн дасан зохицох нь хангалттай.
- Хөдөлгөөнт хувилбарт ачаалах боломжтой олон хуудас бүхий хүчирхэг сайт хэрэгтэй болно. Энэ сонголт нь өдөрт хэдэн мянган хүн үздэг онлайн хэвлэл мэдээллийн хэрэгсэлд хамааралтай болно.
Өөрөөр хэлбэл, сонголт хийхдээ боломж, хэрэгцээг харгалзан үзэх ёстой. Эдгээр хоёр сонголт нь үнээс үл хамааран хөрвүүлэхэд бүрэн байхгүй байснаас хамаагүй илүү ашигтай болохыг бид онцолж байна.
Сайтын мобайл төхөөрөмжид дасан зохицох нь танд юу өгөх вэ?
, "хүнд" гэрэл зураг байхгүй тул флэш, нэмэлт элементүүддизайн. 
Өргөдлөө илгээнэ үү
Хөдөлгөөнт төхөөрөмжүүдийн вэбсайтын хариу урвалыг хэрхэн шалгах вэ
Хөдөлгөөнт төхөөрөмжид зориулсан сайтын дасан зохицох байдлыг шалгаж байгаа бөгөөд энэ нь та үүнийг харах болно янз бүрийн төхөөрөмжүүд, дараах байдлаар хийж болно.
- Quirktools.
Эндээс та сайт янз бүрийн хэрэгслийн дэлгэц дээр хэрхэн харагдахыг харж болно. Порталыг ашиглаж эхлэхийн тулд хаягийн мөрөнд порталын URL-г оруулаад хэвтээ цэснээс шаардлагатай төхөөрөмжийг сонгоход хангалттай.
- ipadpeek.
Энэ нь iPad, iPhone дээрх сайтын харагдах байдлыг шалгах боломжийг танд олгоно.
- F12.
Үргэлж хамгийн хялбар сонголт бол стандарт заль мэхийг ашиглах явдал юм: F12 товчийг дараад утасны дүрс дээр дарна уу.
Google-д зориулсан мобайл төхөөрөмжид зориулсан вэбсайтын тохируулга
Хэрэв та өөрийн сайтыг Google дээрх мобайл төхөөрөмжид тохируулахыг хүсвэл танд үнэгүй хэрэгсэл хэрэгтэй болно хөгжүүлэгчид.Google:
Энд та нөөцийн хаягийг оруулаад "Шинжилгээ хийх" товчийг дарах хэрэгтэй. Бидний жишээн дээр гар утасны хэрэглээний оноо 100% -ийн 49% байна.
Мөн сайтыг хөдөлгөөнт төхөөрөмжид тохируулахын тулд юуг өөрчлөх шаардлагатай талаар зөвлөгөө өгдөг, энэ асуудалд хэрэгтэй холбоосууд. Эдгээр зөвлөмжийн ачаар та Google-ийн хамгийн бага оноо болох 90%-ийг хялбархан авах боломжтой.
Сайтаа гар утсанд ээлтэй болгохын тулд хийж болох зүйлс
Маягтын талбарын шинж чанаруудыг зөв тохируулна уу
Хэрэв таны сайт хэрэглэгчийн нэр/хаяг оруулах талбаруудыг ашигладаг бол автоматаар засах сонголтыг цуцалж, автоматаар том үсгээр бичихийг идэвхжүүлнэ үү:
Таны нэр:
Энэхүү аргын ачаар сайтыг хөдөлгөөнт төхөөрөмжид дасан зохицохдоо та T9 автоматжуулсан оролтын системийг нэрийг солихоос урьдчилан сэргийлэх болно, жишээлбэл, " Эрван"дээр " Ереван».
Үгийн төрлүүдийн эхний том үсгийн автомат хэрэглээг тохируулснаар та нөөцийн зочдыг үсгийн том үсгийг байнга асаахаас аврах болно, өөрөөр хэлбэл үсэг бүрийн эхэнд том үсгийг байрлуулах болно. үг (жишээлбэл, " Кен шатаж байна"болж хувирна Кен Бернс"):
Хэрэв таны сайт хэрэглэгчээс асуувал имэйлийн талбарыг ашиглана уу имэйлгар утасны гарнаас @ тэмдэг оруулахгүйн тулд:
Чиний имэйл:
Хөдөлгөөнт төхөөрөмжид тохирох өргөнийг тохируулна уу
Үүнийг хийхийн тулд сайтыг компьютерийнхээ хөтөч дээр нээж, текстийг унших боломжгүй болтол програмын цонхны өргөнийг багасгана уу. Энэ нь танд хамгийн бага зөвшөөрөгдсөн өргөнийг өгөх болно. Хуудасны толгойн хэсэгт мета шошгыг тохируулснаар энэ одоогийн утгыг @viewport шинж чанарт тохируулна уу:
Хэрэв та мобайл төхөөрөмжөөс сайт руу дахин орох юм бол таны заасан өргөн автоматаар сонгогдох болно, өөрөөр хэлбэл нөөцийн зочин томруулахыг албадахгүй.
Доорх зурган дээр баруун ирмэг дээр нэмэлт зай үлдсэн байна:
Энд өргөний утгыг зөв сонгосон:
Сайт нь шингэний байршил дээр баригдсан бөгөөд бүх дэлгэцийн хэмжээтэй нийцдэг бол таны даалгавар илүү хялбар болно. Сайтыг мобайл төхөөрөмжид тохируулахын зэрэгцээ өргөнийг туршиж үзэхийг бид танд зөвлөж байна, ингэснээр та өөрийн нөөцийг сайхан харагдуулж, унших боломжтой хэвээр үлдээх болно. Сонгосон утгыг мета шошгонд тохируулна.
Зургийн өргөнийг 100% болгох
Сайтыг сонгосон өргөнд тохируулсны дараа зарим зургууд хэт өргөн байх болно гэдгийг санаарай. Өмнө нь би ийм асуудалтай тулгардаггүй байсан, учир нь ширээний дэлгэц нь нэлээд өргөн нягтаршилтай тул олон зураг өргөнтэй таарч байна:
Зургандаа хамгийн ихдээ 100% өргөнийг тохируулснаар энэ асуудлаас зайлсхийх боломжтой. Үүний ачаар хэрэв зурагнууд гаджетын дэлгэцэнд хэт том байвал автоматаар хэмжээг нь өөрчлөх болно. Доорх кодыг сайтынхаа CSS-д оруулахаа бүү мартаарай.
img (хамгийн их өргөн: 100%)
Хэрэв та дэвсгэр зургаа img хаягаас өөр зурагт тохируулсан бол арын дэвсгэр хэмжээтэй CSS шинж чанарыг агуулсан байхаар тохируулахад л хангалттай. Тиймээс дэлгэцийн нягтрал нь 100% масштабаар үзүүлэхэд хангалтгүй бол дэвсгэрийн хэмжээ өөрчлөгдөнө.
.толгой (арын дэвсгэр: url(header.png) 50% давтагдахгүй; дэвсгэрийн хэмжээ: агуулах)
Зураг нь тодорхойгүй болно гэж санаа зовох хэрэггүй - орчин үеийн хөдөлгөөнт төхөөрөмжүүд үүнийг зөвшөөрөхгүй. Баримт нь сайтын зочин томруулахыг ашиглах үед хөтөч нь зургийн тодорхой байдлыг нэмэгдүүлдэг. Гэсэн хэдий ч, таны портал томруулахыг зөвшөөрдөггүй тул мета шошгонд хэрэглэгчийн масштабтай=no шинж чанар байхгүй эсэхийг шалгах хэрэгтэй:
Оролтын талбарын өргөнийг 100% болгож тохируулах
Зургийн өргөнийг max-width шинж чанараар тохируулсны дараа оролтын талбарт ижил зүйлийг хийнэ үү. Үүнийг хийхийн тулд CSS файл руу нэмнэ үү - өөрийн сайтын файл:
оролт, текст талбар (хамгийн их өргөн:100%)
Одоо гар утасны төхөөрөмжөөс сайтыг ашиглах үед оролтын талбарууд дэлгэцээс гарахгүй.
Маягт илгээх баталгаажуулах товчийг идэвхгүй болгохдоо болгоомжтой байгаарай
Хэрэв эхний товчлуур дээр дарсны дараа илгээх ажиллагаа идэвхжихээ больсон бол маягтын илгээх товч дээр олон товшилт байхгүй болно.
Гэхдээ ширээний компьютертэй харьцуулахад хөдөлгөөнт төхөөрөмжүүд ихэвчлэн интернет холболтоо алддаг гэдгийг санаарай.
Тиймээс та товчлуурыг идэвхгүй болгосноор хэрэглэгч дахин товшихоос сэргийлж, асуудал нь сүлжээний алдагдал биш байж магадгүй юм. Тиймээс ийм төхөөрөмжийн хөтөч нь ирж буй дуудлага ирэхэд хаагдах бөгөөд бөглөсөн товчлуурын асуудал гарч ирэх болно, учир нь энэ нь маягтыг бөглөсний дараа маягтыг илгээхийг зөвшөөрөхгүй.
Хэрэв та илгээх товчийг идэвхгүй болгохоор шийдсэн бол сайтыг хөдөлгөөнт төхөөрөмжид тохируулахдаа хэдэн секундын турш үүнийг хий.
Урт мөрийн хувьд үгийн багцыг ашиглана уу
Заримдаа та урт шугам ашиглах хэрэгтэй: үүнд кодын жишээ, холбоос, банкны дансны дугаар орно. Хэрэв портал бүхэлдээ шугаманд хангалттай өргөн биш бол энэ нь гаджетын дэлгэцийн гадна байж болно:
Дэлгэцийн ирмэгт хүрэх үед мөр нь ороох энэ үгийн боолтыг зохицуул. Тиймээс сайтын зочин гүйлгэхгүйгээр бүх мэдээллийг нэг дор үзэх боломжтой болно.
Энд танд нууц үг хэрэгтэй болно:
435143a1b5fc8bb70a3aa9b10f6673a8
Орон зайд болгоомжтой байгаарай
Таван тэмдэгт бүрийг урт мөр бүрдүүлбэл зайгаар тусгаарладагт бид бүгд дассан. Эцсийн эцэст, хүн өөр программд оруулахын тулд тэдгээрийг санах нь илүү хялбар байх болно.
Гэхдээ ухаалаг хэрэглэгч өөрөө тэмдэгт оруулахыг зөвшөөрөх магадлал багатай гэдгийг бид тэмдэглэж байна - тэр санах ойн талаар мэддэг. Үнэн бол таны байрлуулсан зайг гараар устгах шаардлагатай болно. Тэдгээрийг гар утас эсвэл таблет дээр цэвэрлэхэд тохиромжтой эсэхийг анхаарч үзээрэй.
Хэрэглэгчдийн амьдралыг хөнгөвчлөхийн тулд сайтыг хөдөлгөөнт төхөөрөмжид тохируулахдаа зайг догол мөрөөр солино уу:
Таныкод:
Таны харж байгаагаар баатруудын хооронд цоорхой хэвээр байгаа боловч хуулбарлахдаа тэдгээрийг шийдвэрлэх шаардлагагүй болно. Мөн энэ нь цагийг хэмнэдэг!
Хэвлэл мэдээллийн асуулгын ашиг тус
Та мобайл төхөөрөмж дээр (эсвэл хөтчийн жижиг цонхонд) харуулах үед сайтын тусгай хэв маягийг үүсгэж болно, харин ширээний компьютер дээр вэб хуудасны танил дүр төрх хэвээр үлдэнэ. Энэ нь медиа асуулгад зорилтот хэв маягийг шаарддаг бөгөөд энд жишээ байна:
Тогтмол байрлалаас зайлсхий
Хэрэв толгой хэсэг эсвэл хажуугийн самбарыг тогтмол байрлуулж, CSS шинж чанарыг тогтмол гэж тохируулсан бол бид танд болгоомжтой байхыг зөвлөж байна.
Энэ тохиолдолд тэмдэглэгээг үүсгэх үед таны гарчгийн хэмжээ хуудастай пропорциональ өсөх болно, өөрөөр хэлбэл дэлгэцийг бүхэлд нь эзэлж магадгүй юм.
Сайтыг хөдөлгөөнт төхөөрөмжид дасан зохицох хамгийн хялбар арга бол гар утасны төхөөрөмж дээр харуулах үед тогтмол байрлалаас татгалзах явдал юм.
Энэ нь практик дээр хэрхэн ажилладагийг жишээгээр харуулав.
Стандарт фонт ашиглах
Захиалгат фонтуудын ачаар сайт нь үнэтэй, мэргэжлийн харагдаж байна. Гэхдээ үүнтэй зэрэгцэн зочид фонт бүхий файлуудыг байршуулах шаардлагатай болдог - энэ үйлдлийг хэрэглэгч сайтыг үзэхээс өмнө гүйцэтгэдэг.
Ихэвчлэн ийм файлууд нь их хэмжээний эзэлхүүнээр тодорхойлогддог, өөрөөр хэлбэл хөдөлгөөнт төхөөрөмж дээр тэдгээрийг татаж авахад удаан хугацаа шаардагдана. Порталын зочин юу үзэх вэ? Хоосон зай:
Сайтыг Google Font Loader ашиглан гар утасны төхөөрөмжид тохируулснаар захиалгат хувилбарыг ачаалж байх үед стандарт фонттой текст гарч ирнэ. Дараа нь та хуудсыг дахин үүсгэх бөгөөд зочин анх сонгосон фонтыг харна.
Гэхдээ та CSS дүрмийн хоёр хувилбарыг бичих хэрэгтэй болно: нэг нь анхдагч фонт, нөгөө нь татаж авсан фонт юм.
Надад итгээрэй, ийм шийдэл нь оновчтой байх болно: хүн фонтуудыг татаж авах үед шаардлагатай бүх зүйлийг уншиж, дараа нь дизайныг харах боломжтой болно. Дараах кодыг ашиглана уу:
Бид онцолж байна:.wf-opensans-n4-active анги сонгогч нь Фонт дуудагчаар сайтын код руу динамик байдлаар нэмэгдэх боловч зөвхөн фонт ачаалагдсан үед л нэмэгддэг.
Хэрэглэгчдэд унших боломжтой контентыг санал болгох
Ихэвчлэн хөдөлгөөнт төхөөрөмжийн хэрэглэгчид интернетийг тодорхой зорилгоор ашигладаг. Жишээлбэл, хэрэв та янз бүрийн дэлгүүрт байгаа барааны үнийг харьцуулахыг хүсч байвал салоны холбоо барих хаяг, эмийг хэрэглэх зааврыг хайж олоорой.
Тиймээс, тэд гарчигт татагдах үед таны сайт дээр гарч ирэх болно. Дараа нь жижиг дэлгэцээс уншихаар бэлтгэсэн контентыг олж мэдэх нь тэдэнд чухал юм.
Энэ дүрмийг англи хэлээр тайлбарлахын тулд "snackable" (Англи хэлнээс "snack" - snack) гэсэн нэлээд багтаамжтай үг байдаг. Тиймээс, ийм хэрэглэгчдэд зориулсан контент нь яг нарийн зууштай байх ёстой, өөрөөр хэлбэл хурдан унших, хөдөлгөөнд ороход тохиромжтой байх ёстой.
Дэлгэц уншигчдад зориулсан мобайл төхөөрөмжид зориулсан сайтыг тохируулахдаа анхаарах ёстой гол шинж чанаруудыг тоймлоё.
- Богино, товч, анхаарал татахуйц гарчигнаас эхэл.Бид танд үүнийг 10 үгэнд багтааж, том фонт ашиглахыг зөвлөж байна.
- Текстийг блок болгон хуваах, тэдгээр нь тус бүр нь ерөнхий дэвсгэрээс ялгарах богино, мэдээлэл сайтай хадмал орчуулгаар эхлэх ёстой.
- Дугаар оруулах / тэмдэглэгдсэн жагсаалтууд, таны гар утасны хэрэглэгчидХэрэгтэй зүйлээ хурдан олоход хялбар байсан.
- Харааны оруулгыг хэрэглэнэНэмэлт мэдээллийг бүтэцжүүлэх, ойлголтыг хялбарчлах.
Жижиг дэлгэцээр уншихад зориулж имэйлийг тохируулна уу
Дараах захидлын хэрэгслүүд нь мобайл төхөөрөмжийн дэлгэцээс уншихад имэйлийг тохируулахад тань туслах болно.
- MailChimp.
- Вебер.
- Байнгын холбоо барих.
Холбоосыг "товших боломжтой" товчлуураар солино уу
Хэрэглэгчид гар утасны төхөөрөмжөөс өөрт тохирохгүй сайт руу ороход л тэд өөрсдийгөө "тарган хурууны синдром" гэж оношлодог. Энэ нь эмнэлгийн нэр томьёоны дунд олдохгүй байгаа бөгөөд энэ нь тодорхой элементийг хуруугаараа цохихыг оролдох үед гарсан алдааг тодорхойлдог энэ чиглэлээр мэргэшсэн мэргэжилтнүүдийн хэллэг юм.
Хүнтэй холбоотой асуудал гарахгүйн тулд товчлуур, навигацийн элементийн хувьд ямар хэмжээ оновчтой байх вэ? Сайтыг мобайл төхөөрөмжид хэрхэн тохируулах талаар зарим зөвлөмжийг энд оруулав.
- Товчлуур, навигацийн элементүүдийн оновчтой хэмжээ нь 44х44 пикселээс эхэлдэг гэж Apple-ийн үзэж байгаагаар.
- Эдгээр элементүүдийг бүтээхдээ Nokia-гийн зүгээс хамгийн багадаа 48х48 пиксел буюу 0.7х0.7 см хэмжээтэй байхыг зөвлөж байна.
- Майкрософт 34х34 пикселийн товчлууруудыг санал болгож байна.
Хэрэв таны текст хоорондоо ойрхон холбоосоор ханасан байвал гар утасны хэрэглэгчид сайтыг ашиглахад хэцүү байх болно гэдгийг санаарай.
Бидний үзүүлсэн жишээн дээр сайтын бүрэн хувилбарын цэсийг холбоос хэлбэрээр хийсэн болно. Энд арван инчийн таблет дээр хүссэн хэсэгт нэн даруй очиход маш хэцүү байх болно.
Гар утсанд ээлтэй товчлуурууд, навигацийн элементүүдийг авахын тулд та хоёр аргыг сонгож болно: тэдгээрийг бие даасан загвараар захиалах эсвэл загвар хэрэгслийг ашиглах. Хэрэв та WordPress-ийг сонгосон бол дараах залгаасуудыг ашиглахыг зөвлөж байна.
- Гайхалтай өнгөт хайрцаг ба товчлуурууд.Үүний тусламжтайгаар та өөр өөр хэмжээ, өнгө, тохиромжтой товчлууруудыг үүсгэж болно контекст цэсгар утасны хэрэглэгчдэд тохируулсан.
- Хариуцлагатай цэс.Энэхүү залгаас нь танд тохиромжтой гамбургер цэс үүсгэх боломжийг олгоно.
Сайтыг Wordpress-д зориулж гар утасны дасан зохицох хамгийн сайн, үнэгүй залгаас
тийрэлтэт онгоц
Юуны өмнө, WordPress дээр сайтыг гар утасны төхөөрөмжид тохируулах хамгийн энгийн аргын талаар ярилцъя. өндөр түвшинүр ашиг. JetPack хэрэглүүр нь энэ ажлыг танаас хамгийн бага хүчин чармайлтаар хийх болно - зүгээр л нэг товчлуур дээр дар.
Энэ нь таны үндсэн залгаасуудын дунд аль хэдийн суулгасан байх магадлалтай. Хэрэв тийм бол сайтын админ цэсэн дэх "JetPack" холбоос дээр дарж, модулиудын хуудас руу очно уу. Энд та зөвхөн "Мобайл загвар" -ыг идэвхжүүлэх хэрэгтэй.
MobilePress
Энэ бол хамгийн түгээмэл боловч энгийн залгаасуудын нэг юм. Хоёр сэдвийн хамт ирдэг бөгөөд хэзээд хэрэг болно цаашдын бүтээлтэдгээр гар утасны хөгжүүлэгчид.
wptouch
Энэ сонголтыг үр ашгийн хувьд хөдөлгөөнт төхөөрөмжид зориулсан вэбсайтад дасан зохицох үнэгүй хэрэгслүүдийн жагсаалтын дараагийнх гэж үздэг. Статистикийн мэдээгээр энэ нь 4.3 сая гаруй удаа татагдсан байна.
Үүний давуу тал нь та хэдхэн минутын дотор код бичихгүйгээр үзэсгэлэнтэй, хурдан гар утасны сайтыг бий болгож чадна. WPtouch Pro гэж нэрлэгддэг төлбөртэй хувилбарт та тусдаа админ самбар, тасалбарын системд дэмжлэг авах болно.
Wapple Architect гар утасны залгаас
Энэхүү залгаас нь янз бүрийн төхөөрөмж, платформ дээр вэб контентыг тохируулах, үзүүлэх, хүргэх зорилгоор тусгайлан бүтээгдсэн WAPL тэмдэглэгээний хэлээр бичигдсэн болно.
Энэ нь гаджет бүрт өөрийн API-г ашигладаг бөгөөд энэ сонголт нь ширээний сайтын хаягийн бүтцэд хүрэхгүй тул үнэрлэх аргаас хамаагүй дээр юм. Энэ залгаас нь хэрэглэхэд хялбар бөгөөд нэлээд энгийн шийдэл юм.
Гар утасны илрүүлэгч
Сайтыг хөдөлгөөнт төхөөрөмжид тохируулах энэхүү сонголт нь ердийн гар утас, ухаалаг гар утсыг автоматаар таних төхөөрөмжөөр тоноглогдсон тул сайтыг тохирох хувилбараар ачаалдаг. хэрэглэгчийн төхөөрөмж, өөрөөр хэлбэл түүний дэлгэцийн нягтрал, диагональ гэх мэт.
Урьдчилан суулгасан гар утасны загварын нийт долоон сонголт байдаг. Нэмж дурдахад Mobile Detector нь дэлгэцийн тохиргооны дагуу зургийн хэмжээ, нягтралыг бие даан өөрчилдөг. Энэ нь мөн өөрийн виджет, статистикийн цуглуулгыг санал болгодог.
Гол ашиг тус:
- 5000 гаруй гаджетын мэдээллийн санг ашиглан гаджетыг автоматаар таних.
- Стандарт утаснуудыг дэвшилтэт төхөөрөмжөөс ялгах чадвар.
- Өвөрмөц зочилсон тоо, хайлтын урсгал гэх мэт үзүүлэлтүүдийг багтаасан гар утасны хэрэглэгчдийн статистикийг бэлтгэх.
WP Mobile Edition
Үнэн хэрэгтээ энэ нь өмнө нь танилцуулсан хувилбарын хуулбар юм - энэ нь ижил давуу талтай, сонголттой боловч бусад зүйлсийн дунд Disqus тайлбарын системийг дэмждэг. гар утасны картСайтуудад зориулсан өөрийн генератортой XML.
Сүүлийнх нь ашигтай байж магадгүй юм хайлтын системийн оновчлол. Сайтыг хөдөлгөөнт төхөөрөмжид тохируулах зориулалттай энэхүү залгаас нь m.facebook.com төрлийн дэд домайн дээр гар утасны хувилбарыг үүсгэдэг бөгөөд энэ нь мобайл күүкиг түргэвчилсэн кэш хийх, дэмждэг болохыг анхаарна уу.
WordPress гар утасны багц
Сайтыг хөдөлгөөнт төхөөрөмжид тохируулах энэхүү сонголт нь домэйн зураглал, хайлтын агентуудыг дэмждэг бөгөөд энэ нь алдартай гар утасны төхөөрөмжүүдийг тодорхойлох боломжийг олгодог бөгөөд энэ нь танд контентыг шаардлагатай нягтрал, чанартайгаар харуулах боломжийг олгодог. Нэг сэдэвт тохируулж болох өнгөний схемийг бас өгсөн.
Хөдөлгөөнт төхөөрөмжид зориулсан сайтын хүснэгтийг тохируулах
Сайтыг хөдөлгөөнт төхөөрөмжид, тухайлбал янз бүрийн нягтралд тохируулахад хамгийн хэцүү зүйл бол хүснэгттэй ажиллах явдал байдаг нь нууц биш юм. Түүнээс гадна энэ нь их хэмжээний мэдээлэл агуулсан хүснэгтүүдэд хамгийн их хамааралтай юм.
Дасан зохицох хүснэгтийг зохион байгуулах хоёр хувилбарын талаар ярилцъя.
Юуны өмнө хүснэгтийн харагдах байдлыг харцгаая.
Bootstrap хариу үйлдэл үзүүлэх хүснэгтийн зохион байгуулалт
Үнэнийг хэлэхэд ийм хүснэгтийг үнэхээр дасан зохицох чадвартай гэж нэрлэхэд хэцүү байдаг. Энэ нь хөдөлгөөнт төхөөрөмж дээр органик харагддаг бөгөөд сайтын зохион байгуулалт нь "урсдаггүй". Хэрэв танд сайт дээр олон хүснэгт байхгүй бол энэ сонголт тохиромжтой тул залгаасыг холбох, нэмэлт хэв маяг бичих нь цаг хугацаа алдах болно. Bootstrap үүнийг ингэж ашигладаг.
Үүнийг практикт хэрэгжүүлэхийн тулд хүснэгтийг хамгийн ихдээ 100% өргөнтэй div-д ороосон, overflow: auto.
Үүнээс гадна, сайтыг хөдөлгөөнт төхөөрөмжид дасан зохицохдоо та хамгийн их өндрийг сонгож, урт бол хүснэгтийн толгойг засах боломжтой.
Үнэхээр мэдрэмжтэй хүснэгтийн зохион байгуулалт
Одоо таны сайт үнэхээр хүснэгтээр дүүрэн байгаа нөхцөл байдлын талаар ярилцъя - энд Footable залгаас руу хандах нь зүйтэй.
Юуны өмнө та залгаасыг холбох хэрэгтэй (GitHub дээр татаж авах / CDN-ээс холбогдох), үүнийг эхлүүлэх хэрэгтэй:
Гэхдээ сайтыг хөдөлгөөнт төхөөрөмжид тохируулах нэг нарийн зүйл байдаг: скрипт нь харах цонхны өргөнийг бус харин хүснэгтийн өргөнийг харгалзан үздэг. Бид энэ алдааг засах шаардлагатай байгаа тул скриптийг бага зэрэг "шинэчлэх" нь чухал юм.
Үүнийг хийхийн тулд эхлүүлэхдээ бид бүх сайтын хүснэгтүүдийг дасан зохицохыг хүсвэл хүснэгтийн анги эсвэл зүгээр л хүснэгтийн шошгыг зааж өгнө.
Бид юу гэсэн үг вэ? Таблетууд дээр "RAM", "Диагональ", "PPI", "Зай" гэсэн баганууд нуугдах болно. Илүү жижиг хэмжээтэй утасны дэлгэц дээр ашиглах үед "Үнэ" мөн нуугдана.
Завсрын цэгүүдийг эхлүүлэх үед тохируулж болно:
0-720-ийн хүрээнд гар утас нь дүрмийг дагаж мөрддөг бол 720-1024 - таблет, 1024-ээс дээш - ширээний компьютер. Шаардлагатай бол та илүү олон дүрэм үүсгэж болно.
Та мөн тодорхой баганыг өгөгдмөлөөр өргөжүүлэх сонголттой. Энэ тохиолдолд data-attribute data-expanded="true"-г зааж өгнө үү:
Бид залгаасын бүх боломжуудын талаар яриагүй боловч энэ блок нь дасан зохицох хүснэгтүүдийг үүсгэхэд хангалттай байх болно.
Хөдөлгөөнт төхөөрөмжүүдэд зориулсан вэбсайтыг онлайнаар тохируулах: 6 шилдэг үйлчилгээ
- mobiSiteGalore
Сайтыг хөдөлгөөнт төхөөрөмжид тохируулах энэхүү үйлчилгээг удирдахад хамгийн хялбар гар утасны вэбсайт засварлагч гэж үздэг. Бүтээгчдийн үзэж байгаагаар вэб сайтын бүрэн ажиллагаатай гар утасны хувилбарыг боловсруулахад ердөө 54 минут л болно.
Одоо байгаа үйлчилгээний ихэнх нь ухаалаг гар утастай ажиллахад чиглэгддэг бол mobiSiteGalore нь хуучин утсанд зориулсан сайтуудыг бэлтгэх боломжийг олгодог гэдгийг анхаарна уу.
- MobStac
MobStac-ийн тусламжтайгаар та HTML5-ээр бэлтгэсэн гар утасны вэбсайттай болно. Нэмж дурдахад та тохиргоонд өөрчлөлт оруулах эсвэл дизайныг өөрчлөх тодорхой загварыг сонгох боломжтой бөгөөд энэ нь тийм ч хэцүү биш юм.
MobStac бол гар утасны вэбсайтаас мөнгө олох төлөвлөгөөг санал болгодог цорын ганц үйлчилгээ гэдгийг бид онцолж байна. Үүний сул тал нь үйлчилгээ бета хувилбарт байгаа боловч та урилга авч, бүртгүүлэх боломжтой.
- Хулгана
Энд та вэбсайтын гар утасны хувилбарыг хоёр аргыг ашиглан хөгжүүлэх боломжтой болно: хулганын тусламжтайгаар бүх зүйлийг өөрөө хийх эсвэл сайтыг гар утасны төхөөрөмжид тохируулах, мэргэжилтнүүдийн багаас захиалж авах.
Эхний тохиолдолд та дизайны чиглэлээр илүү их боломжийг олж авдаг бол зөвхөн үйлчилгээнийхээ төлбөрийг сар бүр төлөх ёстой. Хэрэв та мэргэжилтнүүдийг ажилд авбал бүх ажил тэдний мөрөн дээр бууна.
- Америк гар утасны програм
Энэ сонголт нь таны вэбсайтын сайжруулсан SEO талыг өгдөг. Түүний чадварын ачаар та портал нь гар утасны хувилбаргүй байгаа өрсөлдөгчдөөс түрүүлэх болно. Энэ текстийг бэлтгэж байх үед програм дэмжигдсэн iPhone төхөөрөмжүүд, Blackberry, Android.
- bХөдөлгөөнт болсон
Энэ нь танд богино хугацаанд вэбсайтын гар утасны хувилбарыг бэлтгэх боломжийг олгоно. Энэхүү програм нь дэвшилтэт тохиргоотой хурдан хөрвүүлэлтээр тодорхойлогддог бөгөөд энэ нь бусад зүйлсээс гадна дизайныг өөрчлөх боломжийг олгодог.
Хөгжүүлэгчдийн үзэж байгаагаар bMobilized мэдээллийн сан нь одоогоор алдартай брэндүүдийг оруулаад 13,000 гаруй гар утасны төхөөрөмжийг дэмждэг.
Гэхдээ хэрэв та сайтыг мобайл төхөөрөмжид дасан зохицох зардалд санаа зовж байгаа бол энэ үйлчилгээ танд зориулагдсан болно, учир нь та үүгээр дамжуулан олон вэбсайт байршуулах тусам илүү их хөнгөлөлт эдлэх болно. Өөрөөр хэлбэл, bMobilized нь хөдөлгөөнт төхөөрөмжид дасан зохицох шаардлагатай сайтуудын сүлжээ эзэмшигчдэд бараг тохиромжтой байх болно.
- Зөөвөрлөх
Mobify хүлээн зөвшөөрөгдсөн хамгийн сайн үйлчилгээцахим худалдаатай холбоотой хүмүүст. Энэ нь HTML5 функцийг эзэмшигчдэд санал болгодог бөгөөд түүний хөгжүүлэлтийн баг таны хүсэлд тулгуурлан таны гар утасны вэбсайтыг бий болгодог.
Практикаас харахад санааны шатнаас бүрэн ажиллагаатай цахим дэлгүүрийг бий болгоход гурван долоо хоногоос илүүгүй хугацаа шаардагдана. Үүнээс гадна та түүний хөгжилд өөрийгөө шингээх боломжтой.
Хэрэв та дээр дурдсан бүх аргыг туршиж үзсэн боловч үр дүнд нь сэтгэл хангалуун бус байвал мэргэжлийн хүмүүсийн тусламжийг авах цаг болжээ.
Массив ( => 21 [~ID] => 21 => 2019/09/28 13:01:03 [~TIMESTAMP_X] => 2019/09/28 13:01:03 => 1 [~ӨӨРЧЛӨГДСӨН_] => 1 => 2019 оны 09-р сарын 21-ний 10:35:17 [~DATE_CREATE] => 2019/09/21 10:35:17 => 1 [~ҮСГЭЭСЭН_] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ИДЭВХТЭЙ] => Y => Y [~ДЭЛХИЙН_ИДЭВХТЭЙ] => Y => 500 [~SORT] => 500 => Дмитрий Свистуновын нийтлэлүүд [~NAME] => Нийтлэлүүд Дмитрий Свистунов => 11076 [~ЗУРАГ] = > 11076 => 7 [~ЗҮҮН_ЗҮҮН] => 7 => 8 [~БАРУУН_ХЭЭ] => 8 => 1 [~ГҮН_ТҮВШИН] => 1 => Дмитрий Свистунов [~] ТОДОРХОЙЛОЛТ [~] => Дмитрий Свистунов => текст [~DESCRIPTION_TYPE ] => текст => Дмитрий Свистуновын нийтлэлүүд Дмитрий Свистунов [~хайж болохуйц_контент] => Дмитрий Свистуновын нийтлэлүүд Дмитрий Свистунов => statyi-dmitriya-svistunova [~statyi-dmitriya-svistunova [~statyi-svistunova]d => -svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => блог [~IBLOCK_TYPE_ID] => блог => блог [~IBLOCK_КОД] => блог => [~IBLOCK_EXTERNAL_ID] => => [ ~ГАДААД_ID] =>)
Холбоо барих хуудас нь маш чухал тул түүний дизайныг өгөх шаардлагатай Онцгой анхаарал. Холбоо барих хуудас нь илүү тохиромжтой байх тусам сайтын эзэнд илүү их боломж нээгдэнэ. Холбоо барих хуудас нь зөв зохиогдсон бол хөрвүүлэх ханшид ихээхэн нөлөө үзүүлж чадна: хэрвээ хэрэглэгч сайтын менежер эсвэл админтай хялбархан холбоо барьж чадвал хэрэглэгчийн эерэг туршлага бий болно. Үйл явц нь энгийн байх тусмаа хэрэглэгч талбар эсвэл маягт бөглөх шаардлага бага байх тусам хөрвүүлэхэд илүү тохиромжтой.
Сайн холбоо барих хуудас нь сайтыг сайжруулж чадна, учир нь энэ нь зочдод болон сайт эзэмшигчийн хооронд сайн харилцаатай байх нөхцлийг бүрдүүлдэг. Энэ нь ямар сайт байх нь хамаагүй, энэ нь онлайн дэлгүүр байж болно, мэдээллийн порталэсвэл вэб үйлчилгээ - санал хүсэлт маш чухал.
Гэсэн хэдий ч олон дизайнерууд үндсэн агуулгын хуудсуудын дизайнд анхаарлаа төвлөрүүлснээр сайн боловсруулсан холбоо барих хуудасны үнэ цэнийг дутуу үнэлдэг.
Хэрэглэгч сайтын эзэнтэй хурдан холбоо барих эсвэл хэрэглэгчийн дэмжлэгтэй холбоо барих шаардлагатай болдог. Гэсэн хэдий ч, та сайт дээрх хайлтыг ашигласан ч юу ч болохгүй. Заримдаа сайт дээр шаардлагатай мэдээлэл байдаг боловч дизайнер нь зөв навигацийг анхаарч үзээгүй тул хэрэглэгч хүссэн холбоосыг олж хардаггүй тул "далд" байдаг. Цөхрөнгөө барсан хэрэглэгч аль хэдийн утсаар ярихад бэлэн болсон ч олж чадахгүй байна.
Холбоо барих хуудасны дизайнд ихээхэн анхаарал хандуулдаг компаниуд болон вэб үйлчилгээнүүд маш болгоомжтой байдаг. Учир нь энэ хуудас нь зөвхөн холбоо барих мэдээллийг агуулдаггүй: энэ нь хэрэглэгчдэд хэрэгтэй, интерактив мэдээллийг агуулдаг. Хамгийн гол нь сайн холбоо барих хуудас нь хэрэглэгчийг сайттай дахин дахин харилцахыг дэмждэг.
Холбоо барих хуудас нь харилцааны нэг төрлийн платформ юм. Хэрэв сайтын эзэн үйлчлүүлэгчдэд санал бодлоо илэрхийлэхийг зөвшөөрвөл энэ нь яриа хэлэлцээний урилга юм. Вэб хөгжүүлэгчид болон хэрэглэгчид энэхүү хамтын ажиллагааны үр шимийг хүртэх боломжтой бөгөөд ийм учраас үүнийг зөв зохион бүтээх шаардлагатай байна.
Таны мэдэж байгаагаар дизайн дахь функциональ байдал нь гол хүчин зүйлүүдийн нэг юм. Холбоо барих хуудас нь чухал мэдээллийг агуулдаг боловч хэт их мэдээлэл байдаггүй бөгөөд энэ нь заримдаа функцийг буруу үнэлэхэд хүргэдэг. Сайтын эзэн хэрэв тэр хуудсан дээр имэйл хаяг, утасны дугаар байрлуулсан бол энэ нь хангалттай гэж бодож байна. Заримдаа түүний зөв байдаг.
Гэсэн хэдий ч функциональ байдлыг давхар шалгах нь хор хөнөөлөөс илүү сайн үр дүнд хүргэдэг. Эвдэрсэн холбоосууд эсвэл мэдээллээр хэт ачаалалтай хуудаснууд нь бүгд оролцоонд сөргөөр нөлөөлдөг. Сайтын эзэн чухал мессеж хүлээн авахгүй байж болох ч хуучирсан эсвэл буруу мэдээлэл өгвөл хамгийн муу зүйл тохиолдох болно. Холбоо барих хуудсыг зохион бүтээхдээ юуны түрүүнд хэрэглэгчдийн талаар бодох хэрэгтэй, учир нь энэ хуудсыг тусгайлан бүтээсэн болно.
Байршил
Холбоо барих хуудсыг хэрэглэгчдэд үргэлж нээлттэй байлгах нь зайлшгүй чухал юм. Гадаад төрхСайт нь онцгой дизайнтай байсан ч хэрэглэгчид холбоо барих хуудсыг олж чадахгүй бол юу ч биш гэсэн үг. Заримдаа та нэлээд төвөгтэй холбоо барих маягтуудыг зохион бүтээх хэрэгтэй болдог тул зааврыг урьдчилан анхаарч үзэх хэрэгтэй. Хэрэглэгчид алхам алхмаар зааварчилгаатай бол сайтын эзэнтэй холбоо тогтооход хялбар байх болно.
Вэбсайтыг зохион бүтээж буй дизайнерын хувьд хоёр зүйлийг санах нь чухал.
- Үндсэн навигаци нь үргэлж холбоо барих хуудсыг агуулсан байх ёстой
- Хэрэглэгчид сайтад анх удаа зочилсон цагаасаа эхлэн холбоо барих хуудсыг олох ёстой дотоод хуудсуудтэд цохисонгүй
Дизайнеруудын туршлага дээр үндэслэн хэрэглэгчид хуудасны баруун талд байгаа холбоо барих мэдээллийг хайж олох хандлагатай байдаг тул "Бидэнтэй холбоо барих" холбоосыг тэнд байрлуулах нь зүйтэй юм. Үүний зэрэгцээ, та энэ мэдээлэл нь хэрэглэгчийн хувьд хоёрдогч ач холбогдолтой гэдгийг санах хэрэгтэй, тиймээс та сайтын энэ хэсгийг хэтэрхий мэдэгдэхүйц эсвэл хөндлөнгөөс оруулах ёсгүй. Хуудасны баруун дээд буланд байрлах холбоо барих хуудасны холбоос нь хамгийн сайн ажилладаг. Хамгийн муу нь, унадаг цэсэнд байгаа холбоос, учир нь хэрэглэгчид үүнийг анзаарахгүй байж магадгүй юм.
Энгийн холбоо барих маягтууд
Арилжааны сайтуудын хувьд холбоо барих хуудас нь дээр дурдсанчлан маш чухал юм. Энэ нь сайтын бусад хуудсууд шиг үзэсгэлэнтэй биш байж болох ч энгийн, хэрэглэгчдэд ээлтэй, ойлгомжтой байх ёстой. Хэрэв мэдээлэл нь зөв бүтэцгүй, муу ажилладаг эсвэл төөрөгдүүлсэн бол сайтын эзэн үйлчлүүлэгчидтэйгээ урт хугацааны харилцаа тогтоох боломжгүй юм.
Мессеж үлдээхийг хүссэн хэрэглэгч холбоо барих маягтыг бөглөж чадаагүйн улмаас сайтыг орхих нь элбэг байдаг. Эсвэл хэтэрхий урт эсвэл төвөгтэй байвал хүсэхгүй байна. Өнөөдөр хэрэглэгчид нарийвчилсан маягт бөглөхөд цаг зарцуулахыг хүсэхгүй байгаа тул тэдгээрийг хялбарчлах талаар бодох нь зүйтэй. Хэлбэр нь энгийн байх тусмаа хэрэглэгчийн туршлагын хувьд илүү сайн байдаг тул та үндсэн мэдээллийг цуглуулахад анхаарлаа хандуулах хэрэгтэй.
Яг нарийн үг хэллэг
Хэрэв бид албан ёсны сайтуудын талаар ярих юм бол бүх хуудсан дээр, түүний дотор холбоо барих хуудас дээр та компанийн үйлчлүүлэгч болсноор хэрэглэгч авах ашиг тусын талаар тодорхой бөгөөд нарийн мэдэгдлийг дагаж мөрдөх хэрэгтэй. Энэ юунд зориулагдсан бэ? Бүх шаардлагагүй мэдээллээс хамгийн их цэвэрлэсэн үр дүнтэй аргааранхаарал татах, барих. Сайхан хураангуйлсан өгөгдөл нь товч байх ёстой бөгөөд ингэснээр хүмүүс хэрэгтэй зүйлээ хялбархан олох боломжтой болно.
Мөн харааны бүрэлдэхүүн хэсгийн талаар бүү мартаарай. Тэгээд бид ярьж байназөвхөн холбоо барих маягтын сэтгэл татам дизайны талаар биш. Хэрэв компани нь бодит хаягтай бол холбоо барих хуудсан дээр газрын зураг байрлуулж хэрэглэгчдэд туслах боломжтой. Томоохон хотуудад байрладаг компаниудын хувьд оффис, дэлгүүр, агуулах руугаа очих нь илүү тохиромжтой болохыг хэрэглэгчдэд тайлбарлах нь маш чухал юм.
Холбоо барих хуудсуудын хариу үйлдэл
Аливаа онлайн бизнесийн хувьд хариу үйлдэл нь бүх зүйл юм. Энэ бол хатуу бөгөөд хурдан дүрэм бөгөөд үл хамаарах зүйл байхгүй. Интернет хурдацтай хөгжиж, зах зээл дээр улам олон шинэ төхөөрөмжүүд гарч ирж байгаа тул энэ нь гэсэн үг юм Холбогдох мэдээлэлТухайн хүн ямар хөтөч эсвэл төхөөрөмж ашиглаж байгаагаас үл хамааран хандах боломжтой байх ёстой. Өнөөдөр өрсөлдөөнд ялагдах нь маш амархан - гар утасны төхөөрөмж дээр харуулахын тулд холбоо барих хуудсыг оновчтой болгохгүй байх нь хангалттай юм.
Интеграл бүрэлдэхүүн хэсгүүд
Аль нь дээр вэ: имэйл хаяг эсвэл холбоо барих маягт уу? Хэрэглэгчдэд хэрэгтэй энгийн аргуудшаардлагатай үйлчилгээ үзүүлэгчидтэй холбоо тогтоодог тул та тэдэнтэй хагас замаар уулзах хэрэгтэй. Та имэйлээр харилцахдаа анхаарлаа төвлөрүүлж эсвэл холбоо барих маягт нийтэлж болно - арга тус бүр өөрийн давуу болон сул талуудтай.
Холбоо барих маягтууд
- Холбоо барих маягт нь хэрэглэгчдийг өөр хуудас руу очихыг албадах ёсгүй
- Холбоо барих маягтыг үүсгэх зорилгогүй болно дансэсвэл имэйлээр нэвтэрнэ үү
- Маягт нь боломжтой бол автоматаар бөглөх функцтэй байх ёстой.
- Холбоо барих маягт нь мессеж, мэдэгдэл илгээх функцтэй байх ёстой
Имэйл
- Имэйл харилцаа нь хэрэглэгчийн хувьд аюулгүй байх ёстой
- Бүх илгээсэн өгөгдлийг цаашид ашиглах зорилгоор хадгалах ёстой.
- Хүлээн авсан мессежтэй ажиллах ажлыг системтэйгээр хийх ёстой бөгөөд та бас анхаарал тавих хэрэгтэй нөөцлөхөгөгдөл
Баталгаажуулах маягт
Баталгаажуулах маягтууд нь их ач холбогдолсайтын хэрэглэгчдийн талаар илүү ихийг мэдэх шаардлагатай үед. Үүнээс гадна баталгаажуулалтын үйл явц нь хэрэглэгчийг ямар нэгэн байдлаар чиглүүлдэг зөв чиглэл, учир нь энэ нь алдаатай оруулсан өгөгдөл эсвэл хоосон талбаруудад тэдний анхаарлыг татаж магадгүй юм. Тиймээс баталгаажуулах маягт нь үйлчлүүлэгчдийн цагийг хэмнэдэг, учир нь бөглөх үйл явцын төгсгөлд тухайн хүн мессеж нь зөв хаяг руу очно гэдэгт бат итгэлтэй байх болно.
Утасны дугаарууд
Олон компаниуд холбоо барих хуудсан дээр заагаагүй байна утасны дугаарууд, учир нь тэд байнгын дуудлага нь ажлын явцад саад болно гэж айдаг. Гэсэн хэдий ч карттай адил холбоо барих хуудсан дээрх утасны дугаарууд нь хэрэглэгчийн брэндэд итгэх итгэлийг нэмэгдүүлж, үйлчлүүлэгчид хүнд нөхцөлд компанийн ажилтантай холбоо барьж, асуудлаа ярилцах боломжтой гэж итгэж, аюулгүй байдлыг мэдэрдэг. Утасны дугаар нь сайтын эзэмшигч болон хэрэглэгчийн хоорондох зайг богиносгодог бөгөөд энэ нь уламжлалт компаниуд болон физик хаяггүй онлайн үйлчилгээнүүдэд хамаарна.
Нийгмийн сүлжээний профайлууд
Товчлуурууд Нийгмийн сүлжээхолбоо барих хуудсууд дээр улам бүр олддог. Энэ арга нь сайтын чадавхийг ихээхэн нэмэгдүүлэх боломжтой, ялангуяа хэрэглэгчийн дэмжлэгийг 24/7 үзүүлж байвал. Олон хүмүүст нийгмийн сүлжээгээр дамжуулан компанитай холбогдох нь илүү тохиромжтой байдаг тул хэрэглэгчтэй харилцах ийм аргыг авч үзэх нь зүйтэй юм.
Холбоо барих хуудасны дизайн
Үнэхээр сайн хуудаснуудхарилцаа холбоо нь тэдгээрийг зохион бүтээсэн дизайнеруудын өндөр ур чадварыг гэрчилдэг. Загварын хамгийн чухал хэсэг бол холбоо барих хуудасны харааны хэв маяг юм. Холбоо барих маягтын хувьд энэ нь өгөгдөл оруулахад хялбар болгодог том талбаруудыг хэлнэ. Хэрэв маягт сайхан харагдаж байвал илүү сайн ажилладаг.
Загвар зохион бүтээх ажлыг үргэлжлүүлэхийн өмнө дизайнер нь үйлчлүүлэгчийн өгсөн бүх холбоо барих мэдээллийг нарийвчлан судлах ёстой. Бүх элементүүдийг сайтар зохион байгуулж, үүнээс гадна тэдгээрийг эв найртай хослуулсан байх ёстой. Холбоо барих хуудас нь тухайн сайтын өнгөний схемд тохирсон байх ёстой гэдгийг санах нь зүйтэй бөгөөд ингэснээр хэрэглэгч тухайн сайт болон брэндийг хоёуланг нь ялган таних болно.
Дүгнэлт
Холбоо барих хуудас үргэлж харагдах ёстой. Энэ нь зөвхөн хамаарахгүй нүүр хуудас, гэхдээ сайтын бусад бүх хуудсууд. Холбоо барих хуудсыг зохиохдоо хэрэглэгчид зөвхөн "Холбоо барих" таб дээр харагдсан байдлаар сайтын эзэн эсвэл туслах багтай холбогдох боломжтой гэдгийг санаарай. Энэ тохиолдолд амжилтанд хүрэх түлхүүр нь тав тухтай байдал, энгийн байдал юм. Та хэрэглэгчдэд хүссэн зүйлийг нь өгөх хэрэгтэй. Хэрэв хэрэглэгч өөрийн хувийн мэдээллээ сайтад оруулах ёстой бол нэр, овог, имэйл хаяг гэсэн үндсэн асуултуудыг асуух нь зүйтэй. Холбоо барих маягт нь нэмэлт талбар агуулж болохгүй. Та мөн холбоо барих хуудасны дасан зохицох чадварыг анхаарч үзэх хэрэгтэй - тэдгээрийг ямар ч хөтөч болон ямар ч төхөөрөмж дээр харуулах ёстой. Хэрэв холбоо барих хуудас зөв хийгдсэн бол сайтын хэрэглэгчидтэй амжилтанд хүрэх магадлал ихээхэн нэмэгддэг.
Өнөө үед мэдрэмжтэй дизайнтай байх нь аливаа сайтын ариун үүрэг юм, ялангуяа таны сайт арилжааны шинж чанартай бол. Учир нь гар утасны үзэгчид гайхалтай хурдацтай өсч байна. Тийм ээ, та гар утасны үзэгчид удаан хугацаанд, олон жилийн турш өсч байсан гэж хэлэх болно, гэхдээ одоо энэ нь шинэ чиг хандлага бөгөөд өсөлт нь бараг экспоненциал юм. Ухаалаг утаснууд хаа сайгүй байдаг. Хэрэв та ямар нэг зүйл зарж байгаа бол мэдрэмжтэй дизайн таны хувьд маш чухал юм.
Yandex-ийн тайлангийн статистик мэдээгээр, ерөнхий дайчилгааг үл харгалзан хэрэглэгчид ухаалаг гар утаснаас илүү компьютерээс илүү ихийг худалдаж авдаг боловч тэр үед гар утасны төхөөрөмжөөр дамжуулан бараа, үйлчилгээг илүү сонгодог. Google хэрэглэгчдийн бараг тал хувь нь ухаалаг гар утсаараа бүтээгдэхүүн хайдаг гэж мэдэгджээ.
MediaScope-ийн мэдээлснээр гар утасны үзэгчид бусдаас илүү хурдацтай өсч байгаа бөгөөд 2017 онд 15%-иар өссөн байна. Гар утасны нийт үзэгчид 66 сая хүн байгаа нь нийт хүн амын 54% (2017) юм. Үүний зэрэгцээ ширээний хэрэглэгчдийн тоо буурч байна.
"Коммерсант" сонины мэдээлснээр 2017 онд гар утасны сегмент дэх Рунетийн үзэгчид 47% -иас 56% хүртэл өссөн байна. Түүгээр ч барахгүй өсөлт нь ахмад үеийнхний зардлаар гарч байна, учир нь залуучуудын дунд интернетийн хэрэглээний түвшин дээд хязгаартаа аль эрт хүрчээ.
холбоотой хамгийн том үйлчилгээ үзүүлэгч сүлжээний технологи Cisco 2020 онд гарч ирэх 5G сүлжээг туршиж байна. Cisco 2016 онд 2021 он гэхэд таамаглаж байсан хөдөлгөөнт урсгалнэмэгдэх болно долоо дахин.
Гутал, дагалдах хэрэгслийн худалдаа эрхэлдэг Rechi онлайн дэлгүүрийн судалгаагаар гар утаснаас худалдан авагчид илүү шийдэмгий болсон нь анзаарагдсан. Ухаалаг гар утасны хэрэглэгчид дараалалд байх үедээ, үдийн хоолны үеэр эсвэл унтахынхаа өмнө худалдаж авдаг болсон.
Responsive дизайн гэж юу вэ?
Хариуцлагатай вэб дизайн 2011 оноос хойш гарч ирсэн боловч үүнийг үл харгалзан RuNet дахь сайтуудын ихэнх хэсэг нь хөдөлгөөнт төхөөрөмж дээр хазайсан хэвээр байна. Жишээлбэл, цэс нь бүхэл бүтэн дэлгэцийг эмх замбараагүй болгодог, эсвэл эсрэгээр сайтын зохион байгуулалт нь дэлгэцээс хэтэрч, та маш эвгүй хэвтээ гүйлгэх хэрэгтэй болно, тэр ч байтугай дэлгэцийг эргүүлэх нь танд тус болохгүй. Түүнчлэн, дасан зохицох хувилбаргүйгээр ухаалаг гар утасны текст маш бага байх болно, үүнийг унших нь ерөнхийдөө боломжгүй юм.
Responsive Web Design гэдэг нь хязгаарлагдмал нөхцөлд дэлгэцэн дээр зөвхөн хамгийн чухал элементүүдийг харуулахын тулд хэмжээнээс хамааран бүх элементүүдийг дэлгэцэнд динамикаар тохируулах байдлаар бүтээгдсэн вэбсайтын хуудасны дизайн юм. Дэлгэц бага байх тусам түүн дээр байгаа объектууд бага байх тусам хамгийн чухал нь л үлддэг. Том дэлгэцэн дээр бид вэбсайт дээрх олон тооны хажуугийн баар, цэс, виджет болон бусад ижил төстэй зүйлсийг харж дассан байдаг бөгөөд энэ нь үнэндээ маш ховор хэрэглэгддэг. Тиймээс, дасан зохицох хувилбарт зөвхөн үнэхээр чухал, ажиллагаатай хэвээр байна. Жишээлбэл, онлайн дэлгүүрийн хувьд энэ нь утас, трансформаторын цэс, бараа бүхий толгой хэсэг, бусад нь илүүц, гэхдээ энэ нь худалдан авалт хийхэд хангалттай.
Хөдөлгөөнт төхөөрөмжүүдийн дасан зохицох загварыг сайтыг үүсгэхээс өмнө урьдчилан төлөвлөх шаардлагатай байдаг тул зоригтой вэб мастер урам хугарах байх. Гэхдээ энэ нь маш том буруу ойлголт тул сайтын загварыг бүхэлд нь өөрчлөх, эсвэл дасан зохицохын тулд CMS-ийг бүхэлд нь өөрчлөх шаардлагагүй юм. Та одоогийн сайтаа ямар ч томоохон өөрчлөлт, хүндрэлгүйгээр маш хурдан тохируулах боломжтой.
Хариуцлагатай болон хариу үйлдэл үзүүлэх вэбсайтын дизайны хооронд ялгаа бий юу?
Үнэн хэрэгтээ хариу үйлдэл үзүүлэх, дасан зохицох гэсэн ойлголтууд ялгаатай байдаг. Нэгэн цагт ухаалаг гар утаснууд дэлхийг байлдан дагуулна гэж бодоогүй байхад зохион бүтээгчид, программистууд маргаан үүсгэжээ. Хөдөлгөөнт төхөөрөмжийг оновчтой болгох аль арга нь илүү дээр вэ: арга (RWD - хариу үйлдэл үзүүлэх) эсвэл арга (AWD - дасан зохицох). Тэдний хоорондох ялгаа нь хариу үйлдэл үзүүлэх арга нь элементүүдийн хэмжээг хувь хэмжээгээр өөрчилдөг: зураг, видео, блок гэх мэт. Гэхдээ responsive дизайн нь хөтчийн хэмжээнээс хамаардаггүй, харин хэрэглэгч дээр анхаарлаа төвлөрүүлдэг бөгөөд урьдчилан тодорхойлсон гурван байршилтай: ухаалаг гар утас, таблет, дэвтэрт зориулсан.
Одоо хоёр сонголтыг дасан зохицох загварт ашиглаж байгаа бөгөөд тэдгээр нь бие биенээ нөхөж байна. Хуудасны зохион байгуулалтыг (сүлжээ) дэлгэц, таблет, ухаалаг гар утас гэсэн гурван үндсэн төрлийн дэлгэцийн хэмжээтэй тохирч байгаа хяналтын цэгүүдэд эрс шинэчилж болно. Завсрын цэгүүдийн дотор хоосон зайг элементүүдээр дүүргэхийн тулд зохион байгуулалт сунадаг. Тиймээс вэбсайт нь дэлгэцийн хэмжээнээс үл хамааран оновчтой харагдах болно.
Вэбсайт яагаад хариу үйлдэл үзүүлэх ёстой вэ?
Хайлтын системүүд жил бүр сайтуудын хөдөлгөөнт дасан зохицоход илүү их анхаарал хандуулдаг. Аль хэдийн гарч ирсэн тусдаа хайлтхөдөлгөөнт төхөөрөмжүүдэд зориулагдсан. Жишээлбэл, Yandex нь Владивостокийн алгоритмыг ашигладаг бөгөөд энэ нь сайтын хөдөлгөөнт төхөөрөмжид тохирохыг харгалзан үздэг тул хэрэв таны сайт мобайл төхөөрөмжид тохироогүй бол ухаалаг гар утсаараа хүсэлт илгээсэн зочин таны сайтыг хайлтанд харахгүй. үр дүн. Хэрэв сайт хайлтын үр дүнд хэвээр байгаа бол хамгийн доод хэсэгт байна
Хариуцлагатай гар утасны хувилбаргүй бол зочдод таны сайтад хүндрэл гарах бөгөөд энэ нь бүх сайтын зан үйлийн хүчин зүйлд муугаар нөлөөлнө. Зочин ухаалаг гар утсан дээрээ бүрэн төвөгтэй хувилбарыг нээхэд тэд оролдлогогүйгээр таны сайтыг шууд хаах бөгөөд ийм зочин бүр зан үйлийн хүчин зүйлийг сүйтгэх болно. Зан үйлийн хүчин зүйлүүд SEO дэх албан тушаалд ихээхэн нөлөөлдөг бөгөөд үүнд сайтад зарцуулсан хугацаа, үзсэн хуудасны тоо зэрэг орно. Дасан зохицох хувилбарыг нэвтрүүлснээр энэ бүх асуудлыг шийдэж, ямар ч сөрөг нөлөөгүй. Зарим төслүүдэд сайтын ачаалал 40% хүртэл өсдөг.
Google Analytics болон Yandex.Metrics дахь тохиромжтой аналитик систем. Системүүд нь таны сайтын хөдөлгөөнт байдлыг автоматаар тодорхойлж, хөдөлгөөнт төхөөрөмжөөр дамжуулан хийсэн хөдөлгөөний статистик болон хөрвүүлэлт бүхий бэлэн тайлангуудыг гаргадаг. Энэ нь таны үзэгчдийн хөдөлгөөнийг тодорхойлоход маш тохиромжтой.
Дасан зохицох зохион байгуулалтын сул тал байхгүй. Зөвхөн нэг л хасах зүйл бий: хуучин үеийнхэн хэт хялбаршуулсан, том элементүүдэд дургүй байдаг, тэд том дэлгэц, асар олон тооны жижиг цэсийн зүйлд дасдаг.
Аль нь илүү дээр вэ: гар утас эсвэл дасан зохицох хувилбар уу?
Ухаалаг утсыг оновчтой болгох нэг арга бол зөвхөн ухаалаг утаснаас нээх боломжтой вэбсайтын гар утасны тусдаа хувилбарыг бий болгох явдал юм. Төхөөрөмжийн төрлийг илрүүлэх нь серверийн тал дээр явагддаг. Сүүлийн үед энэ нь дасан зохицох загвараас хамаагүй үнэтэй, хөгжүүлэх, засвар үйлчилгээ хийхэд илүү хэцүү тул бага, бага ашиглагддаг. Гар утасны хувилбар нь зөвхөн маш нарийн төвөгтэй, стандарт бус вэб үйлчилгээнд тохиромжтой.
Шударга бус томоохон агентлагууд үүнийг далимдуулан үйлчлүүлэгчдийг луйварддаг. Эцсийн эцэст, гар утасны тусдаа хувилбарыг хэрэгжүүлэх зардал нь дасан зохицох загварыг хэрэгжүүлэхээс хэд дахин өндөр тул таныг дасан зохицох хувилбараас татгалзах нь илүү ашигтай байдаг.
Хариуцлагатай вэбсайт яагаад гар утасны хувилбараас дээр вэ?
- Дасан зохицох байршилд кодын өөрчлөлтийг бүх төхөөрөмжид нэн даруй харуулах болно. Жишээлбэл, хэрэв та өөрчлөх эсвэл шинээр нэмэх шаардлагатай бол чухал функциональ байдал. Хэрэв сайт нь гар утасны хувилбартай бол та хоёр хувилбарт өөрчлөлт оруулах шаардлагатай болно. Тиймээс тэр болгонд программистууд болон зохион бүтээгчдийн зардлыг хоёр дахин нэмэгдүүлдэг.
- Дасан зохицох боломжтой сайтад сайтын гар утасны хувилбарыг үүсгэх аргаас ялгаатай нь контент давхарддаггүй.
- Дасан зохицох хувилбарт ширээний компьютер болон ухаалаг гар утасны хуудасны хаяг ижил хэвээр байгаа тул та дахин чиглүүлэлт хийх шаардлагагүй болно.
- Хөдөлгөөнт болон стандарт төхөөрөмжүүдийн хувьд тусдаа хуудсан дээр контент үүсгэх шаардлагагүй.
- Нэмж дурдахад Google 2016 оны 12-р сард болсон Дижитал 10-р сарын бага хурлын үеэр юу хийх хэрэгтэйг хэлсэн дасан зохицох хувилбар, мөн гар утасны хувилбар нь үнэхээр утгагүй юм.
Лайф хакер!Вэбсайтыг гар утсанд дасан зохицох нь таны бодож байгаагаас хамаагүй хямдхан гэдгийг та мэдэх үү? Учир нь үнэн хэрэгтээ энэ нь маш их хүчин чармайлт шаарддаггүй бөгөөд ажил нь таны сайтад ямар ч үр дагаваргүйгээр богино хугацаанд хийгддэг. Дүрмээр бол вэб студиуд нь тод үнийн шошго санал болгодог: 10,000 ₽-ээс 20,000 ₽ хүртэл, үнэн хэрэгтээ дасан зохицох ажлыг Kwork бие даасан бирж дээр алсаас ердөө 500 ₽ үнээр захиалж болно.
Сайтын гар утасны хувилбарыг хэрхэн хийх вэ?
Сайтдаа хариу үйлдэл үзүүлэх байршлыг хэрэгжүүлэхийн өмнө та байршлыг төлөвлөх хэрэгтэй бөгөөд үүний тулд та аль элементүүдийг орхиж, алийг нь арилгахаа тодорхойлох хэрэгтэй. Үүнийг ухаалаг утас болон таблетын хувьд тусад нь хий. Ухаалаг утас, таблет дээрх зай хязгаарлагдмал тул бид тийм ч чухал биш блокуудыг золиосолж, зөвхөн функциональ элементүүдийг үлдээх хэрэгтэй бөгөөд зөвхөн зочдод тусалдаг зүйлийг л үлдээх болно.
Дашрамд хэлэхэд, WordPress дээр шинэ дээд зэрэглэлийн сэдвүүдийн ихэнх нь гар утасны хувилбар, мөн өсгөгч хуудсуудыг дэмждэг. Бидэнд байгаа бүрэн гарын авлага««, уншиж, хариу үйлдэл үзүүлэх WordPress сайтуудыг үүсгэ.
Жишээлбэл, хажуугийн баар нь ихэвчлэн мэдээллийн функц, гулсагч гэх мэт үүргийг гүйцэтгэдэг. Цэс нь хэтэрхий урт бөгөөд элбэг дэлбэг хувилбарт энэ нь эцэс төгсгөлгүй үдэшлэг болж хувирдаг тул үүнийг тусдаа товчлуур болгон хасдаг. Урт хайлтын талбартай ижил зүйл. Хоёр зүйлийг нэгэн зэрэг дарахаас зайлсхийхийн тулд элементүүд нь хоорондоо ойрхон байх ёсгүй.
Дасан зохицох зохион байгуулалтсайт нь вэб хуудсуудыг таблет болон ухаалаг гар утасны дэлгэцэнд автоматаар тохируулах боломжийг олгодог. Мобайл интернетийн траффик жил бүр нэмэгдэж байгаа бөгөөд энэ траффикийг үр дүнтэй боловсруулахын тулд хэрэглэгчдэд ээлтэй интерфэйс бүхий дасан зохицох сайтуудыг санал болгох шаардлагатай байна.
Хайлтын системүүд мобайл төхөөрөмж дээр үзэхэд сайтын хариу өгөх чадварыг үнэлэхийн тулд хэд хэдэн шалгуурыг ашигладаг. Google нь гар утасны хайлтын үр дүнд гар утасны төхөөрөмжид тохирсон сайтуудыг тусгай тэмдэгээр тэмдэглэж, ухаалаг утас, таблет эзэмшигчдэд зориулсан интернетийн хэрэглээг хялбарчлахыг оролдож байна. гар утсанд ээлтэй. Yandex нь гар утасны хайлтанд хэрэглэгчдэд зориулсан гар утасны / дасан зохицох хувилбартай сайтуудыг илүүд үздэг алгоритмтай.
Та үйлчилгээ болон мобайл төхөөрөмж дээрх хуудасны дэлгэцийг шалгаж болно.
Цагаан будаа. 1. Yandex болон Google-ийн гар утсанд сайтын мобайл төхөөрөмжид ээлтэй байдлын тухай тэмдэглэл бүхий гар утасны дугаар Дасан зохицох зохион байгуулалт гэж юу вэ
Хариуцлагатай зохион байгуулалт нь ямар ч төхөөрөмж дээр үзэхэд хэвтээ гүйлгэх мөр, өргөтгөх боломжтой хэсэг, унших боломжтой текст, товших боломжтой элементүүдийн том талбай байхгүй гэсэн үг юм. Медиа асуулга ашиглан та хуудасны блокуудын байршил, байршлыг хянаж, загварыг дахин бүтээж, төхөөрөмжийн дэлгэцийн янз бүрийн хэмжээтэй тохируулж болно.
Дасан зохицох сайтыг бий болгох үндсэн аргуудыг нийтлэлд өгсөн болно. Учир нь мэдрэмжтэй дизайнСайтын үндсэн контейнерийн өргөнийг % -д тохируулсан бөгөөд энэ нь хөтчийн цонхны өргөнтэй тэнцүү буюу 100% -аас бага байж болно. Сүлжээний баганын өргөнийг мөн % -аар тохируулсан. AT мэдрэмжтэй дизайнҮндсэн сав ба тор баганын өргөнийг px дахь утгыг ашиглан тогтооно.
Энэхүү гарын авлагад авч үзсэн шингэний мэдрэмжтэй байршлын техник нь хоёр баганатай загвар дээр маш сайн ажиллах бөгөөд сайтыг хөдөлгөөнт төхөөрөмж дээр хариу үйлдэл үзүүлэх, харахад хялбар болгоно. Загвар нь хуудсуудын үндсэн агуулгын өөр зохион байгуулалттай гэж үздэг бөгөөд энэ хичээлээр үндсэн хуудасны зохион байгуулалтад дүн шинжилгээ хийх болно.
Үндсэн хуудасны зохион байгуулалт
Хуудас нь толгой (толгой), үндсэн агуулга болон хажуугийн хэсэг, хөл (хөл хэсэг) гэсэн гурван үндсэн блокоос бүрдэнэ. 768px ба 480px-ийг дизайны таслах цэг болгон авч үзье.
Эхний цэг дээр бид дээд цэсийг нууж, хажуугийн самбарыг бичлэгүүдтэй савны доор шилжүүлнэ. Хоёрдахь цэг дээр бид толгойн элементүүдийн байршлыг өөрчлөх, нийтлэл дэх нийгмийн сүлжээний товчлууруудын байршлыг цуцлах, хуудасны хөлийн багануудыг боохыг цуцална.
Цагаан будаа. 2. Дасан зохицох зохион байгуулалтын жишээ 1. Мета шошго ба хэсэг
1) Хэсэгт нэмэх
шаардлагатай файлууд - ашигласан фонтуудын холбоос, jQuery номын сан, түүнчлэн угтваргүй залгаас (шинж чанарт хөтчийн угтвар бичихгүйн тулд):
2. Хуудасны толгой хэсэг
Хуудасны толгой хэсэгт
лого ;
үндсэн цэсийг харуулах/нуух товчийг дарна уу
