Moslashuvchan dizayn (sezgir dizayn)

Adaptiv dizayn

Internetga planshetlar va mobil telefonlar orqali ulanadigan foydalanuvchilar ko'paymoqda. Siz allaqachon bilganingizdek, bu bizning kompyuterimizda yaxshi ko'rinadigan yaxshi veb-sahifani loyihalashtirishning o'zi etarli emasligini anglatadi: uni har bir mobil qurilmada ko'rish kerak. Muammo? Turli xil ekran o'lchamlari va o'lchamlari. Shuning uchun barcha ommaviy axborot vositalariga (taniqli) to'g'ri mos keladigan dizaynni yaratish juda qiyin javob dizayn, deb tarjima qilingan moslashuvchan dizayn).

Ushbu xususiyatlarga ega dizaynni tuzishda yodda tutish kerak bo'lgan ba'zi maslahatlar. E'tibor qarating!

Moslashuvchan dizayn bo'yicha maslahatlar

  1. Oddiy shablonni yaratingOddiy deganda men muloyim demoqchi emasman. Men tuzilishi Veb-saytingiz HTML-si: qanchalik aniq bo'lsa, shuncha yaxshi bo'ladi. Shuni yodda tutingki, kompyuter ekrani uchta vertikal ustunga sig'ishi mumkin; mobil telefonning ekranida siz faqat bittasiga mos keladi. Bu haqda o'ylang va elementlarning o'rnini qanday o'zgartirasiz.
  2. Keraksiz hamma narsani yo'q qilingJQuery effektlari, Flash animatsiyalari va sahifangizni yuklanishini sekinlashtiradigan boshqa kodlardan saqlaning. Ushbu turdagi tarkib kamroq bo'lsa, veb tezroq yuklanadi.
  3. Uslubni aniqlang har bir "o'lcham" uchun CSSTiny.css, small.css va big.css (masalan) u ko'riladigan qurilmaga asoslanib yarating. Masalan:

    @import url (tiny.css) (min-kengligi: 300px);

    @import url (kichik.css) (min-kenglik: 600px);

    @import url (big.css) (min-kenglik: 900px);

  4. Eng ko'p ishlatiladigan qarorlar320 piksel / 480 piksel / 720 piksel / 768 piksel / 900 piksel / 1024 piksel
  5. Shabloningizni moslashuvchan qilingImkoningiz boricha belgilangan miqdorlar o'rniga foizlar bilan ishlang. Mana ba'zi mos yozuvlar ekvivalentlari: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
  6. Tipografiya Bu har doimgidan ham muhimroq Ba'zan sizning qurilmangiz ekrani shunchalik kichkina bo'lishi mumkinki, siz ko'radigan narsa faqat matn. Shuning uchun biz saytimizdagi eng yaxshi shriftlarni juda ehtiyotkorlik bilan tanlab olishimiz kerak, shunda ular kichraytirilganda ular tushunarli bo'lmaydilar. Bundan tashqari, biz neytral shriftlarni boshqalar bilan qanday qilib Internetga kerakli belgi beradigan shaxsiyat bilan birlashtirishni bilishimiz kerak. Shuning uchun, birinchi maslahat siz foydalanadigan shriftlarni tanlashga vaqt sarflashingizdir.
  7. AQSH yuqori sifatli tasvirlarJoy qisqarganligi sababli, tasvirlar unga hamroh bo'ladi. Kamaytirganda sifatini yo'qotmaydigan va o'lchov bilan bir xil ishlaydiganlarni tanlang. Sifatsiz rasm veb-saytingizni yomon ko'rinishga olib keladi.
  8. Sizning tasvirlaringiz doimo ko'rinib turishi to'liqCSS-ga img (width: 100%;) kodini qo'shish orqali fotosuratlaringiz kesilib ketishining oldini oling. Shu tarzda, siz qurilmaga tasvirni berishi kerak bo'lgan balandlikni qayta hisoblashini aytasiz, shunda uning kengligi yuz foizga ko'rinib turadi.
  9. Hammasi past bir xil URLWww.mysite.com/mobile kabi subdomainlarni unuting, chunki ildiz papkasidagi bir xil index.html fayli barcha qurilmalar uchun ishlaydi (agar siz moslashuvchan dizaynni to'g'ri bajargan bo'lsangiz). Siz allaqachon afzalligini bilasiz: subdomainlar qancha kam bo'lsa, sahifani yuklash tezroq bo'ladi.
  10. Qo'llab-quvvatlovlardan foydalaning: Xayolparast bo'ling Veb-saytga ish stoli kompyuterdan iPad yoki mobil telefondan kirish bir xil emas. Birinchisi bilan siz tinch va osoyishta harakat qilasiz. Ikkinchisi bilan siz bo'sh soatlarda bajarasiz va zerikishingiz bilan derazani yopasiz. Ushbu shartlardan foydalanib, foydalanuvchini xushnud eting va u sizga bag'ishlamoqchi bo'lgan bir necha daqiqada uni xursand qiling. Ehtimol, u uyga kelganda u sizni yanada xotirjamroq ziyorat qilishga qaror qiladi.
  11. Ilhom oling Raqamli nashrlarda siz nima uchun bu maslahatga qiziqasiz. Juda oson: raqamli jurnallar (yaxshi) qo'llab-quvvatlashdan qanday foydalanishni bilish va ularning dizayni juda aqlli. Ulardan ilhom oling va tark etish qiyin bo'lgan veb-sayt yarating.

Qo'shimcha ma'lumot - Raqamli jurnallar

Manba - Splio, 960.gs, kolumnal


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

3 ta sharh, o'zingizni qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   Diak Rios dijo

    Men juda ham rozi bo'lmagan narsalar bor.
    5-bandda ... chunki 200px = 15,38% va undan keyin ... bu taqqoslashni biron bir ota-ona o'lchovisiz amalga oshirish mumkin emas, pikseldagi o'lcham foizlar kabi nisbiy o'lchov emas!

    Rasmlarni kengligi bilan ko'rsating: 100% noto'g'ri, menimcha bu tavsiya bo'lmasligi kerak. Rasmlar ularni kengligi va balandligi bilan yaxshiroq aniqlaydi, shuning uchun server ma'lumotni qayta ishlashga kam vaqt sarflaydi (uning hajmini hisoblash shart emas) va biz sahifaning yuklanish tezligini yaxshilaymiz (moslashuvchan yoki sezgir veb-dizaynida juda muhim narsa) ).

    Burun ishi bo'lsa ham, men allaqachon qo'shib qo'ygan edim ... retina ekranlari uchun rasmlar. Agar biz javob beradigan veb-dizaynni amalga oshirishni xohlasak, retinali displey uchun rasmlardan foydalanish majburiydir, chunki mobil va planshetlarning yuqori foizli ko'rinishi ushbu ekranlardan foydalanadi. Shunday qilib, ular uchun gazni yarim gazda dizaynga sarflashning foydasi yo'q.

    Qolganlari uchun yaxshi

    1.    Diak Rios dijo

      5-bandda ular sizni kontekstga qo'yishadi va sizga 1300, 3 va 200 ustunlaridan iborat uchta ustunli 300 piksellik umumiy tartib haqida gapirib berishadi.

      Agar siz uni foizlarga o'tkazsangiz, ularning holatlarida ular siz aytgandek, 15,38% ((200 * 100) / 1300) (quyida o'nlik, xalqaro tizim: P)

      Ammo agar biz 500 pikselli tartib haqida gapiradigan bo'lsak va bizda uchta ustun bo'lsa, ulardan biri 3, ikkinchisi 200 va boshqasi 200 piksel, foizlar endi bir xil emas, bu holda 100 piksel = 200% ((40 * 200) / 100)

      Ular quyidagicha bo'ladi: 200px = 40% va 100px = 10%

      Kelinglar, aytganimdek, ular siz ko'rsatgan ma'lumotnoma emas, ular faqat 1300 piksellik maketga mos yozuvlar.

      Salomlar

      1.    Lua louro dijo

        Qanday muvaffaqiyatsizlik, dunyoda siz mutlaqo haqsiz! Yana bir bor rahmat ;)