Saytning mobil versiyasi: buni qanday qilish kerak? Moslashuvchan dizayn

Mundarija:

Saytning mobil versiyasi: buni qanday qilish kerak? Moslashuvchan dizayn
Saytning mobil versiyasi: buni qanday qilish kerak? Moslashuvchan dizayn
Anonim

Bugungi kunda koʻpchilik mobil gadjetlar – planshetlar, telefonlar orqali internetga kirishadi, shu munosabat bilan veb-saytlarni optimallashtirish ham yangi bosqichga koʻtarilmoqda. Agar foydalanuvchi kirsa va sayt mobil qurilmalar uchun optimallashtirilmaganligini ko'rsa: tasvirni ko'rib bo'lmaydi, tugmalar tashqariga siljigan, shriftlar kichik va o'qib bo'lmaydigan, dizayn egri - 100% dan 99 tasi chiqib ketadi. va boshqa qulayroq narsani qidirishni boshlang. Va qidiruv roboti manbaning ahamiyatsizligini, ya'ni qidiruv so'roviga mos kelmasligini belgilab qo'yadi. Shuning uchun sahifa dizayni turli xil mobil qurilmalarga moslashtirilgan bo'lishi kerak. Saytning mobil versiyasi nima, uni qanday qilish kerak va uni qo'llashning eng yaxshi usuli qanday? Batafsil ushbu maqolada oʻqing.

Shuning uchun saytingizni mobil qurilmaga moslashtirishning toʻrtta asosiy usuli bor.

saytning mobil versiyasini qanday qilish kerak
saytning mobil versiyasini qanday qilish kerak

Birinchi usul - sezgir dizayn

Responsive andozalar sayt tasvirini ekran oʻlchamiga qarab oʻzgartiradi. Qoida tariqasida, ular standart 1600, 1500, 1280, 1100, 1024 va 980 pikselga o'rnatiladi. Amalga oshirish uchun CSS3 Media Queries ishlatiladi. Sayt dizayni o'zgarmaydi.

Ushbu usulning afzalliklari quyidagilardan iborat:

  • qulay rivojlanish,chunki strukturaning o'zi ekran parametrlariga moslashadi va har qanday yangilash noldan dizaynni ishlab chiqishni talab qilmaydi, CSS va HTML-ni sozlash kifoya;
  • bitta URL – foydalanuvchi bir nechta nomni eslab qolishi shart emas, qayta yoʻn altirishga (bir manzildan boshqasiga yoʻn altirishga) hojat yoʻq, bu webmaster ishini murakkablashtirishi mumkin va qidiruvni osonlashtiradi. bitta manzilli manbani saralash va tartiblash uchun vosita.

Albatta, moslashuvchan shablonlarning kamchiliklari bor, ular, aytmoqchi, afzalliklardan ko'ra ko'proq. Shunga qaramay, ko'plab ishlab chiquvchilar ushbu kontseptsiyaga amal qilishadi, masalan, saytning mobil versiyasi moslashuvchan dizaynga ega bo'lgan Google korporatsiyasi. Shunday qilib, kamchiliklar:

  • Responsive dizayn mobil qurilmada kompyuterdagi kabi vazifalarni qoʻllab-quvvatlamaydi. Agar bu, masalan, valyuta kursi yoki eng yaqin bankomatlar haqidagi ma'lumotlar foydalanuvchi uchun muhimroq bo'lgan bank veb-saytining mobil versiyasi bo'lsa, unda bu dizayn juda etarli. Ammo bu juda koʻp boʻlim va boʻlimlarga ega murakkab tuzilgan resurs boʻlsa, tashrif buyuruvchilarga moslashtirilgan tartib yoqmaydi.
  • Sekin yuklanish sevimli saytni nafratlanadigan saytga aylantiradi. Bu, ayniqsa, animatsiyalar, videolar, qalqib chiquvchi oynalar va boshqa faol elementlar ko'p bo'lgan resurslar uchun to'g'ri keladi. Katta vazn tufayli sahifa shunchaki “sekinlashadi”, foydalanuvchi jahli chiqib ketadi va saytning qidiruv pozitsiyalari tushib ketadi.
  • Mobil versiyani o'chirib bo'lmasligi yana bir muhim kamchilikdir. Agar ba'zi element bunday tartib bilan yashiringan bo'lsa, sizUni oʻchirib, oddiy domenga oʻtish mumkin boʻlgan saytlardan farqli oʻlaroq, uni ochish uchun hech narsa qila olmaysiz.

