Pro-ning sezgir veb-dizayni bo'yicha qo'llanmasi

Tarkib

• Javob beruvchi tasvirlar
• Ishlash
• Shartli va dangasa yuklash
• Javob beruvchi tipografiya
• JavaScript-dagi media-so'rovlar
• Progressiv takomillashtirish
• Maket
• CSS katakchasi tartibi
• Nihoyat

Javob beruvchi veb-dizayn juda sodda ko'rinadi. Joylashtirish uchun moslashuvchan katakchalarni tanlang, moslashuvchan vositalardan foydalaning (rasmlar, video, iframkalar) va har qanday ko'rinish oynasidagi tarkibni eng yaxshi tartibga solish uchun ushbu o'lchovlarni yangilash uchun media-so'rovlarni qo'llang. Amalda biz buni oson emasligini bilib oldik. Har bir loyiha davomida paydo bo'ladigan mayda-chuyda muammolar bizni boshimizni qashishimizga, ba'zida esa ish stolimizda tirnoq xandaqlarini o'yib yurishga majbur qiladi.

Responsive Design Weekly axborot byulletenini boshqarishni boshlaganimdan beri, men veb-hamjamiyatning ko'plab a'zolari bilan suhbatlashish va ularning tajribalarini tinglash baxtiga muyassar bo'ldim. Jamiyat aslida nimani o'rganishni istayotganini aniq bilishni istadim, shuning uchun o'quvchilarga so'rovnoma tarqatdim. Mana eng yaxshi natijalar:

1. Javob beruvchi tasvirlar
2. Ishlashni yaxshilash
3. Javob beruvchi tipografiya
4. JavaScript-dagi media-so'rovlar
5. Progressiv takomillashtirish
6. Maket

Ushbu mavzularni hisobga olgan holda men bir qator podkastlarni olib bordim va ba'zi sanoat rahbarlarimizdan fikrlarini so'radim. Ularning javoblarida bitta fikr bir ovozdan qabul qilindi: hayajonli va ilg'or texnika haqida qayg'urishni boshlashdan oldin asoslarni o'rganishga e'tibor bering. Ishlarni asosiy narsalarga qaytarish orqali biz har bir kishi uchun mustahkam interfeysni yaratishga qodirmiz, agar qurilma yoki foydalanuvchi konteksti imkon bersa, funktsiyalar bo'yicha qatlamlar.

- Xo'sh ... bu ilg'or usullar haqida nima deyish mumkin? O'ylaymanki, Stiven Xey buni eng yaxshi xulosasi bilan aytganda shunday dedi: 'RWD texnikasi har qanday ilg'or RWD texnikasidan foydalanmasdan boshlashdir. Tarkibiy tarkibdan boshlang va yo'lingizni ko'taring. Faqatgina dizayn uzilib qolganda va tarkib uni belgilab qo'yganida to'xtash nuqtasini qo'shing va ... bu hammasi shu. '

Ushbu maqolada men asoslardan boshlayman va vaziyat iloji boricha murakkablik qatlamlarini qo'shaman. Qani boshladik.

Javob beruvchi tasvirlar

Suyuq muhit RWD-ning asosiy qismi bo'lib, u birinchi marta Ethan Marcotte tomonidan aniqlangan. kengligi: 100%; , maksimal kenglik: 100%; bugungi kunda ham ishlaydi, ammo ta'sirchan tasvir manzarasi ancha murakkablashdi. Ekran o'lchamlari, piksel zichligi va qo'llab-quvvatlovchi qurilmalar sonining ko'payishi bilan biz katta boshqaruvni talab qilamiz.

Uchta asosiy muammo Responsive Images Community Group (RICG) tomonidan aniqlandi:

1. Biz sim orqali yuborayotgan rasmning kilobayt kattaligi
2. Tasvirning jismoniy hajmi biz yuqori DPI qurilmalariga yuboramiz
3. Ko'rish oynasining ma'lum o'lchamlari uchun badiiy yo'nalish shaklidagi tasvirni kesish

