Минимализм при создании landing page

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

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

Несколько примеров минимализма целевых страниц

Давайте рассмотрим минимализм landing page некоторых успешных веб-приложений:

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

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

Минимализм landing page: одна основная идея

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

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

Каждый элемент дизайна тщательно отобран. Все стратегически разработано только для этого самого единственного действия от пользователей.

Landing Page пример: Dropbox

Веб -сайт Dropbox является примером того, как минималистский дизайн ярко демонстрирует эту концепцию. Landing page от Dropbox имеет только один призыв к действию, исходя из  предназначения веб-страницы. Основная цель дизайна — получить посетителей сайта, чтобы они нажали на кнопку «Зарегистрироваться». Так, кнопка «Зарегистрироваться» является наиболее ярким элементом на странице. Все остальное не имеет такого значения.

Конечно, есть и вторичные альтернативные действия посетителей целевых страниц Dropbox. Это кнопки «Загрузите программное обеспечение», «войдите в систему» (если вы уже пользователь Dropbox) или «узнать больше о Dropbox». Однако эти альтернативные кнопки созданы таким образом, чтобы никак не препятствовать основной цели — нажатие на кнопку «РЕГИСТРАЦИЯ».

Все несущественные элементы удалены или приглушены:

-Название сайта ( Dropbox ) даже не отображается на странице;

-Чтобы объяснить, как работает Dropbox , используется простая иллюстрация, что вдвойне обращает внимание пользователей на кнопку «Зарегистрироваться»;

-Слоган («Ваш материал, в любом месте») короткий и несложный.

Так,  landing page от Dropbox уверенно и смело показала, какие действия требуются от посетителей сайта, причем это сделано очень грамотно и четко.

Landing Page пример: Mailbox

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

Первичное действие — нажать большую, отчетливо выделяющуюся кнопку с надписью «Получить приложение», которое дает пользователю Mailbox в Apple App Store.

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

Landing Page пример: Karma

Karma является еще одним прекрасным примером красивого минимализма целевой страницы.

Желаемое действие для этой landing page — нажать на кнопку «Купить». Первичное действие отображается дважды: одно в середине сайта, а другое — в его верхней части. Кнопки призыва к действию обе зеленые, одинаково помечены и визуально схожи, что создает между ними связь.

Вторичное альтернативное действие пользователя — нажатие на кнопку «Узнать больше». Как можно увидеть, прозрачность кнопки «Узнать больше» снижает ее визуальный вес  и не «крадет» внимание от основной кнопки «Купить».

Краткое описание над кнопками вызова к действию коротко информирует об уникальной ценности предложения от Karma: подключение и обмен благодаря Wi-Fi.

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

Основные компоненты минималистских landing page

Минималистская landing page состоит из трех основных компонентов:

1. Первичное действие

2.Объяснение того, что такое продукт / услуга

3.Альтернативный вариант

Советы по созданию минималистских landing page

1.Сосредоточьтесь на создании правильной визуальной иерархии

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

Некоторые из основных характеристик, влияющие на положение элемента дизайна в визуальном иерархии landing page:

—Размер: большие элементы находятся выше по визуальной иерархии

—Положение на веб-странице: для большинства сайтов  элементы в верхней и в левой части веб-страницы выше по визуальной иерархии 

-Цвет, контраст: сильный контраст между конкретным элементом и его фоном, а также между другими элементами в непосредственной близости от него приведет к более высокой позиции по визуальной иерархии

—Визуальная сложность: внешне более сложный элемент по сравнению с соседними элементами дает больший визуальный вес  

—Пробелы: большие пробелы вокруг элемента дают ему высокий визуальный вес

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

Пример: Numbrs

Минималистский веб-дизайн Numbrs является хорошим примером для разговора о визуальной иерархии.

Описание приложения (1) и первичной кнопки призыва к действию (2) являются двумя наиболее яркими элементами веб-страницы.

Регулятор громкости (3) также находится довольно высоко в визуальной иерархии, и при желании можно выключить звук, когда Вы находитесь на этой landing page.  

