Частые ошибки мобильной версии сайта

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

Ошибки 1–3. Текст, кнопки и прокрутка

Первые три ошибки связаны с базовой вёрсткой: их видно сразу, как только берёшь сайт в руки на телефоне.

Ошибка 1. Мелкий текст и неудачный контраст

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

Как исправить:

• основной текст — не меньше 16 px, межстрочный интервал около 1,5;
• длина строки — примерно 35–50 символов на мобильном, чтобы глаз не терялся;
• тёмный текст на светлом фоне с достаточным контрастом, без «модного» бледно-серого;
• заголовки уменьшаются пропорционально, а не остаются гигантскими, как на десктопе.

Ошибка 2. Кнопки и ссылки, в которые невозможно попасть

Палец — не курсор мыши. Если кнопка высотой 25 px, а ссылки в меню стоят вплотную, пользователь промахивается, попадает не туда и раздражается. Особенно страдают маленькие иконки соцсетей, крестики закрытия всплывающих окон и ссылки внутри текста, стоящие рядом.

Рекомендации:

• минимальная зона нажатия — около 44–48 px в высоту и ширину;
• между соседними кликабельными элементами — отступ не меньше 8 px;
• основные кнопки действия — во всю ширину экрана или близко к этому;
• кнопку закрытия всплывающего окна делайте крупной и заметной, а не крошечным крестиком в углу.

Ошибка 3. Горизонтальная прокрутка

Страница «ездит» влево-вправо, потому что какой-то элемент шире экрана. Виновниками обычно становятся таблицы, картинки с фиксированной шириной, длинные адреса e-mail или ссылки без переноса, встроенные карты и видео, а также декоративные элементы, выходящие за край контейнера.

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

Ошибка 4. Неудобные формы

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

• Слишком много полей. Заполнять на телефоне восемь полей никто не хочет. Оставьте минимум: имя и контакт.
• Неправильная клавиатура. Для поля e-mail должна открываться клавиатура с символом «@», для чисел — цифровая. Это задаётся типом поля в вёрстке.
• Автоматическое увеличение страницы. В Safari при фокусе на поле со шрифтом меньше 16 px страница масштабируется, и пользователю приходится возвращать масштаб вручную.
• Подписи внутри полей. Когда подсказка исчезает при вводе, человек забывает, что именно нужно было написать.
• Капча, которую невозможно пройти. Мелкие картинки «выберите все светофоры» на телефоне — отдельная пытка.
• Невидимые ошибки. Сообщение «неверно заполнено поле» появляется где-то вверху страницы, вне экрана, и человек не понимает, почему форма не отправляется.

Ошибка 5. Всплывающие окна и виджеты, закрывающие контент

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

Что делать:

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

Кроме неудобства, навязчивые полноэкранные окна ухудшают отношение поисковых систем к странице.

Ошибка 6. Медленная загрузка

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

Причина	Как проявляется	Решение
Тяжёлые изображения	Картинки прорисовываются по частям, страница «прыгает»	Сжатие, современные форматы, разные размеры для разных экранов
Видео на первом экране	Долгая пустая область, расход трафика	Заменить статичной картинкой на мобильных
Много сторонних скриптов	Страница видна, но не реагирует на нажатия	Убрать лишние виджеты, загружать скрипты отложенно
Внешние шрифты	Текст появляется с задержкой или «мигает»	Оставить одно-два начертания, подключать локально
Слайдеры и анимации	Подтормаживание при прокрутке	Упростить или отключить на мобильных

Ошибка 7. Неработающая навигация

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

Отдельная ошибка — прятать на мобильной версии важные разделы. Иногда разработчик, чтобы упростить меню, убирает из него «Цены» или «Контакты», и пользователь не может найти именно то, за чем пришёл. Упрощать нужно структуру, а не выбрасывать ключевую информацию.

Ошибка 8. Спрятанные контакты и неудобная связь

Мобильный посетитель часто хочет связаться с компанией сразу. Если для этого нужно долистать до подвала, найти мелкий e-mail и вручную скопировать его — многие не станут. Проверьте:

• ссылка на e-mail открывает почтовое приложение одним касанием;
• кнопки мессенджеров ведут сразу в чат, а не на страницу скачивания приложения;
• адрес открывается в картах;
• режим работы указан рядом с контактами;
• кнопка связи доступна с любого экрана, а не только в подвале.

Как найти эти ошибки на своём сайте

Для самостоятельной проверки хватит часа и двух телефонов — на iOS и на Android. Откройте главную, страницу основной услуги, страницу цен и контакты. На каждой попробуйте прочитать текст без увеличения, пролистать страницу вбок, открыть меню, нажать на e-mail и отправить тестовую заявку. Затем загляните в Яндекс Метрику и сравните отказы и конверсию на смартфонах и компьютерах: большой разрыв подтвердит, что проблемы влияют на заявки.

Вывод

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

Начните с простого: пройдите по своему сайту с телефона, попробуйте найти цены и оставить заявку. Если спотыкаетесь сами, клиенты спотыкаются тем более. «Студия-125» проводит аудит мобильных версий и делает адаптивную вёрстку существующих сайтов — от 12 000 руб. Если же сайт устарел целиком, рассмотрите редизайн. Опишите задачу в брифе, и мы предложим оптимальное решение.