Зміст
- Чуйні зображення
- Продуктивність
- Умовне і ліниве навантаження
- Адаптивна типографіка
- Медіа-запити в JavaScript
- Прогресивне вдосконалення
- Макет
- Розмітка сітки CSS
- Нарешті
Чуйний веб-дизайн звучить неймовірно просто. Виберіть гнучкі сітки для макета, використовуйте гнучкі носії (зображення, відео, вставки) та застосовуйте медіа-запити для оновлення цих вимірювань, щоб найкраще розташувати вміст у будь-якому вікні перегляду. На практиці ми дізналися, що це насправді не так просто. Крихітні проблеми, які з’являються під час кожного проекту, змушують нас чухати голову, а іноді навіть вирізати траншеї для нігтів на партах.
З того часу, як я почав курирувати бюлетень Responsive Design Weekly, мені пощастило поспілкуватися з багатьма членами веб-спільноти та почути їх досвід. Я хотів дізнатись, що саме громада насправді хотіла дізнатись, тому розповсюдив опитування серед читачів. Ось найкращі результати:
- Чуйні зображення
- Підвищення продуктивності
- Адаптивна типографіка
- Медіа-запити в JavaScript
- Прогресивне вдосконалення
- Макет
З огляду на ці теми, я провів низку подкастів, запитуючи деяких наших лідерів галузі про їхні думки. У їхніх відповідях один пункт був одностайним: зосередьтесь на тому, щоб отримати основи безпосередньо перед тим, як почати турбуватися про захоплюючі та вдосконалені методи. Повернувшись до основ, ми можемо створити надійний інтерфейс для кожного, накладаючи функції, коли це дозволяє пристрій або контекст користувача.
„Отже ... а як щодо цих передових методик?” Я чую, як ви запитуєте. Я думаю, Стівен Хей підсумував це найкраще, коли сказав: «Кінцева техніка RWD - це почати, не використовуючи жодних передових методів RWD. Почніть із структурованого контенту та вдосконалюйте свій шлях. Додавайте точку зупинки лише тоді, коли дизайн ламається, а вміст це диктує, і ... все ».
У цій статті я почну з основ і додам рівні складності, як дозволяє ситуація, щоб вдосконалити ці передові методи. Давайте розпочнемо.
Чуйні зображення
Рідкі середовища були ключовою частиною інвалідів, коли їх вперше визначив Ітан Маркотт. ширина: 100%; , максимальна ширина: 100%; працює і сьогодні, але чуйний графічний пейзаж значно ускладнився. Зі збільшенням кількості екранів, щільності пікселів та пристроїв для підтримки ми прагнемо більшого контролю.
Три основні занепокоєння були визначені Групою спільноти реагуючих зображень (RICG):
- Кілобайт зображення, яке ми надсилаємо по дроту
- Фізичний розмір зображення, яке ми надсилаємо на пристрої з високою роздільною здатністю
- Обрізання зображення у формі художнього напрямку для певного розміру області перегляду
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 "! - Розміри інформують браузер про макет нашого сайту. Тут ми говоримо для будь-якого вікна перегляду, що має 64emes і більше, використовуйте зображення, яке займе 70% від viewport -> sizes = "(min-width: 64em) 70vw,! - Якщо область перегляду не така великий, тоді для будь-якого вікна перегляду, що становить 37,5 ем і більше, використовуйте зображення, яке займає 95% від вікна перегляду -> (мінімальна ширина: 37,5 ем) 95 ввт,! - а якщо область вікна менша за це, тоді використовуйте зображення, яке займає 100% області перегляду -> 100vw "! - завжди має текст alt. -> alt =" Кінь "/>
З точки зору продуктивності, не має значення, використовуєте ви мінімальну ширину чи максимальну ширину в атрибуті розміри, але порядок джерела має значення. Браузер завжди використовуватиме перший відповідний розмір.
Крім того, пам’ятайте, що ми жорстко кодуємо атрибут розмірів, який буде безпосередньо визначено відповідно до нашого проекту. Це може спричинити проблеми з переміщенням вперед. Наприклад, якщо ви перепроектуєте свій сайт, вам доведеться переглянути всі зображення img> або picture> s і перевизначити розміри. Якщо ви використовуєте CMS, це можна подолати як частину вашого процесу збірки.
WordPress вже має плагін, який допоможе. Він визначає srcset на стандартних різновидах зображень WP і дозволяє оголошувати розміри в центральному місці. Коли сторінка генерується з бази даних, вона замінює будь-які згадки на img> і замінює їх розміткою зображення.
Основні
- Подумайте, чи дійсно вам потрібно включити зображення. Зміст зображення є основним, чи він декоративний? Одне зображення менше означає швидший час завантаження
- Оптимізуйте зображення, які вам потрібно включити, за допомогою ImageOptim
- Встановіть заголовки термінів дії для ваших зображень на вашому сервері або у файлі .htaccess (докладніше див. У розділі «Продуктивність»)
- PictureFill надає підтримку поліфілів для фотографій
Розширений
- Ледаче завантажуйте свої зображення за допомогою плагіна jQuery Lazy Load
- Для виявлення функцій використовуйте HTMLImageElement.Sizes та HTMLPictureElement.
- Розширений плагін PictureFill WP, який можна знайти на Github, дозволить вам визначити власні значення ширини та розміру зображення
Продуктивність
Щоб отримати найбільш швидко сприйману продуктивність на наших сторінках, нам потрібні всі HTML і CSS, необхідні для відтворення верхньої частини нашої сторінки під час першої відповіді сервера. Це магічне число становить 14 кб і базується на максимальному розмірі вікна перевантажень протягом першого часу туди-назад (RTT).
Патрік Гаманн, технічний керівник відділу "Гардіан", та його команда зуміли подолати 1000-метровий бар'єр, використовуючи сумісні техніки інтерфейсу та серверної бази. Підхід Guardian полягає у забезпеченні доставлення необхідного вмісту - статті - користувачеві якомога швидше та з магічним числом 14 кб.
Давайте розглянемо процес:
- Користувач натискає посилання Google на новину
- Єдиний запит на блокування надсилається до бази даних статті. Жодних пов’язаних історій та коментарів не вимагається
- HTML завантажується, що містить критичний CSS
- в голові>
- Здійснюється процес «зрізання гірчиці» і завантажуються будь-які умовні елементи на основі функцій пристрою користувача
- Будь-який вміст, пов’язаний із самою статтею або її підтримка (пов’язані зображення статей, коментарі до статті тощо), ліниво завантажується на місце
Оптимізація такого критичного шляху візуалізації означає, що head> має 222 рядки. Однак критичний вміст, який користувач побачив, все ще потрапляє до початкового корисного навантаження 14 кб при gzipped. Саме цей процес допомагає подолати цей бар’єр рендерингу в 1000 мс.
Умовне і ліниве навантаження
Умовне завантаження покращує взаємодію користувача з функцією пристрою. Такі інструменти, як Modernizr, дозволяють протестувати ці функції, але майте на увазі, що те, що браузер каже, що пропонує підтримку, не завжди означає повну підтримку.
Один із методів - утримувати завантаження чогось, поки користувач не виявить наміру використовувати цю функцію. Це вважалося б умовним. Ви можете затримати завантаження в соціальних піктограмах, поки користувач не наведе на них курсор або не торкнеться піктограм, або ви зможете уникнути завантаження iframe Google Map у менші області перегляду, де користувач, швидше за все, віддасть перевагу посиланням на спеціальний додаток для відображення. Іншим підходом є «нарізати гірчицю» - детальніше про це дивіться в рамці вище.
Ледаче завантаження визначається як щось, що ви завжди маєте намір завантажувати на сторінку - зображення, що є частиною статті, коментарі чи інші пов’язані статті, але що не потрібно, щоб користувач почав споживати вміст.
Основні
- Увімкніть gzipping для файлів і встановіть заголовки терміну дії для всього статичного вмісту (netm.ag/expire-260)
- Використовуйте плагін Lazy Load jQuery. Це завантажує зображення під час наближення до області перегляду або через певний проміжок часу
Розширений
- Налаштуйте швидко або CloudFlare. Мережі доставки вмісту (CDN) доставляють ваш статичний вміст користувачам швидше, ніж ваш власний сервер, і мають деякі безкоштовні рівні
- Увімкніть SPDY для браузерів з підтримкою http2, щоб скористатися перевагами функцій http2, таких як паралельні http-запити
- Social Count дозволяє умовно завантажувати ваші соціальні значки
- Використання Static Maps 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 в кінець елемента body і сховайте його. Потім у CSS встановіть # getActiveMQ-watcher {font-family: break-0;} на перший медіа-запит, font-family: break-1; до другого, сімейства шрифтів: break-2; до третьої тощо.
Сценарій використовує watchResize () (netm.ag/resize-260), щоб перевірити, чи змінився розмір області перегляду, а потім зчитує активне сімейство шрифтів. Тепер ви можете використовувати це, щоб підключити вдосконалення JS, такі як додавання інтерфейсу з вкладками до dl>, коли дозволяє область перегляду, зміна поведінки лайтбокса або оновлення макета таблиці даних. Перевірте getActiveMQ Codepen за адресою 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 за мережевий журнал.
