- html5css.dev
- SEO
- SEO продвижение
- Юзабилити сайта
- Макет сайта
Макет сайта
Макет решает, что человек увидит в первые секунды и не уедет ли содержимое из-под пальца. Разбираем первый экран, сетку и борьбу со смещениями.
Первый экран
На мобильном это примерно два-три абзаца. Порядок приоритетов:
- Куда я попал — заголовок и одна поясняющая строка.
- Главное содержание — товар с ценой, ответ на вопрос, список.
- Целевое действие — кнопка или ссылка.
| Что часто занимает первый экран | Чем заменить |
|---|---|
| Слайдер с баннерами | Одно изображение или текстовый блок — слайдер портит LCP |
| Шапка высотой 200 px | Компактная 48–56 px, скрывается при прокрутке |
| Панель согласия на пол-экрана | Компактная полоса внизу |
| Всплывающее окно подписки | Показ после прокрутки или при уходе |
| Большое фоновое фото без текста | Заголовок и действие поверх компактной иллюстрации |
| Развёрнутый блок фильтров | Кнопка «Фильтры», открывающая панель |
Стабильность вёрстки
Смещение контента при загрузке — самая раздражающая проблема макета и одновременно самая дешёвая в исправлении. Это метрика CLS, норма — до 0,1.
| Причина | Решение |
|---|---|
| Изображение без размеров | width и height в разметке или aspect-ratio |
| Баннер подгружается в готовый макет | Зарезервировать место контейнером фиксированной высоты |
| Шрифт подменяется после загрузки | font-display: swap, подгонка метрик запасного шрифта, preload |
| Блок вставляется над контентом | Вставлять ниже или резервировать место заранее |
| Панель согласия сдвигает страницу | Фиксированная полоса поверх, не в потоке |
| Виджет чата раздвигает макет | Абсолютное позиционирование |
<!-- размеры заданы: место зарезервировано до загрузки -->
<img src="/img/photo-800.avif" width="800" height="450"
alt="Схема подключения" loading="lazy" decoding="async">width и height всем изображениям
и зарезервировать место под рекламные блоки. Обычно это чинит CLS
за один спринт и не требует серверных правок.
Сетка и точки перелома
- Относительные единицы вместо фиксированных пикселей для контейнеров.
- Точки перелома по содержанию: уменьшайте окно и меняйте раскладку там, где макет ломается.
- Ширина колонки чтения — 45–75 знаков: длиннее глаз теряет строку.
minmax(min(280px, 100%), 1fr)в сетках: иначе колонка окажется шире контейнера на узком экране.- Широкие блоки прокручиваются внутри себя: таблицы, блоки кода, галереи.
- Никакой горизонтальной прокрутки страницы — проверяется сравнением
scrollWidthиclientWidth.
// проверка горизонтального переполнения из консоли
const W = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
.filter(el => el.getBoundingClientRect().right > W + 1)
.slice(0, 10).forEach(el => console.log(el));Липкие панели
| Панель | Разумная высота | Условие |
|---|---|---|
| Шапка | 48–56 px | Скрывается при прокрутке вниз |
| Панель действий снизу | 48–56 px | Одно основное действие, максимум два |
| Обе сразу | Не более 110 px суммарно | Иначе на телефоне не остаётся содержания |
Если панели закреплены, добавьте контенту отступ снизу и задайте
scroll-padding-top, иначе якорные ссылки будут уводить
заголовок под шапку.
Итог
Макет отвечает за первые секунды: что видно сразу и не уезжает ли оно из-под пальца. Уберите с первого экрана всё, что не отвечает на «куда я попал», задайте размеры изображениям и следите, чтобы липкие панели не съели экран. Дальше — цвета и контрастность.
Частые вопросы
Что должно быть на первом экране?
Ответ на вопрос «куда я попал», главное содержание страницы и целевое действие. Слайдеры, огромные шапки и панели согласия отодвигают всё это вниз и ухудшают LCP.
Почему вёрстка «прыгает» при загрузке?
Обычно из-за изображений без заданных размеров, баннеров, подгружаемых в готовый макет, и подмены шрифта. Это метрика CLS, и чинится она разметкой, а не скриптами.
Нужна ли липкая шапка?
Полезна, если компактная: 48–56 px. Шапка в треть экрана на мобильном отнимает место у содержания. Хороший компромисс — скрывать её при прокрутке вниз и возвращать при прокрутке вверх.
Как выбирать точки перелома сетки?
По содержанию, а не по моделям устройств. Уменьшайте окно и меняйте раскладку там, где макет начинает выглядеть плохо, — это и есть нужная ширина.