05 / 06
Розташування елементів, сітка
Опубліковано 16 травня 2018, останні зміни 05 червня 2018

Ширина сторінки та розмір екрану

Максимальна ширина сторінки за замовчуванням становить 1170 пікселів, але ви можете збільшити цю зону і навіть розмістити вміст по всій ширині екрану будь-якого пристрою за потреби. Мінімальний розмір екрану мобільного пристрою – 320 пікселів.

Сітка

Використовуйте сітку, щоб розміщувати елементи на сторінці через серію рядків та колонок. Сітка допомагає користувачам читати і візуально переміщатись по вмісту.

Рекомендуємо використовувати 12-колонкову адаптивну сітку. Ви можете скористатись сіткою відкритих фреймворків, таких як Bootstrap. Це дозволить значно спростити створення та налаштування шаблонів, що змінюються відповідно до розміру екрану пристрою або вікна.

Відступи

Використовуйте відступи між елементами, щоб створити візуальну ієрархію на сторінці.

Зручно робити відступи між елементами кратними 5 пікселям: 5 px, 10 px, 15 px тощо.

Переконайтесь, що вміст має достатній відступ від меж екрану. Рекомендовані значення – 15 пікселів для мобільного екрану та 30 пікселів для монітору.