Всё для рекламы
и про рекламу
Навигация по статье
Почему именно сейчас нужно тщательно продумать мобильную версию вашего сайтаВезде ли преобладает мобильный трафикКонверсия и примеры результатовВарианты мобильной адаптации сайтаОсобенности мобильных версийЦелевое действие на мобильной версии зависит от задачиВизуальное оформление мобильной версииСкорость мобильной версииВыводы
О сайтах

Как создавать сайты с высокой конверсией на мобильных устройствах

5293
4

Почему именно сейчас нужно тщательно продумать мобильную версию вашего сайта

Это скрин с моего проекта по БФЛ (банкротство физических лиц) за август. 75% – это мобильный трафик. 

статистика по типам устройств в нише банкротства физических лиц

И по другим проектам я вижу, что цифра составляет в среднем 70-90%. Т.е. это уже маст-хэв. Если у вас плохо сделана и адаптирована версия под мобильный трафик, то вы просто будете сливать деньги на рекламу впустую. 

Везде ли преобладает мобильный трафик

Перед вами скрин с проекта по поставке светильников. Здесь видно, что мобильный трафик составляет всего 2%.

статистика по типам устройств в сфере b2b

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

Поэтому сразу скажу, что для B2C мобильная версия прямо обязательна, для B2B мы просто делаем нормальную, удобную версию, которая хорошо выглядит. Это даже больше имиджевая история, но она должна быть.

Конверсия и примеры результатов

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

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

И чтобы не быть голословной, показываю статистику по проекту БФЛ. Здесь % конверсии и ее стоимость практически одинаковые для обоих типов устройств. 

результаты конверсии с пк и мобильных устройств

При этом с мобильных получили 78 конверсий, а с десктопа всего 12. Делайте выводы.

Варианты мобильной адаптации сайта

Первый вариант – сайт вообще без адаптива (сайт из 90-х). Наверное, все такое видели, когда заходишь на сайт, а там все мелкое, непонятное. Просто ПК-версия, которую никто не адаптировал. Выглядит, как на ПК, только в супер-мини варианте. Работать с такой версией практически невозможно. Такой вариант уже рассматривать нельзя.

сайт без адаптива под мобильную версию

Следующий вариант – адаптив сайта под мобильные устройства. Сайт имеет такую же структуру и контент, как на ПК, только там более крупный шрифт и относительно удобная навигация.

адаптив сайта под мобильные устройства

Такие адаптивы есть примерно у 90% сайтов, которые сейчас встречаются в интернете.

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

создание отдельной мобильной версии сайта

Эта версия, созданная с учетом особенностей поведения людей на мобильных устройствах. 

Что мы там учитываем:

  • как аудитория принимает решение на мобильных устройствах;
  • как лучше расставить акценты в мобильной версии;
  • какие блоки вырезать;
  • какие элементы взаимодействия с сайтом из ПК версии оставить, а какие заменить.

Особенности мобильных версий

В мобильной версии мы оставляем 10-12 самых важных блоков. Чтобы понять, какие именно оставить, откройте карту ЦА с критериями принятия решения и взять 5-6 самых важных. Блоки с деталями убираем. Люди не читают сайты из 15-20 экранов, это слишком много.

Что должно остаться:

  • первый экран с оффером;
  • суть вашего предложения – раскрываем УТП;
  • отработка ключевых критериев принятия решения (5-6 самых важных параметров);
  • элементы доверия (отзывы, сертификаты, кейсы);
  • формы захвата/целевые действия (конверсионный слой).

Размещайте кнопки и прочие элементы взаимодействия с сайтом лучше в пространстве, куда будет удобно дотянуться пальцем правой руки.

как человек держит смартфон

В основном, люди взаимодействуют с телефоном одной рукой и одним пальцем. 

Следующий элемент: одна смысловая единица (блок) = 1 экран сайта. Если информация из ПК-блока не помещается на экран смартфона, сокращайте или разбивайте визуально. Убираем полотна текста и менее важную информацию.

Перед вами пример того, как я это делаю в последнем проекте. Из 6 буллитов я оставила 3 самые важные.

как переделать сайт для пк под мобильную версию

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

На одном проекте мы просто сделали адаптив. Сначала вкладки сделали в качестве слайдера. Показана полосочка, которая двигалась вправо-влево. У нас это не работало. Люди не поняли, что это слайдер и не пользовались им.

неудобный слайдер в мобильной версии сайта

Второй скрин. Сделано через изображения. Причем по мере прокрутки сайта видно, что рядом с изображением находится еще какое-то изображение, т.е. часть соседнего слайда. Такой вариант работал лучше. Люди интуитивно понимают, что там есть что-то еще и листают. Поэтому если используете слайдер, то лучше в таком варианте.

