Javob beradigan veb-dizaynning eng yaxshi amaliyotlari

Bredli Nice tomonidan, ClickHelp.com - dasturiy hujjatlar vositasi tarkibiy menejeri

Google mobil veb-saytlarni yaratishning afzal ko'rgan usuli sifatida rasmiy ravishda Responsive veb-dizaynni tavsiya qildi. Agar sizda veb-sayt yoki blogingiz bo'lsa, alohida mobil va planshetlarga mo'ljallangan veb-saytlarni saqlash o'rniga, dizaynga o'tishni ko'rib chiqish vaqti keldi.

Agar siz Responsive Web Design (RWD) kontseptsiyasi bilan tanish bo'lsangiz, mana shu uslubda sizda paydo bo'lishi mumkin bo'lgan savollar.

Nima uchun veb-saytimni RWD-ga almashtirishim kerak?

Veb-saytingiz ish stoli ekraniga juda yaxshi ko'rinadi, ammo saytingiz smartfon yoki planshetda ko'rilganda bu noto'g'ri bo'lishi mumkin. Dizayni sezgir qilgandan so'ng, veb-sayt barcha ekranlarda yaxshi (va o'qilishi mumkin) ko'rinadi.

Responsive Design yordamida siz bitta dizaynni yaratishingiz mumkin va u avtomatik ravishda mobil qurilmaning ekran o'lchamiga qarab moslashadi. Ushbu yondashuv juda ko'p afzalliklarni taklif etadi:

  • Bu vaqt va pulni tejashga imkon beradi, chunki ish stollari va uyali telefonlar uchun alohida veb-saytlarga ega bo'lish shart emas.
  • Responsive Design sizning veb-saytingiz SEO (qidirish reytinglari) uchun juda yaxshi, chunki saytingizdagi har bir sahifada bitta URL bo'ladi va shuning uchun Google sharbati saqlanib qoladi. Ba'zi saytlar mobil saytingizga, boshqalari ish stolingizga ulanadigan holatlar haqida tashvishlanishingiz shart emas.
  • Google Analytics hisobotlarida saytingizdan foydalanishingiz yaxshiroq tasvirlanadi, chunki mobil va ish stoli foydalanuvchilarining ma'lumotlari birlashtiriladi.
  • Ijtimoiy baham ko'rish statistikasi (Facebook Liklari, Tvitlar, + 1) uchun ham xuddi shunday bo'ladi, chunki veb-sahifalaringizning mobil va ish stoli versiyalari bir xil URL-manzilga ega bo'ladi.
  • Javob beradigan dizaynni saqlash osonroq, chunki ular biron-bir server tarkibiy qismlarini o'z ichiga olmaydi. Muayyan qurilmada tashqi ko'rinishini (yoki tartibini) o'zgartirish uchun siz faqat CSS ostidagi CSS-ni o'zgartirishingiz kerak.

Responsive Design-dan boshlash uchun nimani bilishim kerak?

Responsive Design bu toza HTML va CSS. Siz CSS-da foydalanuvchi qurilmasining ekran o'lchamiga qarab uslubni o'zgartiradigan qoidalar yaratasiz.

Masalan, siz foydalanuvchi ekranining o'lchami 320 pikseldan kam bo'lsa, yon panelni ko'rsatmasangiz yoki ekran o'lchami 1920 pikseldan (keng ekranli stol) kattaroq bo'lsa, tananing shrift hajmini oshiring, degan qoida yozishingiz mumkin. 15px gacha bo'lgan matn.

Muayyan veb-sayt Responsive Design-dan foydalanayotganligini qanday tekshirishim mumkin?

Bu juda oson. Ushbu veb-saytni istalgan ish stolida oching va brauzer hajmini o'zgartiring. Agar siz o'lchamingizni o'zgartirganingizda saytning rejasi o'zgarsa, dizayn javob beradi.

Agar men "Responsive Design" yondashuviga murojaat qilsam, veb-saytim eski brauzerlar bilan ishlaydimi?

Ko'pincha ha. RWD IE-ning eski versiyalarida qo'llab-quvvatlanmaydigan CSS3 media-so'rovlar va HTML5-ni (yaxshiroq semantika uchun) ishlatadi. Shu bilan birga, Javascriptga asoslangan echimlar mavjud - Masalan.js va masalan modernizatsiya qilish - bu CSS3 va HTML5 kuchini eski brauzerlarga, shu jumladan IE6-ga olib keladigan.

Google AdSense kabi reklama tarmoqlarida Responsive Design yoqimli o'ynaydimi?

Agar veb-saytingizda reklamalardan foydalansangiz, formatlarni diqqat bilan tanlashingiz kerak, chunki keng o'lchov birliklari (728 × 60 pikselli peshqadam kabi) 320px mobil ekranga mos kelmasligi mumkin. Men standart to'rtburchaklar birliklardan (300 × 250 kabi) foydalanishni afzal ko'raman, chunki ular osongina smartfon ekranlari va keng ekranli stollarga o'rnatiladi.

Minglab mobil qurilmalar mavjud. Men sezgir veb-saytni qanday ekran o'lchamlari qo'llab-quvvatlashi kerak?

Men CSS3 Mediaquery-laringizda kamida 320 ta (iPhone manzara), 480 px (iPhone portreti), 600px (Android Planshetlar), 768px (iPad + ~ Galaxy Tabs) va 1024px (iPad peyzaji va boshqa ko'rinishlar) uchun kamida ochilish nuqtalarini o'rnatishni tavsiya qilaman. ish stoli).

Qanday qilib veb-dizaynni javobgarlikdan boshlashim kerak? Yaxshi darslar bormi?

Ishni boshlashingizga yordam beradigan onlayn manbalar:

Veb-saytlar: Net jurnal, Smashing jurnali, CSS fokuslari va veb-dizayner devori

Video darslari: YouTube, aniq ko'rsatmalar

Taqdimotlar: PowerPoint Decks

Podkastlar: Shop Talk, 5by5 veb-ko'rgazmasi va sanoat

Twitter: @RWD, @NetMag va @SmashingMag

Javob beradigan dizayndan foydalanishning kamchiliklari qanday?

  • Sizning veb-sahifangizga qo'shimcha kilobaytlar kerak bo'lganda CSS uslublari va JavaScript fayllarini yuklab olishlari kerak bo'ladi.
  • Rasmlar. Siz o'zingizning mobil saytingizda yuqori aniqlikdagi rasmlarga xizmat ko'rsatishni xohlamaysiz, ammo bunga moslashuvchan dizaynda erishish qiyin (agar siz Adaptive Images va Sencha.io singari server tomonida ishlamasangiz).
  • Mavjud veb-saytingizga javob qatlamini qo'shish harakatlari. Ba'zan sizning mavjud veb-saytingizni suyuqlik qilishdan ko'ra, noldan boshlash ma'qulroqdir.

Sizga ham yoqishi mumkin: Responsive Layout Free EBOOK

Hayrli kun!

Bredli Nitsa,
Kontent menejeri ClickHelp.com - SaaS sotuvchilari uchun eng yaxshi onlayn hujjatlar to'plami