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

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

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

Решите, что показывать мобильным посетителям сайта, а что скрывать от них

Что хотели бы видеть пользователи мобильной версии страницы, что отличалось бы от версии настольной? Вот что можно попробовать:

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

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

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

Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код внутри тэга-контейнера <body> в том месте, где этот контент должен отображаться (контейнер — это конструкция в коде HTML, состоящая из открывающего и закрывающего тегов, например, <body> и </body>, <div> и </div> и т. д. — Прим. ред.):

<div class="show-on-mobile">
Здесь текст или изображение.
</div>

Для тэга <div> здесь прописан CSS-класс show-on-mobile. Все свойства этого класса опишем в отдельном коде и добавим его в контейнер <head> или в отдельный CSS-файл (во втором случае нужно использовать код без контейнера <style type="text/css>...</style>):

<style type="text/css">
.show-on-mobile { display: none; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .show-on-mobile { display: inline; }}
</style>

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

Чтобы спрятать определенный контент от пользователей мобильной версии страницы, вам нужно добавить в нужном месте контейнера <body> код, похожий на предыдущий:

<div class="hide-on-mobile">
Здесь текст или изображение.
</div>

Затем необходимо прописать стили CSS в контейнере <head> или в отдельном CSS-файле (без контейнера <style>):

<style type="text/css">
.hide-on-mobile { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .hide-on-mobile { display: none; }}
</style>

Источник: HubSpot | Изображение: MPFphotography