Таны WordPress маягтууд яагаад гар утсанд хариу үйлдэл үзүүлэх ёстой вэ?
Вэб хандалтын талаас илүү хувь нь гар утасны төхөөрөмжөөс ирдэг. Хэрэв таны маягтууд утас, таблет дээр сайн ажиллахгүй бол та өдөр бүр илгээсэн мэдээллээ алдаж, үйлчлүүлэгчдээ алдаж байна.
Энэхүү гарын авлагаас та гар утсанд хариу үйлдэл үзүүлдэг маягтууд яагаад чухал болох, мөн маягтыг үнэхээр гар утсанд ээлтэй болгодог зүйл юу болохыг мэдэх болно.
Гар утасны бодит байдал
Гар утасны хөдөлгөөний статистик
- 59% + хэмжээтэй дэлхийн вэб урсгалын ихэнх нь гар утас юм
- 92% гар утсаар дамжуулан интернет хэрэглэгчдийн хандалт
- 70% Зарим салбарын вэб урсгал нь гар утас юм
- Гар утасны хэрэглээ жилээс жилд өссөөр байна
Энэ нь маягтуудын хувьд юу гэсэн үг вэ
Хэрэв таны сайт өдөрт 1,000 зочин авдаг бол:
- ~600 нь гар утасны төхөөрөмж дээр байна
- Хариу өгөхгүй маягтууд эдгээр зочдыг бухимдуулдаг
- Бухимдсан зочид маягтаа орхиж байна
- Орхигдсон маягтууд = алдагдсан лийд, борлуулалт, санал хүсэлт
Хариу өгөхгүй маягтуудтай юу болох вэ
Хэрэглэгчийн туршлага
Хариу өгөхгүй маягт дээр гар утасны хэрэглэгчид дараахь зүйлтэй тулгардаг.
Жижигхэн Текст
- Уншихад хэтэрхий жижиг шошго байна
- Зааврыг нүдээ онийлгон харж байна
- Чухал мэдээлэл дутуу байна
Боломжгүй оролтын талбарууд
- Текстийн хайрцагнууд нарийн товшиход хэтэрхий жижиг
- Буруу бичиж байна талбарууд
- Тогтмол томруулж/устгах
Эвдэрсэн байршил
- Талбарууд дэлгэцийн ирмэгийг таслав
- Хэвтээ гүйлгэх шаардлагатай
- Илгээх товчлуур нуугдсан эсвэл хүрэх боломжгүй байна
Бухимдлыг төрүүлэм харилцан үйлчлэлүүд
- Унтраах цэсүүд сонгоход хэцүү
- Шалгах хуудас товшиход хэтэрхий жижиг
- Болзоо сонгогчид ашиглах боломжгүй
Үр дүн
Хэрэглэгчид бууж өгдөг. Тэд:
- Маягтыг бүрэн орхих
- Сайтаа бухимдсанаар үлдээгээрэй
- Илүү сайн формтой өрсөлдөгч рүү яв
- Хэзээ ч буцаж ирэхгүй
Хариу өгөхгүй маягтын өртөг
Алдагдсан хөрвүүлэлтүүд
Орхигдсон хэлбэр бүр бол алдагдсан боломж юм:
- Холбоо барих маягт → Алдагдсан харилцагч
- Үнийн санал хүсэлт → Алдагдсан борлуулалт
- Бүртгэл → Алдагдсан үйлчлүүлэгч
- Санал хүсэлтийн маягт → Алдагдсан ойлголтууд
Гэмтсэн нэр хүнд
Муу гар утасны туршлага танай брэндийг харуулж байна:
- "Энэ компани хуучирсан юм шиг байна"
- "Тэд хэрэглэгчийн туршлагыг тоодоггүй"
- "Хэрэв тэдний маягт муу байвал бүтээгдэхүүнийх нь талаар юу хэлэх вэ?"
SEO нөлөө
Google нь гар утсанд ээлтэй сайтуудыг тэргүүлэх чиглэл болгодог:
- Гар утсанд зориулсан индексжүүлэлт нь стандарт юм
- Гар утасны муу туршлага нь зэрэглэлд сөргөөр нөлөөлж байна
- Доод зэрэглэл = бага урсгал
Өрсөлдөөний сул тал
Та гар утасны хэрэглэгчдийг бухимдуулж байх үед сайн хэлбэртэй өрсөлдөгчид:
- Алдаж буй хэрэглэгчдээ аваарай
- Боломжит үйлчлүүлэгчидтэйгээ харилцаа холбоо тогтоо
- Яагаад хөрвүүлэлт бага байгааг гайхаж байхдаа өсөж хөгжөөрэй
Маягтыг гар утсанд хариу үйлдэл үзүүлдэг болгодог зүйл юу вэ
1. Шингэний өргөн
Маягтууд дэлгэцийн хэмжээнд тохируулан өөрчлөх ёстой:
- Жижиг дэлгэцэн дээр бүрэн өргөн
- Том дэлгэцэн дээр тохирох өргөн
- Хэзээ ч хэвтээ гүйлгэх шаардлагагүй
2. Унших боломжтой текст
Томруулахгүйгээр бүх текстийг унших боломжтой:
- Шошго: хамгийн багадаа 14-16 пиксел
- Оролтын текст: хамгийн багадаа 16 пиксел (iOS томруулахаас сэргийлнэ)
- Тусламжийн текст: хамгийн багадаа 12-14 пиксел
- Хангалттай ялгаатай байдал
3. Хүрэхэд ээлтэй байнууд
Хуруунд зориулсан хэмжээтэй товшиж болох элементүүд:
- Хамгийн бага товшилтын зорилтот хэмжээ: 44×44 пиксел
- Элементүүдийн хоорондох хангалттай зай
- Товшиход хялбар тэмдэглэгээний хайрцаг болон радио
4. Давхарласан байршил
Гар утсан дээр элементүүдийг босоо байдлаар давхарлана уу:
- Мөр бүрт нэг талбар
- Оролтын дээрх шошго (хажууд биш)
- Бүтэн өргөнтэй товчлуурууд
5. Төрөлхийн оролтын төрлүүд
Тохирох гар утасны гарнуудыг идэвхжүүлэх:
- И-мэйл талбар → И-мэйл гар (@, .com)
- Утасны талбар → Тоон товчлуур
- URL талбар → URL гар
- Тоон талбар → Тоон оролт
6. Гар утсанд ээлтэй бүрэлдэхүүн хэсгүүд
Хүрэхэд зориулагдсан элементүүд:
- Уугуул огноо сонгогчид (гүйлгэх дугуйнууд)
- Том унждаг цэсний триггерүүд
- Хүрэхэд хялбар файл байршуулах
7. Илэрхий Илгээх Товч
Хэрэглэгчид дараахыг олж, илгээх товчийг дарах боломжтой байх ёстой:
- Бүтэн өргөн эсвэл тод хэмжээтэй
- Өндөр тодосгогч өнгө
- Гүйлгэхгүйгээр тодорхой харагдаж байна (боломжтой бол)
Мобайл маягтын шилдэг туршлагууд
Маягтуудыг богино байлгах
Гар утасны хэрэглэгчид тэвчээр багатай байдаг:
- Зөвхөн чухал асуултууд асуугаарай
- Байхад тохиромжтой талбаруудыг устгах
- Илүү урт маягтуудын хувьд олон шатлалт аргыг авч үзье
Нэг баганатай байршил ашиглах
Гар утсан дээр олон баганын байршлыг эвдэх:
- Бүх талбаруудыг босоо байдлаар давхарлана уу
- Сканнердах болон дуусгахад илүү хялбар
- Төхөөрөмжүүдийн хооронд тогтвортой туршлага
Талбарын дарааллыг оновчтой болгох
Талбаруудыг логик дарааллаар байрлуул:
- Хамгийн чухал нь эхлээд
- Холбоотой талбаруудыг бүлэглэсэн
- Эрхий хуруугаараа хүрэхэд хялбар
Ил тод шошго өгөх
Шошго нь хоёрдмол утгагүй байх ёстой:
- Талбайн дээгүүр (дотор нь хөвж байгаа биш)
- Үргэлж харагдах (зөвхөн орлуулагчид найдаж болохгүй)
- Тодорхой боловч товч
Автоматаар бөглөхийг идэвхжүүлэх
Хөтөч хэрэглэгчдэд туслахыг зөвшөөрөх:
- Нэр, имэйл, утасны дугаарыг автоматаар бөглөх
- Хаягийг автоматаар бөглөх
- Жижиг гар дээр бичихийг багасгадаг
Баталгаажуулалтыг шууд харуулах
Хэрэглэгчдэд алдааг нэн даруй засахад нь туслаарай:
- Талбаруудын хажууд алдааны мессежүүд байна
- Боломжтой үед бодит цагийн баталгаажуулалт
- Засах зааврыг тодорхой болго
Товчнуудыг ил тод болго
Илгээх товчлуурууд нь ялгарч харагдах ёстой:
- Эсрэг өнгө
- Том товшилтын бай
- Үйлдлийн тодорхой текст ("Илгээх", "Илгээх", "Бүртгүүлэх")
Гар утасны хариу үйлдлийг шалгах
Хөтөч хөгжүүлэгчийн хэрэгслүүд
Ширээний хөтөч дээр хурдан тест хийх:
- Маягтын хуудсаа нээнэ үү
- F12 (Хөгжүүлэгчийн хэрэгслүүд) товчийг дарна уу
- Төхөөрөмжийг асаах/унтраах дүрс дээр дарна уу
- Төхөөрөмжийн өөр өөр хэмжээг сонгох
- Тестийн маягтын харилцан үйлчлэл
Бодит төхөөрөмжийн туршилт
Бодит төхөөрөмжүүдээс илүү юу ч байхгүй:
- iPhone болон Android дээр туршилт хийх
- Таблет дээр туршилт хийх
- Өөр өөр дэлгэцийн хэмжээг туршиж үзээрэй
- Үнэндээ маягтыг бөглөнө үү
Юуг турших вэ
- ✓ Та томруулахгүйгээр бүх шошгыг уншиж чадах уу?
- ✓ Оролтын талбаруудыг товшиход хялбар уу?
- ✓ Зөв гар гарч ирж байна уу?
- ✓ Та унах цэсний сонголтуудыг хялбархан сонгож чадах уу?
- ✓ Чекбокс/радиог товшиж болох уу?
- ✓ Илгээх товчлуур харагдаж, хүрч болох уу?
- ✓ Маягтыг амжилттай илгээсэн үү?
- ✓ Алдааны мессежүүд харагдаж, тодорхой байна уу?
Google-ийн гар утсанд ээлтэй тест
Хуудасны нийт гар утсанд ээлтэй байдлыг шалгах:
- Google-ийн Гар утсанд ээлтэй туршилтын хэрэгсэл рүү очно уу
- Маягтын хуудасны URL хаягаа оруулна уу
- Үр дүн болон саналуудыг хянана уу
Мобайл маягтын нийтлэг асуудлууд
Асуудал: Текст хэтэрхий жижиг байна
Үндэслэл: Пикселийн хэмжээг масштаблахгүй байхаар зассан
Шийдэл: Харьцангуй нэгж (em, rem) эсвэл хамгийн багадаа 16 пиксел ашиглана уу
Асуудал: Талбарууд хэтэрхий нарийхан байна
Үндэслэл: Тогтмол өргөнтэй савнууд
Шийдэл: Хувь өргөний хэмжээг ашиглах (гар утсан дээр 100%)
Асуудал: Гарын хавтасны хэлбэр
Үндэслэл: Гар гарч ирэх үед гүйлгэх тохиргоо байхгүй
Шийдэл: Фокуслагдсан талбарыг харагдах байдалд гүйлгэж харахыг баталгаажуулна уу
Асуудал: Оролтын фокус дээр томруулах (iOS)
Үндэслэл: Оролтод 16 пикселээс доош фонтын хэмжээ
Шийдэл: Оролтын фонтын хэмжээг дор хаяж 16 пиксел болгож тохируулна уу
Асуудал: Ашиглахад хэцүү унах цэснүүд
Үндэслэл: Захиалгат унждаг цэснүүд мэдрэгчтэй оновчлогдоогүй байна
Шийдэл: Уугуул сонголтын элементүүд эсвэл мэдрэгчтэй хувилбаруудыг ашиглах
Асуудал: Илгээх товчлуур дэлгэцээс гадуур байна
Үндэслэл: Харагдахуйц ахиц дэвшилгүй урт хэлбэрүүд
Шийдэл: Наалдамхай илгээх товчлуур эсвэл гүйлгэх заагчийг арилгах
Гар утасны онцлог шинж чанарууд
Дуудлага хийхийн тулд товших утасны холбоосууд
Баталгаажуулалтын утасны дугаарууд нь товшиж болохуйц байх ёстой:
- Тел: протоколтой холбоосууд
- Залгахын тулд нэг товшилт
Байршил илрүүлэх
Хаягийн талбаруудын хувьд:
- Одоогийн байршлыг ашиглах сонголт
- Хот/бүс нутгийг автоматаар бөглөх
Камерын интеграци
Файл байршуулах зорилгоор:
- Камер руу шууд нэвтрэх сонголт
- Зургийн сангийн хандалт
- Баримт бичгийг сканнердах
Дохио зангаа
Уугуул гар утасны харилцан үйлчлэл:
- Маягтын алхамуудын хооронд шудрах
- Шинэчлэхийн тулд татна уу
- Томруулахын тулд чимхэх (шаардлагатай бол)
Гар утсан дээрх гүйцэтгэл
Гар утсан дээр хурд яагаад илүү чухал вэ
- Гар утасны холболт ихэвчлэн удаан байдаг
- Зарим хэрэглэгчдийн дата хязгаарлалт
- Гар утсан дээр бага тэвчээртэй байх
- Батерейны зарцуулалтын талаарх анхаарах зүйлс
Маягтын гүйцэтгэлийн зөвлөмжүүд
Маягтын жинг багасгах
- Хөнгөн хэлбэрийн нэмэлтүүд
- Хамгийн бага CSS/JavaScript
- Оновчтой хөрөнгө
Боломжтой үед залхуу ачаалал
- Шаардлагатай бол маягтын элементүүдийг ачаална уу
- Нуугдсан нөхцөлт талбаруудыг урьдчилан ачаалахгүй байх
Зургийг оновчтой болгох
- Маягтууд дахь аливаа зургийг шахах
- Тохирох форматыг ашиглах (WebP)
- Хариу үйлдэл үзүүлэх зургийн хэмжээ
Автомат маягт бүтээгчийн гар утасны арга барил
Автомат маягт үүсгэгч гар утсанд зориулж бүтээгдсэн:
Анхдагчаар хариу үйлдэл үзүүлдэг
- Бүх маягтууд автоматаар хариу үйлдэл үзүүлдэг
- Тусгай тохиргоо шаардлагагүй
- Ямар ч дэлгэцийн хэмжээтэй тохируулна
Мэдрэгчтэй оновчтой болгосон талбарууд
- Зөв хэмжээтэй цоргоны байнууд
- Уугуул гар утасны оролтууд
- Хүрэхэд ээлтэй огноо/цаг сонгогч
Mobile-First Styling
- Жижиг дэлгэцэн дээр байрлуулалтыг овоолно уу
- Гар утсан дээрх бүрэн өргөн талбарууд
- Уншиж болох фонтын хэмжээ
Хөнгөн гүйцэтгэл
- JavaScript-ийн хамгийн бага ул мөр
- Маягтуудыг хурдан ачаалах
- Гар утасны сүлжээнд оновчтой болгосон
Шалгах хуудас: Таны маягт гар утсанд бэлэн үү?
Layout
- ☐ Гар утсан дээр ганц багана
- ☐ Хэвтээ гүйлгэх боломжгүй
- ☐ Бүтэн өргөнтэй талбарууд
- ☐ Элементүүдийн хоорондох хангалттай зай
Хэвлэмэл материал
- ☐ Томруулахгүйгээр унших боломжтой шошго (14px+)
- ☐ Хамгийн багадаа 16 пикселийн хэмжээтэй текст оруулна уу
- ☐ Сайн контраст харьцаатай
Харилцаа холбоо
- ☐ Хүрэх цэг нь хамгийн багадаа 44 пиксел
- ☐ Зөв гарын товчлуурын төрлүүд
- ☐ Хялбар унах цэснээс сонголт хийх
- ☐ Товчлох боломжтой тэмдэглэгээний хайрцаг/радио
ажиллагаа
- ☐ Маягтыг амжилттай илгээв
- ☐ Алдааны мессежүүд харагдаж байна
- ☐ Амжилтын мэдэгдэл гарч ирнэ
- ☐ Файл байршуулах ажиллагаа
Гүйцэтгэлийн
- ☐ 3G дээр хурдан ачаална
- ☐ Блоклох скрипт байхгүй
- ☐ Хамгийн бага дата хэрэглээ
Түгээмэл асуултууд
Би талбар дээр товшиход iOS дээр маягтууд яагаад томруулагдаж байна вэ?
Оролтын фонтын хэмжээ 16 пикселээс доош байх үед iOS автоматаар томруулдаг. Үүнээс урьдчилан сэргийлэхийн тулд оролтын фонтын хэмжээг дор хаяж 16 пиксел болгож тохируулна уу.
Би тусдаа гар утасны болон ширээний компьютерын маягт үүсгэх ёстой юу?
Үгүй ээ, хариу үйлдэл үзүүлэх загвар нь хоёуланг нь зохицуулдаг. Нэг сайн боловсруулсан хариу үйлдэл үзүүлэх маягт бүх төхөөрөмж дээр ажилладаг. Тусдаа маягтуудыг хадгалах нь таны ажлыг хоёр дахин нэмэгдүүлж, тогтворгүй байдлын эрсдэлийг нэмэгдүүлдэг.
Би өөрийн эзэмшдэггүй төхөөрөмж дээр хэрхэн туршиж үзэх вэ?
Үндсэн туршилтын хувьд хөтөч хөгжүүлэгчийн хэрэгслүүдийг ашиглаарай. Нарийвчилсан туршилтын хувьд BrowserStack гэх мэт онлайн үйлчилгээг ашиглах эсвэл өөр төхөөрөмжтэй найз нөхөд/хамт ажиллагсдаасаа асуугаарай.
Гар утасны хэрэглэгчид үнэхээр маягт бөглөдөг үү?
Тийм ээ! Мобайл худалдаа болон хэрэглэгчдийг татах нь асар том юм. Хэрэглэгчид гар утсан дээрээ даалгавруудыг гүйцэтгэхийг хүсдэг. Хэрэв таны маягтууд сайн ажиллаж байвал тэд тэдгээрийг ашиглах болно.
Гар утасны хэлбэрийг сайжруулах хамгийн чухал зүйл юу вэ?
Хүрэх цэгийн хэмжээг зөв сонгох. Хэрэв хэрэглэгчид талбар болон товчлууруудыг зөв дарж чадахгүй бол бусад зүйл хамаагүй. Бүх интерактив элементүүд дор хаяж 44×44 пиксел байгаа эсэхийг шалгаарай.
Дүгнэлт
Маягтуудыг гар утсанд хариу үйлдэл үзүүлдэг болгох:
- Бооцоог ойлгоорой – Трафикийн 60 гаруй хувь нь хөдөлгөөнт төхөөрөмж юм
- Хариуцлагатай дизайн ашиглах – Шингэний өргөн, давхарласан зохион байгуулалт
- Хүрэхэд тохиромжтой хэмжээ – Хамгийн багадаа 44 пикселийн товшилтын зорилтот түвшин
- Унших боломжтой байдлыг хангах – Хамгийн багадаа 16 пикселийн оролтын текст
- Баруун гарны товчлууруудыг идэвхжүүлэх – Зөв оролтын төрлийг ашиглах
- Бодит төхөөрөмж дээр туршилт хийх – Зөвхөн симулятор ашиглах хэрэггүй
- Хариу үйлдэл үзүүлэх хэрэгслүүдийг сонгох – Гар утсанд бэлэн маягт бүтээгчдээс эхэл
Дүгнэлт
Гар утсанд хариу үйлдэл үзүүлдэг маягтууд заавал байх албагүй - тэдгээр нь зайлшгүй шаардлагатай. Вэб хандалтын ихэнх хэсэг нь гар утасны төхөөрөмжөөс ирдэг тул утсан дээр ажиллахгүй маягтууд нь таны үйлчлүүлэгчид, үйлчлүүлэгчид болон нэр хүндэд өдөр бүр хохирол учруулдаг.
Автомат маягт үүсгэгч Гар утсанд хариу үйлдэл үзүүлдэг маягтуудыг автоматаар үүсгэдэг. Маягт бүр дэлгэцийн хэмжээнд дасан зохицдог, мэдрэгчтэй элементүүдийг ашигладаг бөгөөд гар утасны сүлжээнд сайн ажилладаг. Тохиргоо шаардлагагүй - зүгээр л маягтаа бүтээгээрэй, тэгвэл энэ нь хаа сайгүй ажиллана.
Гар утсанд ээлтэй маягтуудад бэлэн үү? Автомат маягт үүсгэгчийг татаж авах мөн гар утасны зочдодоо хүртэх ёстой маягтын туршлагыг өгөөрэй.