Название сайта (4) и альтернативные действия (5) располагаются ниже по визуальной иерархии.

Пример: Wander

Другая версия грамотной визуальной иерархии можно увидеть в минималистской landing page от Wander. Здесь только четыре элемента веб-дизайна:

Верхняя надпись в визуальной иерархии является информацией о том, что сайт открыт только зарегистрированным людям (1) . Ниже текста есть призыв к действию — кнопка «войти в систему»(2) .

Значительно ниже в визуальной иерархии идут вторичные альтернативные действия посетителей landing page сайта Wander. Кому-то может захотеться бродить по Facebook (3) . Кнопка Facebook также отображает количество лайков, что выполняет еще одну задачу — доказательство интереса к  приложению среди посетителей соцсетей.

Другие посетители по альтернативному действию сайта могут зайти в другие социальные сети Wander или читать блог Tumblr (4).

Убедитесь, что первичное действие является заметным элементом на сайте

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

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

Пример: enthuse.me

Хороший вариант landing page, где первичное действие в виде выпуклой кнопки, можно увидеть на сайте enthuse.me:

Здесь хорошая визуальная иерархия, где сразу видно, что первичное действие — нажать на кнопку «Начать!».

Пример: IFTTT

Обратите внимание, какое совершенно очевидное первичное действие у целевой страницы сайта IFTTT:

Используйте цвета и оформление грамотно

Веб-дизайнеры, создающие минималистские сайты, имеют всего несколько инструментов в своем арсенале: оформление и цвет являются главными из них.

Пример: Basecamp

Basecamp является примером минимализма целевой страницы, которая использует цвет и само оформление очень разумно.

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

Большие шрифты и изменения цветов элементов дизайна служат для обращения внимания на то, что действительно важно в landing page.

Пример: Path  

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

Разные размеры шрифта, цвет и само дробление текста на сегменты и разделы вызывает интерес к целевой странице.

Придерживайтесь сжатого содержания текста

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

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

Пример: Contently

Сайт Contently может описать свою веб-службу всего в 3 словах: «Расскажите отличные истории». Это настолько глубоко, учитывая то, что веб-сервис сосредоточен вокруг этого содержания! Небольшое количество текста на landing page снижает вероятность изменения решения посетителя сайта по выполнению действия.

Пример: Shipment

Еще один хороший вариант короткого текста можно увидеть на Shipment. В этих простых словах – «Примем участие и рассмотрим Ваш проект»- посетитель сайта становится мгновенно в курсе того, что сайт Shipment может сделать для него / нее.

Опишите товар / услугу быстро

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

Пример видеообъяснения: Couple

Приложение Couple использует видео  для объяснения, как работает их продукт. Они воспользовались тем, что видео продукции может значительно увеличить конверсию.  

Так, видео постепенно раскрывается при нажатии на кнопку со значком «Play Now»:

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

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

Пример интерактивного объяснения: Apple Mac Pro

Минималистская целевая страница Apple Mac Pro демонстрирует другой популярный способ описания продукта: интерактивное  объяснение продукта.

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

Пример c фото: Wallmob

Фото высокого фонового разрешения на Wallmob является образцом того, как можно использовать важное изображение.

Фоновое фото иллюстрирует, чем является Wallmob: это точка продажи программ для Вашего мобильного устройства.

Простота — залог успеха

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

Автор — Karol K

Перевод и обработка — дизайн-студия ВладВеб

Оптимизация лендинга и товарной страницы для повышения конверсии | Синапс

Что здесь представлено:

• перечень характеристик с изображением продукта, причем фото не кажется слишком громоздким;

• смысловые акценты на отзывах покупателей, описании товара, цвете и цене;

• социальные доказательства: отзывы, метка «выбор Amazon», ответы на часто задаваемые вопросы;

• дополнительные опции: сведения о доставке, другие цветовые решения, аналогичные товары.

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

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

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

