Chiroyli maket — hali sayt emas: verstka nima uchun kerak
Dizayner bo'lajak saytning chiroyli rasmlarini yubordi, hamma hayratda. Nima uchun ularni «shunchaki yuklab bo'lmaydi» va keyin verstka mutaxassisi nima uchun pul oladi? «IT haqida oddiy» turkumidagi navbatdagi maqolada javob beramiz.
Spoyler: dizayn — bu chizma, verstka esa — qurilish. Aynan verstka sayt minglab turli ekranlarda — eski smartfondan tortib ulkan monitorgacha qanday ishlashini belgilaydi.
Verstka — rasmni brauzer tiliga tarjima qilish
Brauzer «dizayn rasmini» ko'rsata olmaydi — u maxsus tillardagi kodni o'qiydi: HTML sahifada nima borligini (sarlavha, matn, tugma, rasm), CSS esa uning qanday ko'rinishini (ranglar, shriftlar, chekinishlar, joylashuv) tavsiflaydi. Verstka — bu dizayn maketini shunday kodga aylantirish jarayoni.
Bu atama tipografikadan kelgan: ilgari terimchi gazeta sahifasini matn va rasmlarni joylashtirib «verstka qilgan». Mohiyat o'zgarmadi — faqat endi sahifa «rezinka» kabi cho'ziluvchan: sahifa har qanday ekranga o'zi chiroyli tarzda moslashishi kerak.
Aytgancha, brauzerning uchinchi tili — JavaScript — xatti-harakatlar uchun javob beradi: bosilganda nima bo'ladi, menyu qanday ochiladi, savat qanday yangilanadi. HTML + CSS + JavaScript bog'lamasi o'tgan maqolamizdagi o'sha frontending o'zidir.
Adaptivlik: bitta sayt — minglab ekranlar
Saytingizni iPhone va arzon Android, planshet va noutbukdan, vertikal va gorizontal holatda ochishadi. Adaptiv verstka — bu sahifaning har qanday ekranga moslasha olish qobiliyati: monitorda tovarlar to'rtta ustunda, telefonda — bitta ustunda joylashadi, menyu «gamburger»ga aylanadi, tugmalar barmoqqa moslab kattalashadi.
Nima uchun bu biznes uchun juda muhim: O'zbekistonda tashrif buyuruvchilarning asosiy qismi telefonlardan kiradi. Agar sayt «kompyuter uchun» qilingan bo'lsa, mobil foydalanuvchi mayda matn va ekrandan chiqib ketayotgan tugmalarni ko'radi va raqobatchiga ketadi. Qidiruv tizimlari buni biladi: Google birinchi navbatda aynan saytning mobil versiyasini baholaydi.
Shuning uchun zamonaviy yondashuv mobile first deb ataladi — avval telefon versiyasini loyihalaymiz, keyin kompyuter versiyasigacha kengaytiramiz. Agar pudratchi sizga faqat «keng» versiyaning maketlarini ko'rsatsa — albatta, bu telefonda qanday ko'rinishini so'rang.
Yaxshi va yomon verstka: farqi nimada
Tashqaridan ikkita sayt bir xil ko'rinishi mumkin, lekin birining verstikasi tartibli, ikkinchisiniki esa «skotch bilan yopishtirilgandek». Farq keyinroq bilinadi: yangi qurilmalarda qiyshiq ko'rinadi, sekin yuklanadi, kichik o'zgarishlarda buziladi, qidiruv tizimlari tomonidan yomon indekslanadi.
Sifatli verstka — bu mukammallikga intilish emas, balki pul: yuklanish tezligi konversiya va qidiruvdagi o'rinlarga bevosita ta'sir qiladi, semantika (koddagi elementlarning to'g'ri «rollari») esa SEO va imkoniyati cheklangan insonlar uchun qulaylikka ta'sir ko'rsatadi.
- Tezlik: sahifa hatto kuchsiz telefon va mobil internetda ham tez ochiladi.
- Adaptivlik: hech bir ekran o'lchamida hech narsa buzilmaydi.
- Semantika: sarlavhalar, ro'yxatlar va tugmalar to'g'ri belgilangan — qidiruv tizimlari sahifani «tushunadi».
- Barqarorlik: bir joydagi o'zgartirish yonidagi bloklarni buzmaydi.
- Qulaylik: saytni ekran diktori orqali o'qish mumkin, elementlar kontrastli, formalarga izoh berilgan.
Verstka sifatini 10 daqiqada o'zingiz qanday tekshirishingiz mumkin
Asosiy sifatni baholash uchun dasturchi bo'lish shart emas. Saytni telefoningizda va kompyuteringizda oching. Kompyuterda brauzer oynasining kengligini o'zgartirib ko'ring — tordan kengga: kontent gorizontal aylantirishsiz va matnning tugmalarga chiqib ketishisiz silliq qayta qurilishi kerak.
So'ngra tezlikni bepul Google PageSpeed Insights vositasi bilan tekshiring: manzilni kiritasiz — baho va muammolar ro'yxatini olasiz. Agar baho 100 bo'lmasa (bu kamdan-kam hollarda bo'ladi), qo'rqmang, lekin mobil qurilmalar uchun «qizil» zona — dasturchi bilan gaplashish uchun sabab. Va oxirgisi: hammasini bosib ko'ring — har bir tugma biror yerga olib borishi, har bir forma yuborilishi kerak.
Ko'p beriladigan savollar
Verstka dizayndan qanday farq qiladi?
Dizayn — sayt qanday ko'rinishi kerakligini ko'rsatuvchi rasm-maket. Verstka — brauzerni ushbu maketni har qanday ekranda ko'rsatishga majbur qiluvchi kod. Dizayner chizadi, verstka mutaxassisi quradi. Ko'pincha ikkala rolni bitta front-end dasturchisi birlashtiradi.
«Sayt adaptiv emas» degani nima?
U bitta ekran o'lchami (odatda kompyuter) uchun qilingan va telefonda kichraytirilgan nusxada ko'rinadi: mayda matn, barmoq bilan kattalashtirish kerak. Bugungi kunda bu to'g'ridan-to'g'ri yo'qotish: tashrif buyuruvchilarning aksariyati mobil qurilmalardan kiradi va Google mobil versiya bo'yicha baholaydi.
Nima uchun maket rasmini shunchaki saytga qo'yib bo'lmaydi?
Rasm ekranlarga moslashmaydi, uning ichiga «kirib» bosib bo'lmaydi, qidiruv tizimlari undagi matnni o'qimaydi va u ko'p joy egallaydi. Rasm-sayt — bu chiroyli, lekin targ'ibot va savdo uchun foydasiz maket.
Verstka va «CMS ga ulash» — bular bir xil narsami?
Yo'q, bu ikki bosqich: avval maket statik sahifalarga kodlanadi, so'ngra boshqaruv tizimiga (CMS) «ulab qo'yiladi» — shunda siz admin paneli orqali matnlar va tovarlarni o'zingiz o'zgartirishingiz mumkin. CMS haqida batafsil alohida maqolada gaplashamiz.