Мобильная версия сайта: 12 ошибок, которые видно только с телефона

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

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

1. Горизонтальная прокрутка

Признак: страницу можно сдвинуть влево-вправо, справа появляется полоса пустоты.

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

Как найти быстро: в консоли браузера на телефоне или в режиме устройства выполнить проверку, у каких элементов ширина больше окна.

document.querySelectorAll('*').forEach(el => {
  if (el.getBoundingClientRect().width > document.documentElement.clientWidth + 1) {
    console.log(el);
  }
});

Лечится обычно так: таблицы заворачиваются в контейнер с прокруткой внутри себя, картинкам ставится max-width: 100%, длинным строкам добавляется перенос.

2. Кнопки меньше пальца

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

Правило: минимум 44 на 44 пикселя, зазор между соседними целями не меньше 8 пикселей. Если рядом две кнопки с разным исходом, например "удалить" и "сохранить", зазор нужен больше.

3. Телефон, который нельзя нажать

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

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

То же касается адреса: он должен открывать карту, а не быть просто текстом.

4. Меню, которое перекрывает контент

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

Что проверить: закрытие по кнопке, по клику вне меню и по кнопке "назад" в браузере. Последнее упускают почти всегда, а пользователи Android жмут именно её.

5. Липкая шапка на пол-экрана

Фиксированная шапка удобна, пока занимает 60-70 пикселей. На некоторых сайтах она разрастается до 150 пикселей вместе с полосой акции и поиском, и на экране остаётся треть места под контент.

Отдельная беда - фиксированная шапка вместе с фиксированной кнопкой заказа и баннером про cookie. Втроём они съедают половину экрана. Про сам баннер и его обязательные элементы мы писали в статье про cookie-баннер.

6. Формы, которые неудобно заполнять

Самая дорогая ошибка, потому что она прямо режет заявки.

Что должно быть в мобильной форме:

• Правильный тип поля: type="tel" для телефона, type="email" для почты. Тогда открывается нужная клавиатура.
• Атрибуты автозаполнения autocomplete="tel", autocomplete="name". Браузер подставит данные сам.
• Подписи над полями, а не внутри как подсказка: подсказка исчезает при вводе, и человек забывает, что вводил.
• Понятная ошибка рядом с полем, а не общий текст "проверьте данные" сверху.
• Кнопка отправки, которая не уезжает под клавиатуру.

Последний пункт проверяется только на устройстве: на iPhone открытая клавиатура меняет высоту окна, и кнопка может оказаться за пределами видимой области.

7. Картинки в десктопном размере

Фотография 2000 пикселей шириной на экране 390 пикселей грузится полностью. На мобильном интернете это секунды ожидания и лишний трафик.

Лечение: атрибут srcset с несколькими размерами, современные форматы, loading="lazy" для всего ниже первого экрана. У нас на проектах перевод картинок в WebP давал сокращение веса до 90% на плоской графике и около 60-70% на фотографиях.

8. Таблицы, которые превращаются в кашу

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

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

9. Текст, который нельзя читать

Шрифт меньше 16 пикселей на телефоне заставляет щуриться. Серый текст на светло-серой подложке добавляет проблем. Слишком широкая строка тоже мешает, но на мобильном это редкость, чаще беда обратная: слишком узкая колонка из-за больших боковых отступов.

Отдельно про межстрочный интервал: на мобильном нужен больше, чем на десктопе, примерно 1,5 от размера шрифта.

10. Всплывающие окна, которые невозможно закрыть

Модальное окно с акцией, у которого крестик оказался за пределами экрана. Или окно, которое закрывается только по кнопке "нет, спасибо", а сама кнопка ниже линии сгиба и до неё не доскроллить, потому что прокрутка заблокирована.

Такое окно превращается в тупик: посетитель не может ни закрыть, ни продолжить, и уходит.

11. Разное поведение iPhone и Android

Отличия, которые встречаются до сих пор:

• Автозапуск видео без playsinline на iOS разворачивает ролик на весь экран.
• 100vh на iOS считается с учётом скрывающейся адресной строки, из-за чего блок на весь экран оказывается выше окна.
• Даты и селекты выглядят по-разному, и кастомный дизайн селекта на iOS часто ломается.
• Прилипающие элементы с position: sticky на старых Android ведут себя непредсказуемо.

Отсюда правило: проверять обязательно на двух системах. Один телефон достаточной проверкой не является.

12. Скорость, которую никто не измерял на мобильном

Отчёты смотрят на десктопном профиле, потому что там цифры приятнее. Мобильный профиль в PageSpeed Insights нарочно эмулирует слабое устройство и медленную сеть, и там выясняется реальное положение дел.

Порядок работы: сначала вес картинок, потом количество и вес скриптов, потом шрифты, и только потом серверная часть. Что и в каком порядке чинить, разбирали в статьях про ускорение сайта и Core Web Vitals.

Как проверить свой сайт за 30 минут

Порядок, по которому мы проходим сайт перед сдачей:

1. Открыть главную с телефона по мобильному интернету, не по офисному Wi-Fi.
2. Провести пальцем влево: есть ли горизонтальная прокрутка.
3. Нажать на телефон, адрес, почту в шапке и в футере.
4. Открыть и закрыть меню тремя способами, включая кнопку "назад".
5. Заполнить и отправить форму заявки. Дошло ли письмо, виден ли текст ошибки при пустом обязательном поле.
6. Пролистать все ключевые страницы до конца: нет ли обрезанных блоков и наложений.
7. Проверить страницу с таблицей, если она есть.
8. Прогнать две-три страницы через PageSpeed Insights в мобильном профиле.
9. Повторить на устройстве с другой системой.

Этот же список полезен при приёмке работы у подрядчика, полная версия чек-листа приёмки лежит в статье как принять сайт у студии.

Что править в первую очередь

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

Хотите, чтобы мы прошли по вашему сайту с телефонов и прислали список конкретных правок с приоритетами? Напишите через форму на странице контактов. Проверка занимает 2-3 рабочих дня, отчёт с фотографиями экранов и оценкой трудоёмкости.