слайдер с изображениями в мобильной версии сайта

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

как вместить контент на мобильной версии сайта

Используйте «липкие» элементы. Это элементы, которые прикреплены к экрану телефона. Когда вы листаете экран, он не никуда улетает, а закреплен.

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

сайд-бар на мобильной версии сайта

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

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

поп-ап окно в версии сайта для пк и мобильной

Целевое действие на мобильной версии зависит от задачи

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

Сейчас очень часто наблюдается такая ситуация, что основные продажи происходят в ТГ-каналах. И для того чтобы привлечь туда аудиторию, ведем трафик с того же Яндекса при помощи так называемых сайтов-прокладок. Создается небольшая посадочная страница, и единственное целевое действие, которое там есть – переход в Телеграм-канал. И, конечно, здесь у мобильных версий есть очень большое преимущество, потому что это более понятно и удобно, приложение есть практически у каждого. Конверсия там, как правило, выше. 

Если вы будете делать то же самое с ПК-версии, то там надо будет делать какие-то дополнительные вещи, например, переход с помощью сканирования QR-кода. Но в любом случае, конверсия с ПК ниже. 

переход в телеграм канал с версии сайта для пк

На примере переход в Телеграм с мобильной версии.

переход в телеграм канал с мобильной версии сайта

Для продающего типа конверсии в мобильной версии обязательно добавляйте возможность оформить заказ (получить расчет) в мессенджере. Это тоже хорошо повышает конверсию, потому что это удобно.

возможность оформить заказ в мессенджере на мобильной версии сайта

Визуальное оформление мобильной версии

Ключевые моменты:

  • Крупный текст (не менее 14).
  • Используем подложки, плашки для визуального разделения смыслов (текст не должен быть единым полотном).
  • Добавляем картинки, которые усиливают восприятие текста. В мобильной версии они тоже должны быть, но не в таком количестве, как на ПК, потому что это утяжеляет сайт и время загрузки сайта увеличивается.
  • Делаем кнопки крупными и яркими.
  • Форма захвата вместе с оффером должна помещаться в один экран (железное правило).
  • Используем достаточно пространства между заголовками, подзаголовками и текстами.

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

как правильно оформлять мобильную версию сайта

Скорость мобильной версии

Важный момент – проверяем скорость мобильной версии. Часто бывает такое, что на ПК все работает хорошо, загружается быстро, а мобильная тормозит. 

скорость мобильной версии сайта

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

Выводы

  • Мобильная версия – мастхэв в 2023 в b2c. Для b2b достаточно адаптива.
  • Нужен не просто адаптив, а отдельная версия сайта, заточенная под работу на мобильных устройствах.
  • Обязательно адаптируем следующий шаг под пользователей мобильных устройств.
  • Все важные смыслы подтягиваем в первые 10 экранов.
  • Делаем липкие кнопки с мессенджерами и телефоном для мобильных версий.
  • Используем видео.
  • Используем ретаргет, тк трафик неплохо конвертируется со 2-3 захода.
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Евгения Стрижак
5293
4
0
Написать комментарий
Иван Заев
Иван ЗаевSeptember 12, 2023 в 5:59 AM
Согласен, может быть, для БВБ сектора мобильный трафик пока остается невысоким, но для других секторов, на мой взгляд, он приближается к 100 процентам. Пользователи даже дома - фильмы смотрят через стационарный интернет, а все остальное, в том числе и покупки, заказы в интернете - через мобильный. И мобильному сайту здесь предлагаются самые высокие требования. Давно прошли те времена, когда мобильный сайт был незначительным приложением основного сайта.
Алексей Гринев
Алексей ГриневSeptember 15, 2023 в 8:23 AM
Полностью поддерживаю. Многие просто делают адаптив, не проверяя, как он работает на телефонах. Результат - кривой сайт, или тормозит сильно. Нужен отдельный версия сайта, желательно - с минимальным количеством страниц.
Ничипоренко Александр
Ничипоренко АлександрSeptember 11, 2023 в 7:15 PM
Для меня мобильная конверсия вообще темный лес, поэтому я скорее всего закажу это у специалиста, чем буду сам эксперименты ставить и время терять. Спец сделает и лучше и быстрее, хотя в теме я разбираюсь, но вот с мобильностью у меня проблемка.
Владимир Балагоев
Владимир БалагоевSeptember 14, 2023 в 8:15 AM
Спец, конечно, сделает и лучше и быстрее, но только технически. Как сайт будет выглядеть, какой контент - решать Вам. А от этого зависит посещаемость сайта и, в конечном, Ваша прибыль.