Мобильная версия сайта: что проверить за 10 минут

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

Почему владелец не видит проблему

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

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

Минуты 1–2: откройте сайт по-настоящему

Не в режиме «мобильный вид» на компьютере, а на живом телефоне. Эмулятор в браузере показывает сетку, но не показывает, как сайт грузится по мобильной сети и как пальцем попадать в кнопки.

• Выключите Wi-Fi и откройте сайт по мобильному интернету. Так делает клиент в дороге.
• Откройте в режиме инкогнито, чтобы браузер не подставил сохранённые картинки из кэша.
• Если есть второй телефон другой марки, откройте и на нём. Android и iPhone показывают шрифты и формы по-разному.

Уже на этом шаге станет видно главное: сколько секунд вы смотрите на белый экран. Если дольше трёх-четырёх, это первая проблема, и о ней подробно в статье «Скорость сайта: почему клиенты уходят и как ускорить».

Минуты 3–4: первый экран

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

• Заголовок читается без увеличения. Если вы тянетесь пальцами, чтобы прочитать, шрифт мелкий.
• Кнопка действия видна сразу: «Заказать», «Записаться», «Смотреть каталог». Не нужно листать до неё.
• Телефон кликабельный. Нажали на номер, открылась звонилка. Если не открылось ничего, клиент будет переписывать номер вручную, а это уже потеря части звонков.
• Нет всплывающего окна на весь экран в первую секунду. Баннер про cookie допустим, но он не должен закрывать кнопку и текст.

Минуты 5–6: меню, кнопки, формы

Здесь чаще всего ломается всё. Нажимайте пальцем, а не стилусом, и не целясь: клиент тоже не целится.

• Меню открывается по «бургеру» (три полоски) и закрывается по крестику. Пункты меню не налезают друг на друга.
• Кнопки достаточно крупные, чтобы в них попадать. Если две ссылки стоят вплотную и вы промахиваетесь, промахнётся и клиент.
• Заполните форму заявки до конца и отправьте. Поле телефона должно открывать цифровую клавиатуру, а не буквенную. После отправки должно появиться подтверждение, а на вашу почту или в CRM должна прийти заявка. Проверяйте именно факт получения, а не надпись «Спасибо».
• Мессенджеры: кнопка Telegram или MAX открывает приложение, а не пустую страницу.

Если форма ушла «в никуда», это не мелочь. В статье «Сайт не приносит заявки: 12 причин» неработающая форма стоит в первых строчках.

Минуты 7–8: каталог, корзина, оплата

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

1. Откройте каталог. Карточки товаров не должны быть по одной на весь экран с гигантским фото и ценой где-то внизу.
2. Откройте карточку. Фото листаются свайпом, цена и кнопка «В корзину» видны без прокрутки.
3. Добавьте товар в корзину. Иконка корзины показала количество, а не осталась пустой.
4. Перейдите к оформлению. Поля адреса и телефона удобно заполнять одним пальцем, выбор доставки не требует масштабирования.
5. Дойдите до оплаты. Страница платёжного сервиса открылась и подстроилась под экран. СБП на телефоне должен открывать приложение банка.

Если где-то пришлось «увеличить пальцами», чтобы попасть в кнопку, запишите этот шаг: там вы теряете заказы.

Минуты 9–10: мелочи, которые заметны только с телефона

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

Что делать с найденным

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

Дальше два пути. Если сайт собран на конструкторе или сделан давно, часто дешевле собрать мобильную версию заново, чем чинить по частям. Продающий сайт под ключ у нас от 10 000 ₽ разово, и мобильная версия в него входит по умолчанию, отдельно за неё платить не нужно. Если чинить, то просите подрядчика показать результат именно на телефоне, а не скриншотом с монитора.

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

Коротко

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