Главная / Блог / Разработка сайтов / Адаптивная вёрстка: сайт для любого экрана

Адаптивная вёрстка: сайт для любого экрана

Посетители приходят с телефонов, планшетов, ноутбуков и широких мониторов. Объясняем, как строится адаптивный сайт, какие решения принимаются на этапе макета и как проверить результат до запуска.

Что такое адаптивная вёрстка и чем она отличается от мобильной версии

Раньше сайты делали в двух экземплярах: основной для компьютера и отдельную облегчённую версию на поддомене для телефонов. Такая схема удваивала затраты на контент и поддержку, а ещё создавала проблемы с поисковым продвижением. Сегодня стандартом считается адаптивная вёрстка: один код и один адрес, а вид страницы подстраивается под ширину экрана и возможности устройства.

Суть подхода проста. Элементы страницы не привязаны к жёстким пикселям, а описаны как гибкие блоки, которые перестраиваются при изменении ширины окна. Три колонки карточек на широком мониторе превращаются в две на планшете и в одну на телефоне. Меню из горизонтального списка сворачивается в компактную кнопку. Таблица получает горизонтальную прокрутку, а крупный заголовок слегка уменьшается.

Важно понимать, что адаптивность — это не только про размер. Телефон управляется пальцем, а не курсором, поэтому нужны крупные области нажатия. У устройства может быть высокая плотность пикселей, поэтому картинки должны оставаться чёткими. Соединение может быть медленным, поэтому вес страницы приобретает значение. Это объясняет, почему тема связана со скоростью загрузки сайта: одно без другого работает плохо.

Подход mobile first

Самый практичный способ строить адаптивные сайты — начинать с малого экрана и постепенно добавлять возможности для больших. Этот подход называют mobile first. Почему он работает лучше обратного:

На маленьком экране приходится выбирать главное. Это дисциплинирует и убирает визуальный шум, который на десктопе остался бы незамеченным.
Базовые стили проще, поэтому слабые устройства не скачивают код, нужный только для широких экранов.
Усложнять легче, чем упрощать. Добавить вторую колонку на планшете проще, чем придумывать, как втиснуть шесть колонок в телефон.
Значительная часть трафика сегодня мобильная, а для многих B2C-проектов она составляет большинство.

Но есть оговорка. Для B2B-сайтов с тяжёлыми таблицами характеристик и большими формами заказа значительная часть работы происходит на компьютерах. Здесь важно не следовать моде слепо, а посмотреть на реальную статистику устройств и выбрать приоритеты. Подробнее о нюансах корпоративных проектов — в материале про сайт для B2B-компании.

Сетка, брейкпоинты и гибкие блоки

Основа адаптивной страницы — сетка. Современные возможности CSS позволяют строить её двумя способами: через Flexbox для одномерных раскладок (строка или колонка) и через Grid для двумерных. Обычно на одном сайте используются оба.

Брейкпоинты

Брейкпоинт — значение ширины экрана, при котором раскладка меняется. Распространённая ошибка — привязывать их к конкретным моделям устройств. Моделей слишком много, и список постоянно устаревает. Правильнее ориентироваться на содержимое: сужайте окно браузера и фиксируйте момент, когда макет начинает ломаться. Именно в этой точке нужен брейкпоинт.

На практике хватает трёх-четырёх рубежей:

до 600 пикселей: телефоны, одна колонка, крупные кнопки;
600–1 000 пикселей: планшеты и небольшие окна, две колонки;
1 000–1 400 пикселей: ноутбуки, полноценная сетка;
выше 1 400 пикселей: широкие мониторы, ограничение ширины контента.

Последний пункт часто упускают. Если растянуть строку текста на весь широкий монитор, читать её невозможно: взгляд теряется при переходе на следующую строку. Оптимальная длина строки — 60–80 символов, поэтому ширину текстовой колонки ограничивают независимо от размера экрана.

Гибкие единицы измерения

Жёсткие пиксели лучше заменять относительными единицами. Размеры шрифта задают в rem, отступы между блоками — в rem или процентах, ширину колонок — в долях. Для плавного изменения заголовков удобна функция, которая подбирает размер в диапазоне между минимумом и максимумом в зависимости от ширины окна. Тогда заголовок на телефоне не занимает пять строк, а на широком экране не выглядит крошечным, и при этом не нужны десятки правил для разных брейкпоинтов.

Изображения и медиа

Картинка, которая хорошо смотрится на ноутбуке, на телефоне может оказаться и тяжёлой, и неудобной. Сразу несколько приёмов решают проблему.

Задавайте изображениям максимальную ширину по контейнеру, чтобы они не вылезали за границы.
Готовьте несколько размеров и подключайте подходящий через атрибуты адаптивных изображений, тогда телефон скачает файл в 400 пикселей, а не в 2 000.
Для разных экранов используйте разную обрезку. Широкое панорамное фото на телефоне теряет смысл, а вертикальная версия с акцентом на главном объекте работает лучше.
Встроенное видео оборачивайте в контейнер с фиксированным соотношением сторон, чтобы оно масштабировалось пропорционально.
Резервируйте место для картинок заранее, чтобы страница не прыгала при загрузке.

Отдельно стоит сказать о тексте на изображениях. Баннер с надписью, нарисованной в графическом редакторе, на телефоне превращается в нечитаемые мелкие буквы. Надписи нужно выносить в живой текст поверх фона.

Навигация, формы и таблицы на малом экране

Горизонтальное меню с шестью-семью пунктами на телефоне не помещается. Классическое решение — выдвижное меню, которое открывается кнопкой. Но у него есть недостатки: пункты спрятаны и реже используются. Если важных разделов два-три, их можно оставить на виду, а остальное убрать в меню. Контактные действия, например кнопку «Написать», стоит держать в зоне досягаемости большого пальца, внизу экрана или в закреплённой шапке.

Минимальный размер области нажатия — около 44 на 44 пикселя, а расстояние между соседними кнопками — не менее 8 пикселей. Иначе пользователи будут промахиваться и злиться.

Формы

Формы на телефоне — главный источник потерянных заявок. Рекомендации просты:

одна колонка полей, подписи над полями, а не слева;
правильные типы полей: для email открывается клавиатура с символом «собака», для телефона — цифровая, для даты — выбор из календаря;
минимум обязательных полей: имя и способ связи нередко достаточны;
крупная кнопка отправки с понятной подписью, а не просто «Отправить»;
сообщения об ошибках рядом с проблемным полем, а не в заголовке формы.

Таблицы

Широкая таблица на телефоне — классическая проблема. Варианты решения зависят от содержания. Простая таблица получает горизонтальную прокрутку с видимой подсказкой, что можно листать. Сложная трансформируется в карточки: каждая строка превращается в блок с подписями «параметр — значение». Для сравнительных таблиц с тремя колонками полезно закрепить первую колонку, чтобы пользователь не терял контекст при прокрутке.

Тип содержимого	Решение на телефоне
Таблица из двух-трёх колонок	сжать, перенести длинные слова
Таблица характеристик	карточки «параметр — значение»
Широкое сравнение	горизонтальная прокрутка и закреплённая первая колонка
Большие данные	отдельный просмотр или экспорт

Как тестировать адаптивность

Нельзя считать работу законченной, если вы лишь уменьшили окно браузера на компьютере. Эмуляция в инструментах разработчика полезна для быстрой проверки, но не заменяет реальных устройств. Минимальный набор для проверки перед запуском:

Один современный телефон на Android и один на iOS.
Один планшет в вертикальной и горизонтальной ориентации.
Ноутбук и широкий монитор.
Увеличенный размер шрифта в настройках системы: некоторые люди пользуются им постоянно, и вёрстка не должна ломаться.
Медленное соединение с имитацией ограниченной скорости.

Составьте чек-лист и включите его в приёмку, как мы описывали в статье о техническом задании на сайт. Особое внимание уделите тому, что можно сделать только на реальном устройстве: ввод в форму, прокрутка с инерцией, поведение закреплённых элементов при появлении экранной клавиатуры.

Типичные ошибки и их цена

Самые частые проблемы, которые мы встречаем на аудитах:

Отсутствие или неверный мета-тег области просмотра, из-за чего телефон показывает уменьшенную десктопную версию.
Горизонтальная прокрутка всей страницы из-за одного слишком широкого элемента.
Всплывающие окна, которые невозможно закрыть на малом экране, потому что крестик уехал за границу.
Текст мельче 16 пикселей для основного содержимого.
Ссылки и кнопки, расположенные слишком близко друг к другу.
Скрытие части контента на мобильной версии: поисковые системы оценивают именно мобильный вариант, и спрятанное считается отсутствующим. Эту тему мы затрагиваем в статье про SEO при разработке.

Каждая из этих ошибок исправляется быстро, если её нашли на этапе разработки, и стоит заметно дороже после запуска.

Итоги

Адаптивность закладывается с первого эскиза. Начинайте с малого экрана, ориентируйтесь на содержимое при выборе брейкпоинтов, используйте гибкие единицы, готовьте изображения нескольких размеров, продумывайте навигацию, формы и таблицы отдельно для телефона и проверяйте на реальных устройствах. Если вы планируете новый проект или хотите оценить существующий сайт, посмотрите нашу страницу разработки сайтов и напишите на [email protected].

Нужен датасет под вашу задачу?

Подготовим тестовую партию изображений с разметкой, чтобы вы могли проверить подход на своей модели. Напишите на [email protected] или оставьте заявку.