Yoav Vayss Indiegogo yordami bilan Blink dasturini amalga oshirish bo'yicha ko'p ishlarni amalga oshirdi - Google-ning WebKit vilkasi va siz uni o'qiyotganingizda u Chrome va Firefox-da yuboriladi. Safari 8 srcset-ni yuboradi, ammo o'lchamlari atributi faqat tunda tuzilgan va rasm> hali amalga oshirilmagan.

Bizning veb-ishlab chiqish jarayonimizga yangi narsa kelishi bilan boshlash qiyin bo'lishi mumkin. Keling, bir misolni bosqichma-bosqich ko'rib chiqaylik.

img! - Rasmni qo'llab-quvvatlamaydigan barcha brauzerlar uchun qo'shimcha tasvirni e'lon qiling -> src = "horse-350.webp"! - Barcha rasm o'lchamlarini srcset-da e'lon qiling. Brauzerga har bir rasmning kengligi to'g'risida ma'lumot berish uchun w descriptor yordamida rasm kengligini qo'shing .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Hajmi bizning saytimiz tartibi haqida brauzerni xabardor qiladi. Bu erda 64ems va undan kattaroq ko'rinishdagi har qanday ko'rish oynasi uchun ko'rish maydonining 70% ini egallaydigan rasmni ishlating -> size = "(min-width: 64em) 70vw,! - Agar ko'rinish oynasi bunday bo'lmasa katta, keyin 37,5ems va undan kattaroq har qanday ko'rinish oynasi uchun 95% viewport -> (min-width: 37.5em) 95vw ni tashkil etadigan rasmdan foydalaning va agar ko'rish oynasi undan kichik bo'lsa, u holda foydalaning 100% ko'rish maydonini egallaydigan rasm -> 100vw "! - har doim alt matnga ega bo'ling .--> alt =" Ot "/>

Ishlash nuqtai nazaridan registrlar atributida min-width yoki max-width ishlatishingiz muhim emas - lekin manba tartibi muhim. Brauzer har doim birinchi mos keladigan hajmdan foydalanadi.

Shuni ham yodda tutingki, biz to'g'ridan-to'g'ri dizaynimizga qarab aniqlanadigan o'lchamlar atributini qattiq kodlaymiz. Bu muammolarni oldinga siljishiga olib kelishi mumkin. Masalan, agar siz saytingizni qayta ishlasangiz, barcha img> yoki picture> s-ni qayta ko'rib chiqishingiz va o'lchamlarini qayta belgilashingiz kerak bo'ladi. Agar siz CMS dan foydalanayotgan bo'lsangiz, uni qurish jarayonining bir qismi sifatida engib o'tish mumkin.

WordPress-da allaqachon yordam beradigan plagin mavjud. U WP standart tasvir navlarida srcset-ni belgilaydi va o'lchamlarni markaziy joyda e'lon qilishga imkon beradi. Sahifa ma'lumotlar bazasidan yaratilganda, img> dagi barcha eslatmalarni almashtiradi va ularni rasm belgisi bilan almashtiradi.

Asosiy

