Найти в Дзене

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

Если вы ведете свой блог или управляете корпоративным сайтом, то наверняка сталкивались с созданием лендингов. Посадочные страницы отлично подходят для продвижения товаров или услуг и помогают добиться хороших конверсий. Однако при создании таких страниц важно чтобы они были оптимизированы для мобильных устройств. В противном случае, пользователь, который зашел на неоптимизированную посадочную страницу, с большой долей вероятности покинет ее, не совершив нужных вам целевых действий. Онлайн обучение на лучшей образовательной платформе. 1,5 млн. человек уже прошли курсы, чтобы достичь своих целей. В наличии более 1000 бесплатных материалов. Рекламодатель: ООО Нетология ИНН: 7726464125 Именно так. Не смотря на то, что мобильный трафик составляет превосходящую часть, до сих пор не все блогеры уделяют внимание оптимизации мобильных страниц. Поэтому, верстая посадочную страницу, необходимо сразу же проверять то, как она будет выглядеть на разных гаджетах. Для этого можно использовать специ
Оглавление

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

Онлайн обучение на лучшей образовательной платформе. 1,5 млн. человек уже прошли курсы, чтобы достичь своих целей. В наличии более 1000 бесплатных материалов.
Рекламодатель: ООО Нетология ИНН: 7726464125

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

Дизайн лендинга для мобильных устройств
Дизайн лендинга для мобильных устройств

Короткий и информативный заголовок

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

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

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

Убедительный призыв к действию

Неважно, что вы будете использовать в качестве "call to action", изображение, кнопку, текст, всплывающее окно или другие варианты — главная задача мотивировать потенциального клиента к действию. И если для десктопных версий можно позволить длинный текст, то CTA посадочных мобильных страниц должен состоять из 2-3 слов. Это может быть, что-то вроде: "Получить скидку", "Заказать сейчас" или "Оформить покупку". Безусловно, что призыв к действию должен соответствовать целевой странице.

Призыв к действию один, но заметный

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

Так как посадочная страница призвана побудить пользователя к одному конкретному действию, то будет правильно, если "call to action" будет только один. В противном случае, несколько разных призывов могут запутать клиента. Бывает такое, что целей несколько. Но тогда будет грамотнее сделать посадочную страницу для каждой из них.

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

Минимальное количество элементов дизайна

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

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

Упрощенные формы заказа

Если ваша мобильная посадочная страница предусматривает заполнение форм, то следует максимально сократить их количество. Много полей форм не просто загромождают страницу, но и вызывают недовольство многих пользователей. Цель посадочной страницы в том, чтобы побудить клиента выполнить действие раньше, чем он может закрыть страницу, чтобы передумать. Важно чтобы формы собирали только действительно нужную для заказа информацию. Например, для совершения заказа могут быть важны телефон и электронная почта клиента, но совершенно не важны его ФИО.

Стили и размеры шрифтов

О да, это одна из самых частых ошибок, которую допускают блогеры. Случается, что простая замена стиля шрифта может существенно повысить конверсии. Есть мнение, что идеальный размер шрифта для мобильных страниц составляет 16px. Однако в зависимости от выбранного стиля шрифта, этот размер может оказаться слишком маленьким или большим. В любом случае, придется экспериментировать, чтобы добиться легкой читаемости ваших мобильных страниц. Замена цвета шрифта может так же повлиять на его сочетание с фоновым цветом страницы и улучшить читаемость. На видимость шрифта могут влиять расстояния между строк.

Расстояние между элементами

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

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

Учитесь цифровым навыкам вместе с Яндекс.
Курсы по маркетингу и рекламе, дизайн, менеджмент, аналитика, анализ данных. Учитесь с нуля или повышайте свои навыки. Освойте самые востребованные направления и начните карьеру в IT.
Рекламодатель: ООО «ЯНДЕКС» ИНН: 7736207543