Оптимизация товарных страниц

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

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

Все еще не уверены, что это работает? Возьмем для примера интернет-магазин товаров для кухни Yuppiechef. Как только со страницы регистрации убрали панель навигации, показатель конверсии вырос в 2 раза (с 3 до 6%).

Лендинг страница на WordPress | www.wordpress-abc.ru

Вступление

У вас есть конкретный товар или вы оказываете уникальную услугу? Может быть вы хотите позвать коллег на конференцию или иное конкретное событие? Если да, то вам нужен лендинг пейдж, иначе целевая страница. Лендинг страница на WordRess один из  вариантов её создания.

Лендинг страница на wordpress: мифы и иллюзии

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

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

Во-первых, лендинг пейдж не «листик в тетрадке», а большой объем информации показанной без пагинации под одним URL.

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

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

• Оставить свои координаты;
• Присоединиться к сообществу;
• Записаться на приём;
• Заказать услугу;
• Записаться на семинар;
• Скачать файл и т.д.

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

Размер лендинг пейдж

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

Нет технических ограничений по объёму целевой страницы. Технически её можно сделать бесконечной. Однако есть ограничения по оптимизации. Лендинг страница не должна «весить» больше 3 мб, рекомендовано 1,5 мб. Использование более тяжёлых целевых страниц (например с большим количеством видео) должно быть оправдано интересами читателя.

Варианты лендинг страниц

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

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

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

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

Платформы для лендинг страниц

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

Создать свою посадочную страницу можно на конструкторах (частичная собственность): uKit, uLanding, Wix, LPgenerator, uCoz, PlatformaLP, Ucraft, LPMotor, Flexbe, Mobirise. Интересные я выделил шрифтом.

Для полной собственности контента лучше выбрать CMS. Здесь, как обычно, лидируют Joomla и WordPress. WordPress проще в освоении, Joomla будет чуть шустрее.

Лендинг страница на WordPress

Создать лендинг страницу на WordPress можно быстро, без освоения сложной вёрстки. В этом вам помогут специальные плагины WordPress «Landing Page». Чтобы их найти, идёте в архив плагинов в поиске пишите Landing Page и изучаете результаты.

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

• Beaver Builder
• Leadpages
• Elementor
• Divi
• OptimizePress
• Coming Soon Pro by SeedProd.

Теперь о плюсах и минусах.

Плюсы

• Во-первых, лендинг страница на WordPress создаётся очень быстро, без знаний программирования, методом перетаскивания (drag and drop tools) готовых модулей.
• Во-вторых, большинство плагинов в лёгкой версии бесплатны и начать работать можно без затрат.
• В-третьих, WordPress имеет достойную репутацию и поддержку на всех уровнях.
• В-четвёртых, сама WordPress бесплатна и тратиться сразу на тарифы, как в конструкторах, не нужно.
• В-пятых, создав лендинг страницу на WordPress вы становитесь её полным хозяином.

Минусы

Есть и минусы.

• Прежде всего, на бесплатных версиях плагинов лендинг страницы получаются хорошими, но не «люкс». Все интересные шаблоны, важные и красивые модули за деньги.
• Во-вторых, придётся решать проблему скорости загрузки страницы. Без настройки кэша и подбора сервера WordPress не так шустра как хочется.
• В-третьих, совсем без опыта работ на WordPress не обойтись. Это не WIX, а умная CMS и её нужно понять.

Итак, возможна ли лендинг страница на wordpress

Несмотря на минусы, лендинг страница на WordPress может получиться великолепной. Рекомендую, как минимум, попробовать. Для начала на Elementor или Beaver Builder. Они бесплатны с большим функционалом. Дальше больше, Divi для студии, или Leadpages для профи.

©www.wordpress-abc.ru

Еще статьи

Похожие посты:

Похожее

Функции конструктора Landing Page.

Создайте лендинг пейдж сегодня

Создать лендинг пейдж ▸

1-2-3 и ваш Лендинг Пейдж готов!

