Задаволены
- Спагадныя выявы
- Прадукцыйнасць
- Умоўная і лянівая нагрузка
- Спагадны тыпаграф
- Медыя-запыты ў JavaScript
- Прагрэсіўнае ўдасканаленне
- Макет
- Макет сеткі CSS
- Нарэшце
Спагадны вэб-дызайн гучыць неверагодна проста. Выберыце гнуткія сеткі для макета, выкарыстоўвайце гнуткія носьбіты (выявы, відэа, устаўныя кадры) і ўжывайце медыя-запыты для абнаўлення гэтых вымярэнняў, каб найлепшым чынам арганізаваць змест у любым праглядзе. На практыцы мы даведаліся, што гэта на самай справе не так проста. Малюсенькія праблемы, якія ўзнікаюць падчас кожнага праекта, прымушаюць нас драпаць галаву, а часам нават выразаць траншэі для пазногцяў на стале.
З таго часу, як я пачаў курыраваць бюлетэнь Responsive Design Weekly, мне пашанцавала пагутарыць са шматлікімі членамі Інтэрнэт-супольнасці і пачуць іх досвед. Я хацеў даведацца, пра што сапраўды хацела даведацца суполка, таму распаўсюдзіў апытанне сярод чытачоў. Вось лепшыя вынікі:
- Спагадныя выявы
- Павышэнне прадукцыйнасці
- Спагадны тыпаграф
- Медыя-запыты ў JavaScript
- Прагрэсіўнае паляпшэнне
- Макет
З улікам гэтых тэм я правёў серыю падкастаў, у якіх распытваў некаторых кіраўнікоў галіны. У іх адказах адзін пункт быў аднадушны: сканцэнтруйцеся на тым, каб атрымаць асновы, перш чым пачаць турбавацца пра захапляльныя і прасунутыя метады. Вярнуўшы рэчы да асноў, мы можам стварыць надзейны інтэрфейс для ўсіх, накладаючы на функцыі, калі дазваляе кантэкст прылады альбо карыстальніка.
«Так ... а як наконт гэтых перадавых метадаў?» Я чую, вы пытаецеся. Я думаю, што Стывен Хэй рэзюмаваў гэта лепш за ўсё, калі сказаў: «Канчатковая тэхніка RWD - гэта пачаць, не выкарыстоўваючы ніякіх перадавых метадаў RWD. Пачніце са структураванага зместу і пабудуйце. Дадавайце кропку спынення толькі тады, калі дызайн ламаецца, а змест гэта дыктуе і ... усё ".
У гэтым артыкуле я пачну з асноў і дадам пласты складанасці, як дазваляе сітуацыя, каб дапрацаваць гэтыя перадавыя метады. Давайце пачнем.
Спагадныя выявы
Вадкія носьбіты былі ключавой часткай RWD, калі іх упершыню вызначыў Ітан Маркат. шырыня: 100%; , максімальная шырыня: 100%; па-ранейшаму працуе і сёння, але спагадны ландшафт выявы значна ўскладніўся. З павелічэннем колькасці экрана, шчыльнасці пікселяў і прылад для падтрымкі мы прагнем большага кантролю.
Тры асноўныя праблемы былі вызначаны групай супольнасці Responsive Images (RICG):
- Памер кілабайта выявы, якую мы адпраўляем па дроце
- Фізічны памер выявы, якую мы адпраўляем на прылады з высокім DPI
- Абрэзка выявы ў выглядзе мастацкага кірунку для канкрэтнага памеру вобласці прагляду
Yoav Weiss пры дапамозе Indiegogo прарабіў большасць работ па рэалізацыі Blink - відэльцы WebKit ад Google, і да таго часу, калі вы гэта прачытаеце, ён будзе пастаўлены ў 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% праглядальнага віда -> памеры = "(мінімальная шырыня: 64 эм) 70 ват,! - Калі відарыс не такі вялікі, тады для любога праглядальнага экрана, які складае 37,5 эм і больш, выкарыстоўвайце малюнак, які займае 95% праглядальнага віда -> (мінімальная шырыня: 37,5 эм) 95 ват,! - і калі аглядавы экран меншы, чым малюнак, які займае 100% вобласці прагляду -> 100vw "! - заўсёды мець альт-тэкст .--> alt =" Конь "/>
З пункту гледжання прадукцыйнасці не мае значэння, калі вы выкарыстоўваеце мінімальную шырыню альбо максімальную шырыню ў атрыбуце памеры - але парадак крыніцы мае значэнне. Аглядальнік заўсёды будзе выкарыстоўваць першы адпаведны памер.
Акрамя таго, памятайце, што мы цвёрда кадзіруем атрыбут памеры, які будзе непасрэдна вызначаны ў адпаведнасці з нашым дызайнам. Гэта можа выклікаць праблемы з рухам наперад. Напрыклад, калі вы перапраектуеце свой сайт, вам трэба будзе перагледзець усе img> або picture> s і перавызначыць памеры. Калі вы выкарыстоўваеце CMS, гэта можна пераадолець у рамках працэсу зборкі.
У WordPress ужо ёсць убудова для дапамогі. Ён вызначае srcset на стандартных разнавіднасцях малюнкаў WP і дазваляе аб'яўляць памеры ў цэнтральным месцы. Калі старонка генеруецца з базы дадзеных, яна змяняе ўсе згадкі ў img> і замяняе іх разметкай малюнка.
Асноўныя
- Падумайце, ці сапраўды вам трэба ўключыць малюнак. Змест малюнка - асноўны, альбо дэкаратыўны? Адзін малюнак менш будзе азначаць больш хуткі час загрузкі
- Аптымізуйце выявы, якія вам трэба ўключыць, з дапамогай ImageOptim
- Усталюйце загалоўкі для малюнкаў на вашым серверы альбо ў файле .htaccess (гл. Падрабязнасці ў раздзеле "Прадукцыйнасць")
- PictureFill забяспечвае падтрымку поліфайлаў для малюнкаў
Пашыраны
- Ляніва загружайце выявы з дапамогай убудовы Lazy Load ад jQuery
- Для выяўлення функцый выкарыстоўвайце HTMLImageElement.Sizes і HTMLPictureElement.
- Пашыраны ўбудова PictureFill WP, знойдзены на Github, дазволіць вам вызначыць уласныя значэнні шырыні і памераў малюнкаў
Прадукцыйнасць
Каб атрымаць найбольш хуткае ўяўленне на нашых старонках, нам патрэбны ўсе HTML і CSS, неабходныя для адлюстравання верхняй часткі нашай старонкі ў межах першага адказу сервера. Гэта магічнае лік складае 14 кб і заснавана на максімальным памеры акна перагрузкі за час першага зваротнага руху (RTT).
Патрык Хаманн, тэхнічны кіраўнік "Guardian", і яго каманда здолелі пераадолець 1000-міліметровы бар'ер, выкарыстоўваючы сумесь інтэр'ерных і бэкэнд-метадаў. Падыход Guardian заключаецца ў тым, каб забяспечыць неабходны змест - артыкул - як мага хутчэй і даставіць карыстальніку магічны нумар у 14 кб.
Давайце разгледзім працэс:
- Карыстальнік націскае спасылку Google на навіну
- Адзін запыт на блакаванне накіроўваецца ў базу дадзеных артыкула. Ніякіх звязаных гісторый і каментарыяў не патрабуецца
- HTML загружаецца з крытычным CSS
- у галаве>
- Праводзіцца працэс «зрэзаць гарчыцу» і загружаюцца любыя ўмоўныя элементы, заснаваныя на функцыях прылады карыстальніка
- Любы змест, звязаны з самім артыкулам альбо яго падтрымка (звязаныя выявы артыкулаў, каментарыі да артыкулаў і гэтак далей), ляніва загружаецца на свае месцы
Аптымізацыя такога крытычнага шляху рэндэрынгу азначае, што head> мае 222 радкі. Аднак крытычны змест, які карыстальнік бачыў, па-ранейшаму ўваходзіць у пачатковую карысную нагрузку ў 14 кб, калі gzipped. Менавіта гэты працэс дапамагае пераадолець бар'ер рэндэрынгу ў 1000 мс.
Умоўная і лянівая нагрузка
Умоўная загрузка паляпшае карыстацкі досвед на аснове функцыі яго прылады. Такія інструменты, як Modernizr, дазваляюць праверыць гэтыя функцыі, але ведайце, што толькі таму, што браўзэр кажа, што прапануе падтрымку, гэта не заўсёды азначае поўную падтрымку.
Адзін з метадаў - спыніць загрузку чагосьці, пакуль карыстальнік не праявіць намер выкарыстаць гэтую функцыю. Гэта будзе лічыцца ўмоўным. Вы можаце ўтрымліваць загрузку ў сацыяльных значках, пакуль карыстальнік не навядзе на іх значкі або не дакранецца да іх, альбо вы можаце пазбегнуць загрузкі iframe-карты Google у меншыя аглядныя вобласці, дзе карыстальнік, хутчэй за ўсё, аддае перавагу спасылцы на спецыяльнае прыкладанне для адлюстравання. Іншы падыход - "зрэзаць гарчыцу" - падрабязна пра гэта глядзіце ў раздзеле вышэй.
Лянівая загрузка вызначаецца як тое, што вы заўсёды маеце намер загружаць на старонку - выявы, якія ўваходзяць у артыкул, каментарыі альбо іншыя звязаныя з гэтым артыкулы, - але для гэтага карыстальнік не павінен знаходзіцца там, каб пачаць спажываць змест.
Асноўныя
- Уключыце gzipping для файлаў і ўсталюйце загалоўкі для ўсяго статычнага змесціва (netm.ag/expire-260)
- Выкарыстоўвайце убудова Lazy Load jQuery. Гэта загружае выявы пры набліжэнні да прагляду альбо праз пэўны прамежак часу
Пашыраны
- Наладзьце хутка альбо CloudFlare. Сеткі дастаўкі кантэнту (CDN) дастаўляюць карыстальнікам ваш статычны кантэнт хутчэй, чым ваш уласны сервер, і маюць некалькі бясплатных узроўняў
- Уключыце SPDY для аглядальнікаў з падтрымкай http2, каб скарыстацца такімі функцыямі, як паралельныя HTTP-запыты
- Social Count дазваляе ўмоўна загружаць вашы сацыяльныя абразкі
- Выкарыстанне API статычных карт дазволіць вам выключыць інтэрактыўныя карты Google для малюнкаў. Зірніце на прыклад Брэда Мароза на netm.ag/static-260
- Ajax Include Pattern загружае фрагменты змесціва альбо з атрыбута data-before, data-after альбо data-replace
Спагадны тыпаграф
Тыпаграфіка - гэта зрабіць ваш кантэнт лёгкім для засваення. Спагадная тыпаграфіка пашырае гэта, каб забяспечыць чытальнасць на самых розных прыладах і аглядных экранах. Джордан Мур прызнае, што тып - гэта адна рэч, на якую ён не гатовы саступіць. Пакіньце малюнак ці два, калі вам трэба, але пераканайцеся, што ў вас выдатны тып.
Стывен Хей прапануе ўсталяваць памер шрыфта HTML на 100 адсоткаў (чытай: проста пакіньце яго такім, які ёсць), таму што кожны вытворца браўзэра альбо прылады робіць разумным для чытання стандартны ўзровень для пэўнага дазволу альбо прылады. Для большасці настольных аглядальнікаў гэта 16 пікселяў.
З іншага боку, Мур выкарыстоўвае модуль REM і памер шрыфта HTML, каб усталяваць мінімальны памер шрыфта для пэўных элементаў зместу. Напрыклад, калі вы хочаце, каб аб'ём артыкула заўсёды быў 14 пікселяў, усталюйце яго ў якасці асноўнага памеру шрыфта для элемента HTML і ўсталюйце .byline {font-size: 1rem;}. Пры маштабаванні цела: font-size: у адпаведнасці з праглядам вы не будзеце ўплываць на стыль .by-line.
Таксама важная добрая даўжыня радка для чытання - нацэльвайце ад 45 да 65 сімвалаў. Ёсць букмарклет, які можна выкарыстоўваць для праверкі змесціва. Калі вы падтрымліваеце некалькі моў у сваім дызайне, тады і даўжыня радка можа адрознівацца. Мур прапануе выкарыстаць: lang (de) article {max-width: 30em}, каб пакрыць любыя праблемы.
Каб падтрымліваць вертыкальны рытм, усталюйце margin-bottom у адносінах да блокаў змесціва, ul>, ol>, blockquote>, table>, blockquote> і гэтак далей, аднолькавай з вышынёй вашай лініі. Калі рытм перарываецца з увядзеннем малюнкаў, вы можаце выправіць гэта, дадаўшы Baseline.js або BaselineAlign.js.
Асноўныя
- У аснову шрыфта пакладзена 100-адсоткавая аснова
- Праца ў адносных эм адзінках
- Усталюйце палі ў вышыню лініі, каб захаваць вертыкальны рытм у дызайне
Пашыраны
- Палепшыць прадукцыйнасць загрузкі шрыфта з дапамогай Enhance.js або адкладзенай загрузкі шрыфта
- Выкарыстоўвайце Sass @includes для семантычных загалоўкаў.
- Часта нам трэба выкарыстоўваць стыль h5 у віджэце бакавой панэлі, які патрабуе разметкі h2. Выкарыстоўвайце тыпаграфскія міксіны Bearded’s, каб кантраляваць памер і захоўваць сэнс з наступным кодам:
.sidebar h2 {@include heading-5}
Медыя-запыты ў JavaScript
З таго часу, як мы змаглі кантраляваць макет у розных відах прагляду праз медыя-запыты, мы шукаем спосаб звязаць гэта і з запускам нашага JavaScript. Ёсць некалькі спосабаў запусціць JavaScript на пэўнай шырыні, вышыні і арыентацыі агляднай вобласці, а некаторыя разумныя людзі напісалі некалькі простых у выкарыстанні плагінаў JS, такіх як Enquire.js і Simple State Manager. Вы нават можаце стварыць гэта самастойна, выкарыстоўваючы matchMedia. Аднак у вас ёсць праблема з неабходнасцю прадубляваць запыты мультымедыя ў CSS і JavaScript.
У Аарона Густафсана ёсць прыемны фокус, які азначае, што вам не трэба кіраваць сваімі медыя-запытамі ў CSS і JS. Першапачаткова ідэя прыйшла ад Джэрэмі Кіта, і ў гэтым прыкладзе Густафсан давёў яе да поўнай рэалізацыі.
Выкарыстоўваючы getActiveMQ (netm.ag/media-260), увядзіце div # getActiveMQ-watcher у канец элемента цела і схавайце яго. Затым у CSS усталюйце # getActiveMQ-watcher {font-family: break-0;} да першага медыя-запыту, font-family: break-1; да другога, сямейства шрыфтоў: break-2; да трэцяга і гэтак далей.
Скрыпт выкарыстоўвае watchResize () (netm.ag/resize-260), каб праверыць, ці змяніўся памер відарыса, а затым счытвае актыўнае сямейства шрыфтоў. Цяпер вы можаце выкарыстоўваць гэта, каб падключыць паляпшэнні JS, такія як даданне інтэрфейсу з укладкамі ў dl>, калі дазваляе агляд, змяненне паводзін лайтбокса альбо абнаўленне макета табліцы дадзеных. Праверце код getActiveMQ на сайце netm.ag/active-260.
Асноўныя
- Забудзьцеся пра JavaScript для розных праглядаў. Прадастаўляйце карыстальнікам кантэнт і функцыі вэб-сайтаў такім чынам, каб яны маглі атрымаць да іх доступ ва ўсіх відах прагляду. Мы ніколі не павінны мець патрэбу ў JavaScript
Пашыраны
- Пашырце метад Густафсана, выкарыстоўваючы Breakup як наканаваны спіс мультымедыйных запытаў і аўтаматызуючы стварэнне спісу сямействаў шрыфтоў для getActiveMQ-watcher
Прагрэсіўнае ўдасканаленне
Распаўсюджанае памылковае меркаванне пра прагрэсіўнае паляпшэнне заключаецца ў тым, што людзі думаюць: "Ну, я не магу выкарыстоўваць гэтую новую функцыю", але на самой справе ўсё наадварот. Прагрэсіўнае ўдасканаленне азначае, што вы можаце даставіць функцыю, калі яна падтрымліваецца толькі ў адным або нават без аглядальнікаў, і з цягам часу людзі будуць атрымліваць лепшы досвед па меры з'яўлення новых версій.
Калі вы паглядзіце асноўную функцыю любога вэб-сайта, вы можаце паставіць яго ў выглядзе HTML і зрабіць так, каб серверная частка выконвала ўсю апрацоўку. Плацяжы, формы, лайкі, сумеснае выкарыстанне, адрасы электроннай пошты, панэлі кіравання - усё гэта можна зрабіць. Пасля стварэння асноўнай задачы мы можам накласці на гэта цудоўныя тэхналогіі, таму што ў нас ёсць ахоўная сетка, каб злавіць тых, хто праваліўся. Большасць перадавых падыходаў, пра якія мы гаварылі тут, заснаваныя на паступовым удасканаленні.
Макет
Гнуткая раскладка проста сказаць, але яна мае мноства розных падыходаў. Стварайце простыя макеты сеткі з меншай разметкай, выкарыстоўваючы селектар: nth-child ().
/ * аб'явіць першую шырыню мабільнай сеткі * / .grid-1-4 {float: left; шырыня: 100%; } / * Калі вобласць прагляду складае па меншай меры 37,5em, усталюйце для сеткі 50% на элемент * / @media (мінімальная шырыня: 37,5em) {.grid-1-4 {шырыня: 50%; } / * Ачысціць плаванне кожнага другога элемента ПАСЛЯ першага. Гэта арыентавана на 3-ю, 5-ю, 7-ю, 9-ю ... у сетцы. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (мінімальная шырыня: 64em) {.grid-1-4 {шырыня: 25%; } / * Выдаліць папярэднюю ачыстку * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Ачысціць паплавок кожнага 4-га элемента ПАСЛЯ першага. Гэта прызначана для 5-га, 9-га ... у сетцы. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Памахайце на развітанне з выкарыстаннем пазіцыі і плавання для макетаў. Хоць яны і паслужылі нам на сённяшні дзень, іх выкарыстанне для макетавання было неабходным узлому. Цяпер у нас ёсць двое новых дзяцей, якія дапамогуць выправіць усе праблемы з макетам - Flexbox і Grids.
Flexbox выдатна падыходзіць для асобных модуляў, кантралюючы размяшчэнне частак змесціва ў кожным з модуляў. Мы маем намер паспрабаваць макеты, якіх можна прасцей дасягнуць, выкарыстоўваючы Flexbox, і гэта яшчэ больш актуальна для спагадных сайтаў. Больш падрабязна пра гэта азнаёмцеся з кіраўніцтвам CSS Tricks па Flexbox альбо Flexbox Polyfill.
Макет сеткі CSS
Сетка больш для макета на макраўзроўні. Модуль макета сеткі дае выдатны спосаб апісання макета ў CSS. На дадзены момант ён усё яшчэ знаходзіцца на стадыі праекта, я рэкамендую гэты артыкул пра макет CSS Grid Рэйчал Эндру.
Нарэшце
Гэта ўсяго некалькі парад, каб пашырыць вашу спагадную практыку. Падыходзячы да любой новай аператыўнай працы, зрабіце крок назад і пераканайцеся, што вы правільна ўкладваеце асновы. Пачніце з вашага змесціва, HTML і палепшанага ўздзеяння на іх, і вы не будзеце мець ніякіх абмежаванняў для таго, куды вы можаце ўзяць свой дызайн.
Гэты артыкул першапачаткова з'явіўся ў нумары 260 за сеткавы часопіс.
