Как проверить лендинг на телефоне: чек-лист без специальных программ

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

Зачем проверять с телефона в руках

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

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

Ниже 15 пунктов. Каждый проверяется руками за 20-60 секунд, по всей странице выходит около десяти минут.

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

Можно ли проверить мобильную версию сайта через эмулятор в браузере?

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

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

Для приёмки берите настоящий телефон, лучше два: Android и iPhone. Браузеры у них разные, и форма, которая работает в Chrome, может чудить в Safari. Как проверять страницу в разных браузерах, разобрано отдельно в статье Кроссбраузерность лендинга.

Пункты 1-3: первый экран

1. Оффер помещается целиком

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

2. Ничего не наезжает друг на друга

Текст поверх картинки, кнопка на заголовке, логотип на меню. На широком мониторе таких наездов нет, а на ширине 360 пикселей они всплывают постоянно.

3. Шапка не съедает экран

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

Пункты 4-6: текст и читаемость

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

4. Размер шрифта. Если тянет приблизить страницу пальцами, шрифт мал. Ориентир для основного текста - 16 пикселей, но на глаз проще: текст читается с вытянутой руки без напряжения.

5. Переносы и края. Длинные слова вроде "видеонаблюдение" не должны вылезать за край экрана, а заголовки - переноситься по одной букве на строку.

6. Контраст на улице. Выйдите на солнце или поставьте минимальную яркость. Светло-серый текст на белом фоне, аккуратный на мониторе, на улице исчезает целиком.

Пункты 7-8: кнопки и палец

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

8. Ссылки не слиплись. Два пункта меню или две ссылки впритык - это нажатия мимо. Человек попадает не туда, куда шёл, и не всегда это замечает. Простой тест: нажмите каждую ссылку в тексте по три раза подряд. Три попадания из трёх - норма.

Посетитель не будет стараться. Кнопка, по которой он не попал с первого раза, второй попытки обычно не получает.

Пункты 9-11: форма заявки

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

9. Клавиатура подходит к полю

Нажали на поле телефона - открылась цифровая клавиатура. Если открывается буквенная, набор номера превращается в упражнение, и часть людей его не заканчивает. За это отвечает тип поля, подходящие варианты перечислены в документации MDN по input.

10. Клавиатура ничего не перекрывает

Начните печатать. Активное поле должно оставаться на виду, а не прятаться под клавиатурой. Проверьте и кнопку отправки: бывает, клавиатура закрывает её так, что отправить заявку вообще нельзя.

11. Ошибки видно, заявка уходит

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

Как проверить скорость загрузки лендинга на телефоне?

Отключите Wi-Fi и откройте страницу через мобильный интернет. Засеките время до момента, когда первый экран можно читать. До 3 секунд - нормально. 5-6 секунд - уже дорого: каждый посетитель с рекламы оплачен, а уходят как раз на этих секундах. Похожий порог используют и в стандартных метриках скорости: LCP из Core Web Vitals считает хорошим результат до 2,5 секунды.

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

Точную цифру веса без сервисов не узнать, но она и не нужна. Решение принимает не отчёт, а человек со счётчиком секунд: если страница у вас на глазах думает пять секунд, посетитель это ждать не обязан.

Пункты 13-14: вёрстка и картинки

13. Нет горизонтальной прокрутки. Подвигайте страницу вбок на разной высоте. Если она ездит влево-вправо, какой-то блок шире экрана: чаще всего таблица, длинная строка или картинка с жёсткой шириной.

14. Картинки живы. Фото не растянуты и не сплющены, на скриншотах и сертификатах при увеличении различим текст. Таблицы с десктопа на телефоне часто превращаются в кашу: их упрощают или прячут в блок с внутренней прокруткой.

Пункт 15: звонок, мессенджеры, карта

Нажмите на номер телефона. Должен открыться набор номера с уже подставленными цифрами. Номер простым текстом заставляет запоминать его и набирать руками, на этом теряется часть звонков. Тот же тест повторите для кнопки почты, если она есть: письмо должно создаваться с подставленным адресом.

Кнопки Telegram и WhatsApp должны открывать приложение с нужным чатом, а не веб-версию с экраном входа. Адрес в контактах - открывать карты. Каждый лишний шаг на этом пути отсекает часть обращений.

Весь чек-лист одной таблицей

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

Частые вопросы

На каком телефоне лучше проверять - на своём или у клиента?

На обоих, если получится. Свой телефон вы знаете, поэтому легко спутать привычку с удобством интерфейса. Второе устройство, желательно другой операционной системы, показывает то, с чем реально столкнётся случайный посетитель.

Нужно ли отдельно проверять лендинг на планшете?

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

Что делать, если на разных телефонах лендинг выглядит по-разному?

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

Кто должен проводить эту проверку - заказчик или исполнитель?

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

Что делать

Найденное записывайте с указанием устройства и браузера: "iPhone, Safari, клавиатура закрывает кнопку формы". Такой список исполнитель закрывает за день. Формулировка "на телефоне всё съехало" не помогает: на телефоне исполнителя всё может выглядеть прилично. Скриншоты ускоряют дело ещё сильнее: снимок экрана с обведённой проблемой снимает половину вопросов в переписке.

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

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