Простой редактор – быстрый запуск

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

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

Снизу каждого блока есть кнопка Добавить, нажмите ее и добавьте еще слайдер, текст, товар, изображение и т. д.

Тестирование – ваш путь к успеху!

A/B сплит тестирование, увеличивает конверсию

Станьте мастером конверсии с помощью нашим инструментом A/B сплит тестирования.

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

Измеряйте и увеличивайте конверсию постоянно.

Легкая и эффективная лидогенерация

Постройте эффективные формы захвата

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

Добавляйте новые поля и переименовывайте их, изменяйте призывы к действию, выбирайте размер и цвет кнопок.

Тестируйте свои формы и получайте максимальную конверсию.

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

Новинки в интернет-маркетинге

Камбекер – экономит инвестиции в рекламу

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

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

Функция проста в настройке, прочитайте про функцию Камбекер.

Каждый третий посетитель использует мобильный!

4 в 1 – адаптивный дизайн, увеличивает охват аудитории

Создавайте лендинг пейдж сразу для всех устройств:

• планшетов,
• смартфонов,
• ноутбуков и
• широкоформатных мониторов.

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

Взгляните на особенности Lpg.tf

Зарядите свой лендинг пейдж мощными функциями

Создайте лендинг пейдж сейчас

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

Создать лендинг пейдж

Зачем стоит заказывать лендинг?

Добрый день читатели. Сегодня поговорим о лендинг пейдж, или как еще их называют целевые страницы сайта. В последнее время вы все чаще и чаще слышите это сочетание. Лендинг пейдж заказывают уже у кого есть свой сайт и как основную площадку продажи товаров и услуг.  Для чего он и нужны? В чем их преимущества? как сделать качественный лендинг, не испортив имидж компании? Эти вопросы часто подымаются во время конференций и в статьях. В первую очередь лендинг работает на ключевом моменте статистики,  80% новых посетителей сайта посещают только главные страницы сайтов,  заинтересовавшись и увидев всю информацию они могут пройти по дополнительным разделам. Но в наше время это происходит редко, основные продажи происходят с главных страниц. Вся важная информация должно быть на главной станице сайта.

Форма заявки

Форма заявки должна быть интерпретирована под разные запросы и разное поведение людей. Например большинство клиентов не хотят рисковать, и тут же заказывать  товар на незнакомом сайте. Это действие призывает к ответственности и лишней напряженности, и тогда клиент уходит на другие более знакомые  сайты. Тогда для этих клиентов лучше сделать  удобную форму заявки на консультацию. Формы должны быть простыми и без лишних нудных текстов, но и так же без через чур креативных кричалок. Примеры заголовков: -«Закажите бесплатную консультацию», -«Вызвать замерщика», -«Заполните форму и мы вам перезвоним»,  -«У вас остались еще вопросы? Мы проконсультируем!» В форме заявке не стоит создавать много полей, что б у клиента не вызвало трудности в заполнении. Это должно быть два три поля с понятными пояснениями, например: Ваше имя, Ваш е-mail, Напишите ваш вопрос и т.д. Кнопка отправить, как и другие ключевые кнопки должны быть контрастного цвета, чтоб они не терялись в дизайне. По статистике клиенты чаще всего жмут на кнопки теплых цветов: красный, оранжевый, желтый.

Тексты на лендинге пейдже

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

Экраны Landing Page.

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

Анимация на Лендинг пейдж

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

Шапка лендинга

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

Зачем стоит заказывать лендинг?

Landing Page самостоятельно

Преимущества Landing Page

Что такое лендинг пейдж и «с чем его едят»?

Как создать лендинг страницу?

Как тестировать Landing Page?

Как заказать лендинг пейдж в Санкт-Петербурге?

Руководство по разработке целевой страницы MailMunch

Целевые страницы MailMunch могут служить различным целям, таким как:

• Место назначения для вашей рекламы в Facebook или Google

• Поделиться в социальных сетях 9

• Отправка подписчикам по электронной почте для конкретной кампании

