Сайты · 9 минут чтения

Мобильная версия сайта: как проверить, удобно ли клиентам с телефона

Проверить мой сайт с телефона

Почему это важно именно для вашего сайта

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

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

Метрики на сайте нет? Это первое, что стоит исправить: без неё вы не узнаете ни откуда приходят люди, ни работает ли сайт вообще.

Адаптивный сайт и отдельная мобильная версия: в чём разница

Сайт может подстраиваться под телефон двумя способами.

Два способа показать сайт на телефоне
Адаптивный сайтОтдельная мобильная версия
Как устроеноОдин сайт, который сам перестраивается под ширину экранаВторой сайт на отдельном адресе, например m.vash-sayt.ru
Сколько адресовОдин адрес для всех устройствДва адреса, их нужно держать одинаковыми по содержанию
ПравкиПоправили текст один раз — изменилось вездеПравки иногда нужно вносить дважды
Что сейчас обычно делаютПочти все новые сайтыВстречается на старых сайтах

Яндекс в справке для владельцев сайтов описывает оба способа. Для отдельной версии он требует, чтобы её структура полностью соответствовала основному сайту. Для адаптивного сайта советует указать в коде специальную строку — метатег viewport. Это техническая деталь: её проверяет разработчик, вам достаточно знать, что она есть.

Если ваш сайт сделан несколько лет назад и при открытии с телефона показывает уменьшенную копию компьютерной версии, которую приходится раздвигать пальцами, — он не адаптивный. Такой сайт стоит переделывать, а не чинить по кусочкам.

Проверка за 10 минут: пройдите путь клиента с телефона

Возьмите свой телефон. Выключите Wi-Fi, чтобы сайт грузился через мобильный интернет, как у клиента в дороге. Откройте сайт не по закладке, а через поиск в Яндексе — так, как его найдёт новый человек. И проверьте по порядку.

1Скоростьвидно ли что-то сразу 2Первый экранчто, где, как связаться 3Текстчитается без увеличения 4Менюоткрывается и закрывается 5Звонокномер нажимается 6Формазаполняется и доходит
Шесть проверок, которые можно сделать самому с телефона. Порядок — как у клиента, который впервые попал на сайт.
  1. Скорость. Засеките, через сколько секунд после нажатия на ссылку вы видите что-то полезное, а не белый экран. Если успеваете заскучать — клиент тоже успеет. О том, что тормозит сайт, — в статье о скорости загрузки.
  2. Первый экран. Не листая, вы должны понять три вещи: чем занимается компания, где она работает и как с ней связаться. Если первый экран целиком занят красивой фотографией без слов — это потерянное место.
  3. Текст. Основной текст читается без увеличения пальцами и без очков, если вы обычно читаете с телефона без них. Строки не уходят за край экрана, страницу не приходится двигать вбок. Светло-серый текст на белом фоне — частая причина, по которой людям старшего возраста трудно читать.
  4. Меню. Нажмите на значок меню — обычно это три полоски. Меню должно открыться, пункты — нажиматься с первого раза, а закрыть меню можно без поиска крестика. Проверьте, что из меню можно попасть на услуги, цены и контакты.
  5. Звонок. Найдите телефон и нажмите на него. Должно сразу открыться окно звонка с уже набранным номером. Ссылки на Telegram и MAX должны открывать переписку с вашим аккаунтом. Хорошо, если кнопка звонка видна всё время, а не только в самом низу страницы.
  6. Форма. Заполните заявку. Поля достаточно крупные, при вводе телефона открывается цифровая клавиатура, ничего не перекрывает кнопку «Отправить». Отправьте и проверьте, что заявка дошла и в ней все поля. Подробно — в статье про форму заявки.

Ещё две минуты — на мелочи, которые раздражают сильнее всего:

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

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

Чем ещё можно проверить, кроме своего телефона

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

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

Что можно исправить самому, а что поручить разработчику

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

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

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

Нужна ли отдельная мобильная версия, если сайт адаптивный?

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

Как узнать, сколько клиентов заходит на сайт с телефона?

В Яндекс Метрике: «Отчёты» — «Технологии» — «Устройства». Если Метрики на сайте нет, её стоит подключить: это бесплатно.

Влияет ли мобильная версия на то, как сайт находят в Яндексе?

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

Сколько стоит исправить мобильную версию?

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

Почему на моём телефоне всё нормально, а клиенты жалуются?

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

Источники

Дело Прёт · берём на себя реализацию

Посмотрим ваш сайт с телефона и скажем, что мешает

Пришлите адрес сайта. Пройдём тот же список проверок и честно скажем, что можно исправить точечно, а где сайт проще переделать.

  • Проверим сайт на нескольких телефонах.
  • Составим список того, что мешает позвонить или оставить заявку.
  • Исправим, если договоримся о работе.

С чего начнём

Напишите адрес сайта и что вас смущает, когда открываете его с телефона.

Ответим, что исправить и сколько это стоит. Работы начинаются после согласования с вами.

Поддержка сайтов: исправим то, что мешает с телефона

Получите предложение по вашей задаче

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

Отправка формы не обязывает заказывать работу. Состав и стоимость согласуем до начала.