Слово «макет» в вебе означает две разные вещи: картинку из графического редактора и схему, по которой блоки страницы ведут себя при изменении ширины экрана. Здесь речь про второе. От выбранной схемы зависит трудоёмкость вёрстки, поведение сайта на планшете и объём переделок, когда через год появится новый раздел. Разберём пять подходов, которые встречаются в работе, и объясним, в каких случаях берём каждый.
Почему тип макета выбирают до отрисовки дизайна
Мы просим дизайнера определиться со схемой поведения ещё на этапе прототипа. Причина простая: одна и та же красивая страница может быть сверстана и за день, и за неделю — разница в том, сколько состояний у неё описано. Если в дизайне есть только десктопный экран шириной 1440 пикселей, верстальщик вынужден додумывать, что произойдёт с таблицей на 360 пикселях, куда денется боковое меню и как перенесётся длинное название товара. Додуманное потом переделывают.
Поэтому в наших проектах вместе с дизайном приходит описание: какая сетка, сколько контрольных точек, что делает каждый блок между ними. Это дешевле любых правок после сдачи.
Пять схем вёрстки и чем они отличаются
Схем всего пять, и различаются они одним: как ширина блоков связана с шириной окна. Ниже разбираем каждую и говорим, где она уместна сегодня.
Фиксированный макет
Ширина контейнера задана в пикселях и не меняется. На широком мониторе по краям остаются поля, на узком экране появляется горизонтальная прокрутка. Схема простая в реализации и предсказуемая: что нарисовано, то и увидит пользователь.
Сегодня как основа для сайта такой макет почти не применяется — доля мобильного трафика этого не позволяет. Но он живёт внутри других схем: фиксированную ширину имеет смысл давать отдельным элементам, где растягивание вредит. Это письма рассылок, печатные версии страниц, узкие колонки текста, схемы и чертежи, служебные экраны админок, которыми пользуются только с рабочего компьютера.
Резиновый макет
Ширина блоков задаётся в процентах от окна браузера, содержимое тянется и сжимается непрерывно. Схема была первым шагом от жёстких пикселей и до сих пор хорошо работает там, где контент однородный: галерея, лента карточек, простая посадочная страница.
Слабое место — крайние значения. Без ограничений строка текста на широком мониторе растягивается до 200 символов и становится нечитаемой, а на узком экране трёхколоночная сетка превращается в три полоски. Лечится это парой правил: минимальная и максимальная ширина контейнера плюс ограничение длины строки. Мы закладываем их сразу, иначе замечания приходят от заказчика в первый же день после демонстрации.
Адаптивный макет
Для нескольких диапазонов ширины готовятся отдельные раскладки, переключение происходит по контрольным точкам. Внутри диапазона размеры фиксированные, на границе компоновка меняется скачком.
Схема удобна, когда мобильная и десктопная версии отличаются не размерами, а составом: на телефоне убирается вторая колонка, фильтр прячется в отдельный экран, таблица заменяется списком карточек. Мы берём этот подход для каталогов, личных кабинетов и разделов с большими таблицами — там переставить блоки честнее, чем пытаться уместить всё через масштабирование.
Плата за удобство — количество состояний. Каждая контрольная точка это отдельный экран, который надо нарисовать, сверстать и проверить. Четыре точки уже требуют дисциплины, шесть обычно означают, что структуру стоит упростить.
Отзывчивый макет
Комбинация двух предыдущих: внутри диапазона блоки тянутся, на контрольных точках компоновка перестраивается. Современная вёрстка добавляет к этому инструменты, которые снимают часть точек вовсе: сетка с автоматическим числом колонок, функции подбора размера в заданных пределах, запросы к размеру контейнера, а не окна. Последнее особенно помогает компонентам, которые встречаются и в узкой колонке, и во всю ширину — карточка сама решает, как ей выглядеть, независимо от экрана.
Это схема по умолчанию для большинства проектов: корпоративный сайт, магазин, блог, посадочная страница. Отдельно оговорим, что отзывчивость не отменяет проверки на реальных устройствах — эмулятор в браузере не показывает поведение экранной клавиатуры, вырезов под камеру и панели браузера, которая прячется при прокрутке.
Подход mobile first
Это не тип макета, а порядок работы: сначала проектируется узкий экран, потом добавляются широкие. Ограничение по ширине заставляет отобрать главное — на 360 пикселях невозможно поставить рядом баннер, форму и три блока преимуществ, приходится решать, что важнее.
Мы применяем этот порядок, когда по аналитике больше половины визитов приходит с телефонов, а это большинство сайтов услуг и розничной торговли. Обратный порядок оставляем для систем, где основная работа идёт с компьютера: панели управления, отчётность, рабочие места операторов.
Сравнение схем
| Схема | Поведение при изменении ширины | Где уместна | На что смотреть |
|---|---|---|---|
| Фиксированная | Не меняется, появляется прокрутка | Письма, печать, схемы, служебные экраны | Непригодна как основа сайта |
| Резиновая | Тянется непрерывно | Галереи, ленты карточек, простые страницы | Нужны ограничения ширины и длины строки |
| Адаптивная | Перестраивается скачками | Каталоги, кабинеты, таблицы | Каждая точка — отдельный экран в работу |
| Отзывчивая | Тянется и перестраивается | Большинство сайтов | Проверка на реальных устройствах |
| Mobile first | Порядок проектирования | Сайты с преобладанием мобильного трафика | Требует отбора содержимого |
Ошибки, которые встречаем чаще всего
- Дизайн нарисован в одной ширине, поведение остальных отдано верстальщику. Итог — правки после сдачи и спор о том, кто это придумал.
- Контрольные точки подобраны под модели телефонов. Модели меняются, содержимое нет: точки ставим там, где ломается сетка, а не там, где вышел новый смартфон.
- Меню на мобильном прячется целиком, включая кнопку заявки и телефон. Целевое действие должно оставаться видимым.
- Таблицу с восемью колонками просто сжимают. Читать её нельзя; либо горизонтальная прокрутка внутри таблицы, либо перестроение в карточки.
- Не заданы крайние состояния: пустой список, длинное название в две строки, товар без картинки. Вёрстка разъезжается именно на них.
- Проверка идёт только на новом телефоне разработчика. Мы смотрим ещё и на слабых устройствах и при увеличенном системном шрифте.
Что проверяем перед приёмкой вёрстки
- Нет горизонтальной прокрутки ни на одной ширине от 320 пикселей и выше.
- Длинные заголовки, длинные названия и длинные адреса почты не выходят за границы блоков.
- Кнопки и ссылки на мобильном достаточного размера, между ними есть промежуток.
- Формы работают с экранной клавиатурой, поле не перекрывается ей при вводе.
- Страница читается при увеличении масштаба до 200 процентов.
- Изображения отдаются под размер экрана, а не одним тяжёлым файлом на все случаи.
Схему макета выбирают на этапе проектирования, до отрисовки, — это первый шаг работы по проектированию интерфейсов.
Что изменилось в вёрстке макетов за последние годы
Деление на фиксированный, резиновый и адаптивный макеты появилось тогда, когда единственным инструментом подстройки были медиазапросы по ширине экрана. Сегодня набор средств другой, и часть старых приёмов уже не нужна.
- Сетка задаётся не колонками, а правилом. Запись вида
repeat(auto-fit, minmax(280px, 1fr))раскладывает карточки сама: на широком экране в четыре колонки, на телефоне в одну. Отдельные медиазапросы под каждую ширину для таких блоков больше не пишут. - Размеры считаются диапазоном. Функция
clamp()задаёт минимальный, желаемый и максимальный размер одной строкой, поэтому заголовок плавно меняет кегль вместе с шириной, а не прыгает на контрольных точках. - Блок подстраивается под контейнер, а не под экран. Контейнерные запросы решают старую проблему: одна и та же карточка в узкой колонке и во всю ширину должна выглядеть по-разному, хотя экран не менялся.
- Тёмная тема — часть макета. Если о ней не подумали на этапе схемы, потом приходится переписывать цвета по всему проекту.
- Сдвиг вёрстки стал измеримым. Показатель CLS в отчётах о скорости прямо наказывает за макет, который «прыгает» при загрузке: картинкам нужны заданные пропорции, блокам — заранее известная высота.
Практический вывод: выбирать между «резиновым» и «адаптивным» как между двумя взаимоисключающими схемами уже не приходится. Сегодня почти любой коммерческий сайт — отзывчивый макет, у которого крупные перестройки описаны контрольными точками, а мелкая подстройка происходит сама.
Как тип макета связан с удобством, а не только с шириной
Схема вёрстки задаёт рамку, внутри которой живёт интерфейс. Растянутый на широкий монитор текст в одну колонну на 1800 пикселей формально «резиновый», но читать его невозможно: глаз теряет строку. Фиксированный макет на 960 пикселей формально предсказуем, но на современном мониторе выглядит полосой посередине.
Поэтому к схеме макета всегда идут два ограничения: комфортная длина строки — примерно 60–80 символов — и понятная иерархия блоков. Первое решается максимальной шириной текстовой колонки, второе относится уже к проектированию: о нём мы подробно писали в материале как сделать интерфейс понятным. Особенности мобильных экранов разобраны отдельно — в статье мобильный UX: как сделать сайт удобным для смартфонов.
Если макет уже свёрстан, а вопросы к удобству остались, схему проверяют не на глаз, а замером: что нажимают, где останавливаются, откуда уходят. Это задача юзабилити-аудита сайта. Когда проект только проектируется, порядок обратный: сначала структура экранов и сценарии — проектирование интерфейсов, и только потом отрисовка макета.
Как выбрать под свою задачу
Короткое правило: если содержимое однородное и его немного, хватит резиновой схемы с ограничениями. Если на разных экранах меняется состав блоков, нужна адаптивная. В остальных случаях берём отзывчивую и начинаем с узкого экрана. Ответ на вопрос даёт не мода, а аналитика посещений и структура содержимого: посмотрите, с каких устройств приходят ваши посетители и что они делают на сайте.
Если планируете новый сайт и хотите, чтобы схема поведения была продумана до вёрстки, а не после, мы разработаем сайт под ваши задачи. На этапе прототипа опишем сетку и контрольные точки, а после сдачи передадим документацию по компонентам.