• . .. и многое другое

Вот несколько быстрых и простых советов по созданию целевой страницы с помощью MailMunch для любой из этих целей.

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

Размещение контента

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

Создание блока

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

Библиотека изображений

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

Оптимизация для мобильных устройств

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

• Форма меньшей ширины может нормально отображаться на рабочем столе целевой страницы, но ширина формы задается в процентах от размера окна, поэтому 20% элемента div на устройствах с меньшим дисплеем в конечном итоге сожмут форму. Вы можете открыть целевую страницу в мобильном представлении и поиграть с шириной формы и шириной кнопки, чтобы найти оптимальные настройки.Если вы используете браузер Chrome, просто откройте свою целевую страницу в новом окне, щелкните правой кнопкой мыши на экране, выберите «Проверить элемент» и затем переключитесь на мобильное представление.
  

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

• Воспользуйтесь функциями Не размещать на мобильных устройствах и Скрывать на мобильных устройствах для дальнейшей оптимизации отображения вашей целевой страницы на мобильных устройствах.
  

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

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

Другие хаки

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

• Используйте MailMunch Analytics для измерения эффективности вашей целевой страницы, отслеживая коэффициент конверсии, или используйте популярные пиксели отслеживания, такие как Google Analytics, для отслеживания показов и конверсий вашей целевой страницы.
  

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

• Если вы выбрали строку и вместо этого открыли панель главного редактора справа, отмените выбор этой строки, щелкнув пустое место в редакторе, доступном в правой или левой части окна.

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

Требования к размеру изображения в MailerLite

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

Требования к размеру изображения для кампаний

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

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

Максимальная ширина	Блок(и) контента
560px	Блок логотипа, изображение героя с блоком статей
270px	Логотип + основная надпись
267px	Блок из 2 статей, Горизонтальное изображение + текстовый блок
140 пикселей	4 статьи блока

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

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

Требования к размеру изображения для целевых страниц и веб-сайтов

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

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

Максимальная ширина	Блок(и) контента
660px	1 столбец блока контента
330px	2 столбца блока контента
240 пикселей	3 столбца блока контента, блок формы регистрации

Требования к размеру изображения для форм

Максимальная ширина для изображений в ваших формах следующая:

• всплывающих формы — 580PX

• встроенные формы — 640PX

Изображение и дизайн спецификации — Woobox Help

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

Элемент изображения

В текущей версии раздела «Дизайн Woobox» вы можете добавить элементы изображения на любую страницу своей кампании. Максимальный размер файла, который вы можете загрузить в элемент изображения, составляет 2 МБ .

Фоны

Максимальный размер файла для фона в разделе «Дизайн» также составляет 2 МБ .

ПОДЕЛИТЬСЯ ИЗОБРАЖЕНИЕМ

В диалоговое окно «Поделиться» в Facebook внесены обновления. Вот что Facebook говорит об обмене изображениями в своем документе «лучшие практики»:

«Используйте изображения размером не менее 1200 x 630 пикселей для лучшего отображения на устройствах с высоким разрешением. Как минимум, вы должны использовать изображения размером 600 x 315 пикселей для отображения сообщений страницы ссылок с большими изображениями. Размер изображений может достигать 8 МБ».

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

Мы также изменили дизайн постов страницы ссылок, чтобы соотношение сторон изображений было одинаковым для настольных и мобильных новостных лент. Старайтесь, чтобы соотношение сторон ваших изображений было как можно ближе к 1,91:1, чтобы отображать полное изображение в Ленте новостей без какой-либо обрезки.

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

.

Максимальные характеристики для общего изображения в вашем предложении Woobox: 810 x 1200 пикселей с размером файла 2 МБ .

ТЕСТ ВОПРОСЫ И ОТВЕТЫ

Вопросы: Макс.: 355 пикселей в ширину, 1200 пикселей в высоту, 2 МБ
Ответы: Рекомендуется: 348 пикселей в ширину, 284 пикселей в высоту (Макс. : 810 пикселей в ширину, 1200 пикселей в высоту, 2 МБ )

