Мобильная оптимизация сайтов (мобильные лендинги) давно стала обыденностью и неотъемлемым атрибутом стратегии цифрового присутствия. И хотя преимущества мобильных сайтов очевидны, до сих пор находятся скептики, которые игнорируют эту возможность.
Давайте обратимся к статистике, чтобы еще раз показать, почему не стоит отказываться от мобильной оптимизации:
- более половины интернет-трафика исходит от мобильных устройств;
- если анализировать время, ежедневно затрачиваемое средним человеком на просмотр СМИ, то 69% этого времени уходит на просмотр контента на мобильном телефоне;
- 89% потребителей заявили, что будут рекомендовать компанию, если у нее привлекательный и удобный мобильный сайт;
- 71% глобального трафика в интернет-магазинах исходит от мобильных телефонов и планшетов;
- почти половина всех онлайн-заказов делается с мобильных устройств.
Мобильный лендинг – это лендинг, адаптированный под мобильные устройства. Здесь мы описывали виды и преимущества мобильных сайтов в целом, а в этой статье подробнее остановимся на мобильных лендингах.
Зачем лендинг специально адаптировать под малый экран? Все дело в том, что алгоритмы взаимодействия с ПК и мобильным телефоном разительно отличаются.
За стационарным компьютером мы расслаблены, никуда не спешим, можем себе позволить читать объемные тексты, даже без картинок. Страницы сайтов без труда пролистываются, мы можем открывать многоярусные меню, читать и закрыть всплывающие окна и пр. Также, учитывая высокую пропускную способность домашнего интернета, мы можем просматривать видео в HD-качестве, открывать самые разные форматы файлов и не переживать, что сайт зависнет.
Совсем другая ситуация с мобильными устройствами. Как правило, мы открываем тот или иной сайт на телефоне с конкретной и очень срочной целью. Например, найти ближайшую аптеку, узнать расписание общественного транспорта или время работы магазина. Счет идет на секунды, и если информацию не удается получить из-за того, что мобильный лендинг долго загружается или он не адаптирован под небольшой экран, это означает потерю клиента.
Хотя по статистике на мобильные лендинги по сравнению с ПК приходится меньше конверсий и меньшая средняя стоимость заказа, это вовсе не означает, что мобильный лендинг неэффективен. Это говорит лишь о том, что маркетологи не уделяют достаточно внимания оптимизации и гармоничной структуре мобильного лендинга, чтобы улучшить показатели продаж.
Мобильный лендинг может быть создан на основе десктопного сайта. В этом случае вы идете по пути минимизации и исключения контента, который не подходит под малый экран. Такой мобильный лендинг будет, по сути, блеклой копией полноразмерного сайта.
Другой способ – создать мобильный лендинг с нуля отдельно от десктопного лендинга. В этом случае вы изначально продумываете, какие элементы добавить на мобильный лендинг, поэтому его структура и наполнение смотрятся органичнее.
Итак, каким правилам должен следовать успешный мобильный лендинг?
Скорость загрузки
Скорость загрузки является определяющим фактором успеха мобильного лендинга. Никто не будет ждать даже 5 секунд, пока ваша страница загрузится.
Не используйте технологию Flash и плагины, которые могут быть несовместимы с устройствами пользователей. Загружайте изображения в формате .jpg и ни в коем случае не в .png. Оптимизируйте страницы так, чтобы свести к минимуму количество HTTP-запросов.
Не все посетители открывают ваш мобильный лендинг, используя одинаковый тип соединения. Это может быть Wi-Fi, 4G LTE, 3G. Ваша страница должна быстро загружаться и при соединениях с минимальной пропускной способностью.
Расположение блоков и навигация
При создании лендинга представьте себя на месте пользователя, взгляните на страницу его глазами. Вы бы стали упрямо прокручивать сайт несколько минут в поисках нужной информации? Вряд ли. Любая важная информация должна находиться на расстоянии одного клика или движения пальцем.
Поскольку экран мобильного устройства имеет вертикальную ориентацию, мобильный лендинг должен прокручиваться сверху вниз без горизонтальных переходов. Откажитесь от сложных многоярусных меню или надоедливых всплывающих окон.
В идеале панель с главными иконками должна быть закреплена вверху экрана, чтобы при прокрутке вниз пользователь не терял из вида инструменты навигации и всегда мог вернуться назад (так называемый «липкий хедер»). Еще неплохая идея разместить в такой панели кнопку призыва к действию, чтобы пользователь мог нажать на нее в любой момент, когда будет готов к конверсии.
Что касается меню, для мобильных лендингов отлично подходит гамбургер-меню (иконка с тремя горизонтальными полосами), которая занимает мало места и интуитивно понятна всем независимо от региона или образования.
При наполнении страницы контентом не используйте каждый пиксель свободного пространства: скученный текст вперемешку с изображениями сложно воспринимать на ходу, а ведь мобильными телефонами практически всегда пользуются вдали от рабочего стола.
Высокий контраст
Поскольку мобильными устройствами пользуются чаще всего вне дома, информация на них должна быть видимой в любых погодных условиях, особенно в яркую солнечную погоду. Для этого при оформлении мобильного лендинга используйте контрастные цвета.
Заголовки
Заголовки должны быть предельно короткими – не более 4-5 слов. Краткость – сестра таланта. У вас есть доля секунды, чтобы зацепить пользователя, поэтому каждое слово должно иметь свой вес и ценность.
Написали текст для лендинга? Перечитайте его еще раз и вычеркните все ненужные слова. Да, даже те витиеватые описания продуктов, которыми вы собирались привлечь клиентов.
Кстати, некоторые и вовсе обходятся практически без слов на лендингах и делают ставку на изображение.
CTA-кнопки
Призывы к действию должны быть однозначными и убедительными. В идеале cta-кнопка должна быть первым, что видит пользователь при попадании на мобильный лендинг. Также можно дублировать ее несколько раз на всем протяжении страницы.
Формы регистрации
Если основной целью мобильного лендинга является лидогенерация, это значит, что главным элементом будет форма регистрации (лид-форма). На мобильных лендингах не рекомендуется напрягать пользователей заполнением длинной формы с большим количеством полей.
Сокращайте по максимуму содержимое и не спрашивайте информацию, ради которой придется искать и открывать документы. Вы же помните, что мобильными телефонами, как правило, пользуются вдали от рабочего места и дома? В идеале форма должна включить лишь имя и email. Чем дольше пользователь заполняет форму, тем выше шанс, что в конечном итоге он закроет сайт и уйдет к конкуренту.
Номера телефонов
В случае если вы хотите, чтобы потенциальный клиент позвонил вам, необходимо добавить соответствующую интерактивную иконку или кликабельный номер телефона. Нет ничего хуже ситуации, когда, чтобы позвонить, нужно копировать номер телефона вручную. Еще некоторые любят добавлять иконки обратного звонка, которые очень популярны.
Оставьте вокруг кликабельного телефонного номера достаточно пространства, чтобы пользователь не ошибся при нажатии.
A/B тестирование
Не забывайте запускать сплит-тесты в процессе разработки мобильного лендинга. С их помощью можно узнать, например, какой цвет cta-кнопки получает больше отклика или какая формулировка заголовка дает больше конверсий.
Мобильные лендинги – какие сервисы выбрать?
В этой статье мы в деталях рассказываем о преимуществах и недостатках различных конструкторов лендингов (в том числе мобильных лендингов). Мы не будем дублировать информацию, но еще раз отметим возможности GetResponse.
У GetResponse все шаблоны лендингов имеют адаптивный дизайн, т.е. будут отлично выглядеть на мобильных устройствах. Штатные дизайнеры и разработчики продумали за вас все мелочи, поэтому вы можете не беспокоиться: мобильный лендинг GetResponse будет иметь хорошие позиции в поисковой выдаче и принесет немало конверсий.
Как создать мобильный дизайн лендинга в GetResponse? Для этого, находясь в визуальном редакторе, необходимо нажать на иконку мобильного телефона в верхней панели рабочего пространства. Система предупреждает, что это не режим мобильного предпросмотра, а именно отдельный редактор для редактирования мобильной версии лендинга.
Если у вас пожизненно бесплатный тариф Free, то вы можете создать 1 лендинг и подключить к нему персональный домен без дополнительных оплат. Помимо этого в пакете вы получаете базовые маркетинговые инструменты, а также конструктор сайтов.
Давайте теперь отвлечемся от теории и взглянем на мобильные лендинги известных компаний. Уж кто-кто, а они должны знать толк в мобильной оптимизации!
Мобильный лендинг – примеры
Aviasales
В верхней части страницы лаконичные иконки навигации, по центру экрана главная форма поиска авиабилетов и ярко-красная cta-кнопка «Найти билеты». Ничего лишнего, без отвлекающих подсказок и окон.
Далее мы видим УТП – почему стоит выбрать именно Aviasales (на случай если мы имеем дело с сомневающимся скептиком, которого нужно убедить), а также ответы на самые популярные вопросы и работа со страхами и опасениями клиентов («Меня не обманут?»).
Для тех, кто выбрал Aviasales, но не выбрал маршрут, компания дает подсказки популярных направлений.
Как видим, наполнение лендинга продумано до мелочей.
Airbnb
Лендинг сайта по поиску жилья суперминималистичный. Нет даже липкого хедера с элементами навигации. Страница начинается со строки поиска – для тех, что определился с местом.
Если же вы не знаете, куда хотите поехать, есть кнопка гибкого поиска.
Компания задает наводящие вопросы («Куда едете?», «Не знаете, куда поехать? Отлично») и имитирует диалог с живым человеком, а, как мы знаем, персональный подход всего приносит хорошие результаты.
Здесь вы не найдете кричащих cta-кнопок, атмосфера на лендинге спокойная. Никто не бегает за вами, чтобы впарить вам услугу. Репутация компании делает все за нее – клиенты сами приходят, а ей остается лишь максимально укоротить путь к конверсии с помощью правильных cta-кнопок.
Хорошим дополнением являются фотографии интересных мест, которые напоминают нам, что мы путешествуем в первую очередь, чтобы получить новые ощущения.
Duolingo
Лендинг оформлен в фирменных бело-синих цветах, присутствует и всем известный символ компании – зеленый совенок.
Дизайн предельно прост – большой, слегка округлый шрифт, контрастные цвета, много пустого пространства.
В самом верху яркий заголовок-призыв, далее две cta-кнопки – для первых посетителей и для зарегистрировавшихся пользователей.
Если же посетитель не нажал ни на одну из кнопок и продолжает прокручивать страницу вниз с целью узнать больше о компании, то мы встречаем перечень преимуществ сервиса (почему стоит выбрать Duolingo), ссылки на фирменное приложение, тест для проверки английского языка и пр.
Футер довольно подробный и содержит линки на все разделы сайта. Если вы чего-то не нашли, то загляните в футер.
Все три лендинга имеют строго вертикальную ориентацию, а также лишены раздражающих всплывающих окон, сложной анимации, способной затормозить загрузку страницы.
Взаимодействие с этими лендингами предельно простое: вам точно хватит пальца одной руки, чтобы ознакомиться с сайтом целиком. А это очень ценное качество лендинга.