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

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

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

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

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

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

Эти понятия часто путают. Разберём разницу:

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

Почему это важно для бизнеса и поиска

Удобство — не единственная причина. Есть и сугубо практические:

• Поисковые системы индексируют сайты в первую очередь по мобильной версии. Если на телефоне страница неудобна или часть контента скрыта, позиции страдают и в десктопной выдаче.
• Поведенческие факторы. Когда посетитель с телефона уходит через три секунды, поисковик делает вывод, что страница не отвечает на запрос.
• Конверсия. Мобильный пользователь нетерпелив. Если форма заявки неудобна, он не будет мучиться — он позвонит тому, у кого удобно.
• Реклама. Вы платите за каждый клик. Если мобильный посетитель ничего не может сделать на сайте, деньги уходят впустую.

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

Принципы хорошей адаптивной вёрстки

Mobile first

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

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

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

Размер элементов управления

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

Читаемая типографика

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

Типичные ошибки на мобильных экранах

• Горизонтальная прокрутка: какой-то элемент (таблица, картинка, длинное слово) шире экрана, и вся страница «гуляет» вбок.
• Всплывающие окна, которые невозможно закрыть или которые появляются сразу при входе.
• Телефон указан картинкой или простым текстом, и по нему нельзя позвонить одним нажатием.
• Формы с десятком полей и неправильной клавиатурой: в поле телефона открывается буквенная раскладка.
• Слайдеры с мелкими стрелками и автопрокруткой, которая перелистывает, пока человек читает.
• Меню, которое открывается, но не закрывается, или перекрывает содержимое.
• Таблицы с ценами, в которых на телефоне видно две колонки из шести.
• Фиксированная шапка, занимающая треть экрана.

Контрольные точки и реальные устройства

Контрольные точки (breakpoints) — это значения ширины экрана, при которых макет перестраивается. Типичный набор выглядит так:

• до 480 пикселей — смартфоны в вертикальном положении;
• 480–768 — крупные смартфоны и смартфоны в горизонтальном положении;
• 768–1024 — планшеты;
• 1024–1440 — ноутбуки и небольшие мониторы;
• больше 1440 — широкие мониторы.

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

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

Таблицы, формы и меню на маленьком экране

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

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

Для первичной проверки не нужны специальные знания:

1. Откройте сайт на своём смартфоне и пройдите путь клиента: найдите услугу, цену, контакты, отправьте тестовую заявку.
2. Попросите сделать то же самое человека с другим телефоном — желательно недорогим, с маленьким экраном.
3. В браузере на компьютере откройте инструменты разработчика (клавиша F12) и включите режим эмуляции устройств. Проверьте ширину 320, 375, 414 и 768 пикселей.
4. Поверните телефон горизонтально — на некоторых сайтах в этом положении всё ломается.
5. Проверьте сайт в панелях вебмастеров поисковых систем: там есть отчёты об ошибках мобильного удобства.
6. Посмотрите в системе аналитики, различаются ли конверсия и время на сайте у мобильных и десктопных посетителей. Большой разрыв — сигнал проблемы.

Что делать, если сайт не адаптивный

Варианта три, и выбор зависит от возраста сайта и его платформы:

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

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

Итог

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

Специалисты «Гизмы» в Новосибирске проведут аудит мобильной версии, исправят ошибки вёрстки или сделают новый адаптивный сайт. Подробности — на странице создания сайтов, а для регулярных доработок подойдёт поддержка сайта.