Ещё недавно сайт проектировали под экран настольного компьютера, а мобильная версия считалась приятным дополнением. Сейчас картина обратная: для многих компаний большая часть посетителей приходит со смартфонов, причём из самых разных ситуаций — в транспорте, в очереди, на диване перед телевизором. Если сайт на маленьком экране приходится увеличивать пальцами и искать нужную кнопку, человек просто закроет вкладку и перейдёт к конкуренту.
Адаптивная вёрстка решает эту задачу: один сайт, один набор страниц, но интерфейс перестраивается в зависимости от размера и возможностей устройства. Это не «ещё одна версия» для телефона, а единый подход к построению страниц, при котором макет гибко реагирует на ширину окна, плотность экрана, способ управления.
В статье разберём, как это работает технически и на уровне дизайна, какие решения принимаются на каждом этапе, как проверять результат и какие ошибки встречаются чаще всего. Материал будет полезен заказчикам, которые хотят понимать, за что платят и как принимать работу.
Что такое адаптивность и чем она отличается от мобильной версии
Раньше было принято делать отдельный сайт для телефонов на отдельном адресе. Такой подход требовал поддерживать две копии контента, мешал поисковому продвижению и создавал путаницу при переходе по ссылкам. Адаптивный подход заменил его: адрес один, содержимое одно, а внешний вид подстраивается.
Выделяют несколько родственных понятий:
- Адаптивный дизайн — общий принцип: интерфейс подстраивается под устройство.
- Резиновая (гибкая) вёрстка — элементы масштабируются плавно вместе с шириной окна, пропорционально.
- Адаптивные точки перелома — на заданной ширине макет перестраивается скачком: колонки складываются, меню превращается в кнопку.
- Мобильная версия — отдельная реализация, сейчас используется редко.
На практике хорошие сайты сочетают резиновую вёрстку внутри диапазонов с перестройкой на ключевых точках. Подход, при котором проектирование начинается с маленького экрана, называют mobile first. Мы подробно разобрали его в статье «Mobile first: проектирование начиная со смартфона».
Почему адаптивность важна для бизнеса
Разговор об адаптивности нельзя сводить к удобству, это вопрос денег.
- Охват. Если сайт неудобен на смартфоне, вы теряете значительную часть аудитории, которая никогда не станет клиентом.
- Конверсия. Мелкие кнопки, неудобные формы и горизонтальная прокрутка снижают число заявок и покупок. См. также материал «Конверсия сайта: как её считать и повышать».
- Поисковые системы. Удобство на мобильных устройствах учитывается при ранжировании, а поведение пользователей влияет на позиции — об этом в статье «Поведенческие факторы: как дизайн влияет на позиции».
- Одна система вместо нескольких. Единая кодовая база проще в поддержке и дешевле в развитии.
- Рекламные кампании. Платный трафик в значительной доле идёт с телефонов; если посадочная страница неудобна, бюджет сгорает впустую. Подробнее в статье «Посадочная страница под рекламу: требования и структура».
Основные технические принципы
Не обязательно разбираться в коде, но понимание основ помогает формулировать требования и проверять работу.
Метатег viewport
Это крошечная строка в заголовке страницы, которая сообщает мобильному браузеру, что страницу нужно показывать в реальную ширину экрана, а не масштабировать как настольную. Без неё даже идеальная вёрстка отобразится уменьшенной копией большого сайта. Проверить наличие просто: если на смартфоне страница выглядит как микроскопическая версия десктопа — ищите причину здесь.
Гибкая сетка
Вместо жёстких значений в пикселях используются относительные: проценты, доли доступного пространства, современные средства вроде гибких и сеточных контейнеров. Колонки получают не фиксированную, а пропорциональную ширину, и на узком экране автоматически перестраиваются. Принципы организации сетки подробно разобраны в материале «Сетка в веб-дизайне: модульные системы на практике».
Точки перелома (брейкпоинты)
Это значения ширины, при которых макет меняет структуру. Типичный набор: узкий телефон, обычный телефон, планшет, ноутбук, широкий монитор. Однако опытные разработчики привязывают точки не к моделям устройств, а к самому контенту: если на определённой ширине строка становится слишком длинной или карточки слишком тесными — пора менять компоновку. Устройств слишком много, чтобы подгонять под каждое.
Гибкие изображения и медиа
Картинка не должна выходить за границы контейнера. Кроме того, мобильным устройствам незачем загружать огромные файлы, рассчитанные на большие экраны. Современные приёмы позволяют отдавать разные версии изображения в зависимости от ширины и плотности экрана. Это напрямую влияет на скорость; подробнее — в статье «Оптимизация изображений для скорости и поиска».
Относительные единицы и типографика
Размер шрифта, отступы и интервалы тоже должны масштабироваться. Современные технологии позволяют задавать плавное изменение размера текста между минимальным и максимальным значением. Базовый шрифт для мобильных обычно не меньше шестнадцати пикселей, иначе браузер может самопроизвольно увеличивать масштаб при вводе в поле. О влиянии шрифтов на восприятие — в статье «Типографика на сайте: как шрифты влияют на доверие».
Как перестраиваются типичные элементы
Меню и навигация
На широком экране горизонтальное меню помещается целиком, на телефоне оно превращается в компактную кнопку, открывающую список. Важно не спрятать главное: ключевые действия — позвонить, написать, оформить заказ — должны остаться на виду. Ошибки в навигации разобраны в статье «Навигация по сайту: ошибки, из-за которых уходят клиенты».
Колонки и сетки карточек
Четыре колонки на большом мониторе становятся двумя на планшете и одной на телефоне. При этом порядок блоков должен оставаться логичным: заголовок, затем главное, затем второстепенное. Подробности — в материале «Дизайн карточек услуг и товаров».
Таблицы
Самый капризный элемент. Широкая таблица на телефоне не помещается. Варианты: горизонтальная прокрутка внутри блока, превращение строк в карточки, скрытие второстепенных столбцов. Выбор зависит от содержания: для тарифов лучше карточки, для сравнения параметров — прокрутка с закреплённым первым столбцом.
Формы
На телефоне поля занимают всю ширину, подписи расположены над полями, а для каждого типа данных вызывается подходящая клавиатура: цифровая для телефона, с символом почты для адреса. Минимум полей — максимум заявок. Подробнее в статье «Формы обратной связи: как сделать их удобными».
Изображения и видео
Сохраняют пропорции и не растягиваются. Фоновые видео на мобильных лучше заменять статичным кадром: они нагружают сеть и батарею. Декоративные картинки, не несущие смысла, на малых экранах можно убирать.
Первый экран
На телефоне на первый экран помещается гораздо меньше, поэтому его содержание нужно пересобирать, а не просто сжимать: короткий заголовок, одно предложение, одна заметная кнопка. Как удерживать внимание, описано в статье «Первый экран сайта: как удержать посетителя за три секунды».
Тач-интерфейс: пальцы — не курсор
Адаптивность — это не только размеры, но и способ управления. Мышь точна, палец — нет. Правила для сенсорных экранов:
- Размер целей. Кнопки и ссылки должны быть достаточно крупными, чтобы в них попал палец: ориентир — около сорока пикселей по меньшей стороне.
- Расстояние между элементами. Соседние кнопки не должны «слипаться», иначе будут случайные нажатия.
- Отсутствие зависимости от наведения. На телефоне нет курсора, и подсказки, меню и действия, появляющиеся при наведении, просто не работают. Всё важное должно быть доступно нажатием.
- Жесты. Свайпы и прокрутка должны быть привычными; не стоит перехватывать стандартные жесты браузера.
- Зона большого пальца. Главные действия лучше размещать в нижней части экрана, до которой легко дотянуться одной рукой.
Подробнее про оформление кнопок — в статье «Кнопки и призывы к действию».
Адаптивный дизайн начинается в макете
Распространённое заблуждение: дизайнер рисует макет для компьютера, а верстальщик «как-нибудь» адаптирует его для телефона. Так получаются компромиссные решения, где мобильная версия выглядит как неудачная усадка десктопной. Правильный процесс иной.
- Сначала контент и приоритеты. Определяется, что самое важное для пользователя, и в каком порядке оно должно появляться на самом узком экране.
- Макеты для ключевых ширин. Дизайнер прорисовывает минимум мобильный и настольный варианты, а для сложных страниц — и промежуточный.
- Библиотека компонентов. Элементы проектируются с учётом поведения на разных размерах, как описано в статье «Дизайн-система: зачем она нужна даже небольшой компании».
- Реальный контент. Длинные заголовки, большие числа, переносы — всё проверяется на настоящих текстах.
- Передача в разработку с описанием поведения. Как перестраивается блок, что скрывается, что остаётся.
Об этом этапе проектирования читайте также в статьях про wireframe и про прототипирование. Особенно важно показать заказчику именно мобильные макеты, а не только красивую десктопную картинку.
Производительность на мобильных устройствах
Адаптивность без скорости — пустая обёртка. Смартфон слабее компьютера, а мобильная сеть нестабильна. Что нужно сделать:
- отдавать изображения подходящего размера и в современных форматах;
- загружать скрипты только там, где они нужны, и откладывать неважные;
- отказаться от тяжёлых библиотек ради пары эффектов;
- использовать ленивую загрузку для содержимого ниже первого экрана;
- ограничивать число шрифтов и их начертаний;
- минимизировать анимации, нагружающие процессор.
Подробнее об этом — в статье «Скорость загрузки сайта: почему важна каждая секунда».
Как проверять адаптивность
Недостаточно сжать окно браузера на компьютере и убедиться, что колонки сложились. Полноценная проверка включает несколько шагов.
Эмуляция в браузере
Режим разработчика позволяет быстро просмотреть сайт в разных размерах и имитировать касания. Это удобно для первичной проверки, но не заменяет реальные устройства.
Реальные устройства
Протестируйте минимум на одном телефоне на каждой из основных систем, на планшете и на ноутбуке. Реальные устройства показывают то, что эмулятор скрывает: неудобство касаний, особенности клавиатуры, скорость на слабой сети, нюансы браузеров. Тестирование перед запуском — важный этап, который описан в материале «Как проходит тестирование сайта перед запуском».
Чек-лист приёмки
- Нет горизонтальной прокрутки ни на одной странице.
- Текст читается без увеличения, строки не слишком длинные и не слишком короткие.
- Кнопки и ссылки достаточно крупные и не слипаются.
- Меню открывается и закрывается, ключевые действия видны.
- Формы удобно заполнять, вызывается нужная клавиатура.
- Изображения не искажаются и не вылезают за границы.
- Таблицы читаемы.
- Страницы открываются быстро при медленном соединении.
- Альбомная и портретная ориентация работают одинаково хорошо.
- Всплывающие окна и баннеры не закрывают контент и закрываются без усилий.
Типичные ошибки адаптивной вёрстки
Десктопная версия, «ужатая» до телефона
Классика: элементы просто уменьшены, текст мелкий, кнопки крошечные. Проблема в том, что дизайн не пересобирали под малый экран.
Скрытие важного контента на мобильных
Иногда часть информации прячут, чтобы упростить страницу. Но если пользователь не видит цену, условия или контакты, он не купит. Поисковые системы же индексируют мобильную версию как основную, и скрытый контент может потерять вес.
Мелкий текст и низкий контраст
На солнце, в транспорте, при усталых глазах мелкий серый текст становится нечитаемым. Подробнее — в статье «Контраст и читаемость: дизайн, удобный для всех».
Фиксированные элементы, занимающие половину экрана
Закреплённые шапки, баннеры cookie, плавающие чаты на телефоне могут перекрывать большую часть области просмотра. Контролируйте их размеры и поведение.
Всплывающие окна без возможности закрыть
Крестик в углу размером с точку — прямой путь к раздражению и уходу. Закрывающий элемент должен быть крупным и очевидным.
Забытые промежуточные размеры
Сайт проверили на телефоне и на большом мониторе, а планшет или небольшой ноутбук оказались забыты. Именно в промежуточных значениях чаще всего ломаются компоновки.
Тяжёлые страницы
Автоматическое уменьшение больших картинок средствами браузера создаёт иллюзию адаптивности, но не экономит трафик. Пользователь всё равно качает огромный файл.
Пренебрежение доступностью
Запрет масштабирования, мелкие элементы, зависимость от цвета — всё это делает сайт неудобным для людей с особенностями зрения и моторики. Основные принципы собраны в статье «Доступность сайта для людей с ограниченными возможностями».
Адаптивность в интернет-магазинах
Для магазинов мобильная версия — вопрос выручки. Покупатель листает каталог с телефона, сравнивает, кладёт в корзину, а нередко завершает покупку позже с компьютера. Особые требования:
- фильтры в виде выдвижной панели, а не длинного списка над товарами;
- крупные фото с возможностью увеличения жестом;
- закреплённая кнопка покупки в карточке товара;
- короткое оформление заказа с автозаполнением и удобными способами оплаты.
Эти темы разобраны в статьях «Мобильная версия интернет-магазина: главные правила» и «Корзина и оформление заказа без потерь».
Что просить у подрядчика
Чтобы адаптивность не осталась лозунгом, закрепите в договоре и техническом задании конкретные требования.
- перечень поддерживаемых размеров экранов и браузеров;
- наличие мобильных макетов для согласования;
- проверка на реальных устройствах и отчёт о ней;
- требования к скорости на мобильных;
- критерии приёмки по чек-листу выше.
Как правильно сформулировать такие требования, читайте в статье «Техническое задание на сайт: структура и типичные ошибки». Мы в студии Mevero делаем адаптивность частью каждого проекта по умолчанию: макеты для разных экранов согласуются с заказчиком до начала вёрстки, а тестирование проходит на реальных устройствах. Как строится процесс, можно посмотреть на странице этапов работы.
Итоги
Адаптивная вёрстка — это единый сайт, который перестраивается под любое устройство: от узкого смартфона до широкого монитора. Он опирается на гибкие сетки, понятные точки перелома, изображения подходящего размера, удобные для пальцев элементы управления и быструю загрузку. Начинается она не с кода, а с проектирования: приоритетов контента, мобильных макетов и реальных текстов.
Проверяйте сайт на настоящих устройствах, держите в голове чек-лист приёмки, избегайте «ужатых» десктопных версий и требуйте от подрядчика конкретных критериев. Если хотите, чтобы ваш сайт одинаково хорошо работал для каждого посетителя, расскажите о проекте через страницу контактов — мы подскажем, как лучше организовать адаптацию под вашу аудиторию.
