Мобильная версия лендинга. Мобильный лендинг пейдж

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

Увеличить скорость загрузки

Это ключевой параметр, так как если сайт открывается дольше пяти секунд, то вероятность того, что пользователь не захочет дожидаться, возрастает многократно. Для сайта существуют различные сервисы. Кроме того, подсказать может и Google Analytics. Нужные данные можно посмотреть в сводках, где предварительно настраиваются виджеты «Время загрузки страницы» :

Что можно сделать, что увеличить скорость:

• Убрать мусор из кода;
• Уменьшить количество сторонних скриптов;
• Убрать редиректы;

Подробнее об увеличении скорости открытия страниц можно прочитать .

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

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

Расположение главных кнопок

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

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

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

Чтобы форму было проще заполнить, нужно прикрутить к ней клавиатуру.

Чтобы облегчить заполнение соответствующих полей, используйте код:

Это сделает пользование вашим сайтом гораздо более удобным.

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

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

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

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

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

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

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

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

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

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

Главное правило мобильного лендинга

Думать о клиенте – главное правило мобильного лендинга (как и любого сайта). Представьте, в какой ситуации постетитель увидит ваш одностраничник:

Он откроет сайт на ходу, у него не будет времени долго его рассматривать.

У него будет конкретная цель: подписаться на рассылку, зарегистрироваться на мероприятие, оформить заказ.

У него может быть плохой интернет – сайт не загрузится.

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

Как посмотреть, как выглядит ваш сайт на мобильном?

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

Правило №1. Меньше секций

Если лендинг – это разговор с клиентом, то мобильный лендинг – это максимально короткий разговор. Не письмо, а сообщение в мессенджере. Поэтому подумайте, какие секции можно не показывать на мобильных:

Точно ли нужно описание всех преимуществ работы с вами?

Стоит ли оставлять раздел с кейсами и примерами работ?

Нужны ли отзывы довольных клиентов?

Просматривая страницу на мобильном, посетитель скорее ищет что-то конкретное, чем бесцельно серфит в интернете. Он больше сосредоточен на цели. Помогите ему достигнуть этой цели быстрее – сделайте лендинг максимально коротким.

Как скрыть лишние секции в мобильной версии лендинга?

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

Правило №2. Меньше фото

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

Какая скорость загрузки считается нормой?

9-13 секунд – это максимум, который клиент готов ждать. (Исследование seochat.com).

Правило №3. Меньше текста

Экран мобильного маленький, а туда нужно поместить столько же текста, сколько на большой. Придется уменьшить шрифт или сократить текст.

Лучше поступить так:

Сначала уменьшить размер шрифта, посмотреть, читается ли текст с маленького экрана.

Если текст всё ещё занимает ли слишком много места – сократите: примените к нему правила инфостиля или удалите части с дополнительной информацией.

Как настроить шрифт для мобильных?

Заходите в настройки текста, выбирайте вкладку с иконкой мобильного телефона и меняйте шрифт.

Правило №4. Больше кнопка

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

Как изменить кнопку для мобильных?

В настройках кнопки зайдите во вкладку с иконкой мобильного телефона и задайте положение «На всю ширину».

Итак, порядок работы над страницей:

1) Открываем отображение страницы на мобильном
(верхняя панель редактора – значок мобильного телефона).

2) Просматриваем страницу в новом адаптированном виде.

3) Оцениваем каждую секцию: можно ли её скрыть без потери смысла? Скрываем лишнее (настройки секции – значок мобильного телефона – галочка «Скрывать на телефонах»).

4) Особенно оцениваем секции с картинками и видео. По возможности скрываем.

5) Смотрим, как адаптировался текст. Если шрифт слишком большой, делаем меньше (настройки текста – значок мобильного телефона – размер шрифта). Если текста всё ещё много – удаляем лишние предложения и абзацы.

6) Проверяем, как отображается форма и кнопка, настраиавем.

7) Если необходимо, задаем особое положение любых элементов на странице, задаем отступы.

8) Публикуем лендинг и открываем его на мобильном телефоне. Проверяем:

• Как долго грузится страница?
• Не поехал ли текст?
• Не поехали ли изображения?
• Правильно ли отображается форма?

Если всё хорошо, ваш лендинг готов к мобильным посетителям. А их, говорят , больше половины! Так что дерзайте)

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

Поэтому если Вы не занимаетесь , то Вы теряете половину своей .

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

Так как самостоятельно это сделать будет затруднительно.

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

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

Основные типы целевых страниц

Перед тем, как создать мобильный landing page для использования в интернет-маркетинге, необходимо обозначить какой именно тип страницы Вы будете использовать.

Итак, всего различают 4 вида страниц - это:

1. Микросайт;
2. Главный Сайт;
3. Автономная целевая страница;
4. Страница сегментации.

К микросайту относится такой сайт, на котором расположена информация о различных рекламируемых услугах, а также товаре.

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

Главный сайт более структурирован и включает уже большое количество страниц и информации.

Но он обладает низкой целевой аудиторией, так как она малоэффективна.

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

Итак, страница сегментации направлена на повышение конверсии.

Инструкция «как создать мобильный Лендинг Пейдж»

Так как существует множество различных сервисов, инструкция может отличаться.

Поэтому мы укажем на основные действия, которые необходимо предпринимать:

• Во-первых, необходимо адаптировать верстку. Этот принцип достаточно доступный, и именно он обеспечивает конкретное изображение страницы с любого устройства. В итоге, уже будет неважно с какой системы клиент зашел на Ваш сайт. Потому что он все ровно перейдет на обозначенную вами страницу. Если это мобильная версия сайта, то она должна включать как можно больше информации. Где выгодно заказать лендинг пейдж - узнайте по
• Во-вторых, подготовьте качественный дизайн. Если Ваш сервис основывается на доставку еды, то необходимо разработать правильный и лаконичный мобильный дизайн. Существует правило, чем меньше «экран монитора», тем больше красок необходимо поместить. Очень часто для того, чтобы создать мобильный landing page, используют адаптивный дизайн. Потому что он позволяет открыть страницы вне зависимости от того, с какого устройства Вы их посещаете.

Как видите, создать мобильный Лендинг Пейдж несложно. Но, чтобы успешно продвигать Ваш бизнес и с помощью SEO и не терять аудиторию, лучше обратиться за помощью к профессионалам.

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

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

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

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

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

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

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

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

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

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

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

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

Из этой статьи вы узнаете о 8 лучших практиках мобильного дизайна, которые помогут вам улучшить пользовательский опыт и повысить конверсию на любом устройстве.

1. Избавьтесь от навигационной панели

Посмотрите, сколько места может занимать навигационная панель:

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

Как же посетителям перемещаться по сайту без навигационной панели? Есть несколько способов. Самый популярный из них — , небольшая верхняя панель. «Гамбургер» служит этаким ящиком, выдвигающимся из угла экрана и содержащим различные ярлыки меню.

Другой вариант — одностраничный мобильный сайт. Однако если на вашем сайте много контента, он вам не подойдет.

Наверняка вы пользуетесь смартфоном часто — в автобусе или в очереди. Может быть, вы читаете с него эту самую статью. А как вы держите смартфон? Скорее всего, вы водите по экрану большим пальцем. Так делает 75% пользователей.

Несколько лет назад эта диаграмма была библией мобильных дизайнеров. Руководствуясь ей, они оптимизировали пользовательский опыт для большинства людей. И хотя она могла быть правильной в свое время, технологии стремительно развиваются и меняются. В последние несколько лет наши телефоны и экраны становятся все больше и больше — а руки остаются прежними. Мы уже по-другому держим смартфоны, зоны касания сместились, и точность ближе к внешним углам экрана снизилась.

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

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

3. Оптимизируйте и уменьшайте размеры файлов

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

Используйте сайты вроде TinyJPG или такие инструменты, как ImageOptim (только для Mac) или «Export for Web» в Photoshop, чтобы уменьшить размер файла, прежде чем загружать изображения на свой сайт.

На размер файла больше всего влияют две вещи:

• Качество. Если снизить его, файл станет меньше, но также упадет четкость, и могут появиться артефакты.
• Размер/разрешение. Естественно, размер файла во многом зависит от размера картинки. Естественно, вы не захотите сделать изображения такими маленькими, что пользователи ничего не смогут разглядеть, но если, например, ширина колонки, в которой вы размещаете изображение, составляет 600 пикселей, ширина изображения не должна составлять 1000 пикселей. Измените размер, прежде чем загружать картинку на лендинг.

4. Номер телефона, доступный для звонка в один клик

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

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

Один из способов этого добиться — сделать номер телефона доступным для звонка в один клик. Вам наверняка знакома эта ситуация: вы переключаетесь туда-сюда между телефоном и браузером, перепечатывая телефон, или пытаетесь скопировать его и нечаянного копируете весь остальной контент на странице. Поэтому кликабельный номер телефона много значит.

И номер будет выглядеть так:

Посетители смогут кликнуть по нему и позвонить.

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

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

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

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

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

Есть несколько вещей, о которых нужно помнить в связи с респонсивностью:

• Размеры изображений. Если изображения на вашем лендинге очень важны, удостоверьтесь, что они хорошо видны на мобильных устройствах.
• Разметка и расположение контента. В зависимости от того, как расположены элементы в десктопной версии вашего лендинга, они могут смещаться в мобильной версии. Проверьте, все ли остается на своих местах на разных устройствах.
• Анимация. Анимация, которая хорошо выглядит в десктопной версии, может совсем не так хорошо работать в мобильной. Проверьте ее, прежде чем публиковать.
• Видео. Учитывая предыдущие рекомендации о размере изображений, подумайте о том, чтобы спрятать видео в мобильной версии или вовсе удалить его. Оно большое, тяжелое и может существенно замедлить мобильный опыт.
• JavaScript. Хотя это и замечательный язык программирования, он не всегда работает на мобильных, поэтому проверьте, корректно ли все отображается.

6. Избавьтесь от всплывающих окон

С 2017 года Google штрафует страницы с «навязчивыми вставками». По сути речь идет о всплывающих окнах.

Примеры навязчивых вставок, делающих контент менее доступным.
1. Пример навязчивого всплывающего окна.
2. Пример отдельной навязчивой вставки.
3. Еще один пример отдельной навязчивой вставки.

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

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

7. Оптимизируйте формы для мобильных

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

Как решить проблему? Логика проста. Длинные формы требуют много печатать. Печатать на мобильных ужасно неудобно. Следовательно, длинные формы ужасно неудобны.

Если вы хотите снизить негативный эффект, который мобильные устройства могут оказывать на ваш уровень конверсии, попробуйте внести одно из следующих изменений в свои формы.

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

Сократить количество полей не всегда возможно: в конце концов, зачастую поле существует потому, что информация, которую нужно в него ввести, необходима. Однако все, что можно удалить, нужно удалить, а некоторые формы (имя и фамилия, например) — объединить.

Если вы разделите заполнение формы на , уровень вашей конверсии на мобильных может вырасти. Например, если в вашей форме 9 полей, вы можете оставить на первом этапе только 3. Пользователь заполнит их, кликнет по кнопке «Дальше» и попадет на следующую страницу, где тоже совсем немного полей, и так далее.

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

8. Сворачиваемые секции

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

Решением этой проблемы могут стать сворачиваемые секции.

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

Заключение

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