• Tasvirni chindan ham kiritishingiz kerakmi, deb o'ylab ko'ring. Tasvirning asosiy mazmuni yoki bu bezakmi? Kamroq bitta rasm yuklanish tezligini anglatadi
• ImageOptim yordamida kerakli rasmlarni optimallashtiring
• O'zingizning rasmingizda yoki .htaccess faylida rasmlaringiz uchun muddati tugash sarlavhalarini o'rnating ("Ishlash" ostidagi tafsilotlarni ko'ring)
• PictureFill rasmlar uchun polyfill yordamini taqdim etadi

Ilg'or

• JQuery-ning Lazy Load plaginidan foydalanib, dangasa sizning rasmlaringizni yuklang
• Xususiyatlarni aniqlash uchun HTMLImageElement.Sizes va HTMLPictureElement-dan foydalaning.
• Github-da topilgan rivojlangan PictureFill WP plaginlari sizga rasmning kengligi va o'lchamlari qiymatlarini aniqlashga imkon beradi

Ishlash

Bizning sahifalarimizda tezkor ravishda qabul qilinadigan ishlashni ta'minlash uchun biz serverdan birinchi javob vaqtida sahifamizning yuqori qismini ko'rsatish uchun zarur bo'lgan barcha HTML va CSS-larga ehtiyoj sezamiz. Ushbu sehrli raqam 14kb ni tashkil qiladi va birinchi qaytish vaqtidagi (RTT) maksimal tirbandlik oynasining o'lchamiga asoslangan.

Patrik Xamann, Guardian-ning texnik etakchisi va uning jamoasi frontend va backend texnikasi aralashmasi yordamida 1000 metrlik to'siqni engishga muvaffaq bo'lishdi. Guardianning yondashuvi kerakli tarkibni ta'minlashdir - maqola - foydalanuvchiga imkon qadar tezroq va 14kb sehrli raqam ichida etkazib beriladi.

Keling, jarayonni ko'rib chiqaylik:

1. Foydalanuvchi yangiliklar haqidagi Google-ga havolani bosadi
2. Maqola uchun ma'lumotlar bazasiga bitta blokirovka bo'yicha so'rov yuboriladi. Hech qanday tegishli hikoyalar yoki sharhlar so'ralmaydi
3. HTML Critical CSS-ni o'z ichiga oladi
4. boshida>
5. "Xantalni kesish" jarayoni amalga oshiriladi va foydalanuvchi qurilmasining xususiyatlariga asoslangan har qanday shartli elementlar yuklanadi
6. Maqolaning o'zi bilan bog'liq yoki uni qo'llab-quvvatlaydigan har qanday tarkib (tegishli maqola rasmlari, maqola sharhlari va boshqalar) o'z joylariga dangasa yuklanadi

Kritik ko'rsatish yo'lini shu kabi optimallashtirish bosh> 222 qatorga teng degan ma'noni anglatadi. Biroq, foydalanuvchi ko'rgan tanqidiy tarkib gziplanganda hali ham 14 kg hajmdagi yukga to'g'ri keladi. Aynan shu jarayon 1000 millik to'siqni buzishga yordam beradi.

Shartli va dangasa yuklash

Shartli yuklash, foydalanuvchi qurilmasining xususiyatiga qarab, tajribasini yaxshilaydi. Modernizr kabi vositalar ushbu xususiyatlarni sinab ko'rishga imkon beradi, ammo shuni yodda tutingki, brauzer qo'llab-quvvatlashni taklif qilayotgani uchun, bu har doim ham to'liq qo'llab-quvvatlashni anglatmaydi.

Texnikalardan biri, foydalanuvchi ushbu xususiyatdan foydalanishni xohlamaguncha, biror narsani yuklashni to'xtatib turishdir. Bu shartli hisoblanadi. Siz foydalanuvchi piktogramma ustiga tegib ketguncha yoki unga tegib ketguncha ijtimoiy ikonkalarda yuklashni to'xtatib qo'yishingiz mumkin, yoki foydalanuvchi maxsus xaritalash dasturiga ulanishni afzal ko'rishi mumkin bo'lgan iframe Google Map-ni kichikroq ko'rinishga yuklashdan saqlanishingiz mumkin. Yana bir yondashuv - "Xantalni kesish" - bu haqda batafsil ma'lumot olish uchun yuqoridagi qutiga qarang.

Dangasa yuklash deganda siz har doim sahifaga yuklamoqchi bo'lgan narsalar - maqolaning bir qismi bo'lgan rasmlar, sharhlar yoki boshqa tegishli maqolalar tushuniladi, ammo foydalanuvchi tarkibni iste'mol qilishni boshlashi uchun u erda bo'lishi shart emas.

Asosiy

• Fayllar uchun gziplashni yoqing va barcha statik tarkib uchun muddati tugash sarlavhalarini o'rnating (netm.ag/expire-260)
• Lazy Load jQuery plaginidan foydalaning. Bu ko'rish joyiga yaqinlashganda yoki ma'lum vaqtdan keyin rasmlarni yuklaydi

Ilg'or

• Fastly yoki CloudFlare-ni o'rnating. Tarkibni etkazib berish tarmoqlari (CDN) sizning statik tarkibingizni foydalanuvchilarga o'zingizning serveringizdan tezroq etkazib beradi va ba'zi bepul darajalarga ega
• Parallel http so'rovlari kabi http2 funktsiyalaridan foydalanish uchun http2 yoqilgan brauzerlar uchun SPDY-ni yoqing
• Social Count sizning ijtimoiy belgilaringizni shartli ravishda yuklashga imkon beradi
• Statik xaritalar API-dan foydalanish sizga rasmlar uchun interaktiv Google xaritalarini o'chirishga imkon beradi. Bred Frostning netm.ag/static-260 saytidagi misolini ko'rib chiqing
• Ajax Include Pattern tarkibiga ma'lumotlar oldin, ma'lumotlar keyin yoki ma'lumotlar o'rnini bosish atributidan tarkib parchalari yuklanadi

Javob beruvchi tipografiya

Tipografiya sizning tarkibingizni oson hazm qilishni ta'minlashdir. Tezkor tipografiya buni turli xil qurilmalar va tomosha joylarida o'qishni ta'minlash uchun kengaytiradi. Jordan Mur bu turni tan olishga tayyor emasligini tan oldi. Agar kerak bo'lsa, bir yoki ikkita rasmni tashlang, lekin sizda juda zo'r ekanligiga ishonch hosil qiling.

Stiven Xey shrift hajmini 100 foizga o'rnatishni taklif qiladi (o'qing: shunchaki uni qoldiring), chunki har bir brauzer yoki qurilma ishlab chiqaruvchisi ma'lum bir piksellar sonini yoki qurilmasi uchun oqilona o'qib bo'ladigan sukutni bajaradi. Ko'pgina ish stoli brauzerlari uchun bu 16px.

