Создать мобильный лендинг. Мобильный лендинг пейдж. Как он поможет Вам выиграть? Что мы получим

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

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

1 способ: адаптированная верстка . Принцип достаточно примитивный – смысл его в том, чтобы обеспечить корректное отображение страницы с любого устройства. Таким образом, вне зависимости от того, с какого устройства клиент зашел на Ваш сайт, он «растянется» соответствующим образом.

Так он выглядит на ноутбуке:

А так отображается на дисплее смартфона:

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

2 способ: адаптивная верстка и дизайн. Этот способ есть смысл применять, если пользователи, которые посещают Ваш сайт, делают это по большей части с мобильных устройств. Например, если Вы занимаетесь доставкой суши, процент пользователей, осуществляющих заказ с мобильника – более 50%. При разработке таких версий сайта используются такие технологии, как HTML 5, jQuery и т. д. Они позволяют обойтись без использования множества «оптимизирующих» плагинов, на деле перегружающих страницу.

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

Пример адаптивного дизайна landing page : сайт http://getdirections.es/

Так он выглядит на ноутбуке:

А так он приспособился к экрану смартфона:

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

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

Согласно eMarketer, пользователи смартфонов по всему миру в 2015 году составят 1,75 миллиарда и это только в 2015 году, это число катастрофически растет. Так как Вы являетесь владельцем бизнеса или маркетологом Вы просто не можете игнорировать мобильных пользователей, посещающих Ваш лендинг.

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

Разрабатывайте лендинги только адаптивные

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

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

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

Выводы:

— Следите за загрузкой своего продажника;

— Используйте хорошие оптимизированные изображения и видео;

Следующая публикация из книги — Тестирование лендинг пейдж.

Возможно Вам будет интересно:

Привет. В этом посте я расскажу, как сделать простой мобильный лендинг, используя лишь блокнот. На самом деле, 80% всех офферов в мобайле можно (и даже желательно) крутить БЕЗ использования лендингов. Однако все же в некоторых нишах (Sweepstakes, Mobile Adult Dating) он просто необходим.

Ссылка на демонстрацию (http://forum.cpa-intern.net/test/simple-mobile-lander/).Открывайте с мобильного устройства или сожмите браузер до размеров экрана мобильного.
Ссылка на исходники. (http://forum.cpa-intern.net/test/simple-mobile-lander/simple-mobile-lander.rar) Скачивайте исходник, открывайте файл в любом текстовом редакторе и начинаете разбираться, что к чему. Reverse Engeneering наше все:)

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

Как пример, для создания просто лендинга вы можете воспользоваться следующими сервисами:

Convrrt (http://www.mobileconvrrt.com/)(http://www.mobileconvrrt.com/)

Atmio ((http://atmio.com/)http://atmio.com/) (http://atmio.com/)

LeadPages ((http://www.leadpages.net/)http://www.leadpages.net/) (http://www.leadpages.net/)

Landr ((http://landr.co/)http://landr.co/)

Mobilize ((http://qrmobilize.com/)http://qrmobilize.com/) (http://qrmobilize.com/)

Instapage ((http://www.instapage.com/)http://www.instapage.com/) (http://www.instapage.com/)

LanderApp ((http://www.landerapp.com/)http://www.landerapp.com/) (http://www.landerapp.com/)
(http://forum.cpa-intern.net/test/simple-mobile-lander/)

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

Итак, первым делом смотрим в раздел

Самая главная строчка, которая и оптимизирует вашу страницу под экран мобильников:

Добавляйте её всегда, если хотите сделать оптимизированную страницу.

Следующий скрипт

var interval; var minutes = 04; var seconds = 43; window.onload = function() { countdown(‘countdown’); }
function countdown(element) { interval = setInterval(function() { var el = document.getElementById(element); if(seconds == 0) { if(minutes == 0) { el.innerHTML = «countdown’s over!»; clearInterval(interval); return; } else { minutes—; seconds = 60; } } if(minutes > 0) { var minute_text = minutes + (minutes > 1 ? ‘ minutes’ : ‘ minute’); } else { var minute_text = »; } var second_text = seconds > 1 ? ‘seconds’ : ‘second"; el.innerHTML = minute_text + ‘ ‘ + seconds + ‘ ‘ + second_text; seconds—; }, 1000); }

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

В вам нужно прописать заголовок страницы.

В содережатся все CSS-стили. Важно! Храните их именно внутри HTML кода, не выносите стили в отдельный документ — будете терять время на загрузке.

Я не буду объяснять каждый пункт CSS-стилей, все подробности про каждый элемент можете найти на htmlbook или в гугле. Если кратко — важно использовать только относительные величины — проценты для отступов/размеров и rem,em для шрифтов. Никаких pt или px!

rem — размер относительно базового размера шрифта. Он гораздо дружелюбнее к мобильным устройствами и ресайзу.

Где можно обойтись без изображений — обходитесь без изображений, старайтесь реализовать все через CSS (будь то кнопки, градиенты и т.д.) Красивые CSS кнопки можно сделать здесь (http://css3button.net/).

В находится основной код вашей страницы. Пробегусь по основным пунктам:

Следующий скрипт

» + lmonth + » «);document.write(date + «, » + year + «»);// End —>

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

Все изображения ОБЯЗАТЕЛЬНО оптимизируйте под веб и, по возможности, старайтесь хранить их на CDN серверах.

Поясню следующую строчку:

А именно data-role. Data-role — один из элементов jQuery Mobile, которой преобразует некоторые элементы, будь то чекбокс, кнопка, навигация и т.д. в нативный вид. Подробнее про каждый элемент можно прочитать на официальном сайте jQuery Mobile (http://jquerymobile.com/).

Для тестирования ленингов на разных девайсах я использую BrowserStack (http://www.browserstack.com/). Он платный, но есть Free-trial версия. В любом случае, своих денег он однозначно стоит. Готов ответить на любые вопросы!

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

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

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Landing page – это веб-инструмент маркетологов для увеличения прибыли компании. Прощающая страница имеет более высокие показатели конверсии, чем простая страница. Чтобы она была максимальной, посадочная страница должна вызывать доверие у пользователя, а также правильно отображаться на всех устройствах. Ниже мы выясним почему важно оптимизировать страницу под мобильные устройства.

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

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

Почему показатели мобильного трафика стремительно растут?

• Изобилие мобильных устройств на рынке
• Большое количество интернет-операторов
• Хорошее качество мобильного интернета
• Распространение wi-fi зон
• Появление мобильных версий известных браузеров
• Простота и удобство использования мобильных девайсов

Клиенты совершают переход на страницу в поиске нужной информации/товара/услуги, работая с телефонами, смартфонами, айпадами, планшетами. Мобильный трафик вашей landing page легко проследить. Для этого существуют специальные онлайн-инструменты (например, LiveInternet, Google analytics). Они совершают непрерывный сбор статистики посетителей лендинг пейдж, в том числе ведут сбор информации по трафику.

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

Зачем это нужно?

• Чтобы не потерять потребителей. 50% клиентов не возвращаются на целевую страницу, если у них был печальный опыт входа на эту лендинг пейдж.
• Чтобы все посетители интернета смогли полноценно изучить посадочную страницу. Она должна быть mobile-friendly. 91% мобильных соискателей конвертируются в покупателей.
• Предоставить клиенту возможность посетить лендинг пейдж с любого доступного устройства.

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

• Выбираем качественный хостинг. Обеспечиваем быстрый и постоянный доступ к целевой странице. Мобильный пользователь не будет ждать, пока загрузится страница, ему нужна информация сейчас.
• Редирект на мобильную версию. С возможностью вернуться к полному варианту.
• Специальная верстка страницы под мобильный трафик. Для правильного отображения лендинг пейдж на мобильных устройствах.
• Меню навигации (вверх - вниз)
• Вертикальная прокрутка (перелистывание)
• Удобный интерфейс и релевантная запросу информация
• Не перегружаем страницу. Отказываемся от флэш в пользу HTML, JQuerty, jpeg - графики.
• Сдержанный, но соответствующий общей концепции лендинг пейжд дизайн
• Контент располагаем в одну колонку, где “call to action” пишем в верхней части главной колонки. Если же призыв необходимо разместить внизу, то вверху страницы обязательно используем тизеры.
• Масштабируем. Приемлемый размер для правильного отображения на мобильных гаджетах - до 8 дюймов.
• Функция звонка по касанию. Клиенту легче нажать одну кнопку, чем набирать весь номер.
• Обеспечиваем кликабельность кнопок. Они должны быть такого размера, чтобы потребитель без труда совершил действие; располагаются на расстоянии друг от друга для функциональности.
• Создаем кнопки социальных сетей. Большинство мобильных посетителей используют свои устройства для посещения соц. сетей.
• Адаптируем текст (таблицы, маркеры, тезисы)
• Читабельность страницы. Возможность просканировать, а не читать.
• Заменяем ссылки на кликабельные кнопки
• Локализируем поиск. Для увеличения показателей ранжирования, используем запрос, релевантный по отношению к месторасположению посетителя.
• Датоориентируем. Мобильный трафик связан с событиями теперешнего и будущего времени.
• Улучшаем формы захвата, анкеты (мало полей для заполнения)
• Ориентируемся на вертикальное и горизонтальное расположение
• Тестим. Проверяем эмуляторами качество отображения лендинг пейдж на разных мобильных устройствах.

Стоит учитывать потребности мобильных пользователей целевой страницы. Они занимают почти половину всего трафика лэндингов и их количество растет.

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