Проверьте свою статистику: скорее всего, больше половины посетителей у Вас с телефонов. У производственных сайтов закупщик тоже часто смотрит с мобильного: в дороге, на объекте, между совещаниями. Мобильная версия сайта, которая неудобна, отсекает этих клиентов раньше, чем они дойдут до каталога. А заодно снижает позиции: Google с 2023 года индексирует сайты по мобильной версии, а Яндекс учитывает удобство на телефоне в ранжировании мобильной выдачи.
Почему это критично
Две причины. Первая: половина и больше трафика мобильный, и это реальные клиенты. Вторая: поиск оценивает сайт по мобильной версии в первую очередь. Медленный или сломанный на телефоне сайт проседает в выдаче, даже если на компьютере всё хорошо. Исследование Google 2017 года показало, что 53% мобильных посетителей уходят, если страница грузится дольше трёх секунд. На мобильном интернете за городом или на объекте это случается чаще, чем кажется из офиса.
Плюсы и минусы мобильной версии: адаптив или отдельный сайт
Мобильная версия сайта бывает двух типов, и их часто путают. Адаптивная вёрстка: один сайт, который перестраивается под ширину экрана. Отдельная мобильная версия: второй сайт на поддомене вроде m.сайт.ru, который открывается на телефонах. Как называется мобильная версия сайта в разговоре с разработчиком, неважно, важно уточнить, какой из двух вариантов он предлагает.
| Адаптивная вёрстка | Отдельная мобильная версия | |
|---|---|---|
| Сколько сайтов | Один | Два: основной и мобильный |
| Контент | Один и тот же | Нужно поддерживать в двух местах |
| SEO | Проще, один адрес на страницу | Нужна настройка связей между версиями |
| Скорость | Зависит от качества вёрстки | Можно сделать очень лёгкой |
| Стоимость поддержки | Ниже | Выше |
| Когда подходит | Почти всегда | Сложные порталы с разной логикой на телефоне |
Плюсы адаптива: один сайт, один контент, проще продвигать. Минусы: плохо свёрстанный адаптив на телефоне показывает всё то же, что на компьютере, только мелко и медленно. Для производственного сайта почти всегда правильный выбор адаптив, подробно о том, на что смотреть заказчику, в статье адаптивная вёрстка сайта: на что смотреть заказчику.
Что проверить
- Адаптивность. Сайт подстраивается под любой экран, ничего не вылезает и не обрезается.
- Скорость. На мобильном интернете сайт грузится быстро, иначе уходят, не дождавшись.
- Кликабельность. Кнопки и ссылки крупные, попадаешь пальцем без промаха.
- Читаемость. Текст читается без масштабирования и щипков.
- Формы. Заполнять заявку с телефона удобно, минимум полей, нужная клавиатура для телефона и почты.
- Таблицы и каталог. Характеристики и карточки не разваливаются на узком экране.
Как сделать мобильную версию сайта
Как сделать мобильную версию сайта, зависит от того, на чём он сделан. На современных CMS и конструкторах мобильная версия сайта создаётся автоматически: шаблон уже адаптивный, остаётся проверить и поправить отдельные блоки. Если сайт старый и свёрстан фиксированной шириной, добавить сайту мобильную версию точечно не получится: дешевле пересобрать шаблон на адаптивной вёрстке.
- Проверьте текущее состояниеОткройте сайт на телефоне и пройдите путь клиента. Запишите, где неудобно.
- Решите, адаптив или пересборкаЕсли сайт частично адаптивный, правят блоки. Если нет, пересобирают шаблон.
- Начните с ключевых страницГлавная, каталог, карточка товара, контакты, форма заявки. На них приходится почти весь путь до обращения.
- Переделайте таблицы и формыТаблицы с прокруткой внутри себя, формы с минимумом полей.
- Проверьте скоростьСожмите изображения, уберите лишние скрипты, проверьте в PageSpeed Insights.
Мобильная версия сайта создать с нуля её обычно предлагают при редизайне: тогда дизайн мобильной версии сайта рисуют отдельно, а не получают сжатием десктопа. Разработка мобильной версии сайта в этом случае начинается с прототипа на ширине телефона, и это правильный порядок.
Настройка мобильной версии сайта
Настройка мобильной версии сайта на CMS или конструкторе обычно сводится к правке отдельных блоков: в Tilda и подобных сервисах у каждого блока есть настройки отображения на телефоне, в WordPress и 1С-Битрикс это делает разработчик в стилях шаблона. Настроить мобильную версию сайта хорошо значит проверить не только внешний вид, но и поведение: меню открывается пальцем, фильтры каталога работают, телефон в шапке кликабельный и набирает номер.
Какой должна быть мобильная версия сайта производителя: шапка с телефоном и кнопкой связи, компактное меню, поиск по каталогу, карточка товара с главными характеристиками на первом экране, таблица параметров с прокруткой, короткая форма заявки. Мобильная версия сайта должна давать тот же путь до заявки, что и компьютерная, только короче.
Версия сайта на мобильном телефоне: как посмотреть и проверить
Версия сайта на мобильном телефоне проверяется проще всего на своём смартфоне, обязательно на мобильном интернете, а не в офисном Wi-Fi. Как сделать мобильную версию сайта на телефоне видимой без смартфона: в браузере на компьютере включите режим разработчика (клавиша F12) и выберите эмуляцию устройства, например iPhone. Это не идеальная проверка, но быстро показывает, где вёрстка разваливается.
Сайт под мобильную версию проверяют и по данным: в Метрике есть отчёт по устройствам, где видно отказы и конверсию на телефонах отдельно. Если на телефонах отказов вдвое больше, чем на компьютерах, мобильная версия теряет клиентов. Какие ещё показатели смотреть, разобрали в статье SEO-метрики: за какими показателями следить. Отдельно проверьте страницы регистрации и личного кабинета, если они есть: на телефоне формы входа ломаются чаще всего.
Каждую страницу своего сайта и каждый документ для клиента мы перед публикацией снимаем на ширине телефона 390 пикселей и проверяем, что ничего не уезжает за край экрана. Отдельно проверяем, как страница открывается во встроенном браузере Telegram: многие клиенты читают ссылки именно там. На сайтах клиентов делаем такую проверку так же.
Частая проблема производственных сайтов
Каталог и технические таблицы, которые нормально выглядят на компьютере, на телефоне часто разваливаются: съезжают, требуют горизонтальной прокрутки всей страницы, не читаются. А ведь именно характеристики закупщик и смотрит. Это бьёт по удобству и заявкам. Решение простое: таблица прокручивается внутри себя, а страница остаётся на месте, первая колонка с названием параметра закреплена.
Как проверить свой сайт
Откройте сайт на своём телефоне и попробуйте пройти путь клиента: найти товар, посмотреть характеристики, оставить заявку. Где неудобно, там теряете клиентов. Точную картину даёт Вебвизор по мобильным визитам: видно, где люди останавливаются, что пытаются нажать и откуда уходят. Отзывы клиентов тоже читают с телефона, поэтому блок отзывов должен быть удобен на узком экране, об этом в статье как получить отзывы от клиентов в B2B.
Не уверены, что сайт удобен на телефоне? Проверим мобильную версию при аудите, первый разбор бесплатно. Если нужно и исправить, и вывести сайт в поиске, это продвижение сайта с технической частью: SEO у нас от 60 000 ₽ в месяц, мобильная версия входит в работы первого месяца. Подробнее на странице SEO-продвижения.