ВЫБОР ОПРОСА

Максимальный размер файла для изображений Poll Choice в разделе «Дизайн» составляет 2 МБ (1000 КБ).

ВЫБОР КРОНШТЕЙНА

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

(Чтобы загрузить фотографию вместо использования сплошных цветов, в настройках брекетинга щелкните цвет и выберите «изображение»)

ОБХОДИМ ЭТИ ГРАНИЦЫ

Хотя максимальная ширина экрана Facebook составляет 810 пикселей, вы определенно можете увеличить ширину экрана, но мы не рекомендуем увеличивать ширину, если вы устанавливаете его как вкладку страницы Facebook (вкладка Facebook имеет ширину всего 810 пикселей).

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

целевых страниц слайдера полной ширины

Шаблоны веб-сайтов с полноразмерным слайдером

Веб-шаблоны полноэкранного слайдера — самая популярная тенденция в полноэкранном веб-дизайне в настоящее время.Полноэкранный слайдер изображений — это элегантный способ произвести впечатление на ваших клиентов солидной фотогалереей и хорошим вкусом. Наш бесплатный полноэкранный шаблон слайдера легко настраивается и отлично использует полноэкранные макеты страниц с революцией слайдеров. Изучите популярные категории, такие как последняя обновленная контактная форма 7, таблицы цен, функции и другие, которые органично впишутся в макет страницы. Узнайте, как добавить файлы cookie и улучшить свой опыт с помощью быстрых ссылок, добавляя ползунок, создавайте, добавляйте новые модули и многие другие функции, которые можно выбрать в настройках списка, а затем нажмите, чтобы протестировать их.Вам больше не нужно устанавливать дополнительные конструкторы веб-сайтов или выбирать плагины Revolution Slider для обновления вашей веб-страницы. Настройте аналогично премиальному конструктору страниц wpbakery или конструктору Divi, перетащите и отпустите конструктор страниц, чтобы веб-разработчик веб-интерфейса и плагин Revolution Slider Revolution могли создать шаблон для создания логотипа на экране и шаблон веб-сайта.

Полноэкранные слайдеры WordPress могут демонстрировать те же функции, что и премиальный конструктор wpbakery и конструктор Slider Revolution.Перетащите пользовательский визуальный компоновщик страниц в шаблон веб-сайта, готовый для любого цвета фона, шрифтов Google, фонового изображения, видеофонов или экранных тем WordPress 2022. Шаблоны слайдеров полной ширины, готовые к использованию с каруселью WordPress, меню WordPress и учебниками WordPress, а также пропустить содержимое слайдера, которое используют эти простые базовые шаблоны. Используйте Nicepage, чтобы контролировать внешний вид вашего полностью адаптивного веб-сайта WordPress на всех устройствах. Конструктор веб-сайтов Nicepage работает как визуальный композитор с перетаскиванием. Полноразмерный слайдер на основе плагина слайдера WordPress создает отличительный вид для любого вашего изображения и видеоконтента, поэтому просто нажмите «Добавить новый», и процесс начнется немедленно. Это позволяет создавать выдающиеся шаблоны страниц в несколько кликов без кодирования. Покажите свою галерею с умной настраиваемой каруселью поверх фоновых тем. Различные макеты домашней страницы, целевая страница и шаблоны веб-сайта портфолио будут выглядеть одинаково хорошо с полноэкранным шаблоном WordPress. Установите бесплатную универсальную полноэкранную тему WordPress или полноэкранный шаблон веб-сайта с перетаскиванием страниц, а затем сразу же начинайте продавать.Примените шаблон демонстрации слайдера и файлы cookie, чтобы улучшить работу с сайтом справочного центра, и, используя этот веб-сайт, клиенты соглашаются с политикой использования файлов cookie, авторское право 2022.

Полноэкранный макет слайдера WordPress

основан на полноэкранном слайдере продукта темы WordPress с отзывчивым дизайном слайдера WordPress, который обеспечит наилучшие впечатления от полноэкранной темы WordPress с несколькими примерами полноэкранных слайдеров, которые помогут вам. Наш конструктор с «простым в создании» веб-сайтом со слайдером верхней ширины может оказаться отличным способом увидеть, какая иллюстрация заголовка или слайдер YouTube подходит для вашего проекта.Нашим полноэкранным инструментам веб-сайтов-слайдеров нужно только отображать контент, находить в социальных сетях ряд связанных тем и интегрировать их в свою тему WordPress для немедленного улучшения полноэкранных адаптивных шаблонов веб-сайтов. Обязательно ознакомьтесь с нашими бесплатными элементами видеоматериалов, которые вы можете добавить вместо изображений, чтобы создать видеофон и сделать свой шаблон страницы по-настоящему ярким и незабываемым. Поисковые системы наслаждаются гиперссылками, похожими на Divi Builder, следуйте за нами и более быстрым видео веб-дизайна для целевых страниц Unbounce.Помимо полноэкранного слайдера, вы по-прежнему можете использовать лучшие бесплатные темы WordPress и премиальные плагины WordPress для дальнейшего улучшения вашего одностраничного или многостраничного веб-сайта. Эти элементы не повлияют на быструю загрузку, но, во всяком случае, оптимизируют производительность приложения, простоту взаимодействия с пользователем вашего сайта. Как и в случае с Кеном Бернсом, используя наш сайт, вы соглашаетесь стать участником партнерской программы. Присоединяйтесь к нам и купите сейчас, чтобы получить скидку 20%, чтобы получить бесплатную дополнительную загрузку сегодня! Мы предоставляем полное информационное меню с нашими старыми тарифными планами и новыми предложениями на нашей главной странице.

Пример

POF: как размер дисплея может повлиять на производительность целевой страницы

С таким большим опытом, как у нас есть в POF, у нас все еще есть много вопросов, на которые нам еще предстоит ответить, и гораздо больше, которые мы даже не подумали задать.
 

Тем не менее, недавно мы решили решить один вопрос, который некоторое время не давал нам покоя, касающийся производительности целевой страницы и разрешения экрана целевой страницы.
 

Большой вопрос

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

Наша подготовка

Имея в виду этот вопрос и установленный бюджет 500 долларов США , мы начали готовить наш тест.После небольшого исследования мы нашли список самых популярных разрешений, используемых в США.
 
Взяв этот список, мы нашли 3 разрешения, которые решили использовать

• 1024×768 — «Низкое разрешение»
• 1366×768 — «Среднее разрешение»
• 1920×1080 — «Высокое разрешение»

Поиск нашей целевой страницы

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

Живые версии:
Низкое разрешение | Среднее разрешение | Высокое разрешение

Кампания с таргетингом на

Как только мы нашли нашу целевую страницу, мы взяли этот дизайн и макет и применили их к нашим 3 лучшим разрешениям, как показано по ссылкам выше.Каждая целевая страница была разделена на 3 кампании, каждая из которых была нацелена на мужчин в США в возрасте от 30 до 39 лет, количество входов в которые помогло нам правильно организовать все.

Установка правил

Самое главное в любом тесте — соблюдать строгий набор правил.
 
Наши правила были просты:

• Используйте одинаковые креативы для каждой целевой страницы. Хотя мы хотели получить самую низкую цену за клик, мы чувствовали, что вмешательство в процесс создания объявлений приведет к искажению данных.Если для одной кампании требовалось больше креативов, в две другие добавлялись такие же креативы.
• Сместите ставку каждой кампании всего на 0,01 доллара США за каждую, чтобы обеспечить справедливое размещение.
• Ротация ставок между тремя кампаниями каждый день. Это была попытка максимально снизить влияние места размещения на эффективность, не допуская при этом одновременного появления двух одинаковых креативов
.
• Работает только в течение дня , чтобы следить за творческой работой.

И победитель…

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