Biroq, saytning bunday mobil versiyasi tezda, maxsus mahorat va xarajatlarsiz resursni har qanday gadjetlarga moslashtirish imkonini beradi. Biroq, sanab o'tilgan kamchiliklarni hisobga olgan holda, u murakkab navigatsiya va animatsiyasiz, minimal ma'lumot va multimediali kichik, oddiy resurslarga mos keladi. Murakkab sayt uchun yana 2 usul mos keladi.

sayt dizayni
sayt dizayni

Ikkinchi usul - saytning alohida versiyasi

Ushbu usul juda keng tarqalgan va koʻpincha saytni mobil qurilmada oʻqilishi mumkin boʻlgan qilishda muvaffaqiyat qozonadi. Uning mohiyati ilova uchun chizilgan va alohida URL yoki subdomenda joylashgan sahifaning alohida versiyasini yaratishdir, masalan, m.vk.com. Shu bilan birga, asosiy funksionallik saqlanib qolgan, sayt dizayni shunchaki boshqacha ko'rinadi. Ushbu usulning afzalliklari aniq:

  • foydalanuvchilar uchun qulay interfeys;
  • oʻzgartirish va tahrirlash oson, chunki versiya asosiy manbadan alohida mavjud;
  • kam vazn tufayli saytning alohida versiyasi moslashtirilgan shablonga qaraganda tezroq ishlaydi;
  • koʻpincha mobil telefondan sahifaning asosiy versiyasiga oʻtish mumkin.

Lekin bu yerda ham kamchiliklar bor edi:

  • Bir nechta manzillar - saytning ish stoli va mobil versiyasi. Qanday qilib foydalanuvchi ikkita variantni eslab qolishini ta'minlaydi? Veb ustalari ko'pincha ish stoli versiyasidan mobil versiyaga qayta yo'n altirishni (yo'n altirishni) belgilaydilar, lekin shu bilan birga, agar ushbu sahifa mobil qurilmada bo'lsa.versiya mavjud emas, foydalanuvchi xatoga yo'l qo'yadi. Bu yerda qidiruv tizimlarida 2 ta bir xil manbalarni tartiblashda qiyinchiliklar yuzaga keladi va bu reklamaga bevosita taʼsir qiladi.
  • Kompyuterdan saytning mobil versiyasi, agar foydalanuvchi unga xatolik bilan kirsa, kulgili koʻrinadi va bu trafikka ham taʼsir qilishi mumkin.
  • Ushbu versiya koʻpincha ish stoli uchun juda cheklangan, shuning uchun foydalanuvchi juda cheklangan funksiyalarga ega boʻladi. Shu bilan birga, agar biror narsa etishmayotgan bo'lsa, tashrifchi sahifaning to'liq versiyasiga o'tishi mumkin.

Umuman olganda, alohida mobil sayt oʻzini oqlaydi va resursni mobil qurilmalar uchun moslashtirishning eng keng tarqalgan usuli hisoblanadi. U Amazon kabi yirik onlayn-doʻkonlar orasida mashhur.

moslashuvchan shablonlar
moslashuvchan shablonlar

Uchinchi usul - RESS dizayni

Google qidiruv tizimi mobil dizaynning ushbu yoʻnalishini faol qoʻllab-quvvatlaydi. Bu saytni telefon yoki planshetga moslashtirishning eng murakkab, qimmat, lekin samarali usuli. U RESS deb ataladi. Bu har bir qurilma uchun alohida yuklab olinadigan mobil ilovaga resursni maqsad qilib qo'yadi. Android uchun - GooglePlay bilan va Apple uchun - iTunes bilan.

Bunday ilovalar tez, bepul, qulay boʻlib, har xil turdagi maʼlumotlarni joylashtirish imkoniyatiga ega, telefon xotirasi va internet-trafik esa brauzer orqali saytga kirgandek yeb qoʻyilmaydi. Ularga kirish oson, chunki havola doim qo‘l ostidagi ekranda bo‘ladi va brauzerning manzil satriga murakkab nom kiritish shart emas.

Albatta, bu yerda vauning kamchiliklari, masalan, rivojlanishning murakkabligi, ko'p sonli dasturchilar mehnatining yuqori narxi, bir nechta tartib variantlarini yaratish zarurati. Ba'zan mobil qurilma ilova tomonidan tan olinmaydi. Muntazam texnik yordam, kamchiliklarni tuzatish zarur. Shunga qaramay, bu variant samarali va uzluksiz ishlashi tufayli taklif qilingan uchta variantning eng yaxshisi hisoblanadi.

google mobil veb-sayti
google mobil veb-sayti

Mobil veb-sayt yaratishning eng arzon usuli

Yuqoridagi barcha usullar har doim ham uzoq va qiyin boʻlmasa-da, lekin baribir webmasterning pullik ishini oʻz ichiga oladi. Agar siz bunday rivojlanishga shoshilinch ehtiyoj sezmasangiz, saytning oddiy va bepul mobil versiyasi sizga mos keladi. Buni qilishning eng oson yo'li nima?

Responsive dizayn uchun maxsus shablonlarni (plaginlarni) yuklab oling. Masalan, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile va boshqalar. Ular saytni telefonda toʻgʻri koʻrsatishga yordam beradi, shu bilan birga sahifani mobil versiyaga moslashtirish uchun nimalarni tuzatish kerakligi haqida bir necha maslahatlar olasiz.

Albatta, bu usul jiddiy manbalar uchun deyarli mos kelmaydi. Aksincha, bu bepul xususiyat kichik va oddiy saytlar, bloglar, yangiliklar lentalari uchun mo'ljallangan. Shuni unutmangki, Google qidiruv tizimi, shuningdek, Yandex bugungi kunda mobil versiyalarga jiddiy talablar qo'ymoqda, shuning uchun bu usul yordamida o'z pozitsiyalaringizni pasaytirish uchun katta imkoniyat bor.

Ushbu usul yordamida katta ehtimol bilan reklamalar va qalqib chiquvchi oynalar oʻchirib tashlanadibannerlar, lekin sahifa tez va “kechikmalarsiz” yuklanadi.

saytning mobil versiyasi android
saytning mobil versiyasi android

Mobil versiyalarni yaratish tamoyillari

Saytning mobil versiyasi bepulmi yoki veb-ustalar xodimlari yordamida yaratilganmi, farqi yo'q, u RESS tizimida yoki moslashtirilgan shablon yordamida yaratilgan. Eng muhimi, uning samarali ishlashi uchun bir nechta juda muhim tamoyillarga rioya qilish talab etiladi. Xo'sh, saytning mobil versiyasi qanday bo'lishi kerak? Qanday qilib uni samarali, samarali va samarali qilish mumkin?

kompyuterdan saytning mobil versiyasi
kompyuterdan saytning mobil versiyasi

Barcha keraksizlarni olib tashlang

Minimalizm - bu saytning mobil versiyasini ishlab chiquvchisi bunga intilishi kerak. Ranglar, tugmalar, bannerlar bilan to'ldirilgan va kerakli materialni qidirishda cheksiz aylanib chiqishingiz kerak bo'lgan ma'lumotni qabul qilish qanchalik qiyinligini tasavvur qiling. Mobil dizayn sodda va toza bo'lishi kerak. Bo'shliqni ajratish uchun 2-3 rangni tanlang (masalan, markali). Ulardan biri oq bo'lsa yaxshi bo'ladi. Kichkina ekranning bo'sh joyini tushunarli va o'qilishi mumkin bo'lgan zonalarga ajrating. Virtual kalitlar ko'rinadigan bo'lishi kerak, shunda foydalanuvchi qaerga bosishni va ko'rishni aniq biladi - mana mahsulot, mana ma'lumotlarni to'ldirish shakli, bu erda yetkazib berish va to'lov haqida ma'lumot.

Ish stoli versiyasida foydali boʻladigan va foydalanuvchi hayotini osonlashtiradigan barcha qoʻshimcha imkoniyatlar bu yerda faqat qiyinchiliklarni keltirib chiqaradi. Faqat eng muhim elementlarni qoldiring. Animatsiya, reklama bannerlari, multimediya, ehtimol, faqat sayt yoki dastur ishini sekinlashtiradi va undan chalg'itadi.asosiy.

Hizaga solish

Tezlash masalasi ham bundan kam emas, chunki notoʻgʻri bajarilgan taqdirda foydalanuvchi faqat muhim soʻzlarning oxirini oladi. Chapga tekislangan va vertikal tekislash odatda qabul qilinadi. Tasavvur qiling-a, o'zingizni telefoningizdagi yangiliklar lentasini aylanib chiqasiz. Buni chapga yoki o‘ngga emas, yuqoridan pastga qarab bajarasiz.

Birlashtirish

Uzoq oʻtish zanjiri imkoni boʻlmasa, bir nechta bosqichlarni bittaga birlashtirishga harakat qiling. Misol uchun, sayt ma'lumotlarni bir necha bosqichda kiritishni talab qiladi - ism, keyin manzil, bu erda har bir alohida katakda alohida uy, ko'cha, kvartira va boshqalar mavjud. Foydalanuvchini ko'plab kichik hujayralarni urishga majburlamaslik uchun, undan faqat 2 - ism va manzilni toʻldirishini soʻrang.

Va uzilish

Ba'zan, aksincha, juda ko'p ma'lumotlarni ajratish talab qilinadi. Masalan, ochiladigan menyuda siz etkazib berish amalga oshiriladigan 80 dan ortiq shaharlarning ro'yxatiga egasiz. Ularni mintaqalar bo'yicha guruhlang, shunda foydalanuvchi ushbu ulkan ro'yxatni aylanib chiqmasligi kerak. U kursorni viloyat markazi yoki viloyat ustiga olib kelsa, boshqa shaharlar roʻyxati oʻchib ketadi.

Ro'yxatlar

Aytgancha, ro'yxatlar haqida. Ulardan ikkitasi bor - alifbo tartibida yoki boshqa tartibda va almashtirish bilan. Ularning tanlovi roʻyxatda nima boʻlishiga bogʻliq.

Fixed, agar foydalanuvchi nimani qidirayotganini aniq bilsa foydali boʻladi. Masalan, shahar, raqam yoki sana. Ikkinchi variant uzoq murakkab nomlar uchun yoki bir xil va bir xil o'zgarishlar mavjud bo'lgan holatlar uchun javob beradibir xil nom va har bir ochiladigan ro'yxat foydalanuvchini maqsadga bir qadam yaqinlashtiradi. Avtomatik almashtirish opsiyasi ko'proq tashrif buyuruvchiga yordam kerak bo'lganda qo'llaniladi. Misol uchun, trikotaj sayti naqshli igna sotib olishni taklif qiladi. Foydalanuvchi “Metal trikotaj ignalari” qidiruv so‘rovini kiritadi va ko‘rsatmalar panelida “To‘qilgan ignalar 5 mm”, “To‘qilgan ignalar 4,5 mm” va hokazolarni ko‘radi.

Avtomatik toʻldirish

Bu narsa, ayniqsa, biror narsa onlayn sotiladigan saytlar uchun juda mos keladi va siz toʻlov, yetkazib berish va hokazolar uchun standart shakllarni toʻldirishingiz kerak. Agar biror kishi telefon orqali xarid qilsa, unda uning vaqti boʻlmasligi mumkin. kompyuterga o'tish uchun, ya'ni sotib olish jarayoni imkon qadar tez va qulay bo'lishi kerak.

Buning uchun shakllar allaqachon to'ldirilgan ma'lumotlarni o'z ichiga olishi mumkin, siz eng mashhur javoblarga murojaat qilishingiz mumkin. Misol uchun, bugungi sanani, naqd to'lov usulini, agar siz xuddi shu mintaqada ishlasangiz, shaharni kiriting. Ularni o'zgartirish mumkin, lekin agar siz maqsadga erishsangiz, foydalanuvchining vaqti tejaladi.

Hammasi oʻqildi, hammasi koʻrildi

Saytning mobil versiyasini loyihalashda unutmangki, har kimning telefoni har xil, koʻrish qobiliyati ham har xil. Ehtimol, sizning saytingiz kichik ekrandan ko'rinadi, shuning uchun shriftlar oddiy va o'qilishi mumkin bo'lishi kerak, tugmalar boshqa sahifaga o'tmasdan bosilishi uchun etarlicha katta bo'lishi kerak va tasvirlar alohida, katta ochilishi kerak, ayniqsa u Internetga tushadi. do'kon.

Ba'zi statistika

Saytni mobil qurilmalarga moslashtirish haqida gapirganda, bu jarayon uchun qanchalik muhimligini tushunish uchun statistik ma'lumotlarga murojaat qilmaslik mumkin emas.onlayn reklama.

Raqamlar quyidagicha. Bugungi kunda gadjetlardan eng kichik bolalar va ba'zi qariyalar bundan mustasno, aholining 87 foizi foydalanadi. Iqtisodchilar kelgusi 5 yil ichida mobil tijorat 100 barobar o'sishini bashorat qilmoqdalar. Shu bilan birga, saytlarning atigi 21 foizi mobil qurilmalar bilan ishlashga moslashtirilgan. Bu Internet-trafik va elektron tijorat bozorining faqat kichik 5 qismini egallaganligini bildiradi.

Bu raqamlar haqida oʻylab koʻring. Resursingizni moslashtirish mantiqiymi? Albatta Ha. Bundan tashqari, ushbu bozorda bo'sh joy juda ko'p bo'lsa-da, siz unda o'z segmentingizni kesib olishingiz mumkin.

saytning mobil versiyasi bepul
saytning mobil versiyasi bepul

Mobil versiya kerak boʻlgan joyda

Mobil versiyadan foydalanish yuqori reytingga ega bo'lishni maqsad qilgan har qanday platforma uchun mantiqiy. Axir, bu foydalanuvchiga bevosita ta'sir qiladi va uning saytingizda qolishi uchun qulay sharoit yaratadi.

Mobil versiyasiz mavjud boʻlmaydi:

  • yangilik portallari, chunki ularning aksariyati ishga yoki maktabga ketayotganda telefon orqali koʻriladi;
  • ijtimoiy tarmoqlar - xuddi shu sababga ko'ra, shuningdek, onlayn aloqa omili mavjud, ya'ni buning uchun qulay, tushunarli chat yaratilishi kerak;
  • ma'lumotnoma, navigatsiya saytlari va boshqalar, odamlar biror narsa qidirganda boradigan joylar;
  • onlayn-do'konlar - xarid qilish uchun vaqt sarflamaydigan, balki mobil Internet orqali hamma narsani sotib oladigan mijozlarni jalb qilish imkoniyati.

Xulosa oʻrniga

Bugungi kunda mobil texnologiyalar dunyodafaol o'sish va rivojlanish, shuning uchun bozorda etakchilikka intilayotgan har qanday kompaniya o'z Internet-resursi talablarga javob berishini ta'minlashi kerak. Foydalanuvchining o'sib borayotgan talablari tufayli saytlar doimiy ravishda yangilanib, turli xil qurilmalarga moslashtirilishi kerak. Agar biror kishi ma'lum bir resursda bo'lish noqulay bo'lsa, u erda mahsulot yoki narx haqida ma'lumot ololmasa, buyurtma bera olmasa, etkazib berish haqida bila olmasa, u bularning barchasi mumkin bo'lgan saytni topadi. Shuning uchun tanlovda g‘olib chiqish uchun moslashuvchan, qulay, funktsional va qiziqarli resursga ega bo‘lish muhim.

Android yoki Ios veb-saytining mobil versiyasi bunga yordam beradi. Buning uchun siz yuqoridagi qayta dizayn usullaridan birini tanlashingiz kerak - moslashuvchan shablon, subdomenda yangi sayt yaratish va unga yo'n altirish, bepul shablonlardan foydalanish yoki foydalanuvchi kirishini osonlashtiradigan mobil ilovani yaratish. va sahifada boʻling.

Bu yondashuv nafaqat mavjud mijozlarning sodiqligini saqlab qolishga yordam beradi, balki yangi tashrif buyuruvchilarni jalb qilish imkoniyatini ham beradi.

Tavsiya: