Сайт плохо выглядит на телефоне: 12 ошибок мобильной вёрстки
Мобильную версию сайта можно проверить за 15 минут на собственном телефоне по 12 пунктам: текст читается без увеличения, кнопки не слишком маленькие и не стоят вплотную, нет горизонтальной прокрутки, первый экран показывает предложение и кнопку, всплывающие окна закрываются, форма не уходит под клавиатуру, картинки не грузятся по 10 секунд. Если хотя бы три пункта не проходят, сайт теряет заметную часть заявок с телефонов — а это обычно больше половины всех посетителей коммерческих сайтов.
Как проверять
Возьмите свой телефон и, если возможно, ещё один — с маленьким экраном или постарше. Откройте сайт через мобильный интернет, а не Wi-Fi. Пройдите главный сценарий: найти услугу или товар, узнать цену, оставить заявку. Отмечайте всё, что мешает.
12 частых ошибок
| № | Ошибка | Как проверить | Как исправить |
|---|---|---|---|
| 1 | Мелкий текст | Читается ли без увеличения | Основной текст от 16 px |
| 2 | Маленькие кнопки и ссылки | Попадаете ли с первого раза | Область нажатия около 44–48 px |
| 3 | Кнопки вплотную | Нажимаете соседнюю | Отступы между элементами |
| 4 | Горизонтальная прокрутка | Страница ездит вбок | Найти широкий элемент: таблица, картинка, длинное слово |
| 5 | Первый экран без смысла | Видно ли, что вы предлагаете | Заголовок, предложение и кнопка на первом экране |
| 6 | Всплывающее окно не закрывается | Есть ли видимый крестик | Крупный крестик, закрытие по тапу вне окна |
| 7 | Форма под клавиатурой | Видно ли поле при вводе | Прокрутка к полю, форма не в фиксированном блоке |
| 8 | Тяжёлые картинки | Сколько грузится первый экран | WebP или AVIF, размеры под экран |
| 9 | Таблицы не помещаются | Читается ли прайс | Прокрутка внутри таблицы или карточки |
| 10 | Телефон не кликабелен | Нажимается ли номер | Ссылка tel: |
| 11 | Меню перекрывает контент | Закрывается ли меню | Понятная кнопка закрытия |
| 12 | Фиксированные панели занимают пол-экрана | Сколько места остаётся для текста | Уменьшить шапку при прокрутке |
Технические основы
Метатег viewport. Без него телефон показывает уменьшенную компьютерную версию. Правильный вариант описан в документации MDN. Не запрещайте пользователю увеличивать страницу — это мешает слабовидящим.
Размер области нажатия. Рекомендации по доступности описывают минимальные размеры целей для нажатия (WCAG, размер цели). На практике кнопки делают не меньше 44–48 пикселей по высоте.
Адаптивные картинки. Телефон не должен скачивать картинку шириной 2 500 пикселей, чтобы показать её в 400. Используйте разные размеры под экраны и современные форматы.
Высота экрана. На телефонах панель браузера появляется и прячется, из-за чего блоки «на весь экран» прыгают. Современные единицы высоты экрана решают эту проблему.
Что важнее всего для заявок
- Первый экран: понятно, что вы делаете, и есть кнопка действия.
- Телефон и мессенджер нажимаются в одно касание.
- Форма короткая, удобная, не уходит под клавиатуру.
- Цена видна без долгой прокрутки.
- Страница открывается быстро на мобильном интернете.
Если исправить только эти пять пунктов, большинство сайтов заметно прибавляет в мобильных заявках.
Проверьте и горизонтальную ориентацию: часть людей поворачивает телефон, чтобы посмотреть фото или таблицу цен, и в этом положении фиксированная шапка может занять половину высоты экрана.
Как найти проблемы по данным
- В Метрике сравните конверсию мобильных и компьютеров. Если на мобильных она в 2–3 раза ниже, мобильная версия теряет заявки.
- В Вебвизоре посмотрите записи мобильных визитов: где люди останавливаются, что пытаются нажать.
- Карта кликов покажет нажатия на некликабельные элементы — люди ждут, что это ссылка.
- Отчёт о скорости в Search Console и PageSpeed Insights покажет мобильные проблемы скорости.
Всплывающие окна на телефоне
Окно с подпиской, скидкой или чатом, которое появляется через несколько секунд и закрывает весь экран, на телефоне раздражает сильнее, чем на компьютере. Поисковики тоже не любят навязчивые перекрытия контента на мобильных. Если всплывающее окно нужно, показывайте его не сразу, а после прокрутки или при попытке уйти, делайте крестик крупным и не перекрывайте основной текст. Кнопку чата держите небольшой и в углу, чтобы она не закрывала кнопку заявки или корзины. Баннер согласия на cookie тоже должен занимать минимум места и не мешать кнопкам.
Сколько стоит исправить
| Объём | Срок | Ориентир |
|---|---|---|
| Исправить 3–5 ошибок из списка | 1–2 дня | 10–25 тыс. ₽ |
| Полная доработка мобильной версии сайта на 10–20 страниц | 3–7 дней | 30–80 тыс. ₽ |
| Мобильная версия сделана плохо по всему сайту | Иногда дешевле редизайн | от 99 тыс. ₽ |
Чек-лист для приёмки нового сайта
Включите в приёмку проверку на трёх устройствах: iPhone, Android среднего уровня и маленький экран шириной около 360 пикселей. Пройдите по 12 пунктам из таблицы и главному сценарию. Так мобильные ошибки находятся до запуска, а не через месяц по просевшим заявкам. Проблемы, характерные именно для iPhone, разобраны в отдельной статье о сайте в Safari.
Материалы для проверки
Если нужна реализация
Состав работ зависит от текущего проекта и подтверждённой причины. Можно обсудить диагностику или разработку подходящего решения.
Вопросы и ответы
Какой размер шрифта нужен для мобильной версии?
Основной текст — от 16 пикселей. Меньше читается с трудом, а в полях ввода на iPhone вызывает автоматическое увеличение страницы.
Нужна ли отдельная мобильная версия на поддомене?
Обычно нет. Адаптивная вёрстка, которая подстраивается под экран, проще в поддержке и лучше для SEO.
Почему страница ездит вбок на телефоне?
Какой-то элемент шире экрана: таблица, картинка, длинная ссылка, блок с фиксированной шириной. Его нужно найти и ограничить по ширине.
Можно ли убрать на телефоне часть контента?
Лучше не убирать важное: цены, условия, ответы. Можно свернуть второстепенные блоки, но поисковики индексируют мобильную версию.
Сколько стоит доработать мобильную версию?
Исправление нескольких ошибок — 10–25 тысяч рублей. Полная доработка сайта на 10–20 страниц — 30–80 тысяч.
Как часто проверять мобильную версию?
После каждого изменения дизайна или нового блока и раз в квартал по чек-листу. Мобильная версия часто ломается при добавлении контента.