Boshqa tomondan, Mur ba'zi tarkib elementlari uchun minimal shrift hajmini o'rnatish uchun REM birligi va HTML shrift o'lchamidan foydalanadi. Masalan, agar maqola satrlari har doim 14px bo'lishini istasangiz, uni HTML elementida asosiy shrift sifatida o'rnating va .byline {font-size: 1rem;} o'rnating. Tananing o'lchamini belgilashda: shrift o'lchami: ko'rinishga mos keladigan tarzda .by-layn uslubiga ta'sir qilmaysiz.

Yaxshi o'qish satrining uzunligi ham muhimdir - 45 dan 65 tagacha belgi. Kontentingizni tekshirish uchun foydalanishingiz mumkin bo'lgan xatcho'p mavjud. Agar siz o'zingizning dizayningiz bilan bir nechta tillarni qo'llab-quvvatlasangiz, unda chiziq uzunligi ham farq qilishi mumkin. Mur u erdagi barcha muammolarni yashirish uchun {lang (de) maqolasidan {max-width: 30em} foydalanishni taklif qiladi.

Vertikal ritmni ushlab turish uchun chekka va pastki qismlarini tarkib bloklari bilan ul>, ol>, blockquote>, table>, blockquote> va boshqalarni chiziq balandligingiz bilan bir xil qilib o'rnating. Agar rasmlarning kiritilishi bilan ritm to'xtatilsa, siz uni Baseline.js yoki BaselineAlign.js qo'shib tuzatishingiz mumkin.

Asosiy

• Shriftingizni 100 foiz tanaga asoslang
• Nisbiy em birliklarida ishlash
• Dizayningizda vertikal ritmni saqlash uchun chekkalarni chiziq balandligingizga qo'ying

Ilg'or

• Enhance.js yoki qoldirilgan shriftni yuklash yordamida shriftlarni yuklash ko'rsatkichlarini yaxshilang
• Semantik sarlavhalar uchun Sass @includes dan foydalaning.
• Ko'pincha h5 uslubini h2 formatlashni talab qiladigan yon paneldagi vidjetda ishlatishimiz kerak. O'lchamni boshqarish va quyidagi kod bilan semantik bo'lib qolish uchun Soqolning tipografik aralashmalaridan foydalaning:

.sidebar h2 {@ sarlavha-5}

JavaScript-dagi media-so'rovlar

Media-so'rovlar orqali turli xil ko'rinishdagi joylarni tartibini boshqarish imkoniga ega bo'lganimizdan beri, biz buni JavaScript-ni ishga tushirish uchun bog'lash yo'lini izladik. JavaScript-ni ba'zi ko'rish kengliklari, balandliklari va yo'nalishlari bo'yicha o'chirishning bir necha usullari mavjud va ba'zi aqlli odamlar Enquire.js va Simple State Manager kabi ba'zi oson foydalaniladigan mahalliy JS plaginlarini yozishgan. Siz buni matchMedia yordamida o'zingiz ham yaratishingiz mumkin. Biroq, sizda CSS va JavaScript-dagi media-so'rovlarni takrorlash kerak bo'lgan muammo bor.

Aaron Gustafsonda sizning hiyla-nayrangingiz bor, bu sizning CSS va JS-dagi media-so'rovlaringizni boshqarish va ularga mos kelishingiz shart emasligini anglatadi. Ushbu g'oya dastlab Jeremi Keytdan kelib chiqqan va ushbu misolda Gustafson uni to'liq amalga oshirishga qaratilgan.

GetActiveMQ (netm.ag/media-260) dan foydalanib, tana elementining oxiriga div # getActiveMQ-kuzatuvchini kiriting va yashiring. Keyin CSS-da # getActiveMQ-watcher {font-family: break-0;} birinchi media-so'rovga o'rnatildi, font-family: break-1; ikkinchisiga, shrift oilasi: break-2; uchinchisiga va boshqalar.

Ssenariyda viewResize () (netm.ag/resize-260) yordamida ko'rish oynasining o'lchamining o'zgarganligini tekshiradi va faol shrift-oilasini o'qiydi. Endi siz buni ko'rish oynasi ruxsat berganida, dl> ga yorliqli interfeysni qo'shish, yorug'lik qutisi ishini o'zgartirish yoki ma'lumotlar jadvali tartibini yangilash kabi JS qo'shimchalarini ulash uchun ishlatishingiz mumkin. GetActiveMQ Codepen-ni netm.ag/active-260-da tekshiring.

Asosiy

• Turli xil ko'rinishlar uchun JavaScript-ni unuting. Kontentni va veb-sayt funktsiyalarini foydalanuvchilarga barcha ko'rish joylarida unga kirish imkoniyatini taqdim eting. Bizga hech qachon JavaScript kerak emas

Ilg'or

• Breakup-ni media-so'rovlarning oldindan aniqlangan ro'yxati sifatida ishlatish va getActiveMQ-watcher uchun shrift oilalari ro'yxatini yaratishni avtomatlashtirish orqali Gustafson usulini kengaytiring.

Progressiv takomillashtirish

Progressive takomillashtirish haqida keng tarqalgan noto'g'ri tushuncha, odamlar: "Yaxshi, men ushbu yangi xususiyatdan foydalana olmayman", deb o'ylashadi, lekin haqiqatan ham bu aksincha. Progressive takomillashtirish degani, agar u faqat bitta brauzerda qo'llab-quvvatlanadigan bo'lsa yoki yo'q bo'lsa, funktsiyani taqdim etishingiz mumkin va vaqt o'tishi bilan odamlar yangi versiyalar paydo bo'lganda yaxshi tajribaga ega bo'lishadi.

Agar siz biron bir veb-saytning asosiy funktsiyasini ko'rib chiqsangiz, uni HTML sifatida etkazib berishingiz va server tomonidan barcha ishlov berishni bajarishingiz mumkin. To'lovlar, shakllar, Yoqtirishlar, almashish, elektron pochta xabarlari, boshqaruv panellari - barchasi amalga oshirilishi mumkin. Asosiy vazifa qurilgandan so'ng, biz buning ustiga ajoyib texnologiyalarni to'plashimiz mumkin, chunki qulab tushadiganlarni ushlab turish uchun bizda xavfsizlik tarmog'i mavjud. Biz bu erda aytib o'tgan ilg'or yondashuvlarning aksariyati bosqichma-bosqich takomillashtirishga asoslangan.

Maket

Moslashuvchan maketni aytish oson, ammo u turli xil yondashuvlarga ega. Nth-child () selektoridan foydalanib, kamroq belgilanadigan oddiy kataklarni joylashtiring.

/ * to'r uchun mobil birinchi kenglikni e'lon qiling * / .grid-1-4 {float: left; kengligi: 100%; } / * Ko'rish oynasi kamida 37,5em bo'lganida, har bir element uchun katakchani 50% ga sozlang * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Har bir ikkinchi elementni birinchisidan keyin tozalang. Bu tarmoqdagi 3, 5, 7, 9-chi ... * / .grid-1-4: nth-of-type (2n + 1) {aniq: chap; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Oldingi tozalovni olib tashlang * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Har bir to'rtinchi elementni birinchisidan keyin tozalang. Bu tarmoqdagi 5-chi, 9-chi ... ni nishonga oladi. * / .Grid-1-4: nth-of-type (4n + 1) {aniq: chap; }}

Joylashuvingiz uchun pozitsiyadan foydalaning va suzing. Bugungi kunga qadar ular bizga yaxshi xizmat ko'rsatgan bo'lsalar-da, ularni maket uchun ishlatish zarur bo'lgan hack edi. Endi biz ikkita yangi bolani oldik, ular bizning barcha muammolarni tuzatishga yordam beradi - Flexbox va Grids.

Flexbox alohida modullar uchun juda yaxshi, har bir modul tarkibidagi qismlarning joylashishini boshqaradi. Flexbox yordamida osonlikcha erishish mumkin bo'lgan biz etkazib berishga harakat qiladigan tartiblar mavjud va bu javob beradigan saytlarda yanada aniqroq. Bu haqda ko'proq ma'lumot olish uchun Flexbox yoki Flexbox Polyfill bo'yicha CSS Tricks qo'llanmasini ko'rib chiqing.

CSS katakchasi tartibi

Grid ko'proq makro darajadagi maket uchun mo'ljallangan. Grid layout moduli sizga CSS ichidagi maketingizni tavsiflashning ajoyib usulini beradi. Hozirda u qoralama bosqichida bo'lsa ham, men ushbu maqolani Rachel Endryuning CSS Grid maketida tavsiya qilaman.

Nihoyat

Bu sizning ta'sirchan amaliyotingizni kengaytirish uchun bir nechta maslahatlar. Har qanday yangi sezgir ishga yaqinlashganda, orqaga qadam qo'ying va asoslarni to'g'ri qabul qilganingizga ishonch hosil qiling. O'zingizning kontentingiz, HTML va ular bo'yicha yaxshilangan tajribalaringizdan boshlang va siz o'zingizning dizaynlaringizni olishingiz uchun hech qanday cheklov bo'lmaydi.

Ushbu maqola dastlab 260-sonda paydo bo'lgan net jurnal.