После того, как вы сделали лендинг, стоит подумать о его мобильной версии. В Платформе LP страницы автоматически адаптируются под разные размеры экранов, но лучше проверить, как ваш сайт будет выглядеть на телефоне. Ещё лучше – специально поработать над мобильной страницей: настроить размер и отображение элементов, скрыть лишние секции.
Вот порядок действий, как изменить страницу, чтобы она хорошо выглядела на смартфоне и была эффективной.
Главное правило мобильного лендингаДумать о клиенте – главное правило мобильного лендинга (как и любого сайта). Представьте, в какой ситуации постетитель увидит ваш одностраничник:
Он откроет сайт на ходу, у него не будет времени долго его рассматривать.
У него будет конкретная цель: подписаться на рассылку, зарегистрироваться на мероприятие, оформить заказ.
У него может быть плохой интернет – сайт не загрузится.
Из этого правила следуют остальные четыре: меньше секций, меньше тяжелых фото, меньше текста и больше кнопка. Сосредоточимся на упрощении.
Как посмотреть, как выглядит ваш сайт на мобильном?
В редакторе в верхней панели есть режимы отображения. Выбирайте значок мобильного и смотрите, как ваш сайт выглядит на телефоне.
Если лендинг – это разговор с клиентом, то мобильный лендинг – это максимально короткий разговор. Не письмо, а сообщение в мессенджере. Поэтому подумайте, какие секции можно не показывать на мобильных:
Точно ли нужно описание всех преимуществ работы с вами?
Стоит ли оставлять раздел с кейсами и примерами работ?
Нужны ли отзывы довольных клиентов?
Просматривая страницу на мобильном, посетитель скорее ищет что-то конкретное, чем бесцельно серфит в интернете. Он больше сосредоточен на цели. Помогите ему достигнуть этой цели быстрее – сделайте лендинг максимально коротким.
Как скрыть лишние секции в мобильной версии лендинга?
В настройках секции во вкладке со значком мобильного телефона поставьте галочку «Скрывать на телефонах».
Если после ревизии секций, у вас осталось много картинок и видео, подумайте еще раз – не скрыть ли? Большие изображения и особенно видео влияют на скорость загрузки, а она при просмотре на мобильном может быть невысокой.
Какая скорость загрузки считается нормой?
9-13 секунд – это максимум, который клиент готов ждать. (Исследование seochat.com).
Правило №3. Меньше текстаЭкран мобильного маленький, а туда нужно поместить столько же текста, сколько на большой. Придется уменьшить шрифт или сократить текст.
Лучше поступить так:
Сначала уменьшить размер шрифта, посмотреть, читается ли текст с маленького экрана.
Если текст всё ещё занимает ли слишком много места – сократите: примените к нему правила инфостиля или удалите части с дополнительной информацией.
Как настроить шрифт для мобильных?
Заходите в настройки текста, выбирайте вкладку с иконкой мобильного телефона и меняйте шрифт.
Вы ведете посетителя от первого экрана к целевому действию, и это действие должно быть одно. Правило «одна страница - одно действие» действует для всех лендингов, а для мобильных ещё строже. Попасть пальцем на кнопку на экране телефона сложнее, чем мышкой на экране компьютера. Учитывайте это и делайте кнопку больше.
Как изменить кнопку для мобильных?
В настройках кнопки зайдите во вкладку с иконкой мобильного телефона и задайте положение «На всю ширину».
1) Открываем отображение страницы на мобильном
(верхняя панель редактора – значок мобильного телефона).
2) Просматриваем страницу в новом адаптированном виде.
3) Оцениваем каждую секцию: можно ли её скрыть без потери смысла? Скрываем лишнее (настройки секции – значок мобильного телефона – галочка «Скрывать на телефонах»).
4) Особенно оцениваем секции с картинками и видео. По возможности скрываем.
5) Смотрим, как адаптировался текст. Если шрифт слишком большой, делаем меньше (настройки текста – значок мобильного телефона – размер шрифта). Если текста всё ещё много – удаляем лишние предложения и абзацы.
6) Проверяем, как отображается форма и кнопка, настраиавем.
7) Если необходимо, задаем особое положение любых элементов на странице, задаем отступы.
8) Публикуем лендинг и открываем его на мобильном телефоне. Проверяем:
Если всё хорошо, ваш лендинг готов к мобильным посетителям. А их, говорят , больше половины! Так что дерзайте)
Привет. В этом посте я расскажу, как сделать простой мобильный лендинг, используя лишь блокнот. На самом деле, 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 версия. В любом случае, своих денег он однозначно стоит. Готов ответить на любые вопросы!
65% цифрового рынка - мобильные пользователи. 50% хватаются за смартфоны сразу после пробуждения. Необходимость мобильных лендингов не подлежит обсуждению.
В этой статье - 11 советов как улучшить пользовательский опыт владельцев девайсов.
Уменьшите время загрузкиВремя - деньги, конверсия и продажи. 74% мобильных пользователей покидают сайт, если он загружается дольше 5 секунд.
В среднем они в сети до полутора часов в день. Их интересуют сайты, которые загружаются быстро. Все остальное - в топку.
Данные о скорости загрузки страниц можно получить в Google Analytics, отчеты «Поведение» - «Время загрузки страниц»:
Конкретика о страницах, которые грузятся долго и нуждаются в оптимизации:
В интернете много инструментов, которые помогут оценить время загрузки и скорость: Google PageSpeed Insights, Mobitest и другие.
Что еще сделать, чтобы ускориться:
В GA есть данные, какими девайсами пользуется целевая аудитория. Протестируйте разные варианты лендинга по разрешению и внешнему виду.
Ищите отчеты в разделе «Аудитория» - «Мобильные пользователи»:
Здесь конкретные марки устройств:
И данные по разрешению экрана:
Теперь вы знаете, какое разрешение тестировать в первую очередь, чтобы улучшить пользовательский опыт.
Добавьте на страницу корзинуПосетитель, который оставил что-то в корзине, чаще возвращается для завершения покупки. Прикрутите кнопку «Купить позже» или «Добавить в список желаний».
Так вы убьете двух зайцев: с помощью cookies узнаете о поведении посетителей и получите статистику, какие товары чаще оставляют в корзинах.
Расположите главные кнопки правильноКак мы держим гаджеты и какие пальцы используем для навигации?
В 49% случаев смартфон лежит в левой руке, а большой палец правой перемещается по экрану.
А так с годами менялось расположение большого пальца на айфонах:
Учитывайте это при планировании кнопки призыва к действию.
Прикрутите клавиатуру к формамНужно заполнить форму? Предложите пользователю клавиатуру:
Помогут вставки в код:
Такой шаг ускорит конверсию.
Еще момент. Специалисты советуют максимально сжимать пространство между полями и убирать лишнее. Не заставляйте пользователей листать, чтобы добраться до следующего поля.
Вариант слева короче, потому и предпочтительнее.
Сделайте выгодное предложениеИсторически сложилось так: потребители выбирают товар с телефона, а завершают покупку с компьютера. Чтобы уменьшить трения и повысить продажи с мобильного лендинга, сделайте выгодное предложение.
Неплохо сыграть на страхе упустить выгоду (FOMO) - предложите купон на скидку с ограниченным сроком действия, например, вот так:
«Подпишитесь на мобильные уведомления и получите скидку 20%. Отправьте SMS с текстом Save01 на короткий номер и получите скидку».
Кстати, можно применить мобильный поп-ап. Главное, чтобы предложения (скидка, акция) были стоящими.
«Каждый день скидки до 70%! Подпишитесь и будьте в курсе наших акций».
Продумайте дизайн мобильного лендингаМало адаптировать лендинг под мобильники. Пользователи хотят уникальный опыт, а не просто уменьшенную версию десктопного сайта.
На скриншоте - оптимизированный и не оптимизированный под мобайл сайт:
С каким вариантом проще и приятнее работать? Ответ очевиден.
Выделите призыв к действиюНапомним: на странице только один призыв к действию, чтобы внимание пользователей не рассеивалось, и они знали, что делать дальше.
Чтобы «приковать» их внимание к кнопке CTA (призыва к действию), используйте контрастный цвет. Не знаете, какой выбрать - обратитесь к колесу цветов:
Найдите основной цвет лендинга. Напротив контрастный цвет, максимально эффективный.
На что еще обратить внимание?
Сделайте большую кнопку, чтобы пользователи не промахивались (а это раздражает).
Закрепите хедер и футерОсобенно, если лендинг длинный и нужно скролить вниз. Исследование журнала Smashing Magazine показало, что «липкие» хедер и футер повышают скорость навигации на 22%. Как это выглядит:
На изображении - навигация при закрепленном хедере. Главное - не перегружайте его элементами и опциями.
Поместите предложение над сгибомПользователям некогда скролить в поисках предложения, разместите его на первом экране, над сгибом. В примере ниже - конверсия увеличилась на 201% после того, как оффер перенесли на первый экран:
Поместите текст и изображения в одну колонкуПосмотрите на два экрана:
На левом - простыня с картинками. Много элементов, внимание рассеивается, непонятно, что делать дальше. Так делать не стоит. На правом легко найти нужное.
Экспериментируйте, улучшайте пользовательский опыт. И не забывайте тестировать нововведения.
Высоких вам конверсий!
Мобильный Лендинг Пейдж представляет собой автономную интернет-страницу, с помощью которой клиент попадает в один клик на продающую страницу.
Поэтому если Вы не занимаетесь , то Вы теряете половину своей .
Чтобы создать мобильный Лендинг Пейдж, лучше обратиться за помощью в компании по SEO-продвижению.
Так как самостоятельно это сделать будет затруднительно.
Хотя существуют различного рода интернет-ресурсы, которые предлагают свои шаблоны для мобильной версии сайта, нужно отметить, что они предлагают совершенно разную наполняемость.
И необходимо точно знать свое планирование, чтобы воспользоваться именно тем, чем нужно.
Основные типы целевых страницПеред тем, как создать мобильный landing page для использования в интернет-маркетинге, необходимо обозначить какой именно тип страницы Вы будете использовать.
Итак, всего различают 4 вида страниц - это:
1. Микросайт;
2. Главный Сайт;
3. Автономная целевая страница;
4. Страница сегментации.
К микросайту относится такой сайт, на котором расположена информация о различных рекламируемых услугах, а также товаре.
Обычно такого рода сайты содержат минимум информации, в основном это одно изображение товара или, к примеру, видеоролик.
Главный сайт более структурирован и включает уже большое количество страниц и информации.
Но он обладает низкой целевой аудиторией, так как она малоэффективна.
Одна из главных задач заключается в том, чтобы побудить к действию покупателя и способствовать продвижению бизнеса в интернете.
Итак, страница сегментации направлена на повышение конверсии.
Инструкция «как создать мобильный Лендинг Пейдж»Так как существует множество различных сервисов, инструкция может отличаться.
Поэтому мы укажем на основные действия, которые необходимо предпринимать:
Как видите, создать мобильный Лендинг Пейдж несложно. Но, чтобы успешно продвигать Ваш бизнес и с помощью SEO и не терять аудиторию, лучше обратиться за помощью к профессионалам.
И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.
Плюсы данного метода: Можно существенно облегчить дизайн сайта для мобильных устройств, что хорошо скажется на его скорости.
Минусы: нужно создавать поддомен и настраивать его, писать для него отдельный шаблон и скрипт, определяющий, с какого девайса зашел пользователь, а это дольше, чем создание адаптивного дизайна.
Что мы получим?
Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:
Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google .
Еще по теме:
Есть вопросы?
Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.