Moslashuvchan veb-sayt dizayni bir xil veb-saytni turli turdagi qurilmalarda onlayn ko'rsatish uchun qulay tizimdir. Oddiy qilib aytganda, bu bitta veb-sahifani noutbuk, smartfon va boshqa gadjetlarda ko‘rish imkoniyatidir.
Internetga mos keladigan turli formatdagi gadjetlarni qoʻlga kiritgandan beri veb-resursivlik zaruratga aylandi. Kompaniyalar, onlayn-do'konlar va hatto shunchaki ma'lumot beruvchi saytlar o'z auditoriyasini xursand qilishga intilib, unga har tomonlama moslashadi. Ta'sirchan dizayn qulaylik muammosini hal qiladi, shuning uchun u ajralmas ish elementidir.
Responsiv veb-dizaynning xususiyatlari
Dizaynning qulayligi bir nechta asosiy mezonlar bilan tavsiflanadi.
- Hajmi. Turli qurilmalarda sahifani ko'rsatishda sezgir veb-sayt dizayni kichik farqlarga ega bo'lishi kerak, shuning uchun tasvirlar, matnlar va ko'rilgan boshqa elementlarning o'lchamlari qurilmalarning o'lchamlariga mos kelishi kerak. Buning uchun veb-ishlab chiquvchilar dizaynni bir nechta ko'rish versiyalariga ega bo'lishi uchun moslashtiradilar.
- Kontentni moslashtirish. Saytni to'ldiradigan material (rasmlar, videolarva boshqa multimedia elementlari) ham displey sifatini yo'qotmagan holda kerakli ekran ruxsatiga mos kelishi kerak.
- Dizayn moslashuvchanligi. Ko'rayotgan veb-sahifani o'zgartirganda sayt dizaynini tezda sozlash imkonini beruvchi elementlarni ishlab chiqishga kiritish. Masalan, foydalanuvchi sahifani yuqoriga va pastga aylantiradi, turli bo‘limlar bo‘ylab harakatlanadi yoki ekran o‘rnini vertikaldan gorizontalga va aksincha o‘zgartiradi.
- Yaxshiroq foydalanish uchun elementlarni qurilmaga qarab soddalashtiring.
- Kichikroq ekranlarda ahamiyatsiz bloklarni berkitish.
Asosiylar
Veb-sayt yaratish, albatta, dasturlash tillari bilan bogʻliq, chunki ularsiz ishlay olmaysiz. HTML va CSS-dan foydalangan holda brauzer ob'ektlarning (matnlar, rasmlar, videolar) tarkibi va tartibini taniydi - sayt shunday shakllanadi.
CSS rang, uslublar, oʻlchamlar, shriftlar, hizalamalar, toʻldirishlar, fon elementlari, shakllar va boshqalar uchun javobgardir. HTML saytning umumiy mazmuni va tuzilishi uchun javobgardir. Shunday qilib, veb-resurs ikkita eng muhim tavsiflash usullari yig'indisida yaratilgan.
CSS esa ajralmas dizayn vositasidir. HTMLdan ustun boʻlgan koʻplab funksiyalarga ega:
- Bir nechta sahifalar, sayt koʻrinishida dizayn uygʻunligini taʼminlaydi va HTML hujjatlarini koʻrsatishni nazorat qiladi.
- Bir vaqtning oʻzida dizayn va kontent yaratish imkoniyatini beradi.
- Bir nechta uslublar va imkoniyatlarni qoʻllayditurli qurilmalarda koʻrish.
- Murakkab dizayn qarorlarini qabul qiladi.
- Yuqori tezlik bilan ajralib turadi.
Veb-sayt yaratish uchun siz ba'zi asosiy tushunchalarni bilishingiz kerak.
CSS selektori xususiyatlar va formatlash parametrlarini belgilaydigan uslub nomi bilan belgilanadi. U brauzerga xususiyatlar qaysi elementga tegishli ekanligini aytadi.
Xususiyat tuzilmaviy birlikdir. U tashqi parametrlarni (hajmi, joylashuvi, rangi, shakli va h.k.) belgilaydi va maxsus kodda ifodalanadi.
Bitta ob'ektni tashqi ko'rinishi va joylashuvi bilan tavsiflovchi belgilangan CSS xususiyatlari to'plami mavjud.
Bu elementlar birgalikda quyidagi sxemani tashkil qiladi:
Selector { xususiyat1: qiymat; mulk 2; qiymat }.
Tarz oʻlchamlari va ruxsati
Dizaynni ishlab chiqish Photoshop yoki boshqa grafik dasturlarda maketni tayyorlashdan boshlanadi. Qulaylik uchun tuvalga modulli panjaraning maxsus belgilari kiritiladi, maxsus indentlar kuzatiladi. Shunday qilib, veb-dizayner maket dizayneriga kelajakdagi saytni tuzish tamoyillarini va veb-elementlarni to'g'ri joylashtirishni ko'rsatadi.
Asosiy qurilma turlari uchun javob beruvchi veb-dizayn ruxsatlari va oʻlchamlari:
- Ushbu dizayn mobil ruxsati bilan ishni boshlash tamoyiliga amal qiladi. Smartfon uchun dizayn 460 × 960 piksel o'lchamida yaratilgan.
- Planshet sxemasi oʻlchami 768 × 1024.
- Noutbuk oʻlchami 1280 × 802.
- Kompyuter oʻlchami 1600 × 992.
Saytning mobil versiyasidabarcha asosiy funktsiyalarni saqlab qolgan holda, iloji boricha soddalashtirilgan bo'lishi kerak. Agar maket onlayn-do'kon uchun tayyorlanayotgan bo'lsa, foydalanishda barcha soddalashtirilgan holda, unda asosiy tavsif, mahsulot katalogi, buyurtma opsiyasi, xarid qilish savati va boshqalar bo'lishi kerak - to'liq ishlash uchun barcha kerakli elementlar, kompyuterda to'liq formatli ko'rish kabi. Mobil versiyaning qulayligi shundaki, bu yerda yuklashda vaqtni tejash uchun ortiqcha sahifalardan qochishingiz mumkin.
Moslashuvchan kontentda html kodidan foydalanib, ba'zi keraksiz elementlarni yashirishingiz mumkin. Masalan, yuqori aniqlikda, sayt tavsifi, narxi, etkazib berish ma'lumotlari va "Savat" ga qo'shish imkoniyati bilan mahsulot kartasini ko'rsatadi. Mobil ruxsatda jarayon surat, narx va sotib olish tugmasi bilan soddalashtirilgan.
Responsive dizayn uchun oʻrta va minimal ruxsatlar foydalanuvchi tomonidan oʻqish va koʻrish qulayligini hisobga olishi kerak.
Tarz
Moslashuvchan dizayn tartibining maqsadi moslashuvchan tartibni yaratishdir yoki odat bo'yicha: "rezina shablon". Xulosa bir xonali sahifa o‘lchamlarida emas, balki barcha qurilmalarda oson ko‘rish uchun shablonning mutanosib siqilishida.
U asosan CSS-da qurilgan. Ishlab chiqish jarayonida ekran o'lchamlarini nazorat qilish nuqtalari aniqlanadi. Shunday qilib, qolgan ob'ektlarning kengligi aniqlanadi. Buning uchun sahifaning kengligi css max-width xususiyati bilan o'rnatiladi, bu mezonlarga qarab, boshqa elementlarning o'lchami foiz sifatida tanlanadi. Masalan, asosiy blokning o'lchamisahifa 600px, yon panel blokining kengligi (sayt yon paneli) mos ravishda 400px, kontent kengligi 60% va yon panel kengligi 40% boʻladi.
Ta'sirchan tartiblarning bir nechta turlari mavjud. Xususiyatlari va tuzilishiga qarab har biri alohida tanlanadi.
Koʻrishlar:
- Ekran oʻlchamlari pasayganda bloklarni oʻrash imkonini beruvchi tartib turi. Koʻp ustunli saytlarda qoʻshimcha bloklar ekranning pastki qismiga koʻchiriladi.
- Har bir ruxsat uchun alohida naqsh ishlab chiqilganda. Bu turdagi sezgir dizayn ko‘proq vaqt oladi, lekin eng o‘qilishi mumkin.
- Barcha elementlarni masshtablashtirishga qaratilgan oddiy dizayn turi. Bu moslashuvchan emas.
- Panel turi mobil ilovalarda, ekran oʻrnini oʻzgartirganda qoʻshimcha funksiyalar paydo boʻlganda foydalanish uchun qulay.
Ta'sir qiluvchi qatlamlarni yaratish - bu ishning faqat bir qismi. Moslashuvchan tasvirlar alohida holat boʻlib, ularning oʻziga xos muammolari va ularni hal qilish usullari mavjud.
Yagona tasvir turli ekran oʻlchamlarida aniq koʻrsatilishi kerak. Bu erda muammo bor - piksellar sonini o'zgartirishdan qat'i nazar, rasm har doim bir xil bo'lib qolishiga qanday ishonch hosil qilish kerak. Bu holda oddiy CSS kodini kiritishning o‘zi etarli bo‘lmaydi.
Masalan: img {max-width: 250px;} - bu yerda siz rasmning oʻzi emas, balki tasvirni oʻz ichiga olgan konteyner hajmi cheklangan boʻlgan usulni qoʻllashingiz kerak. Bu shunday ko'rinadi: div img {maksimal kenglik: 250px;}. Ushbu usul muammoni hal qiladikichik tasvirlar tartibi, lekin katta rasmlar uchun mos emas.
Shuning uchun koʻplab ishlab chiquvchilar serverni ortiqcha yuklamasdan istalgan tasvirni moslashtirish imkonini beruvchi JavaScript tillaridan foydalanishni afzal koʻrishadi. Javascript koʻp sonli muqobil skriptlarni taklif etadi.
Responsive maketning afzalliklari va kamchiliklari
Ijobiy tomonlar:
- Barcha elementlarning joylashuvini saqlang. Bu foydalanuvchi saytning toʻliq versiyasiga oʻrganib qolganda qulay.
- Domen va manzillarni saqlang.
- Boshqa ruxsat formatlari uchun toʻliq moslashtirish.
Salbiy tomonlari:
- Funktsional moslashuvchanlik yo'qoladi
- Har qanday ma'lumot beruvchi ortiqcha yuklamalar veb-resursning uzoq muddat ishga tushirilishi bilan bog'liq bo'lib, bu ko'plab foydalanuvchilarni tezroq variantlarga o'tishga majbur qiladi.
Veb-sayt yaratish
Sayt tuzilishi bir necha boʻlim va bloklarga boʻlingan. An'anaga ko'ra, tartib saytning yuqori qismi (sarlavha), logotip, menyu, kontent bloki va saytning yakuniy qismidan (masalan, batafsil aloqa ma'lumotlaridan) iborat. Keling, oddiy shablondan qanday qilib sezgir veb-sayt dizayni yaratishni ko'rib chiqaylik.
Yozish uchun yordamchi teglar:
- wrapper - barcha shablon elementlarini birlashtirgan teg;
- h1 sarlavhasi - logotip;
- sarlavha - menyu va boshqa muhim elementlar uchun sarlavha;
- kontent - bloklash;
- colLeft - kontent hajmi;
- colRight - yon panel (yon ustun);
- footer - saytning yakuniy qismi;
- media ekrani - to'plamlarkerakli ruxsat.
Sayt yozishda bu elementlar ehtiyojga qarab boshqa tartibda harakatlanishi mumkin. Masalan, yuqori piksellar sonida menyu vertikal ravishda ko'rsatilishi mumkin. Mobil versiyada tartib menyu gorizontal holatda chiqib ketadigan tarzda tuzilishi mumkin.
- viewport - dizaynning kichikroq versiyasida matn hajmini saqlash imkonini beruvchi teg. U teglar orasida joylashgan.
- max-width - 1000 pikseldan ortiq piksellar soniga cho'zilmasligi uchun saytni optimallashtirish.
Tuzilishni amalga oshirishda jQuery kutubxonasi bloklarning uslubi va tuzilishini oʻzgartirish kerak boʻlganda katta yordam beradi.
Responsiv va mobil dizayn oʻrtasidagi farq nima
Toʻliq tushunish uchun bir nechta illyustrativ misollarni koʻrib chiqing, chunki bu ikki tushuncha oʻrtasidagi chalkashliklar kam uchraydi.
Mobil versiya subdomenga ega asosiy saytning analogi ekanligini tushunishingiz kerak. Saytning tashqi taqdimoti uslub va funksionallikni butunlay takrorlaydi, shu bilan birga uning tuzilishi va mazmuni asosiy versiyadan farq qilishi mumkin, chunki versiya kerakli elementlargacha qisqartirilgan.
Responsive dizayn barcha qurilmalar ruxsati uchun maqbuldir. U koʻlamli va koʻrish shartlaridan qatʼiy nazar toʻgʻri koʻrsatiladi.
Bular saytning ikki xil taqdimoti boʻlib, ular atrofida qaysi biri yaxshiroq ekani haqida bahslar tinimsiz muhokama qilinadi. Qayd etish joizki, hozircha aniq bir qarorga kelinmagan. Kimdir moda tendentsiyasini va ko'plab afzalliklarni ko'rsatib, ushbu dizaynni maqtaydi. Mobil versiya, shuningdek, sezgir dizaynga ega bo'lmagan bir qator afzalliklarga ega. Shuning uchun, avvalo, asosiy ehtiyojlarni tushunishingiz kerak.
Foydalar
Qanday qilib sezgir dizayn mobildan yaxshiroq?
Koʻp tomonlama. Bizning zamonamizda, bozorning bunday jasur o'sishi bilan, ma'lumotni iste'molchilarning istaklarini qondiradigan boshqacha tarzda taqdim etish kerak. Javob beruvchi dizayn bu muammoni hal qiladi.
Qidiruv tizimlarida samarali reklama. Moslashuvchan qurilmaning asosiy afzalliklarini nima bilan bog'lash mumkin emas. Qidiruv mexanizmlari foydalanuvchilarga sezgir veb-saytlar berishni afzal ko'radi.
Foydalanish imkoniyati. Ta'sirchan dizayn odatda eng yaxshi dizayn echimlarida ishlab chiqilgan bo'lib, bu foydalanuvchilarning vizual idroki uchun yoqimli sovg'adir.
Loyihani amalga oshirishda ham, undan foydalanishda ham qulaylik va soddalik.
Yaxshi konversiya stavkalari. Moslashuvchan dizaynda namoyish qilish uchun koʻproq imkoniyatlar mavjud boʻlgani uchun konvertatsiyaning oʻzi ham ortadi.
Iqtisodiyot. Bu alohida mobil versiyani yaratish va targʻib qilishdan nisbatan arzonroq.
Mobil versiyaning afzalliklari va kamchiliklari
Ta'sirchan mobil dizayn yaratish ko'p qirrali va izchillikni talab qiladi. Avvalo, texnik topshiriqni batafsil yozish tavsiya etiladi, bu, albatta, keraksiz ishlarni oldini olishga va vaqtni tejashga yordam beradi, shuningdek, sayt joylashgan serverning xususiyatlarini hisobga oladi..
Mobil moslashtirilgan dizaynning afzalliklari va kamchiliklari bor.
Ijobiy tomonlari:
- Agar sizda tayyor sayt boʻlsa, mobil versiya uchun dizaynni noldan ishlab chiqishning hojati yoʻq. Bu tartibni keraksiz funksiyalardan ozod qilish uchun faqat bir nechta oʻzgartirishlar kiritish mumkin.
- Har xil soddalashtirishlar tufayli mobil versiya yuklab olishda tezroq hisoblanadi.
- Foydalanuvchi barcha kontentdagi eng muhim ma'lumotni ko'radi.
- Tez amalga oshirish. Teglar va kodlarni bilmasangiz ham, mobil moslashuvni amalga oshirishingiz mumkin bo'lgan plaginlar mavjud.
- Qidiruv tizimida moslashtirilgan versiyalar yoqadi, chunki ularni tahlil qilish uchun kamroq vaqt ketadi.
Kamchiliklari:
- Hamma mobil versiyalar mobil qurilma ruxsatiga mos kelmasligi mumkin. Sayt, albatta, ochiladi, lekin ekran o'lchamlari har doim ham tartibga mos kelmaydi. Ba'zan yaxshi ishlab chiqilgan smartfon dizayni planshet sifatida ochilganda boshqacha ko'rinishi mumkin.
- Mobil versiyalar uchun alohida pullik domenlar kerak.
- Kontentni joylashtirishda kichik muammolar bor. Agar bir vaqtning o'zida bir nechta versiyalar mavjud bo'lsa, tarkib bir vaqtning o'zida barcha formatlar uchun sozlanishi kerak. Asosiy saytda yangi material yuborish va uni mobil versiyaga nusxalash o'g'irlik deb hisoblanishi mumkin. Bu muammoning oldini olish uchun manbalar ulanishini isbotlashingiz kerak bo‘lishi mumkin.
Amalga kiritish usullari
Asosiy amalga oshirish usullari:
- Tuzilish va maket dizaynini yaratgandan so'ng, u kerakli o'lchamlarga yuklanadioperator sayti va asosiy kod. Bu oʻrta va kichik versiyalarni (planshetlar, smartfonlar va h.k.) yaratishda qoʻllaniladigan klassik usuldir.
- BootStrap - moslashtirish vositalarining oddiy va tushunarli to'plami. Landing Page va boshqa unchalik murakkab bo'lmagan veb-loyihalar uchun versiyalarni yaratish uchun javob beradi. Bu interfeys funktsiyalarida turli uslublarni qo'llash uchun yaxshi imkoniyat beradi.
- Responsive Grid System - bu koʻp qirrali asboblar toʻplami. Qo'llash oson va chuqur bilim talab qilmaydi. Turli xil infografikalarni o‘z ichiga oladi.
- GUMBY - moslashuvchan sezgirlik va ajoyib asboblar bilan maqtanadigan CSS ramkasi.
- Cookie-fayllar - sezgir tasvirlarni amalga oshirish imkonini beradi. Brauzer talab qilgan fayllarga avtomatik ravishda hamrohlik qiladi.
- ExpressionEngine - sezgir tasvirlarni yaratishning yana bir usuli. Qurilmaning mobil ekanligini va rasmlarni kerakli piksellar sonini oʻzgartirishga qodirligini aniqlaydi.
- ProtoFluid - Tez prototiplashni ta'minlaydi. Barcha turdagi qurilmalar uchun mos.
