Hozirgi kundagi har bir internet foydalanuvchisi o’zlarining kundalik web-saytlarining mobil versiyasi ham bo’lishini hohlashadi. Buni amaliy jihatdan olib qaraganda bir dizayn har bir qurilma ekraninga mos tushishi muhimdir. Keyingi yillarda yana biz boshqa kashfiyotlar uchun ham dizayn qilishimizga to’g’ri keladi. Ushbu maqolani yozishga undagan asosiy sabab, mobil uchun web-ilovalar yaratishni o'rganayotganim bo'ldi. mobil telefon uchun web-ilovalar yaratish uchun, albatta moslashuvchan web-dizaynni o'rganib chiqish muhimdir.

Web-dizayn sohasida, shuni tushunib yetyapmizki, ko’plab yangi qurilma va ekran “razrisheniya” ri bilan bir qadamda ketish imkonsiz. Ko’plab websaytlar uchun, har bir qurilmaga ekraniga moslab web-sayt versiyasini qilishni iloji yo’q. Albatta bu qiyin ish, balki buning boshqa optimal va osonroq yo’li ham bordir?

Responsive web design – shunday yondoshuvki, bunda dizayn va “razrabotka” foydalanuvchi hatti harakati va muhiti(qurilma) ga ekran o’lchami, platformasi va orientatsiyasi asosida javob berishidir. Bu amaliyotda moslashuvchan to’r(grid) va maketlar aralashmasi, rasmlar va CSS media-so’rovlarning intelektual foydalanishidan iboratdir. Foydalanuvchi laptopdan iPadga o’tgan zahoti, web-sayt avtomatik moslashuvchanlikka(“razrisheniya”, rasm va skriptlar-javascript) o’tishi kerak. Boshqacha qilib aytganda web-saytda shunday texnologiya bo’lishi kerakki, sayt avtomatik foydalanuvchi sharoitiga moslanishi kerak. Bu esa bozordagi har bir qurilma uchun har hil dizayn va “razrabotka” jarayonidan qutulish yo’lini yaratadi.

“Responsive web design” konseptsiyasi
Hozirgi kunda rivojlanib borayotgan “Moslashuvchan arxitektura(Адаптивная архитектура)” sohasida fizik sath qanday qilib soha orqali o’tayotgan odamlarga moslashishi mumkin degan savol ko’p berilmoqda. Arxitektorlar devorga o’rnatilgan robototexnika va cho’ziluvchan materiallar orqali, odamlar yaqinlashganda egiladigan va kengayadigan devor strukturalarini tajribadan o’tkazmoqdalar. Yoki harakatni ilg’ovchi datchiklar xonada odamlar soni ko’payishi davomida xona temperaturasi va yoritishini nazorat qilish uchun iqlim-boshqarish tizimlari bilan birlashtirilishi mumkin. Ba’zi kompaniyalar allaqachon odam oynaga qanchadir masofada yaqinlashganda avtomatik qorong’ulashishi yoki yorug’lashishi mumkin bo’lga “aqlli oyna texnologiyasi”ni ishlab chiqishgan.

Agar ushbu nazariyalarga web-dizayn tomonidan qarasak, bizda ham shunga o’xshash g’oya bor. Moslashuvchan arxitektura singari, web-dizaynlar ham avtomatik moslashishi zarur. Bu har bir foydalanuvchi kategoriyasiga sanoqsiz individual yechimlar talab qilmasligi kerak.

Albatta, biz harakat sensorlari yoki robototexnika vositalaridan foydalanmaymiz. Moslashuvchan web-dizaynlar ko’proq fikrlashning abstakt yo’lini talab qiladi. Shuningdek, ba’zi g’oyalar allaqachon tajribadan o’tkazilgan: “cho’ziluvchan layout(maket)” lar, media so’rovlar va skriptlar(jquery, javascript) yordamida sahifalarni reformat qilish.

Lekin “Responsive web-design” faqat ekran o’lchamiga moslashuvchan va avtomatik o’lchami o’zgaruvchan rasmlardan iborat emas. Endi, buni imkoniyatlarini va ba’zi-bir misollarni ko’rib chiqamiz.

Ekran “razresheniya”sini moslashtirish
Ko’pgina qurilmalar har hil o’chamdagi ekranlar, aniqlik va orientatsiya ega. Yangi ekran o’lchamidagi yangi qurilmalar har kuni ishlab chiqarilmoqda. Ba’zilari, landscape(eniga keng), portrait(bo’yiga uzun) yoki haligacha kvadrat shaklida bo’lishi mumkin. Biz bilamizki, iPhone, iPad yoki ko’pgina smartfonlar “landscape” rejimdan “portrait” rejimga o’ta oladi.


Ikkala muhit uchun ham dizayn ishlab chiqish uchun biz yuzlab turdagi ekran o’lchamlarini hisobga olishimiz kerak bo’ladi. Balkim ularni guruhlarga bo’lishimiz, va har bir guruh uchun dizayn ishlab chiqish mumkindir. Lekin bu ishni qiyinlashtiradi va kim biladi ertaga qanday qurilmalar chiqadi?

Quida Morten Hjerde va uning hamkasblari tomonidan ishlab chiqilgan 2005-2008 yillarda sotilgan qurilmalar ekran statistikasi keltirilgan:


Bundan keyin ham ko’plab qurilmalar ishlab chiqildi. Shu narsa aniqki, biz har biri uchun alohida dizayn yarata olmaymiz.
Yechim-1: hamma narsani o’lchami o’zgaruvchan(egiluvchan, dinamik) qilish.
Bir necha yil oldin, dinamik maketlar web-saytlarda ommalashganda, dizaynda faqat sayt ustunlari(chap ustun, or’ta yoki o’ng tomon va hokozo. “column”) va matnlar qayishqoq bo’lgan. Rasmlar va ba’zi bir elementlar esa maketlarni buzib yuborar edi. Chunki bularda hali avtomatik o’lcham o’zgartirish ishlab chiqilmagandi. Egiluvchan dizayn hali to’la egiluvchan bo’lmagan edi.

Hozir esa, narsalarni ko’roq egiluvchan qilishimiz mumkin. Rasmlar avtomatik moslashadi, va bizda “aylanib o’tish” yo’llari bor, shuning uchun maketlar buzilmaydi. Bu to’liq yechim bo’lmasa ham, bu usul bizga keng imkoniyat beradi. Ushbu yechim, “portrait” orientatsiyadan “landscape” ga almashishadigan qurilmalar yoki kompyuter katta ekranidan iPadga o’tish uchun judayam mosdir. Quidagi misolda egiluvchan web-dizaynga misol keltirilgan:



Butun dizayn egiluvchan to’r va rasmlar bilan ishlangan. Elastik to’r(gird)larni yaratish ommalashgan tajribadir, ya’ni bularni tegalari orqali yaratish mumkin. Shuningdek, elastic rasmlarni yaratishning bir necha usullari bor.

Hamma usullarga tegishli misollarni shu yerdan ko’chirib olib o’rganishingiz mumkin. Yoki quidagi link orqali bu haqida ko’proq o’rganishingiz mumkin.



Yuqoridagi rasmga qarasak, o’ng tarafda kichik ekranda ochilgandagi holat turibdi. Bu yerda odamning rasmi orqa fonda, yozuv esa rasm sifatida old qismda turibdi. Shuning uchun, orqa fondagi rasm kichik ekranda yarmi ko’rinmay turibdi. Buni 2 ta qismga bo’lishdan asosiy maqsad, sayt logosini sifatini o’zgarmasdan saqlab turish.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>

Yuqoridagi kodda, h1 odam rasmini fon sifatida ushlab turadi. Bu moslashuvchan web dizayn yasashda ishlatiladigan bir misol. Bu yerda maqsad, logoni kichiklashib ko’rinmay qolishindan saqlash.

---

Davomi bor…