Менеджмент и маркетинг

Мобильные шаблоны лендинг пейдж – 10 методов оптимизации


Мобильные шаблоны лендинг пейдж (целевые страницы) могут быть использованы для PPC-рекламы, скачивания мобильных приложений, проведения рекламных кампаний и пр. Тактика оптимизации нацелена на увеличение конверсии, улучшение показателей PPC и обеспечение лучшего пользовательского опыта. Учитывая, что мобильный Интернет переживает невероятный рост, маркетологи не могут игнорировать его влияние. Вы, например, знаете, какая часть вашего веб-трафика приходится на мобильный сегмент?

88% мобильного поиска приводит к действиям в течение 24 часов, а около 70% — в течение 1 часа (Google Mobile Movement Study, 2011). Подумайте об этом, прогнозируя конверсию вашего трафика!

Мобильные шаблоны лендинг пейдж – 10 методов оптимизации

Мобильные шаблоны лендинг пейдж – 10 методов оптимизации

 

 

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

  1. Будьте доступными

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

Действующая разметка (синтаксис кодирования и структура) имеет решающее значение для того, чтобы веб-браузер правильно отображал контент. Проверьте ваш код и выполните QA-тестирование перед запуском. Инструменты W3C QA включают в себя валидаторы для HTML, ссылки, CSS, XML-каналы и многое другое.

Не забывайте, что получив негативный мобильный опыт 40% посетителей уходят к конкурентам (Compuware, “What Users Want from Mobile,” 2011).

  1. Будьте быстрыми

Ваши мобильные страницы должны быть легкими (менее 20 Кб) и загружаться менее чем за 5 секунд. Главные факторы замедления мобильных страниц — количество запросов (загруженные изображения, скрипты и т.д.), а затем количество байт (размер файла). Другими словами, лучше иметь один сводный файл JavaScript, чем несколько отдельных небольших. Объедините или ликвидируйте сценарии, измените размер и сохраните оптимизированные изображения для мобильных, где это возможно используйте CSS вместо изображений, а также по мере необходимости проводите мобильную оптимизацию веб-производительности вашего кода и контента.

Опять же, 43% мобильных пользователей вряд ли вернутся на медленный мобильный сайт. 74%, подождут до 5 секунд; 60% подождут 3 секунды или меньше (Compuware, “What Users Want from Mobile,” 2011).

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

  1. Будьте организованными

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

  1. Будьте краткими

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

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

  1. Будьте разборчивыми

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

  1. Обеспечьте возможность для звонка

Главное действие мобильного пользователя, которое надо ожидать, — телефонный звонок, поэтому убедитесь, что ваш телефонный номер полностью виден в верхней части страницы. 61% мобильных пользователей звонит после локального бизнес-поиска (Google Mobile Movement Study, 2011).

Пользователи должны иметь возможность нажать на номер телефона для осуществления вызова.

Всегда включайте международный префикс (символ «+» с последующим кодом страны), чтобы обеспечить возможность звонка из-за пределов вашей страны.

Укажите часы работы вблизи номера телефона.

  1. Обеспечьте удобство для большого пальца

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

Минимальные целевые площади:

Microsoft: 38 × 38 пикселей (0,25 «)

Apple: 44 × 44 пикселей (0,30 «)

Используйте запас (пустое пространство) вокруг активной области, чтобы избежать неправильного нажатия. Используйте JavaScript (JQuery) плагины с сенсорными жестами (например, FlexSlider, Photoswipe). Обеспечьте, чтобы интерактивные изображения (например, социальные иконки) имели размеры минимальных целевых площадей.

  1. Будьте локальными

Геолокация мобильного пользователя может, как правило, определяться в пределах от 10 до 30 км в зависимости от его IP-адреса. На основании IP-адреса (GeoIP) могут быть определены некоторые детали расположения веб-пользователя — страна, регион (государство / провинция), почтовый индекс, широта, долгота, код города, метеостанция и многое другое. Это золотое дно для персонализации контента!

  1. Обеспечьте простые формы

Формы целевых страниц должны быть чрезвычайно короткими. Количество полей должно быть четыре или меньше (идеально 1-2), но знайте, каждое дополнительное поле потенциально снизит конверсию на 50%.

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

Чтобы помочь юзабилити, предусмотрите ввод через клавиатуру — номер телефона, адрес, электронная почта.

  1. Вынуждайте к действию

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

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

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

Примеры призывов к действию:

Позвоните сейчас

Найдите магазин

Посмотреть видео

Написать письмо

Найдите направление

Добавить в мой календарь

Проголосовать

Позвоните нам

Оценить

Поставить Лайк

Скачать

Поделиться

Мобильные шаблоны лендинг пейдж – 10 методов оптимизации, выводы:

Мобильные шаблоны лендинг пейдж – 10 методов оптимизации

 

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

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

Как обычно, проводите A/B тестирование, собирайте обратную связь от пользователей и старайтесь понять, что работает лучше для ваших пользователей.

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

Лучшие шаблоны WP
Лучшие дешевые премиум Вордпресс шаблоны
Курсы
Как начать iOS программирование
Записки "чайника"
Как сделать интернет-магазин самому — записки «чайника»
There are currently no comments.