Veb-saytlar uchun moslashtirilgan tartib

Mundarija:

Veb-saytlar uchun moslashtirilgan tartib
Veb-saytlar uchun moslashtirilgan tartib
Anonim

Mobil qurilmalar qanchalik ommabop boʻlsa, koʻpchilik saytlarda aylantirish shunchalik noqulay boʻladi. Shu sababli, 2012 yildan beri veb-ustalar past piksellar soniga ega ekranlarda resurslarni ko'rishni yanada qulayroq qiladigan yechimdan foydalanmoqdalar - moslashtirilgan tartib.

Zamonaviy trend

Moslashuvchan tartib
Moslashuvchan tartib

Bugungi kunda Yer yuzida besh milliardga yaqin odam mobil telefonlardan foydalanadi, ularning uchdan birida smartfon bor. Shu sababli, mobil trafik veb-sayt egalari uchun tobora muhim ahamiyat kasb etmoqda. Vaqt o'tishi bilan bunday tashrif buyuruvchilarning manbasi ko'payishi mumkin. Qidiruv tizimlari bu tendentsiyaga tezda javob berdi. Yirik korporatsiyalar "Yandex" va Google moslashtirilgan tartib va dizayn mavjudligini hisobga olgan holda qidiruv natijalarida saytlarni tartiblash algoritmlariga sezilarli o'zgarishlar kiritdi. Oddiy qilib aytganda, mobil telefonlar, smartfonlar va planshetlar uchun optimallashtirilgan veb-resurslar raqobatchilardan biroz ustunlikka ega bo'ladi.

Responsive tartib ta'rifi

Moslashuvchan tartib - bu veb-sahifa ramkasini yaratish usuli,bloklarning joylashishini u ko'riladigan qurilmaning ekran o'lchamlariga muvofiq avtomatik ravishda o'zgartirish. Ya'ni, ushbu yondashuv bilan turli xil rezolyutsiyalar uchun alohida uslublar yaratiladi. Bu effekt maxsus CSS fayllarini yozish orqali erishiladi.

adaptiv rezolyutsiya sxemasi
adaptiv rezolyutsiya sxemasi

Avvalroq muammo biroz boshqacha hal qilingan. Ishlab chiquvchilar ko'proq "tana harakatlarini" qilishlari, saytning asosiy versiyasining tartibi va dizaynini yaratishlari va mobil uchun ham xuddi shunday qilishlari kerak edi. Mavjud mobil platformaga ega internet loyihasi ko'rilgan qurilma ekraniga qarab, saytning tegishli versiyasi ishga tushirildi.

Bu yondashuv koʻp jihatdan oʻzini oqlamadi va koʻpchilik veb-ustalar hech qachon mobil versiyani yaratish bilan shugʻullanmagan. Endi bu tartib moslashtirilgan tartib bilan almashtirildi. Ushbu texnologiyadan foydalangan holda sayt skeletini yaratish orqali vebmaster butun kuchini loyihaning bitta versiyasini yaratishga qaratadi va tashrif buyuruvchilar uni katta kompyuter ekranida ham, mobil telefon, smartfon yoki planshetda ham bir xil darajadagi qulaylik bilan ko'rishlari mumkin.

Tasviriy tartibning afzalliklari

Moslashuvchan veb-sayt tartibining afzalliklari nimada? Avvalroq ta'kidlanganidek, afzallik har qanday qurilmada barcha sahifa bloklarini to'g'ri ko'rsatishdir. Shuningdek, shablonni yaratishda ushbu yondashuvning ijobiy tomoni - o'zgarishlarni amalga oshirish tezligi. Bu nimani anglatadi?

javob beruvchi tartib shabloni
javob beruvchi tartib shabloni

Agar sayt ikkita platformaga ega boʻlsa, maketga kiritilgan oʻzgartirishlar shunday boʻlishi kerak edi.avval ishchi versiyada, keyin esa mobil versiyada amalga oshiring. Agar koddagi o'zgarishlar juda muhim bo'lsa, unda bunday o'zgarishlarni amalga oshirish jarayoni uzoq vaqt talab qilishi mumkin. Moslashuvchan tartib bilan saytdagi ish bitta faylda amalga oshiriladi. Veb-sahifaning tartibiga kiritilgan oʻzgartirishlar tez orada ishlab chiqarish va mobil versiyalarda bir xilda aks etadi.

Ushbu yondashuvning kamchiliklari, ba'zi veb-ustalar uni amalga oshirishning murakkabligi deb atashadi. Ammo CSS 3 ning paydo bo'lishi bilan sezgir tartib shablonini yaratish juda oddiy bo'lib qoldi. Hatto tajribasiz veb-ustalar ham o'z saytlarini mobil qurilmalar uchun qulay qilishlari mumkin.

Moslashuvchan tartib tamoyillari va xususiyatlari

Veb-dizayndagi responsive layout usuli qanday tamoyillar asosida yotadi?

- Suyuqlik sxemasidan foydalanish.

- "Kauchuk" tasvirlar.

- Media soʻrovlaridan foydalanish (media-soʻrovlar).

- Mobil qurilmalar haqida eng boshidanoq oʻylash zarurati.

Ushbu shablonni yaratish usulining ushbu asosiy tamoyillaridan moslashtirilgan tartibning quyidagi xususiyatlari kelib chiqadi:

1. Rezolyutsiyalarning barcha diapazonida ishlashni hisobga olgan holda veb-sayt dizaynini loyihalash va yaratish: mobildan tortib keng ekranli displeylargacha.

2. CSS 3 da kiritilgan media so'rovlar texnologiyasidan foydalangan holda kaskadli uslublar jadvallari bilan tartib.

3. Mijoz va server tomonida tasvirlarni mobil qurilmalarga kichikroq oʻlchamli va ruxsatli yuborish uchun dasturlash.

Muhim jihat, qaysi moslashuvchan tartib yaratilganligini hisobga olgan holdamashhur elektron qurilmalarning ruxsat matritsasi. Dizaynni ishlab chiqishga bunday yondashuv har qanday ekranda veb-sahifalarni ko'rishni juda qulay qiladi. Qaysi birini uslublarga kiritish kerakligini qayerdan bilasiz?

Tasviriy tartibni nimadan boshlash kerak?

Ko'pchilik veb-saytlar smartfon va planshetlar ekranlarida aylanma panellar paydo bo'ladigan tarzda yaratilgan, ular bemaqsad qilish uchun unchalik qulay emas va ko'plab Internet-loyihalarning dizayni va tartibi shunchaki "suzadi". Veb-dizaynni o'rgatish uchun yaratilgan veb-saytlar turli xil qurilmalarning turli xil ekran o'lchamlarini o'z ichiga oladi, ular ostida saytingiz sahifalarini joylashtirishga arziydi.

Moslashuvchan tuzilishga misollar
Moslashuvchan tuzilishga misollar

Misollarini tez-tez uchratish mumkin boʻlgan moslashtirilgan tartib juda koʻp afzalliklarga ega. Sahifa tartibiga shu tarzda yaqinlashganda nimani yodda tutish kerak?

Shablon ustida ishlashni boshlaganda, vaqti-vaqti bilan kontent va tartib bloklari turli ekranlarda qanchalik yaxshi koʻrsatilishini sinab koʻrish muhim. Buning uchun ba'zan brauzer oynasining kengligini o'zgartirish kifoya qiladi. Uslublar fayli media so'rovini qabul qiladi va bloklarni o'zgartiradi va muhim o'zgarishlar kiritadi. Har xil modeldagi mobil qurilmalar ekranlarini taqlid qiluvchi saytlar sezgir tartib shablonini sinab ko'rish uchun yaxshi vosita bo'lishi mumkin. Bunday xizmatlar dizaynning turli mobil qurilmalar displeylarida qanday ko‘rinishini diqqat bilan ko‘rib chiqish va baholash imkonini beradi.

Bunday sezgir maket texnologiyasi unchalik oddiy boʻlmasa-da, uni oʻzlashtirish tez orada oʻz mevasini beradi.

Tavsiya: