Sahifani kattalashtirish

Nega

Ko‘rish qobiliyati past insonlar sahifadan foydalana olish uchun kontentni kattalashtirishi kerak.

Nima

Matnni kattalashtirishning katta akasi — sahifani kattalashtirish. Hamma narsani kattalashtiring! Tamoyillarni tushunish oson:

• Gorizontal aylantirishdan (scroll) qoching.
• Barcha kontentdan foydalanish mumkin.
• Barcha funksionallikdan foydalanish mumkin.
• Rasmlardagi matndan qoching.
• Asosiy kontent uchun joy ajrating.

Foydalanish mumkin degani hech narsa kesilmagan, qisqartirilmagan yoki yopilib qolmagan degani.

Sahifani kattalashtirish ko‘pincha moslashuvchan (responsive) saytlarda mobil ko‘rinishni ishga tushiradi, bu esa yaxshi.

Qanday

Endi sahifani kattalashtirishni qo‘llab-quvvatlashning beshta usulini o‘rganasiz.

Asosiy kontent uchun yetarli joy ajrating

Ikkinchi darajali kontent ekranni egallab olishiga yo‘l qo‘ymang.

Yashirin ikonkalar

Samsung India’dan olingan ushbu misolda sahifa 400 % ga kattalashtirilgan. Kontent to‘g‘ri masshtablanmoqda. Gorizontal aylantirish paneli yo‘q. Biroq chat tugmasi brauzer oynasining katta qismini egallaydi. Qidiruv, savat yoki menyu tugmalaridan foydalanish oson emas. Tugma grafikasining sifati ham past. Bundan tashqari, ilova uchun ulkan reklama bor.

Yaxshilanishlar:

• Chat tugmasi uchun kichraytirish tugmasini qo‘shing. Sukut bo‘yicha kichraytirilgan versiyadan foydalaning.
• PNG kabi rastr grafika o‘rniga SVG kabi vektor grafikadan foydalaning.
• Mobil reklamalarni faqat mobil qurilmalarda ko‘rsating.

Ortiqcha narsalarsiz

Philips’dan olingan ushbu misolda butun viewport (ko‘rish maydoni) asosiy kontent uchun ajratilgan. Asosiy navigatsiya ochiq va ortiqcha narsalar yo‘q. Matn va grafika yaxshi masshtablangan.

Viewport belgilangan:

<meta name="viewport" content="width=device-width, initial-scale=1">

Moslashuvchan (responsive) veb-dizayn haqida ko‘proq bilib oling.

Gorizontal aylantirishdan qoching

Ikki yo‘nalishda aylantirish chalkashtiradi.

Qat’iy kenglik

Dell’dan olingan ushbu misolda header’ning faqat kichik qismini ko‘ra olamiz. Sayt kattalashtirilganda masshtablanmaydi. Natijada katta gorizontal aylantirish paydo bo‘lib, sahifada ikki yo‘nalishda harakatlanishni qiyinlashtiradi.

Bundan tashqari, cookie roziligi tugmasi qotirib qo‘yilgan (fixed) va rozilik berilgandan keyin ham uni olib tashlab bo‘lmaydi. Logotip va ikonkalar past sifatli PNG fayllar bo‘lib, yaxshi masshtablanmaydi. Viewport belgilanmagan.

Yaxshilanishlar:

• Saytni moslashuvchan (responsive) qiling.
• Cookie tugmasi uchun kichraytirish tugmasini qo‘shing. Sukut bo‘yicha kichraytirilgan versiyadan foydalaning.
• PNG kabi rastr grafika o‘rniga SVG kabi vektor grafikadan foydalaning.

Barcha kontent va funksionallikdan foydalanish mumkin

Kattalashtirilganda hech qanday kontent yashirin bo‘lmasligi kerak.

Yashirin tablar

Sony’dan olingan ushbu misolda mahsulot ma’lumotlari joylashgan tablardan sahifa kattalashtirilganda stol kompyuteri brauzerida foydalanib bo‘lmaydi. Foydalanuvchi aylantirsa ham, aylantirish brauzer oynasidan tashqarida sodir bo‘ladi. Barcha texnik xususiyatlar, imkoniyatlar, sharhlar va qo‘llab-quvvatlash bo‘limlaridan foydalanib bo‘lmaydi. Muammo shundaki, butun bo‘lim "sticky" (yopishqoq):

Bu bo‘lim mobil ko‘rinishda 159 piksel balandlikka ega. To‘rt marta kattalashtirilganda qotirilgan bo‘lim stol kompyuteri ko‘rinishida 636 pikselni egallaydi. Brauzer balandligi 720 piksel bo‘lsa, brauzerning yuqori qismini ayirganda asosiy kontent uchun juda kam joy qoladi.

Qotirilgan kontentdan har doim ham foydalanib bo‘lmaydi degani emas. Xulosa shuki, saytingizni har doim keng tarqalgan brauzer o‘lchamlarida sahifani kattalashtirish bilan sinab ko‘rishingiz kerak.

Mobil ko‘rinishda tablar ostidagi kontentdan foydalanish mumkin.

Huawei’ning sticky navigatsiyasi unchalik baland emas, shuning uchun asosiy kontent uchun yetarli joy bor.

Rasmlardagi matndan qoching

Xiaomi’dan olingan ushbu misolda kattalashtirilgan matn piksellashib ketgan, chunki u rasmning bir qismi. Matnning bir qismi brauzer oynasidan tashqarida ham qolgan, shuning uchun foydalanuvchi mahsulot nomini to‘liq o‘qish uchun sahifani aylantirishi kerak. Matnni sof HTML va CSS bilan ko‘rsatish qulaylikdan tashqari yana ko‘plab afzalliklarga ega: matn moslashuvchan, tarjima qilinadigan va qidiruvda topiladigan bo‘ladi.