Вредоносное ПО (malware) - это назойливые или опасные программы,...
После того, как вы сделали лендинг, стоит подумать о его мобильной версии. В Платформе 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 и другие.
Что еще сделать, чтобы ускориться:
- Почистить код;
- Минимизировать использование сторонних скриптов;
- Использовать сжатие GZIP;
- Убрать редиректы;
- Уменьшить изображения и использовать для загрузки сеть доставки контента (сервера, которые ускоряют доставку контента пользователям).
В GA есть данные, какими девайсами пользуется целевая аудитория. Протестируйте разные варианты лендинга по разрешению и внешнему виду.
Ищите отчеты в разделе «Аудитория» - «Мобильные пользователи»:
Здесь конкретные марки устройств:
И данные по разрешению экрана:
Теперь вы знаете, какое разрешение тестировать в первую очередь, чтобы улучшить пользовательский опыт.
Добавьте на страницу корзинуПосетитель, который оставил что-то в корзине, чаще возвращается для завершения покупки. Прикрутите кнопку «Купить позже» или «Добавить в список желаний».
Так вы убьете двух зайцев: с помощью cookies узнаете о поведении посетителей и получите статистику, какие товары чаще оставляют в корзинах.
Расположите главные кнопки правильноКак мы держим гаджеты и какие пальцы используем для навигации?
В 49% случаев смартфон лежит в левой руке, а большой палец правой перемещается по экрану.
А так с годами менялось расположение большого пальца на айфонах:
Учитывайте это при планировании кнопки призыва к действию.
Прикрутите клавиатуру к формамНужно заполнить форму? Предложите пользователю клавиатуру:
Помогут вставки в код:
Такой шаг ускорит конверсию.
Еще момент. Специалисты советуют максимально сжимать пространство между полями и убирать лишнее. Не заставляйте пользователей листать, чтобы добраться до следующего поля.
Вариант слева короче, потому и предпочтительнее.
Сделайте выгодное предложениеИсторически сложилось так: потребители выбирают товар с телефона, а завершают покупку с компьютера. Чтобы уменьшить трения и повысить продажи с мобильного лендинга, сделайте выгодное предложение.
Неплохо сыграть на страхе упустить выгоду (FOMO) - предложите купон на скидку с ограниченным сроком действия, например, вот так:
«Подпишитесь на мобильные уведомления и получите скидку 20%. Отправьте SMS с текстом Save01 на короткий номер и получите скидку».
Кстати, можно применить мобильный поп-ап. Главное, чтобы предложения (скидка, акция) были стоящими.
«Каждый день скидки до 70%! Подпишитесь и будьте в курсе наших акций».
Продумайте дизайн мобильного лендингаМало адаптировать лендинг под мобильники. Пользователи хотят уникальный опыт, а не просто уменьшенную версию десктопного сайта.
На скриншоте - оптимизированный и не оптимизированный под мобайл сайт:
С каким вариантом проще и приятнее работать? Ответ очевиден.
Выделите призыв к действиюНапомним: на странице только один призыв к действию, чтобы внимание пользователей не рассеивалось, и они знали, что делать дальше.
Чтобы «приковать» их внимание к кнопке CTA (призыва к действию), используйте контрастный цвет. Не знаете, какой выбрать - обратитесь к колесу цветов:
Найдите основной цвет лендинга. Напротив контрастный цвет, максимально эффективный.
На что еще обратить внимание?
- Текст на кнопке. Используйте простой и понятный язык. Не «Загрузите», а «Получите бесплатную книгу». Не «Отправить», а «Попробовать бесплатный тариф». Не «Купить сейчас», а «Добавить в корзину со скидкой 25%».
- Расположение кнопки. Не бойтесь опускать ее ниже сгиба, но не помещайте туда, где и так много элементов.
- Размер кнопки. Apple рекомендует 44х44 пикселей, на основании юзабилити и среднего размера пальца. В 57 пикселей прекрасно вписывается указательный палец:
Сделайте большую кнопку, чтобы пользователи не промахивались (а это раздражает).
Закрепите хедер и футерОсобенно, если лендинг длинный и нужно скролить вниз. Исследование журнала Smashing Magazine показало, что «липкие» хедер и футер повышают скорость навигации на 22%. Как это выглядит:
На изображении - навигация при закрепленном хедере. Главное - не перегружайте его элементами и опциями.
Поместите предложение над сгибомПользователям некогда скролить в поисках предложения, разместите его на первом экране, над сгибом. В примере ниже - конверсия увеличилась на 201% после того, как оффер перенесли на первый экран:
Посмотрите на два экрана:
На левом - простыня с картинками. Много элементов, внимание рассеивается, непонятно, что делать дальше. Так делать не стоит. На правом легко найти нужное.
Экспериментируйте, улучшайте пользовательский опыт. И не забывайте тестировать нововведения.
Высоких вам конверсий!
Мобильный Лендинг Пейдж представляет собой автономную интернет-страницу, с помощью которой клиент попадает в один клик на продающую страницу.
Поэтому если Вы не занимаетесь , то Вы теряете половину своей .
Чтобы создать мобильный Лендинг Пейдж, лучше обратиться за помощью в компании по SEO-продвижению.
Так как самостоятельно это сделать будет затруднительно.
Хотя существуют различного рода интернет-ресурсы, которые предлагают свои шаблоны для мобильной версии сайта, нужно отметить, что они предлагают совершенно разную наполняемость.
И необходимо точно знать свое планирование, чтобы воспользоваться именно тем, чем нужно.
Основные типы целевых страниц
Перед тем, как создать мобильный landing page для использования в интернет-маркетинге, необходимо обозначить какой именно тип страницы Вы будете использовать.
Итак, всего различают 4 вида страниц - это:
1. Микросайт;
2. Главный Сайт;
3. Автономная целевая страница;
4. Страница сегментации.
К микросайту относится такой сайт, на котором расположена информация о различных рекламируемых услугах, а также товаре.
Обычно такого рода сайты содержат минимум информации, в основном это одно изображение товара или, к примеру, видеоролик.
Главный сайт более структурирован и включает уже большое количество страниц и информации.
Но он обладает низкой целевой аудиторией, так как она малоэффективна.
Одна из главных задач заключается в том, чтобы побудить к действию покупателя и способствовать продвижению бизнеса в интернете.
Итак, страница сегментации направлена на повышение конверсии.
Инструкция «как создать мобильный Лендинг Пейдж»Так как существует множество различных сервисов, инструкция может отличаться.
Поэтому мы укажем на основные действия, которые необходимо предпринимать:
- Во-первых, необходимо адаптировать верстку. Этот принцип достаточно доступный, и именно он обеспечивает конкретное изображение страницы с любого устройства. В итоге, уже будет неважно с какой системы клиент зашел на Ваш сайт. Потому что он все ровно перейдет на обозначенную вами страницу. Если это мобильная версия сайта, то она должна включать как можно больше информации. Где выгодно заказать лендинг пейдж - узнайте по
- Во-вторых, подготовьте качественный дизайн. Если Ваш сервис основывается на доставку еды, то необходимо разработать правильный и лаконичный мобильный дизайн. Существует правило, чем меньше «экран монитора», тем больше красок необходимо поместить. Очень часто для того, чтобы создать мобильный landing page, используют адаптивный дизайн. Потому что он позволяет открыть страницы вне зависимости от того, с какого устройства Вы их посещаете.
Как видите, создать мобильный Лендинг Пейдж несложно. Но, чтобы успешно продвигать Ваш бизнес и с помощью SEO и не терять аудиторию, лучше обратиться за помощью к профессионалам.
Дата публикации: 05-07-2016 1523
Последние годы все быстрее и быстрее развивается индустрия мобильного интернета, и на данный момент создание мобильной версии для своего лендинг пейджа уже больше необходимость, нежели роскошь. На такой трафик на сегодняшний день приходится около 10-15% в обычных нишах, и более 30-40% в нишах о красоте, моде, здоровье.
Это неудивительно, всё больше людей для своих покупок использует мобильный телефон, и для сохранения и даже увеличения количества покупателей, следует создать мобильную версию сайта. Учитывая это, многие разработчики начали создавать мобильные версии сайтов и компании, которые не содержат в штате программистов, обращаться в таким специалистам, чтобы настроить мобильную вёрстку.
Поэтому если вы хотите увеличить конверсию вашего лендинга и повысить трафик, советуем вам создать мобильную версию. На нашем конструкторе вы можете настроить это самостоятельно.
Инструкция создания мобильной версии лендинга1. Если вы знакомы с нашим конструктором лендинг пейдж, и у вас уже создан сайт на нашем конструкторе лендингов, то вам достаточно просто подключить тариф GRAND.
Начиная с тарифа Grand у вас будет подключена мобильная вёрстка, которая будет автоматически подгоняться под любой размер устройства.
А вот на первых тарифах сайт на мобильных устройствах будет отобржаться один в один, как на компьютере. Там установлена адаптивная вёрстка, которая отвечает за то, чтобы при просмотре сайта на любых гаджетах, никакие сдвиги в структуре сайта не происходили. Но в данном случае он не будет адаптироваться под размер смартфона или другого гаджета.
2. У вас будет подключена мобильная версия сайта.
Если вы впервые зашли на конструктор мобильного лендинга, то пойдём по порядку.
Чтобы создать нужно:
■ В итоге вы получите мобильный лендинг совершенно бесплатно и автоматически настроенный.
Для адаптирования сайта для мобильных устройств конструктор сайтов Tobiz специально предусмотрел данную возможность, чтобы помочь вам сэкономить деньги и время. Так как, если вы наймёте программиста для разработки мобильной версии лендинга , вы потратите минимум 15-20 тыс. руб дополнительно, а это ещё нужно будет заплатить за создание самого лендинг пейджа и его техническую поддержку (плюс около 5 тысяч ежемесячно).
На базе нашего конструктора вы можете сделать это совершенно бесплатно. К тому же мы всегда следим за его работой и делаём всё, чтобы сайт оставался конструктором лендингов с нормальной адаптивностью.
■ Если вы будете следовать нашей инструкции, то в итоге вы получите 3 варианта мобильной адаптации лендинг пейдж.