.

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

CTR (Click-Thru Rate)

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

CVR (коэффициент конверсии)

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

Прибыль/убыток

Наконец, для тех, кому интересно, насколько разрешение повлияло на нашу рентабельность инвестиций, слева приведен график, показывающий, насколько прибыльным было каждое разрешение целевой страницы. Хотя целевая страница с низким разрешением имела самый низкий CTR, с более высоким CVR, она была самой прибыльной с 127 долларами.40 прибыли. Противоположное можно сказать о странице с высоким разрешением, которая фактически потеряла в общей сложности 27,54 доллара.

Выводы

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

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

Последние слова

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

разрешение экранаразмер дисплеяпример целевой страницыразрешение отображения целевой страницыразмер отображения целевой страницыцелевые страницыпримеры использования целевой страницы

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

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

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

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

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

Изображение целевой страницы для настольных компьютеров:  Выберите изображение, демонстрирующее ваши продукты питания и напитки.Это будет отображаться на рабочем столе, заполняя правую половину экрана. Мы рекомендуем размер изображения 1080 x 1920, JPG или PNG.

Изображение целевой страницы для мобильных устройств:  Это будет отображаться на мобильных устройствах на целевой странице вашего объекта и странице подтверждения заказа, занимая верхнюю четверть экрана. Мы рекомендуем альбомный размер изображения 1170 x 409, JPG или PNG. Чтобы изображение не искажалось при разных видах, соблюдайте указанные размеры.

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

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

Шаги:

1. Перейти к  Информация о месте проведения  >  Домашняя страница и   Брендинг .
2. Загрузите изображение баннера — убедитесь, что вы предоставили подходящее изображение как для настольных компьютеров, так и для мобильных устройств
3. Загрузите логотип — он будет отображаться на мобильных устройствах и компьютерах
4. Загрузите изображение из социальной сети — оно будет отображаться, когда вы делитесь в социальных сетях, текстом и некоторыми приложениями.

Перейдите сюда, чтобы узнать, как идеально «обрезать» изображение логотипа

 

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

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

1. Перейдите в Ваше меню > Пункты меню 

2. Нажмите кнопку «Изменить» для каждой категории 

3. Найдите файлы или перетащите соответствующее изображение в раздел «Фоновое изображение»

4.Нажмите сохранить

7 советов по созданию мобильных целевых страниц — ShortStack

За последнее десятилетие использование мобильных устройств сократилось с почти нулевого до 50% всего веб-трафика. Вот это прыжок! Вот почему так важно помнить о мобильных устройствах при разработке целевых страниц. В этом посте я расскажу о семи советах по созданию мобильных целевых страниц.

Сохраняйте копии и формы краткими

У вас есть менее 15 секунд, чтобы привлечь чье-то внимание на вашем сайте, прежде чем они уйдут. Это вдвойне верно для мобильных устройств; никто не хочет прокручивать длинные блоки только для того, чтобы узнать, что вы делаете. Вместо этого держите свое сообщение коротким и по существу.

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

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

Избегайте длительной загрузки

Это правило справедливо для изображений, которые вы обычно добавляете в Интернет; однако это еще более важно, если учитывать время загрузки на мобильных устройствах. Мобильные пользователи, которые находятся в дороге, могут загружать вашу целевую страницу через подключение для передачи данных. Уменьшите размеры файлов, чтобы они загружались быстрее.Используйте изображения веб-качества, а не качества печати — для Интернета не требуется ничего, кроме 72 dpi.

Обратите внимание на один CTA

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

Рассмотрите возможность отдельного контента на мобильных устройствах

Показать или скрыть виджеты и контейнеры в зависимости от ширины экрана

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

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

Использовать интеллектуальную навигацию

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

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

СОВЕТ. Используйте панель стилей ShortStack, чтобы включить гамбургер-меню для просмотра на мобильных устройствах.

Дизайн одноколоночных макетов

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

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

Используйте удобное для мобильных устройств позиционирование

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт