Больше половины посетителей открывают сайт с телефона, а часто и больше — в зависимости от ниши. При этом владелец обычно смотрит свой сайт с компьютера и не замечает, что на мобильном текст наезжает, кнопка уезжает за край, а форму невозможно заполнить. Проверить мобильную версию можно самому, без разработчика. Ниже — чек-лист по блокам: берите телефон и идите по пунктам.
Как проверять правильно
Главное правило: проверяйте на настоящем телефоне, а не только в уменьшенном окне браузера. Режим разработчика покажет вёрстку, но не передаст реальных ощущений — скорость, нажатие пальцем, поведение клавиатуры.
- Возьмите хотя бы два телефона: с маленьким экраном и с большим.
- Проверяйте на мобильном интернете, а не только по домашнему Wi-Fi, — так увидите реальную скорость.
- Пройдите весь путь клиента: с главной до отправленной заявки, а не только посмотрите первый экран.
- Попросите посмотреть сайт пару знакомых с разными телефонами — свежий взгляд ловит то, что вы уже не замечаете.
Чек-лист: читаемость и вёрстка
Первое, что отталкивает на телефоне, — когда текст приходится увеличивать пальцами, а страница разъезжается. Пройдитесь по пунктам.
- Текст читается без масштабирования — не нужно раздвигать пальцами, чтобы разобрать буквы.
- Нет горизонтальной прокрутки — страница не ездит вбок, ничего не торчит за правый край.
- Фото и видео вписаны в экран, а не обрезаны и не вылезают за границы.
- Заголовки не наезжают друг на друга и на картинки.
- Таблицы и широкие блоки либо перестроены под узкий экран, либо прокручиваются отдельно, не ломая страницу.
Горизонтальная прокрутка — самый частый и самый заметный дефект мобильной вёрстки. Если страницу можно сдвинуть вбок, что-то свёрстано шире экрана.
Чек-лист: кнопки, меню и навигация
На телефоне нажимают пальцем, а не точным курсором. Мелкие и близко стоящие элементы приводят к промахам и раздражению.
- Кнопки крупные, по ним легко попасть пальцем, они не слипаются друг с другом.
- Меню открывается и закрывается без усилий, пункты не налезают один на другой.
- Телефон и адрес кликабельны: по номеру сразу идёт звонок, по адресу открывается карта.
- Кнопки мессенджеров ведут в нужное приложение, а не на пустую страницу.
- Понятно, как вернуться назад и попасть на главную с любой страницы.
Чек-лист: формы и заявки
Форма — то место, где теряют клиентов. На телефоне заполнять её труднее, чем на компьютере, поэтому проверьте каждый шаг.
- Поля достаточно крупные, в них удобно попадать и вводить текст.
- Для телефона появляется цифровая клавиатура, для почты — с символом адреса: это настраивается.
- Клавиатура не перекрывает поле, которое заполняешь, и кнопку отправки.
- Понятно, что заявка ушла: появляется сообщение об успехе, а не тишина.
- Обязательных полей минимум — чем короче форма, тем больше заявок.
Что в форме повышает и что убивает конверсию на любом устройстве, разобрано отдельно — в статье про форму заявки на сайте.
Чек-лист: скорость на мобильном
На телефоне с мобильным интернетом каждая лишняя секунда загрузки уводит часть посетителей. Проверьте скорость именно мобильной версии.
- Первый экран появляется за пару секунд, а не висит белым.
- Страница не прыгает при загрузке: текст не сдвигается, когда подгружается картинка.
- Фотографии не весят по несколько мегабайт — это главный тормоз на мобильном.
- Сайт не завешан лишними виджетами, которые грузятся раньше основного содержимого.
Как измерить скорость в цифрах и прочитать отчёт, подробно разобрано в статье как проверить скорость сайта. Для мобильной версии именно скорость часто важнее, чем на компьютере.
Пять поломок, которые встречаются чаще всего
Если идти по чек-листу некогда, начните с самых частых дефектов — на них приходится большинство жалоб на неудобный мобильный сайт. Проверьте в первую очередь именно их.
- Горизонтальная прокрутка. Один блок свёрстан шире экрана — чаще всего это широкая таблица, большое изображение или кнопка с длинной надписью. Страницу можно сдвинуть вбок, и это сразу выдаёт небрежную вёрстку.
- Мелкий текст. На компьютере он выглядит нормально, но на телефоне превращается в муравьёв, и человек либо увеличивает пальцами, либо уходит.
- Слипшиеся кнопки. Два элемента стоят вплотную, и палец попадает не туда — особенно обидно, если это кнопка заявки рядом с чем-то ещё.
- Форма, перекрытая клавиатурой. Человек нажимает в поле, выезжает клавиатура и закрывает и само поле, и кнопку отправки — заполнить заявку невозможно.
- Тяжёлый первый экран. Крупный баннер без сжатия грузится секунды на мобильном интернете, и половина посетителей уходит, не дождавшись.
Общая закономерность: большинство поломок проявляются именно на маленьких экранах, где меньше всего места. Поэтому проверять в первую очередь стоит на небольшом телефоне, а не на крупном планшете, где всё помещается и дефект не виден.
Почему мобильная версия важнее, чем кажется
С телефонов приходит большая часть посетителей, а в некоторых нишах — почти все. Но дело не только в количестве. Яндекс и Google оценивают сайт в первую очередь по мобильной версии: если она неудобная и медленная, страдают позиции во всей выдаче, включая показ на компьютерах. То есть плохая мобильная версия бьёт даже по тем, кто заходит с десктопа.
Ещё один неочевидный момент: реклама почти всегда ведёт людей на мобильные устройства. Если вы платите за переходы, а посадочная страница на телефоне неудобна, вы оплачиваете визиты, которые заканчиваются ничем. Поэтому проверка мобильной версии — это не косметика, а защита рекламного бюджета.
Что делать с найденными проблемами
Если проблем немного и они точечные — съехавший отступ, мелкий шрифт в одном блоке, тяжёлое фото, — их правят быстро. Хуже, когда сайт изначально свёрстан без расчёта на телефоны: тогда адаптив приходится переделывать целиком. Как устроен подход, при котором мобильная версия закладывается с самого начала, а не прикручивается потом, — в статье про адаптивный дизайн и mobile-first.
Если по чек-листу набралось много пунктов и правки не помогают, пришлите нам адрес сайта — мы бесплатно посмотрим мобильную версию, покажем, что именно ломается, и честно скажем, лечится это настройками или нужен редизайн. Решение останется за вами. Из соседних инструкций пригодятся перенос сайта на другой хостинг и как улучшить сниппет в поиске.