Мазмұны
- Жауапты кескіндер
- Өнімділік
- Шартты және жалқау жүктеу
- Жауапты типография
- JavaScript-тегі медиа сұраулар
- Прогрессивті жақсарту
- Орналасу
- CSS торының орналасуы
- Ақыры
Жауапты веб-дизайн керемет қарапайым көрінеді. Орналасу үшін икемді торларды таңдап, икемді медианы қолданыңыз (кескіндер, видео, iframe) және медиа-сұраныстарды қолданып, кез-келген қарау алаңында мазмұнды жақсы реттеу үшін осы өлшемдерді жаңартыңыз. Іс жүзінде біз мұның оңай еместігін білдік. Әр жоба барысында өрбіген ұсақ-түйек мәселелер бізді тырнап тастайды, кейде тіпті жұмыс үстелінде тырнақтың орларын ойып аламыз.
Responsive Design Weekly ақпараттық бюллетенін басқара бастағаннан бері, мен веб-қоғамдастықтың көптеген мүшелерімен сөйлесіп, олардың тәжірибелерін тыңдау бақытына ие болдым. Мен қоғамдастықтың нені білгісі келетінін дәл білгім келді, сондықтан оқырмандарға сауалнама тараттым. Міне, ең жақсы нәтижелер:
- Жауапты бейнелер
- Өнімділікті жақсарту
- Жауапты типография
- JavaScript-тегі медиа сұраулар
- Прогрессивті жақсарту
- Орналасу
Осы тақырыптарды ескере отырып, мен бірқатар салалық көшбасшылардан ойларын сұрайтын подкасттар жүргіздім. Олардың жауаптарында бір мәселе бірауыздан болды: қызықты және озық әдістер туралы алаңдамай тұрып, негіздерді дәл алуға көңіл бөліңіз. Бастапқыға қайта оралу арқылы біз құрылғы немесе пайдаланушының контексті мүмкіндік берген кезде мүмкіндіктер бойынша қабаттасып, бәріне сенімді интерфейс жасай аламыз.
’Сонымен ... осы озық әдістер туралы не деуге болады?’ Сіздің сұрағыңызды тыңдаймын. Менің ойымша, Стивен Хей мұны ең жақсы қорытындылады: «RWD техникасы - RWD техникасын қолданбау арқылы бастау. Құрылымдық мазмұннан бастаңыз және өз жолыңызды құрыңыз. Үзіліс нүктесін дизайн бұзылған кезде ғана қосыңыз және мазмұны оған нұсқайды және ... солай болады. '
Бұл мақалада мен негіздерден бастаймын және жағдайдың жетілдірілген әдістеріне сүйене отырып, қиындықтар қабатын қосамын. Бастайық.
Жауапты кескіндер
Сұйық орта оны Этан Маркотта алғаш анықтаған кезде RWD-тің негізгі бөлігі болды. ені: 100%; , максималды ені: 100%; әлі күнге дейін жұмыс істейді, бірақ жауап кескін көрінісі біршама күрделене түсті. Экран өлшемдерінің, пиксель тығыздығының және құрылғылардың көбеюіне байланысты біз үлкен бақылауды қажет етеміз.
Үш негізгі мәселелерді Responsive Images Community Group (RICG) анықтады:
- Біз суреттің килобайт өлшемін сым арқылы жібереміз
- Суреттің физикалық өлшемі жоғары DPI құрылғыларына жібереміз
- Көрініс терезесінің белгілі бір өлшеміне арналған көркемдік бағыттағы кескін
Yoav Weiss, Indiegogo көмегімен, Blink енгізу бойынша жұмыстың көп бөлігін жасады - Google-дің WebKit шанышқысы, және сіз оны оқығанға дейін Chrome және Firefox-та жеткізіледі. Safari 8 жеткізеді srcset, бірақ атрибуттары тек түнгі құрылымдарда және сурет> әлі орындалмаған.
Вебті әзірлеу процесінде жаңа нәрсе пайда болған кезде, оны бастау қиынға соғуы мүмкін. Бір мысалды біртіндеп қарастырайық.
img! - Суретке қолдау көрсетпейтін барлық шолғыштар үшін кері кескін жариялаңыз -> src = «horse-350.webp»! - Суреттің барлық өлшемдерін srcset-те жариялаңыз. Браузерге әр кескіннің ені туралы хабарлау үшін w дескрипторы арқылы кескін енін қосыңыз .--> srcset = «horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w «! - Өлшемдер браузерге біздің сайттың орналасуын хабарлайды. Бұл жерде 64 см және одан үлкен көрінетін кез-келген терезе үшін айғақ алаңының 70% -> size = «(min-width: 64em) 70vw,!» Суретін пайдаланыңыз! үлкен, содан кейін кез-келген көрініс терезесі үшін 37,5эм және одан үлкен болса, көріністің 95% -> (мин-ені: 37.5em) 95vw,! - суретті қолданыңыз, егер қарау терезесі одан кіші болса, онда көріністің 100% -ын алатын сурет -> 100vw «! - әрқашан alt мәтіні бар .--> alt =» Ат «/>
Өнімділік тұрғысынан өлшемдер атрибутында min-width немесе max-width қолданғаныңыз маңызды емес, бірақ бастапқы рет маңызды. Браузер әрқашан бірінші сәйкес келетін өлшемді қолданады.
Сондай-ақ, біздің дизайнымызға сәйкес анықталатын өлшемдер атрибутын қатты кодтайтынымызды ұмытпаңыз. Бұл мәселелер алға қарай жылжуы мүмкін. Мысалы, егер сіз өзіңіздің сайтыңыздың дизайнын өзгерткен болсаңыз, сізге img> немесе picture> s-нің барлығын қайта қарап, өлшемдерін қайта анықтауыңыз керек. Егер сіз CMS қолданып жүрсеңіз, оны құру процесінің бір бөлігі ретінде жеңуге болады.
WordPress-те қазірдің өзінде көмектесетін плагин бар. Ол WP стандартты кескін сорттары бойынша srcset-ті анықтайды және өлшемдерді орталық жерде жариялауға мүмкіндік береді. Деректер қорынан парақ жасалған кезде, img> -де кез-келген сілтемелерді ауыстырады және оларды суреттің белгісімен ауыстырады.
Негізгі
- Сізге шынымен сурет қосу керек пе, жоқ па деп ойлаңыз. Кескіннің негізгі мазмұны ма, әлде ол сәндік пе? Бір кем сурет жүктеу уақытын тездетеді
- ImageOptim көмегімен қосу керек суреттерді оңтайландырыңыз
- Серверіңіздегі немесе .htaccess файлындағы кескіндер үшін жарамдылық мерзімі аяқталатын тақырыпшаларды орнатыңыз (егжей-тегжейін ‘Өнімділік’ бөлімінен қараңыз)
- PictureFill суреттерге полифилді қолдауды ұсынады
Озат
- JQuery’дің Lazy Load плагині арқылы кескіндерді жалқау жүктеңіз
- Функцияны анықтау үшін HTMLImageElement.Sizes және HTMLPictureElement қолданыңыз.
- Github-та табылған кеңейтілген PictureFill WP плагині кескіннің ені мен өлшемінің мәндерін анықтауға мүмкіндік береді
Өнімділік
Біздің парақтарда жылдам қабылданатын өнімділікті алу үшін бізге сервердің бірінші жауабында парағымыздың жоғарғы бөлігін көрсету үшін қажет барлық HTML және CSS қажет. Бұл сиқырлы сан 14кб құрайды және бірінші бару уақытындағы (RTT) ең көп кептелу терезесінің өлшеміне негізделген.
Патрик Хаманн, Guardian-тің техникалық жетекшісі және оның командасы фронт пен артқа техниканы араластыра отырып, 1000 метрлік тосқауылды бұза алды. Guardian-дің тәсілі қажет мазмұнды қамтамасыз ету болып табылады - мақала - пайдаланушыға мүмкіндігінше тезірек және 14кб сиқырлы нөмірде жеткізіледі.
Процесті қарастырайық:
- Қолданушы жаңалықтар сілтемесін Google-ге басады
- Мақала үшін дерекқорға бір оқшаулау туралы сұрау жіберіледі. Ешқандай оқиға немесе пікірлер сұралмайды
- HTML-де Critical CSS бар жүктелген
- басында>
- «Қыша кесу» процесі жасалады және пайдаланушының құрылғы ерекшеліктеріне негізделген кез-келген шартты элементтер жүктеледі
- Мақаланың өзіне қатысты немесе оған қолдау көрсететін кез-келген мазмұн (қатысты мақаланың суреттері, мақала туралы пікірлер және басқалары) өз орнына жалқау жүктеледі
Сындарлы жолды осылай оңтайландыру бас> ұзындығы 222 жолды білдіреді. Дегенмен, пайдаланушы көрген маңызды мазмұн, жүктеме кезінде 14 кб бастапқы жүктеме деңгейінде болады. Бұл 1000 мильдік тосқауылды бұзуға көмектесетін бұл процесс.
Шартты және жалқау жүктеу
Шартты жүктеу құрылғының ерекшелігі негізінде пайдаланушының тәжірибесін жақсартады. Modernizr сияқты құралдар сізге осы мүмкіндіктерді тексеруге мүмкіндік береді, бірақ браузер қолдау көрсететінін айтқанымен, бұл әрдайым толық қолдауды білдірмейтінін ескеріңіз.
Бір әдіс - пайдаланушы осы мүмкіндікті пайдалануға ниеті көрсетілгенге дейін бірдеңені жүктеуді тоқтату. Бұл шартты деп саналады. Пайдаланушы белгішелерді жылжытқанға немесе оларға қол тигізгенге дейін әлеуметтік белгішелерде жүктеуді тоқтата аласыз немесе егер пайдаланушы арнайы карта қосымшасына сілтеме жасауды қалайтын болса, Google Map картасының iframe-ді жүктеуден аулақ бола аласыз. Тағы бір тәсіл - «қыша кесу» - бұл туралы толығырақ жоғарыдағы боксты қараңыз.
Жалқау жүктеу дегеніміз - сіз әрқашан параққа жүктеуді көздейтін нәрсе - мақаланың бөлігі болып табылатын кескіндер, түсініктемелер немесе басқа да байланысты мақалалар, бірақ бұл пайдаланушының мазмұнды тұтынуды бастауы үшін қажет емес.
Негізгі
- Файлдар үшін зиптеуді қосыңыз және барлық статикалық мазмұнға жарамдылық мерзімі тақырыбын орнатыңыз (netm.ag/expire-260)
- Lazy Load jQuery плагинін қолданыңыз. Бұл көрініс терезесіне жақындағанда немесе белгілі бір уақыт өткеннен кейін кескіндерді жүктейді
Озат
- Жылдам немесе CloudFlare орнатыңыз. Мазмұнды жеткізу желілері (CDN) статикалық мазмұнды пайдаланушыларға өзіңіздің серверіңізге қарағанда жылдамырақ жеткізеді және бірнеше бос деңгейге ие
- Параллельді http сұраулары сияқты http2 мүмкіндіктерін пайдалану үшін http2 мүмкіндігі бар браузерлер үшін SPDY қосыңыз
- Social Count әлеуметтік белгішелеріңізді шартты түрде жүктеуге мүмкіндік береді
- Static Maps API пайдалану кескіндер үшін интерактивті Google карталарын өшіруге мүмкіндік береді. Брэд Фросттың netm.ag/static-260 сайтындағы мысалын қараңыз
- Ajax Include Pattern мазмұн үзінділерін деректерге дейін, деректерге кейін немесе деректерді ауыстыру атрибутынан жүктейді
Жауапты типография
Типография - бұл сіздің мазмұныңызды жеңіл сіңіруге мүмкіндік беру. Жауапты типография мұны әртүрлі құрылғылар мен көрініс терезелерінде оқуды қамтамасыз ету үшін кеңейтеді. Джордан Мур бұл түрдің өзі бас тартқысы келмейтін нәрсе екенін мойындайды. Қажет болса, бір-екі кескін тастаңыз, бірақ сізде керемет түрі бар екеніне көз жеткізіңіз.
Стивен Хэй HTML қаріпінің өлшемін 100 пайызға қоюды ұсынады (оқыңыз: оны сол күйінде қалдырыңыз), өйткені әрбір шолғыш немесе құрылғы өндірушісі белгілі бір ажыратымдылыққа немесе құрылғыға қонымды оқылатын әдепкі жағдай жасайды. Көптеген жұмыс үстелі браузерлері үшін бұл 16px.
Екінші жағынан, Мур кейбір мазмұн элементтері үшін минималды қаріп өлшемін орнату үшін REM бірлігі мен HTML қаріп өлшемін қолданады. Мысалы, егер сіз мақаланың тізбегі әрқашан 14 пиксельді болуын қаласаңыз, онда оны HTML элементіне қаріптің негізгі өлшемі ретінде орнатыңыз және .byline {font-size: 1rem;} орнатыңыз. Денені масштабтау кезінде: қаріп өлшемі: қарау алаңына сәйкес келу үшін .by-line стиліне әсер етпейсіз.
Оқу сызығының жақсы ұзындығы да маңызды - 45-тен 65 таңбаға дейін. Мазмұнды тексеру үшін қолдануға болатын бетбелгі бар. Егер сіз өзіңіздің дизайныңызбен бірнеше тілді қолдайтын болсаңыз, онда жолдың ұзындығы да әр түрлі болуы мүмкін. Мур барлық мәселелерді жабу үшін: lang (de) мақаласын {max-width: 30em} пайдалануды ұсынады.
Тік ырғақты ұстап тұру үшін, маржаның астыңғы жағын мазмұн блоктарына, ul>, ol>, blockquote>, table>, blockquote> және т.с.с. сызық биіктігімен бірдей етіп қойыңыз. Егер ырғақтар кескіндерді енгізуге кедергі болса, оны Baseline.js немесе BaselineAlign.js қосу арқылы түзетуге болады.
Негізгі
- Қаріптің негізін 100 пайыз денеге салыңыз
- Салыстырмалы эм бірліктерінде жұмыс істеу
- Дизайнда тік ырғақты сақтау үшін шеттеріңізді сызық биіктігіне қойыңыз
Озат
- Enhance.js немесе кейінге қалдырылған қаріп жүктеу көмегімен қаріп жүктеуді жақсартыңыз
- Семантикалық тақырыптар үшін Sass @includes қолданыңыз.
- Көбіне бізге h5 стилін h2 белгілеуді қажет ететін бүйірлік тақта виджетінде қолдану қажет. Көлемді бақылау және төмендегі кодпен семантикалық болып қалу үшін Bearded’s Typographic Mixins қолданыңыз:
.sidebar h2 {@include header-5}
JavaScript-тегі медиа сұраулар
Біз әр түрлі көріністердің орналасуын медиа-сұраулар арқылы басқара алғаннан бері, біз оны JavaScript-ті іске қосудың тәсілін іздедік. JavaScript-ті белгілі бір көрініс кеңдігінде, биіктігі мен бағдарында өртеудің бірнеше әдісі бар, ал кейбір ақылды адамдар Enquire.js және Simple State Manager сияқты қарапайым JS плагиндерін жазды. Сіз мұны matchMedia көмегімен өзіңіз жасай аласыз. Дегенмен, сізде өзіңіздің медиа сұрауларыңызды CSS және JavaScript-те қайталауға тура келетін мәселе бар.
Аарон Густафсонның ұқыпты қулығы бар, ол сізге бұқаралық ақпарат құралдарындағы сұраныстарды CSS және JS жүйелерінде басқарудың және сәйкестендірудің қажеті жоқ дегенді білдіреді. Идея бастапқыда Джереми Киттен шыққан және осы мысалда Густафсон оны толығымен жүзеге асырды.
GetActiveMQ (netm.ag/media-260) көмегімен дененің соңына div # getActiveMQ-бақылаушыны енгізіп, жасырыңыз. Содан кейін CSS ішінде # getActiveMQ-watcher {font-family: break-0;} бірінші медиа сұрауға, font-family: break-1; екіншісіне, шрифт-отбасы: break-2; үшіншіге және т.б.
Сценарийде қарау терезесінің өлшемі өзгерген-өзгермегенін тексеру үшін watchResize () (netm.ag/resize-260) қолданылады, содан кейін белсенді қаріптер тобын оқиды. Енді мұны көру терезесі рұқсат етілген кезде dl> терезесіне интерфейсті қосу, жарық терезесінің әрекетін өзгерту немесе деректер кестесінің орналасуын жаңарту сияқты JS жақсартуларын қосуға болады. GetActiveMQ Codepen-ді netm.ag/active-260 сайтынан қараңыз.
Негізгі
- JavaScript туралы әр түрлі көріністер үшін ұмытыңыз. Мазмұнды және веб-сайт функцияларын пайдаланушыларға барлық қарау терезелерінде оған қол жеткізе алатындай етіп беріңіз. Бізге ешқашан JavaScript қажет болмауы керек
Озат
- Breakup-ті алдын-ала анықталған медиа сұраныстар тізімі ретінде пайдалану және getActiveMQ-watcher үшін қаріптер тобының құрылуын автоматтандыру арқылы Густафсон әдісін кеңейтіңіз.
Прогрессивті жақсарту
Прогрессивті жетілдіру туралы жиі кездесетін қате түсінік: адамдар: «Жақсы, мен бұл жаңа мүмкіндікті қолдана алмаймын», - деп ойлайды, бірақ бұл керісінше. Прогрессивті жақсарту дегеніміз, егер сіз тек бір немесе бірде-бір браузерде қолдау көрсетілмесе, мүмкіндікті ұсына аласыз, ал уақыт өте келе жаңа нұсқалар пайда болған сайын адамдар жақсы тәжірибе алады.
Егер сіз кез-келген веб-сайттың негізгі функциясын қарасаңыз, оны HTML түрінде жеткізе аласыз және барлық өңдеулерді сервер жағында жасай аласыз. Төлемдер, формалар, ұнату, бөлісу, электрондық пошта, бақылау тақталары - мұның бәрін жасауға болады. Негізгі міндет тұрғызылғаннан кейін, біз оның үстіне керемет технологияларды жинай аламыз, өйткені бізде құлап қалғандарды ұстайтын қауіпсіздік торы бар. Біз әңгімелеген алдыңғы қатарлы тәсілдердің көпшілігі прогрессивті жетілдіруге негізделген.
Орналасу
Иілгіш орналасу қарапайым, бірақ оның әр түрлі тәсілдері бар. Nth-child () селекторын қолдану арқылы аз тораптармен қарапайым тор макеттерін жасаңыз.
/ * тор үшін ұялы бірінші енін жариялаңыз * / .grid-1-4 {float: left; ені: 100%; } / * Көрініс терезесі кем дегенде 37,5em болғанда, торды элемент үшін 50% етіп орнатыңыз * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Әрбір екінші элементті біріншіден кейін тазалаңыз. Бұл тордағы 3, 5, 7, 9 ... нысандарын көздейді. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (мин-ені: 64em) {.grid-1-4 {ені: 25%; } / * Алдыңғы тазартуды алып тастаңыз * / .grid-1-4: n-тип (2n + 1) {clear: none; } / * Әрбір төртінші элементті біріншіден кейін тазалаңыз. Бұл тордағы 5-ші, 9-шы ... мақсаттарын көздейді. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Позицияны қолданып қоштасыңыз және макеттеріңізге өзгермелі жүріңіз. Олар бізге осы уақытқа дейін жақсы қызмет еткенімен, оларды макет үшін пайдалану өте қажет болды. Біз қазір барлық қиындықтарды түзетуге көмектесетін екі жаңа баланы алдық - Flexbox және Grids.
Flexbox жеке модульдер үшін өте ыңғайлы, әр модуль ішіндегі мазмұн бөліктерінің орналасуын басқарады. Біз жеткізуге тырысатын макеттер бар, бұл Flexbox көмегімен оңай қол жеткізуге болады, және бұл жауап беретін сайттарға қатысты. Бұл туралы көбірек білу үшін Flexbox немесе Flexbox Polyfill бойынша CSS Tricks нұсқаулығын қараңыз.
CSS торының орналасуы
Тор макродеңгей үшін көбірек. Grid layout модулі сізге CSS ішіндегі макетіңізді сипаттауға тамаша мүмкіндік береді. Дәл қазір дайындық кезеңінде болса да, мен бұл мақаланы Рейчел Эндрюдің CSS Grid макеті бойынша ұсынамын.
Ақыры
Бұл сіздің жауап беру тәжірибеңізді кеңейтуге арналған бірнеше кеңестер. Кез-келген жаңа жедел жұмысқа жақындағанда, бір қадам артқа шегініп, негіздерді дұрыс қабылдағаныңызға көз жеткізіңіз. Мазмұныңыздан бастаңыз, HTML және олардың деңгейі жақсартылған, сондықтан сіз өзіңіздің дизайныңызды ала аласыз.
Бұл мақала бастапқыда 260 санында шыққан тор журналы.
