Лендинг для мобильных устройств - Антикризисные новости
S-p.su

Антикризисные новости
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Мобильный лендинг

Разделы

Последние годы все быстрее и быстрее развивается индустрия мобильного интернета, и на данный момент создание мобильной версии для своего лендинг пейджа уже больше необходимость, нежели роскошь. На такой трафик на сегодняшний день приходится около 10-15% в обычных нишах, и более 30-40% в нишах о красоте, моде, здоровье.

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

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

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

Как сделать мобильную версию лендинга

На каком тарифе доступна мобильная версия?

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

Начиная с тарифа VIP у вас будет подключена мобильная вёрстка, которая будет автоматически подгоняться под любой размер устройства.

Если вы впервые зашли на конструктор мобильного лендинга, то пойдём по порядку.

Чтобы создать мобильный лендинг нужно:

  1. Зарегистрироваться на конструкторе Tobiz;
  2. Создать лендинг пейдж на нашем конструкторе сайтов самостоятельно или с помощью готовых шаблонов лендингов. лендингов, выбрав любой понравившйся вам из списка предложенных;
  3. После того, как вы отредактировали шаблон и подстроили сайт под себя, обязательно подключите домен к лендинг пейдж, чтобы ваш сайт начал высвечиваться в поиске и начал свою работу;
  4. Затем перейдите в тарифы и подключите тариф VIP.

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

Так как, если вы наймёте программиста для разработки мобильной версии лендинга, вы потратите минимум 15-20 тыс. руб дополнительно, а это ещё нужно будет заплатить за создание самого лендинг пейджа и его техническую поддержку (плюс около 5 тысяч ежемесячно).

Варианты мобильного лендинга

Если вы будете следовать нашей инструкции, то в итоге вы получите 3 варианта мобильной адаптации лендинг пейдж.

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

Мобильный лендинг. 2 способа сделать мобильный лендинг.

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

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

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

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

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

Читать еще:  Сколько стоит рерайт текста 1000 знаков

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

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

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

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

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

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

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

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

Оптимизация лендинг пейдж под мобильные устройства.

И так, следующая девятнадцатая глава из пособия по созданию Landing Page. Начало, первая часть из шести глав книги «Посадочная страница с высокой конверсией» тут. Перед изучением всего пособия предлагаем посмотреть — что такое лендинг простыми словами.

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

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

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

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

Читать еще:  Сколько зарабатывает переводчик фрилансер

Рекомендуем:

Если Вы только запустили свой проект, то для привлечения трафика рекомендуем использовать контекстную рекламу в поисковой системе. Вам в помощь мануал по быстрой настройке Яндекс Директ, а это по настройке рекламной кампании.

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

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

Совет:

Настраивая рекламу в Директе, советуем использовать быстрые ссылки в объявлении и при необходимости пользоваться операторами Яндекс Директ.

Составляя продажник, стройте по двум универсальным моделям PMPHS лендинг по модели боль. AIDA лендинг, это модель действия. Также рекомендуем к просмотру лендинг пейдж первый экран.

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

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

Выводы:

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

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

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

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

Понравилась статья? Помоги проекту — Поделитесь с другими ссылкой:

Мобильный лендинг: 11 советов для улучшения пользовательского опыта

65% цифрового рынка – мобильные пользователи. 50% хватаются за смартфоны сразу после пробуждения. Необходимость мобильных лендингов не подлежит обсуждению.

В этой статье – 11 советов как улучшить пользовательский опыт владельцев девайсов.

Уменьшите время загрузки

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

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

Данные о скорости загрузки страниц можно получить в Google Analytics, отчеты «Поведение» – «Время загрузки страниц»:

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

В интернете много инструментов, которые помогут оценить время загрузки и скорость: Google PageSpeed Insights, Mobitest и другие.

Что еще сделать, чтобы ускориться:

  • Почистить код;
  • Минимизировать использование сторонних скриптов;
  • Использовать сжатие GZIP;
  • Убрать редиректы;
  • Уменьшить изображения и использовать для загрузки сеть доставки контента (сервера, которые ускоряют доставку контента пользователям).

Изучите девайсы пользователей

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

Ищите отчеты в разделе «Аудитория» – «Мобильные пользователи»:

Здесь конкретные марки устройств:

И данные по разрешению экрана:

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

Добавьте на страницу корзину

Посетитель, который оставил что-то в корзине, чаще возвращается для завершения покупки. Прикрутите кнопку «Купить позже» или «Добавить в список желаний».

Читать еще:  Как сделать рерайт

Так вы убьете двух зайцев: с помощью cookies узнаете о поведении посетителей и получите статистику, какие товары чаще оставляют в корзинах.

Расположите главные кнопки правильно

Как мы держим гаджеты и какие пальцы используем для навигации?

В 49% случаев смартфон лежит в левой руке, а большой палец правой перемещается по экрану.

А так с годами менялось расположение большого пальца на айфонах:

Учитывайте это при планировании кнопки призыва к действию.

Прикрутите клавиатуру к формам

Нужно заполнить форму? Предложите пользователю клавиатуру:

Помогут вставки в код:

Такой шаг ускорит конверсию.

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

Вариант слева короче, потому и предпочтительнее.

Сделайте выгодное предложение

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

Неплохо сыграть на страхе упустить выгоду (FOMO) – предложите купон на скидку с ограниченным сроком действия, например, вот так:

«Подпишитесь на мобильные уведомления и получите скидку 20%. Отправьте SMS с текстом Save01 на короткий номер и получите скидку».

Кстати, можно применить мобильный поп-ап. Главное, чтобы предложения (скидка, акция) были стоящими.

«Каждый день скидки до 70%! Подпишитесь и будьте в курсе наших акций».

Продумайте дизайн мобильного лендинга

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

На скриншоте – оптимизированный и не оптимизированный под мобайл сайт:

С каким вариантом проще и приятнее работать? Ответ очевиден.

Выделите призыв к действию

Напомним: на странице только один призыв к действию, чтобы внимание пользователей не рассеивалось, и они знали, что делать дальше.

Чтобы «приковать» их внимание к кнопке CTA (призыва к действию), используйте контрастный цвет. Не знаете, какой выбрать – обратитесь к колесу цветов:

Найдите основной цвет лендинга. Напротив контрастный цвет, максимально эффективный.

На что еще обратить внимание?

  • Текст на кнопке. Используйте простой и понятный язык. Не «Загрузите», а «Получите бесплатную книгу». Не «Отправить», а «Попробовать бесплатный тариф». Не «Купить сейчас», а «Добавить в корзину со скидкой 25%».

  • Расположение кнопки. Не бойтесь опускать ее ниже сгиба, но не помещайте туда, где и так много элементов.
  • Размер кнопки. Apple рекомендует 44х44 пикселей, на основании юзабилити и среднего размера пальца. В 57 пикселей прекрасно вписывается указательный палец:

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

Закрепите хедер и футер

Особенно, если лендинг длинный и нужно скролить вниз. Исследование журнала Smashing Magazine показало, что «липкие» хедер и футер повышают скорость навигации на 22%. Как это выглядит:

На изображении – навигация при закрепленном хедере. Главное – не перегружайте его элементами и опциями.

Поместите предложение над сгибом

Пользователям некогда скролить в поисках предложения, разместите его на первом экране, над сгибом. В примере ниже – конверсия увеличилась на 201% после того, как оффер перенесли на первый экран:

Поместите текст и изображения в одну колонку

Посмотрите на два экрана:

На левом – простыня с картинками. Много элементов, внимание рассеивается, непонятно, что делать дальше. Так делать не стоит. На правом легко найти нужное.

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector