Від автора: у цій статті автор покаже, як адаптивний дизайн може працювати на екранах будь-якого розміру, головне правильно все розпланувати. Для роботи з великими екранами знадобиться пара додаткових медіа запитів, а також ви дізнаєтеся, що в веб-шрифтів значно більше потенціалу, ніж ви думали.
Збільшення кількості екранів з ультра високою роздільною здатністю і числа пристроїв з технологією smart TV призвели до того, що користувачі все частіше заходять на сайти з воістину величезних екранів. Велика частина сайтів не оптимізована під такі розміри. Але якщо ви створюєте адаптивний сайт, то в ньому вже закладено технології масштабування, які нам знадобляться. У цій статті ми розглянемо основні складності і підходи до оптимізації веб-сайтів на великих екранах.
Як визначити екран великого розміру
Перше, що необхідно зробити, це визначитися з тим, які розміри підпадають під визначення «великі». За даними сайту W3Counter найпоширеніше дозвіл пристроїв — 1366×768 пікселів. Наступне за ним — 1920×1080. Обидва значення відносяться в першу чергу до комп’ютерних моніторів, і більшість веб-сайтів без проблем адаптуються під ці розміри.
Піднімаючись далі, таке поширене дозвіл – 2560 пікселів в ширину. Ця ширина відповідає більшості HD моніторів від 27 дюймів. Від цієї точки у більшості сайтів починаються проблеми з-за надлишку вільного простору.
Невелика вибірка популярних веб-сайтів, відкритих на екрані з роздільною здатністю 2560×1600 пікселів
Наприклад, на зображенні вище наведена вибірка з декількох популярних веб-сайтів, скріншоти були зняті з екранів з роздільною здатністю 2560×1600 пікселів. Відразу помітно, що жоден з сайтів не оптимізований під такий дозвіл: текст занадто дрібний, контент затиснутий в маленькому просторі так, що складно зосередитися. З-за великого порожнього простору навколо макета, все здається занадто дрібним. Все це впливає на чіткість і на власний досвід.
Так що ж заважає дизайнерам і розробникам оптимізувати сайти під великі екрани? Відповідь на це питання цілком залежить від команди розробників. У такого дозволу є декілька технічних проблем. Давайте розберемо ці проблеми.
Проблеми великих дисплеїв
Основна проблема оптимізації великих дисплеїв лежить в області масштабування і управління контентом. Якщо розбити проблеми на дві категорії, то основні проблеми це:
Хореографія вмісту
Хореографія – це те, як контент пропорційно адаптується до розміру екрану, забезпечуючи найкраще розташування при будь-якій ширині. Чим більше екран, тим менш пропорційним буде виглядати контент. Проблема пов’язана з кількома причинами: 1) нагромадження, яке починає відволікати увагу, 2) занадто багато порожнього простору навколо сайту робить контент занадто дрібним, 3) з-за того, що все маленьке страждає читання.
Загалом-то, принцип адаптації контенту під маленькі екрани простий: контент розставляються в одну колонку і за необхідності частково змінюється дизайн. Але для великих екранів принцип радикально відрізняється і залежить від вмісту і доступного простору. Якщо не адаптувати контент на великих екранах під надмірне вільний простір, контент буде здаватися занадто дрібним порівняно з оточенням. Але якщо заповнити порожній простір з допомогою додаткових колонок, ви ризикуєте перевантажити користувача контентом, його буде занадто багато.
Зображення
З зображеннями на великих екранах пов’язаний ряд унікальних завдань. Так як більшість великих екранів також мають велику роздільну здатність, нам доведеться створити додаткові версії всіх зображень. Крім того, нам доведеться стежити за тим, як зображення ведуть себе всередині макета. Зображення, не збільшуються з екраном, будуть залишати порожній простір між елементами, а занадто великі зображення будуть віднімати простір у інших елементів, перевантажуючи користувача. Так як ідеального рішення під всі розміри ні, ви повинні обережно підходити до зображень і виходити з потреб контенту.
Техніки оптимізації
Ми визначили проблеми, які з’являються при роботі з великими дисплеями, тепер давайте розберемо кілька способів оптимізації нашого контенту під такий масштаб.
Для демонстрації способів оптимізації я створив сайт. Враховуючи заголовок статті, я вибрав відповідну тематику – Зірку Смерті 2. Далі я буду показувати шматки коду з демо, весь код можна подивитися в демо на CodePen.
Спосіб оптимізації контенту під великі дисплеї залежить від самого контенту. Можна просто змінювати макет, отримувати переваги з великого вільного простору і відображати контент. А можна адаптивно збільшувати контент, щоб він займав пропорційне простір. Ну і можна поєднувати обидва варіанти. У нашому демо ми будемо адаптивно масштабувати контент, надаючи користувачам найкращий досвід серфінгу сайтів на великих екранах.
Планування
Перший етап оптимізації сайту під великий екран полягає в плануванні. Плануючи все наперед, ви зведете до мінімуму всі можливі сюрпризи і будете впевнені, що все буде працювати як треба. У вас не буде несподіваних проблем, які буде складно вирішити, коли розробка вже буде в самому розпалі. Якщо ви візуалізуєте макет і поведінку контенту в графічному редакторі, то створіть відповідні полотна під великі екрани і стандартні дозволи. Якщо ж ви любите створювати дизайни в браузері, тоді замалюйте свої ідеї того, як контент буде вести себе на великих екранах.
Для нашого демо я зробив замальовку макета та контенту і зрозумів, як розбити сайт на секції, а також як структурувати веб-сторінку під ці секції. Потім я накидав дизайн в Sketch, який допоміг мені визначитися зі шрифтами, кольором і пропорціями. Головне тут не вдаватися в деталі і не піклуватися про ідеально вивірених значеннях в точках – все найважливіше, інтерактивність, масштабованість і навіть розмір шрифту повинно вирішуватися вже в браузері.
Початкова замальовка і ескізи дизайну Зірки Смерті 2
Робота з відносними одиницями вимірювання
Відносні одиниці виміру, такі як відсотки, EM і REM грають першорядну роль в адаптивних сайтах, так як з їх допомогою можна закласти гнучке основу. Використовуючи відносні одиниці вимірювання, ми збережемо пропорції незалежно від розміру шрифту, вибраного користувачем. Відносні одиниці вимірювання є повною протилежністю точним значенням в пікселях, не збільшується у відповідності з налаштуваннями користувача. Це призводить до втрати пропорцій у випадку, якщо користувач захоче збільшити або зменшити розмір шрифту.
// Дозволу
$bp-small: 48em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375 em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px
// Медіа запити
$mq-small: “(min-width: #{$bp-small})”;
$mq-medium: “(min-width: #{$bp-medium})”;
$mq-large: “(min-width: #{$bp-large})”;
$mq-xlarge: “(min-width: #{$bp-xlarge})”;
$mq-xxlarge: “(min-width: #{$bp-xxlarge})”;
$mq-retina: “(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)”;
Взяти, приміром, медіа запити для нашої Зірки Смерті 2. Задавши медіа запити в одиницях виміру EM, ми зберігаємо пропорції дизайну. Якщо користувач змінить масштаб сторінки в браузері не з’явиться дратує смуга прокрутки.
Масштабування тексту
Крім медіа запитів відносні одиниці виміру допомагають при роботі з текстом. Якщо всьому тексту на сайті задати одиниці виміру EM, то можна буде глобально контролювати розмір шрифту, задавши тегу body властивість font-size. Особливо корисно при роботі з великими екранами, тому що такий спосіб дозволяє пропорційно збільшувати розмір шрифту всієї сторінки із збільшенням розміру екрана. Таким чином вирішується проблема надто дрібного тексту на екрані.
Реалізовувати цей метод ми почнемо з того, що задамо кілька змінних. З коду нижче видно, що перший крок – це визначитися з базовим значенням розміру шрифту. У нашому випадку це 1em, тобто ми використовуємо значення браузера за замовчуванням. Значення за замовчуванням можна легко редагувати у браузері, але зазвичай це 16px. Також в парі з розміром шрифту нам потрібно задати висоту рядка line-height. У коді видно, що у цієї властивості не задані одиниці вимірювання. Ми використовуємо так зване значення без одиниць вимірювання, таким чином дочірні елементи будуть розраховувати свою висоту рядка щодо їх розміру шрифту і не будуть успадковувати ці значення від батьків.
// Розмір шрифту
$base-font-size: 1em;
// Висота рядка
$base-line-height: 1.5;
$header line-height: 1.25;
Далі ми застосовуємо обидва значення до тегу body і поступово збільшуємо їх із збільшенням розміру екрана. Як я вище сказав, якщо розмір шрифту контенту був заданий у відносних одиницях EM, то буде збільшуватися весь текст на сайті.
body {
font-size: $base-font-size;
line-height: $base-line-height;
@media #{$mq-medium} {
font-size: $base-font-size*1.2;
line-height: $base-line-height*1.2;
}
@media #{$mq-large} {
font-size: $base-font-size*1.3;
}
@media #{$mq-xlarge} {
font-size: $base-font-size*1.4;
}
@media #{$mq-xxlarge} {
font-size: $base-font-size*1.6;
}
}
Так як же сильно масштабування тексту впливає на дотримання пропорцій екрана? Виявляється істотно. Погляньте на малюнок нижче. Зліва розмір шрифту не збільшується і не прив’язаний до тегу body, праворуч розмір шрифту масштабується глобально. Обидва прикладу відкриті на екрані шириною 2560 пікселів. Масштабована версія не тільки більш розбірлива, всі елементи на сторінці було пропорційно збільшено і займають тепер куди більший простір.
Скріншот з екрану шириною 2560 пікселів показує різницю між глобально немасштабирующимся текстом (ліворуч) і глобально масштабируемся (праворуч)
Обмеження масштабованості вмісту
У наборі інструментів з адаптивного веб-дизайну є кілька способів нарівні з горезвісним «контейнером», здатних стримати розростання контенту. Біля контейнерів всього одне завдання – контролювати максимально допустиму ширину, до якої контент може розширюватися. Наприклад, код нижче найбільш поширений спосіб в CSS:
.container {
margin: 0 auto;
max-width: 1024px;
}
Спосіб працює, але він не дозволяє масштабувати контент під великі екрани через строго заданої максимальної ширини. Навіть якщо достатньо збільшити max-width, це не допоможе при зміні ширини вікна браузера. Краще всього встановити лівий та правий margin за допомогою відносних одиниць і поступово збільшувати ці значення із збільшенням розміру екрана. В результаті контент буде залежати від ширини екрана і виглядати набагато краще на ультра великих екранах.
.container {
margin: 0 4%;
@media #{$mq-medium} {
margin: 0 8%;
}
@media #{$mq-large} {
margin: 0 12%;
}
@media #{$mq-xlarge} {
margin: 0 18%;
}
}
Управління зображеннями
Те, як ви будете працювати з зображеннями на великих екранах, повністю залежить від потреб вашого проекту, але вам доведеться створити відповідні версії зображень високого дозволу, щоб вони не здавалися занадто маленькими. Ми виберемо інший підхід, в залежності від призначення зображення.
.detail {
height: 0;
padding-bottom: 40%;
margin: 0 0 $base-spacing*2;
background-image: url(/Death-Star/detail_sml.jpg);
background-position: center center;
background-size: cover;
@media #{$mq-xlarge} and #{$mq-retina} {
background-image: url(/Death-Star/detail_sml%402x.jpg);
}
@media #{$mq-medium} {
background-image: url(Death-Star/detail_med.jpg);
}
@media #{$mq-medium} and #{$mq-retina} {
background-image: url(/Death-Star/detail_med%402x.jpg);
}
// ще медіа запити
}
З фоновими зображеннями все просто: прикріплюємо фонове зображення до відповідного елементу, задаємо розміри елементу і вказуємо копії зображення більш високого дозволу з допомогою медіа запитів. На зображенні вище видно, як це реалізовано в демо. Зверніть увагу, що ми поставили властивість height: 0, додали нижній паддінґ, а властивості background-size встановили значення cover. Тут використовується так звана техніка Uncle Dave’s Ol’ Padded Box, яка дозволяє нам зберігати співвідношення сторін при допомозі паддінга у відсотках на основі ширини батьківського блоку.
А для инлайновых зображень з’явилася специфікація HTML, яка дозволяє розширити тег img списком різних версій зображення для різних розмірів. Браузер сам підбирає найбільш підходяще зображення. У коді нижче показано, як це робиться. В тегу img за допомогою атрибутів srcset і sizes задаються додаткові посилання на зображення та їх розміри, що дозволяє браузеру перемикати дозвіл зображення залежно від розміру екрана і щільності пікселів, тим самим вибирається найбільш підходяще зображення.
Ви могли помітити, що ми викинули атрибут src. Це тому, що для підтримки srcset і sizes в браузерах, які поки не можуть працювати з даними атрибутами, ми повинні були підключити полифил. У полифиле прописано, якщо браузер не підтримує нові атрибути, то буде використаний старий src, тобто двічі вказувати його немає сенсу. Щоб у нас випадково не було двох атрибутів src, автор полифила рекомендує не вказувати даний атрибут і використовувати тільки srcset.
Висновок
Наш обов’язок забезпечити користувачам найкращий досвід на різних екранах. При оптимізації контенту під великі дозволу ми не повинні обмежуватися лише поширеними дозволами. При належному плануванні ми можемо задіяти вже наявні в адаптивному дизайні веб-сайту інструменти для адаптації контенту під великі екрани.
