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

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

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

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

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

Мобильная адаптация: что это

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

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

Яндекс в рекомендациях для мобильных сайтов описывает три способа:

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

Чем адаптивный дизайн отличается от «резинового» (когда блоки просто растягиваются в процентах): резиновый сайт тянется, но не перестраивается. На телефоне три колонки по 33% превращаются в три узкие полоски, где слово переносится по буквам. Адаптив в этот момент ставит колонки друг под друга.

На каких экранах проверять: контрольные ширины

Ширина экрана в вёрстке измеряется в CSS-пикселях. Это не физические пиксели матрицы: телефон с экраном высокого разрешения всё равно показывает страницу шириной около 360–430 CSS-пикселей.

Яндекс указывает, что страница должна корректно отображаться на устройствах от 320 пикселей без горизонтальной прокрутки. Это минимальная планка.

Опасная зона — промежуточные ширины. Разработчик проверил 375 и 1440, а на 1024 меню налезло на телефон в шапке, и никто не заметил. Мы сами однажды правили раскладку на 1280 и сломали 1512: третья колонка уехала вниз. С тех пор проверяем каждый раз на пяти-шести ширинах, а не на двух.

Если сайт на Тильде и собран из стандартных блоков, адаптив делается автоматически. Если в Zero Block — у редактора пять ширин, и каждую исполнитель настраивает руками. Особенности Тильды разобрали в статье мобильная версия на Тильде.

Типовые поломки адаптива и что с ними делать

Про размер кнопок есть конкретный ориентир. Стандарт доступности WCAG 2.2 требует, чтобы область нажатия была не меньше 24 на 24 CSS-пикселя или чтобы между мелкими элементами было достаточно места. Это минимум. Для главной кнопки на телефоне мы ориентируемся на высоту от 44–48 пикселей: в неё попадают пальцем с первого раза.

Отдельная история — поп-апы. На компьютере всплывающее окно занимает треть экрана, на телефоне перекрывает всё, а крестик оказывается за пределами экрана. Человек не может ни закрыть окно, ни прочитать сайт и уходит. Как настроить всплывающее окно, чтобы оно не мешало на телефоне, разобрали в статье поп-ап на Тильде.

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

Самотест адаптива за 5 минут

Для проверки не нужно быть разработчиком. Понадобится компьютер с браузером Chrome, Яндекс Браузером или Edge и ваш телефон.

1. Откройте сайт на компьютере и нажмите F12 (на Mac — Cmd + Option + I). Откроются инструменты разработчика.
2. Включите режим устройства. Нажмите на значок телефона и планшета в верхней панели инструментов или сочетание Ctrl + Shift + M (на Mac — Cmd + Shift + M). Страница отобразится в окне с настраиваемой шириной.
3. Пройдите по ширинам из таблицы выше. Впишите вручную 320, 375, 768, 1024, 1280. На каждой прокрутите страницу сверху вниз.
4. Ищите горизонтальную прокрутку. Попробуйте прокрутить страницу вбок. Если она сдвигается — что-то вылезает за край.
5. Медленно потяните край окна. Плавно меняйте ширину от узкой к широкой. Поломки на промежуточных ширинах видно сразу: что-то прыгает, налезает или исчезает.
6. Проверьте на своём телефоне. Откройте сайт, нажмите на телефон в шапке, откройте меню, отправьте тестовую заявку. С открытой клавиатурой кнопка «Отправить» должна оставаться видимой. Какие поля оставить в форме, чтобы её было удобно заполнять с телефона, — в статье форма заявки на сайте.
7. Поверните телефон горизонтально. Шапка не должна закрывать половину экрана.
8. Проверьте страницу в Яндекс Вебмастере. Инструмент «Проверка мобильных страниц» покажет, считает ли Яндекс страницу оптимизированной для мобильных устройств.

Важно: у Google был свой тест мобильной оптимизации, но в декабре 2023 года его закрыли. Если видите инструкцию, где советуют «проверить в Google Mobile-Friendly Test», она устарела.

Подробный чек-лист проверки с телефона, ошибки в форме и кнопке звонка мы собрали в статье мобильная версия сайта: как проверить за 10 минут. Здесь — техническая сторона: ширины, причины поломок и что говорить разработчику.

Почему адаптив влияет на заявки и позиции

Есть две причины.

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

Поиск. Яндекс с 2016 года учитывает оптимизацию для мобильных устройств при ранжировании мобильной выдачи — об этом он писал в блоге для вебмастеров. Проблемы с мобильной версией также показываются в разделе диагностики Вебмастера.

Условный пример: сколько стоит сломанный адаптив

Пример условный, не кейс студии. Клининговая компания в Краснодаре, бюджет на рекламу 60 000 ₽ в месяц, клик стоит 50 ₽ — около 1 200 кликов. 80% из них с телефонов, это 960 человек.

На ширине популярных телефонов кнопка формы уходила за край экрана при открытой клавиатуре. Конверсия мобильного трафика — 1%, десктопного — 3%.

Исправление — несколько часов работы верстальщика. Эффект — удвоение заявок при том же бюджете. Цифры условные, но порядок таких потерь мы видим на разборах регулярно.

Как поставить задачу разработчику

Если самотест нашёл проблемы, сформулируйте задачу так, чтобы её нельзя было понять двояко:

• Укажите ширину и устройство. «На 375 px (iPhone) в блоке «Цены» таблица шире экрана, появляется горизонтальная прокрутка».
• Приложите скриншот. В режиме устройства браузера можно сделать скриншот всей страницы через меню инструментов.
• Опишите ожидаемое поведение. «Карточки тарифов должны стоять друг под другом».
• Попросите проверить соседние ширины. Исправление на одной ширине часто ломает другую.
• Попросите проверить формы с открытой клавиатурой.

При приёмке нового сайта пройдите самотест до подписания акта. Что ещё проверить перед подписью, — в статье приёмка сайта у разработчика. Исправлять адаптив по гарантии проще, чем потом заказывать отдельную доработку.

Как адаптив делают на конструкторах и CMS

• Тильда, стандартные блоки. Адаптив встроен: блоки сами перестраиваются. Проверять всё равно нужно: длинные заголовки и крупные картинки могут вести себя неожиданно.
• Тильда, Zero Block. Каждая из пяти ширин настраивается вручную. Самый частый источник поломок на сайтах, которые к нам приносят.
• WordPress. Адаптив зависит от темы. Современные темы адаптивные, но плагины и вставки сторонних виджетов часто ломают раскладку.
• Самописный сайт. Всё зависит от разработчика. Проверяйте на всех ширинах.

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