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

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

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

В этой статье разберёмся, как именно сайт «понимает», на каком экране его открыли, чем адаптивность отличается от отдельной мобильной версии, что входит в работу верстальщика и как владельцу бизнеса самому проверить, всё ли сделано как надо.

Что такое адаптивная вёрстка простыми словами

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

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

Адаптивная, резиновая и мобильная версия

Эти термины часто путают, поэтому коротко о различиях.

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

Для подавляющего большинства проектов малого бизнеса — визиток, корпоративных сайтов, магазинов, лендингов — правильный выбор однозначен: один адаптивный сайт.

Как браузер понимает, какой у вас экран

Техническая основа адаптивности — медиазапросы в CSS. Это условия вида «если ширина окна меньше 768 пикселей, применяй вот эти правила». Браузер постоянно проверяет условия и переключает стили, когда ширина меняется, например при повороте телефона.

Значения ширины, на которых меняется раскладка, называются контрольными точками. Классический набор выглядит примерно так:

На практике точки подбираются не под модели устройств, а под контент. Если заголовок начинает переноситься некрасиво на ширине 900 пикселей, верстальщик добавляет правило именно там. Устройств тысячи, и подогнать сайт под каждую модель невозможно, а вот проследить, чтобы контент не ломался ни на какой ширине, — вполне реально.

Ещё одна обязательная деталь — мета-тег viewport в шапке страницы. Без него мобильный браузер считает, что перед ним старый сайт шириной около 980 пикселей, и показывает его уменьшенным. Отсутствие этой строки — одна из самых частых причин, почему «адаптивный» шаблон на телефоне выглядит как мелкая копия десктопа.

Подход «сначала мобильный»

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

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

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

Из чего складывается хорошая адаптивность

Правильно расставленные контрольные точки — только начало. Пользователь оценивает сайт не по коду, а по ощущениям. Вот что мы проверяем на каждом проекте.

Типографика

Основной текст на телефоне должен быть не меньше 16 пикселей, иначе его тяжело читать, а некоторые браузеры начинают сами увеличивать масштаб при фокусе в поле ввода. Заголовки уменьшаются плавно, а не скачком. Длина строки на десктопе ограничивается примерно 70–80 символами, чтобы глаз не терялся при переходе на следующую строку.

Кнопки и зоны нажатия

Палец намного толще курсора мыши. Минимальный рекомендуемый размер области нажатия — около 44–48 пикселей, а между соседними ссылками нужен отступ. Мелкие ссылки, стоящие вплотную друг к другу, — главный источник раздражения на мобильных сайтах.

Изображения

Фотография, рассчитанная на широкий Full HD-монитор, весит в несколько раз больше, чем нужно телефону. Хорошая вёрстка отдаёт разным экранам разные версии картинки, а для слабых соединений — современные лёгкие форматы. Кроме того, для мобильных иногда нужно другое кадрирование: широкий баннер с людьми по краям на узком экране превращается в полосу неба.

Навигация

Многоуровневое меню, которое удобно раскрывается при наведении мыши, на сенсорном экране просто не работает: наведения там нет. Поэтому мобильное меню проектируется отдельно — с раскрывающимися подпунктами, понятной кнопкой закрытия и крупными пунктами.

Формы

Для поля телефона должна открываться цифровая клавиатура, для почты — клавиатура с символом «@». Подписи полей не должны исчезать при вводе. Кнопка отправки — на всю ширину экрана, чтобы её невозможно было пропустить.

Таблицы

Широкие таблицы с ценами или характеристиками — отдельная головная боль. Их либо делают прокручиваемыми по горизонтали внутри своего блока, либо перестраивают в карточки, где каждая строка становится отдельным списком «параметр — значение».

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

Чтобы оценить работу верстальщика, не нужно разбираться в коде. Достаточно потратить полчаса на несколько простых проверок.

1. Откройте сайт на своём телефоне и пролистайте все основные страницы. Не должно быть горизонтальной прокрутки всей страницы.
2. Поверните телефон горизонтально и проверьте, что раскладка не разваливается.
3. Попросите коллег открыть сайт на своих устройствах — желательно и на iPhone, и на Android разных размеров.
4. На компьютере откройте сайт в браузере и медленно сужайте окно мышкой. Следите, нет ли момента, когда блоки налезают друг на друга или текст вылезает за границы.
5. В браузере Chrome нажмите F12 и включите режим эмуляции устройств: там можно выбрать популярные модели телефонов.
6. Заполните и отправьте каждую форму с телефона.
7. Проверьте сайт через Яндекс Вебмастер — в нём есть отчёт о проблемах отображения на мобильных.

Эмуляция в браузере удобна, но не заменяет реальные устройства. Особенно это касается старых версий Safari на iPhone: там встречаются особенности отображения, которые на компьютере не воспроизводятся. Поэтому в студии у нас лежит небольшой «зоопарк» телефонов разных лет и размеров, и финальную проверку мы делаем на них.

Типичные ошибки, которые мы встречаем

Когда к нам приходят сайты на доработку, проблемы с адаптивностью повторяются удивительно часто.

• Шрифт 12–13 пикселей на мобильных, потому что «в макете так красиво».
• Всплывающие окна, которые на телефоне закрывают весь экран и не имеют видимой кнопки закрытия.
• Фиксированная шапка, занимающая треть экрана телефона.
• Слайдер на главной весом 6–8 мегабайт, который грузится полминуты на мобильном интернете.
• Скрытые на мобильных важные блоки, например контакты или цены, — «чтобы не загромождать».
• Номер телефона в виде картинки, по которому нельзя нажать и сразу позвонить.
• Видео на фоне, которое на телефоне не воспроизводится и оставляет чёрный прямоугольник.

Большинство этих ошибок исправляется за несколько дней, но вместе они могут заметно снижать конверсию. В одном из проектов — сайте гостевого дома на побережье — простое увеличение шрифтов, кнопки бронирования на всю ширину и сжатие фотографий подняли долю заявок с телефонов почти в полтора раза за сезон.

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

Яндекс и Google давно учитывают удобство сайта на мобильных устройствах при ранжировании. Google и вовсе индексирует сайты в первую очередь по мобильной версии: если на телефоне какой-то текст скрыт или обрезан, поисковик может его просто не учесть.

Помимо прямого влияния, есть и косвенное — поведенческие факторы. Если посетитель с телефона пришёл из поиска, увидел мелкий нечитаемый текст и сразу вернулся к выдаче, поисковая система делает вывод, что страница не ответила на запрос. Со временем такие сигналы тянут позиции вниз даже при хорошем контенте.

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

Сколько стоит и сколько занимает по времени

Если сайт делается с нуля, адаптивная вёрстка закладывается в проект изначально и отдельно обычно не оплачивается — это просто нормальное качество работы. Дополнительное время уходит на мобильные макеты и тестирование, и в среднем это добавляет 15–25% к сроку вёрстки.

Сложнее, когда нужно адаптировать уже работающий старый сайт. Здесь возможны два сценария. Если исходная вёрстка аккуратная и построена на современной сетке, адаптацию можно сделать за одну-три недели, а стоимость для небольшого сайта обычно укладывается в 30–80 тысяч рублей. Если же сайт свёрстан таблицами или собран из множества разнородных плагинов, переделка выходит почти такой же по трудоёмкости, как новая вёрстка, и иногда честнее предложить редизайн.

Оценить, какой случай у вас, можно только после аудита кода. Мы обычно делаем его за один-два дня и по итогам называем реальную вилку стоимости, а не цену «от».

Итоги

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

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