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

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

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

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

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

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

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

Еще по теме:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак - что и как адаптируем?

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

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

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

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

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

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

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

Все эти сложные на первый взгляд вещи легко укладываются в простые решения. На российском рынке представлен выбор вариантов адаптации landing page под мобильные устройства на любой вкус и кошелёк: можно нанять целую веб-студию или воспользоваться онлайн-сервисами Например, в MoAction представлено более 100 готовых решений, которые имеют наивысшую оценку по мобильности от Google и являются профессиональными.

Выбор за вами!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не пропустите:

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 ресурсы превышает предложение, поэтому заранее позаботьтесь о адаптивности своей продающей страницы.