Съдържание
- Отзивчиви изображения
- производителност
- Условно и мързеливо натоварване
- Отзивчива типография
- Медийни заявки в JavaScript
- Прогресивно подобрение
- Оформление
- CSS оформление на мрежата
- Накрая
Отзивчивият уеб дизайн звучи невероятно просто. Изберете гъвкави решетки за оформлението, използвайте гъвкави носители (изображения, видео, рамки) и приложете медийни заявки, за да актуализирате тези измервания, за да подредите най-добре съдържанието във всеки изглед. На практика научихме, че всъщност не е толкова лесно. Малки проблеми, които се появяват по време на всеки проект, ни карат да си чешем главите и понякога дори да издълбаваме траншеи за нокти по бюрата си.
Откакто започнах да курирам бюлетина на Responsive Design Weekly, имах щастието да говоря с много членове на уеб общността и да чуя техния опит. Исках да разбера какво точно иска да научи общността, затова разпространих проучване сред читателите. Ето най-добрите резултати:
- Отзивчиви изображения
- Подобряване на производителността
- Отзивчива типография
- Медийни заявки в JavaScript
- Прогресивно подобрение
- Оформление
Имайки предвид тези теми, пуснах поредица от подкасти, като попитах някои от нашите лидери в бранша за техните мисли. В техните отговори една точка беше единодушна: съсредоточете се върху получаването на основите точно преди да започнете да се тревожите за вълнуващи и напреднали техники. Връщайки нещата към основните неща, ние сме в състояние да изградим надежден интерфейс за всеки, наслояващ функции, когато контекстът на устройството или потребителя позволява.
‘И така ... ами тези усъвършенствани техники?’ Чувам, че питате. Мисля, че Стивън Хей го обобщи най-добре, когато каза: „Крайната техника на RWD е да започнете, като не използвате никакви усъвършенствани техники на RWD. Започнете със структурирано съдържание и изградете своя път нагоре. Добавете точка на прекъсване само когато дизайнът се счупи и съдържанието го диктува и ... това е. “
В тази статия ще започна с основите и ще добавя слоеве сложност, както ситуацията позволява, за да надградя тези усъвършенствани техники. Да започваме.
Отзивчиви изображения
Течните среди бяха ключова част от RWD, когато за първи път бяха дефинирани от Ethan Marcotte. ширина: 100%; , максимална ширина: 100%; все още работи и днес, но отзивчивият пейзаж на изображението стана много по-сложен. С нарастващия брой размери на екрана, плътност на пикселите и устройства за поддръжка ние жадуваме за по-голям контрол.
Трите основни опасения бяха дефинирани от групата на общността Responsive Images (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 "! - Размерите информират браузъра за оформлението на нашия сайт. Тук казваме за всеки прозорец, който е 64ems и по-голям, използвайте изображение, което ще заема 70% от viewport -> sizes = "(min-width: 64em) 70vw,! - Ако viewport не е това голям, тогава за всеки прозорец за гледане, който е 37.5ems и по-голям, използвайте изображение, което заема 95% от viewport -> (min-width: 37.5em) 95vw,! - и ако viewport е по-малък от това, тогава използвайте изображение, което заема 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, необходими за изобразяване на горната част на нашата страница в рамките на първия отговор от сървъра. Това магическо число е 14kb и се основава на максималния размер на прозореца на задръстванията в рамките на първото време за двупосочно пътуване (RTT).
Патрик Хаман, технически лидер в Guardian, и екипът му са успели да пробият бариерата от 1000 мс, използвайки комбинация от техники за интерфейс и бекенд. Подходът на Guardian е да гарантира, че необходимото съдържание - статията - се доставя на потребителя възможно най-бързо и в рамките на 14kb магическо число.
Нека разгледаме процеса:
- Потребителят кликва върху връзка към Google към новина
- В базата данни за статията се изпраща единична заявка за блокиране. Не се искат свързани истории или коментари
- HTML се зарежда, съдържащ критичен CSS
- в главата>
- Извършва се процес на „Нарязване на горчицата“ и всички условни елементи, базирани на характеристиките на устройството на потребителя, се зареждат
- Всяко съдържание, свързано със или поддържащо самата статия (свързани изображения на статии, коментари към статии и т.н.), е мързеливо заредено на място
Оптимизирането на критичния път на изобразяване по този начин означава, че head> е с дължина 222 реда. Въпреки това критичното съдържание, което потребителят е видял, все още влиза в рамките на 14kb първоначален полезен товар, когато е gzipped. Този процес помага да се преодолее тази бариера за изобразяване от 1000 ms.
Условно и мързеливо натоварване
Условното зареждане подобрява практическата работа на потребителя въз основа на функцията на устройството. Инструменти като Modernizr ви позволяват да тествате за тези функции, но имайте предвид, че само защото браузърът казва, че предлага поддръжка, това не винаги означава пълна поддръжка.
Една техника е да спрете зареждането на нещо, докато потребителят покаже намерение да използва тази функция. Това ще се счита за условно. Можете да задържите зареждането в социалните икони, докато потребителят не задържи курсора на мишката или не докосне иконите, или можете да избегнете зареждането на iframe Google Map в по-малки изгледи, където потребителят вероятно предпочита да свързва със специално приложение за картографиране. Друг подход е „Нарежете горчицата“ - вижте карето по-горе за подробности за това.
Мързеливото зареждане се дефинира като нещо, което винаги възнамерявате да заредите на страницата - изображения, които са част от статията, коментари или други свързани статии - но това не е необходимо, за да може потребителят да започне да консумира съдържанието.
Основен
- Активирайте gzipping за файлове и задайте изтичащи заглавки за цялото статично съдържание (netm.ag/expire-260)
- Използвайте приставката Lazy Load jQuery. Това зарежда изображения при приближаване до прозореца за гледане или след определен период от време
Разширено
- Настройте бързо или CloudFlare. Мрежите за доставка на съдържание (CDN) доставят вашето статично съдържание на потребителите по-бързо от вашия собствен сървър и имат някои безплатни нива
- Активирайте SPDY за браузъри с активиран http2, за да се възползвате от функциите на http2 като паралелни http заявки
- Social Count позволява условно зареждане на вашите социални икони
- Използването на API за статични карти ще ви позволи да изключите интерактивните карти на Google за изображения. Обърнете внимание на примера на Брад Фрост на netm.ag/static-260
- Ajax Include Pattern ще зареди фрагменти на съдържание от атрибут data-before, data-after или data-replace
Отзивчива типография
Типографията е свързана с това да направите съдържанието ви лесно за смилане. Отзивчивата типография разширява това, за да осигури четливост в голямо разнообразие от устройства и изгледи. Джордан Мур признава, че типът е едно нещо, пред което той не е склонен да отстъпи. Пуснете изображение или две, ако имате нужда, но се уверете, че имате страхотен тип.
Стивън Хей предлага да зададете размера на шрифта на HTML на 100 процента (прочетете: просто го оставете такъв, какъвто е), тъй като всеки производител на браузър или устройство прави разумно четим подразбиране за определена резолюция или устройство. За повечето браузъри за настолни компютри това е 16px.
От друга страна, Мур използва REM единица и размер на шрифта HTML, за да зададе минимален размер на шрифта за определени елементи на съдържанието. Например, ако искате реда на статията да бъде винаги 14px, задайте го като основен размер на шрифта на 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 в края на елемента body и го скрийте. След това в рамките на CSS задайте # getActiveMQ-watcher {font-family: break-0;} към първата медийна заявка, font-family: break-1; към втория, семейство шрифтове: break-2; до третия и така нататък.
Скриптът използва watchResize () (netm.ag/resize-260), за да провери дали размерът на прозореца за преглед се е променил и след това чете обратно активното семейство шрифтове. Сега можете да използвате това, за да закачите JS подобрения, като добавяне на интерфейс с раздели към dl>, когато viewport позволява, промяна на поведението на лайтбокс или актуализиране на оформлението на таблица с данни. Разгледайте getActiveMQ Codepen на netm.ag/active-260.
Основен
- Забравете за JavaScript за различни изгледи. Предоставяйте на потребителите съдържание и функции на уебсайтове по начин, по който те могат да имат достъп до тях във всички изгледи. Никога не трябва да се нуждаем от JavaScript
Разширено
- Разширете метода на Gustafson, като използвате Breakup като предварително дефиниран списък с медийни заявки и автоматизира създаването на списъка с семейства шрифтове за getActiveMQ-watcher
Прогресивно подобрение
Често срещано погрешно схващане за прогресивното подобрение е, че хората си мислят „О, добре, не мога да използвам тази нова функция“, но всъщност е точно обратното. Прогресивното подобрение означава, че можете да доставяте функция, ако тя се поддържа само в един или дори без браузъри и с течение на времето хората ще получат по-добро изживяване с пристигането на нови версии.
Ако разгледате основната функция на който и да е уебсайт, можете да го предоставите като HTML и да накарате сървърната страна да извърши цялата обработка. Плащания, формуляри, харесвания, споделяне, имейли, табла - всичко това може да се направи. След като се изгради основната задача, можем да сложим страхотните технологии на всичкото отгоре, защото имаме предпазна мрежа, която да улови тези, които попаднат. Повечето усъвършенствани подходи, за които говорихме тук, се основават на прогресивно усъвършенстване.
Оформление
Гъвкавото оформление е лесно да се каже, но има много различни подходи. Създайте прости матрични решетки с по-малко маркиране, като използвате: nth-child () селектор.
/ * декларирайте първата широчина на мобилната мрежа за мрежата * / .grid-1-4 {float: left; ширина: 100%; } / * Когато прозорецът за гледане е най-малко 37,5em, тогава задайте мрежата на 50% за елемент * / @media (мин. Ширина: 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: 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 трикове за Flexbox или Flexbox Polyfill.
CSS оформление на мрежата
Решетката е по-скоро за оформление на макро ниво. Модулът Grid layout ви дава чудесен начин да опишете оформлението си във вашия CSS. Докато все още е в етап на чернова, препоръчвам тази статия за оформлението на CSS Grid от Рейчъл Андрю.
Накрая
Това са само няколко съвета за удължаване на вашата отзивчива практика. Когато се приближавате към всяка нова отзивчива работа, направете крачка назад и се уверете, че правилно разбирате основите. Започнете със съдържанието, HTML и подобрените слоеве върху тях и няма да има ограничение за това къде можете да вземете вашите дизайни.
Тази статия първоначално се появи в брой 260 от нетно списание.
