9 основних принципів чуйного веб-дизайну


Чуйний дизайн   відмінне рішення проблеми коректного відображення сайту на різних екранах. Проте новачкам часто важко зрозуміти основи, навчаючись тільки за книгам/статей. З кожним днем з'являється все більше різних пристроїв, що мають різні розміри екрану, тому створення дизайну в пікселях і тільки для настільних комп'ютерів/смартфонів залишається в минулого. Саме тому зараз варто вивчити принципи чуйного дизайну   дизайну, що поєднує в собі адаптивність і гумовість (якщо ви не знайомі з адаптивним дизайном, то стаття буде хорошим вибором для початку вивчення).

Чуйний vs Адаптивний веб-дизайн
Може здатися, що це одне і  ж. Проте обидва цих виду дизайну доповнюють один одного і підходять кожен для своєї задачі.

Чуйний vs Адаптивний веб-дизайн

Потік
Коли розмір екрану зменшується, вміст сторінки починає займати більше висоти, і елементи починають зміщуватися вниз. Така поведінка називається потоком. Це може бути важкодоступним для розуміння, якщо раніше ви використовували фіксовані розміри елементів. Проте, коли ви почнете використовувати потік, ви зрозумієте принцип його роботи.

Потік елементів

Відносні одиниці виміру
Область перегляду сторінки може бути монітором, екраном мобільного або чим завгодно ще. Щільність пікселів на різних екранах також різна, тому нам потрібні гнучкі одиниці вимірювання, що працюють скрізь. Чуйний дизайн   саме той випадок, коли відносні одиниці вимірювання начебто відсотків стають дійсно корисними. З допомогою відсотків ми можемо задати ширину блоку в 50%, і на будь-якому пристрої він буде займати лише половину екрану.

Відносні одиниці виміру

Контрольні точки (Breakpoints)
Контрольні точки дозволяють змінювати розташування блоків на сторінці в у разі використання екрану з певними розмірами. Наприклад, на настільних комп'ютерах у сайту буде три колонки, а на мобільних — тільки одна. Як ви розставите контрольні точки, залежить від поведінки контенту. Якщо вміст сторінки «повзе», то визначено слід додати контрольну точку. Однак, контрольні точки слід використовувати з обережністю   можете в них заплутатися.

Контрольні точки (Breakpoints)

Max і min-значення
Контент, що займає всю ширину екрана — це здорово, якщо він відображається на мобільному. А якщо ви відкриєте сторінку через ваш телевізор? Навряд чи побачена картина обрадує вас. Тому здоровим рішенням буде використання мінімальних і максимальних значень. Наприклад, якщо задати блоку властивості `width: 100%` і `max-width: 1000px`, то він буде відображатися на весь екран, якщо ширина екрану менше 1000 пікселів; в противному випадку блок буде займати 1000 пікселів.

Max - min-значення

Вкладені об'єкти
Пам'ятайте
position: relative
? Якщо у вас буде багато елементів, що залежать від розташування інших елементів, то  буде важко контролювати. Набагато простіше і правильніше обернути ці елементи в один контейнер. До речі, це той випадок, коли статичні одиниці виміру начебто пікселів допоможуть вам. Вони корисні для вмісту, який ви не хочете адаптувати до розміру екрана   наприклад, це може бути логотип або кнопка.

Вкладені об'єкти

Desktop або mobile first
З технічної сторони немає жодних відмінностей: ви можете писати базову розмітку для мобільних, і розставляти ключові точки для десктопів (mobile first) і навпаки. Часто люди не знають, який підхід вибрати. Подумайте як слід і виберіть потрібний підхід.

Desktop або mobile first

Веб-шрифти vs системні шрифти
Хочете використовувати на своєму сайті круто вишукану гарнітуру Futura або Didot? Використовуйте веб-шрифти! Хоч вони і виглядають красиво, не варто забувати, що кожен підключений шрифт буде завантажений. Відповідно, чим більше шрифтів, тим повільніше завантажується сторінка. З іншого боку, системні шрифти завантажуються миттєво за винятком випадків, коли користувач не має локально встановленого шрифту, використовуваного на сторінці. У таких випадках браузер буде використовувати шрифт замовчуванням.

Веб-шрифти vs системні шрифти

Растрові vs векторні зображення
Має чи ваше зображення безліч дрібних деталей і вражаючих ефектів? Якщо так, то використовуйте растровий формат. У іншому випадку використовуйте векторний формат. Для растрових зображень використовуйте формати jpg, png або gif, для векторних кращим вибором будуть SVG иконочные шрифти. Кожен з форматів має свої переваги і недоліки. У будь-якому випадку, пам'ятайте про розмір зображень   одна картинка не повинна потрапити в онлайн, не будучи оптимізованої (стислій). Векторні зображення часто позбавлені зайвого розміру, однак вони не підтримуються старими браузерами. Також варто пам'ятати, що якщо векторне зображення містить багато деталей, то воно може важити більше растрового.

Растрові vs векторні зображення

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.