Veb-sahifangizning kengligini belgilash

Ko'pchilik dizaynerlar veb-sahifasini yaratishda birinchi narsa nimani o'ylab topishi kerakligi. Bu, albatta, sizning dizayningiz qanchalik keng bo'lishi kerakligini hal qiladi. Hozirda standart veb-sayt kengligi kabi hech narsa yo'q.

Nima uchun qarorni o'ylab ko'ring

1995 yilda standart 640x480 o'lchamli monitorlar mavjud bo'lgan eng katta va eng yaxshi monitor edi. Bu veb-dizaynerlar 12 dyuymdan 14 dyuymgacha bo'lgan o'lchamdagi monitörda maksimal darajadagi veb-brauzerlarda yaxshi ko'rinadigan sahifalarni yaratishga qaratilgan.

Bugungi kunda 640x480 piksellar sonini veb-saytlarning ko'p sonli trafikining 1 foizidan kamrog'i tashkil etadi. Odamlar 1366x768, 1600x900 va 5120x2880 kabi yuqori rezolyutsiyasi bo'lgan kompyuterlardan foydalanadi. Ko'pgina hollarda 1366x768 piksellar uchun ekranni loyihalash ishlari olib boriladi.

Biz veb-dizayn tarixida bir nuqtada bo'lamiz, unda biz hal qiladigan narsalar haqida qayg'urmasligimiz kerak. Ko'pgina odamlar keng, keng ekranli monitorlarga ega va ular brauzer oynasini maksimal darajada oshirib yubormaydilar. Shunday qilib, agar siz 1366 piksel kenglikda bo'lmagan sahifani loyihalashga qaror qilsangiz, sahifangiz, ehtimol yuqori brauzerlarda ham katta brauzer oynalarida ham yaxshi ko'rinadi.

Brauzer kengligi

Fikrlashdan avval "OK, men sahifalarimni 1366 piksel kenglikda o'stiraman", degan gap bor. Veb-sahifaning kengligi haqida qaror qabul qilayotganda tez-tez e'tibordan chetda qoladigan muammo sizning mijozlaringizning brauzerlarini qanchalik katta saqlashi. Xususan, ular brauzerlarni to'liq ekran hajmida maksimal darajaga ko'taradimi yoki ular to'liq ekrandan kichikroqmi?

Barcha kompaniya standarti 1024x768 piksellardagi noutbukni ishlatgan bir norasmiy so'rovda, ularning ikkala ilovasi ham maksimal darajada oshirildi. Qolganlari turli xil sabablarga ko'ra turli o'lchamli oyna ochildi. Bu shuni anglatadiki, agar siz ushbu kompaniyaning intranetini 1024 piksel kenglikda loyihalashtirmoqchi bo'lsangiz, foydalanuvchilarning 85 foizi butun sahifani ko'rish uchun gorizontal harakat qilishlari kerakligini ko'rsatadi.

Eng yuqori darajadagi mijozlarni hisobga olganingizdan so'ng, brauzer chegaralari haqida o'ylang. Har bir veb-brauzerida mavjud bo'lgan joyni 800 dan 740 pikselgacha yoki 800x600 pikselli o'lchamda va 924 piksel atrofida 1024x768 ruxsati bilan maksimal darajada ochilgan derazalarga qisqartiradigan slaydlar mavjud. Bu brauzer "Chrome" deb ataladi va sizning sahifa dizayni uchun ishlatiladigan maydondan uzoqlashishi mumkin.

Ruxsat etilgan yoki suyuq kenglik sahifalari

Veb saytingizning kengligini loyihalashda sizga kerak bo'lgan yagona narsa emas haqiqiy raqamli kenglik. Bundan tashqari siz qattiq kenglik yoki suyuqlikning kengligi haqida qaror qabul qilishingiz kerak. Boshqacha qilib aytganda, kengligi aniq raqamga (sobit) yoki foizga (suyuq) qo'yish kerakmi?

Ruxsat etilgan kenglik

Ruxsat etilgan kenglik sahifalari aniq ovozga o'xshaydi. Kengligi aniq raqamga o'rnatiladi va brauzer qanchalik katta yoki kichik bo'lmasin o'zgarmaydi. Bu sizning o'quvchilaringiz brauzerlarining qanchalik keng yoki tor bo'lishiga qaramay, sizning dizayni kerak bo'lsa, yaxshi bo'lishi mumkin, lekin bu usul o'quvchilarni hisobga olmaydi. Dizayneringizdan toraygan brauzerlar odamlarga gorizontal o'tishga to'g'ri keladi va keng brauzerlar bo'lgan odamlar ekranda katta miqdorda bo'sh joyga ega bo'ladi.

Bevosita kenglik sahifalarini yaratish uchun sizning sahifangizning bo'linmalarining kengligi uchun maxsus piksel raqamlarini ishlating.

Suyuq kengligi

Suyuq kenglik sahifalari (ba'zan moslashuvchan kenglik sahifalari) brauzer oynasining qanchalik kengligidan kelib chiqib, kengligi bo'yicha farqlanadi. Bu sizning mijozlaringizga ko'proq e'tibor qaratadigan sahifalarni yaratishga imkon beradi. Suyuqlik kengligi sahifalari bilan bog'liq muammo, o'qish qiyin bo'lishi mumkin. Matn chizig'ining ko'rish uzunligi 10 dan 12 gacha yoki 4-5 so'zdan qisqa bo'lsa, uni o'qish qiyin bo'lishi mumkin. Ya'ni katta yoki kichik brauzer oynasi bo'lgan o'quvchilar muammolarga duch kelishadi.

Moslashuvchan kenglikli sahifalarni yaratish uchun, sahifadagi bo'linmalaringizning kengliklari uchun foizlar va emslardan foydalaning. Bundan tashqari, CSS max-width xususiyatiga ega bo'lishingiz kerak. Bu xususiyat sizga kengliklarni foizlarda o'rnatishga ruxsat beradi, lekin keyinchalik uni o'qiy olmay qolishi uchun cheklashi kerak.

Va g'olib bo'lgan: CSS Media so'rovlari

Eng yaxshi yechim bugungi kunda brauzerning kengligi bo'yicha moslashtirilgan sahifani yaratish uchun CSS-muhit so'rovlarini va sezgir dizaynni ishlatishdir. Samarali veb-dizayn bir xil tarkibni 5120 piksel kengligida yoki 320 piksel kengligida ko'rish yoki qilmaslik bo'yicha ishlaydigan veb-sahifani yaratish uchun ishlatadi. Turli o'lchamdagi sahifalar turli xil ko'rinadi, biroq ular bir xil tarkibga ega. CSS3-dagi ommaviy axborot so'rovi bilan, har bir qabul qiluvchi qurilma so'rovga uning o'lchamiga javob beradi va uslublar sahifasi ushbu o'lchamga mos keladi.