Следующая статья поможет вам: Учитесь на этих 7 примерах
Лучшие целевые страницы электронной коммерции не только красивы, но и просты в навигации и приятны для прокрутки на экране любого размера.
В конце концов, какой смысл создавать великолепный веб-сайт, если он не будет выглядеть так же потрясающе на экране мобильного устройства?
Тем более, что к концу 2021 года мобильные продажи, по прогнозам, составят 72,9% всех транзакций электронной торговли.
Это верно — почти 3 из 4 покупателей, которые посещают ваш магазин, скорее всего, делают это со своих телефонов. Это огромно!
Мы знаем, что при создании целевых страниц Shopify с высокой конверсией нужно учитывать многое: от включения основных элементов целевой страницы, которые побуждают клиентов к действию, чтобы убедиться, что ваш дизайн соответствует бренду и удобен для клиентов.
Кроме того, вам необходимо создавать адаптивные мобильные целевые страницы, которые хорошо отображаются на телефонах клиентов.
К счастью, с правильными инструментами проще, чем вы думаете, сделать так, чтобы ваш магазин выглядел потрясающе для покупателей на любом устройстве.
#cta-visual-pb#
Что такое целевая страница электронной коммерции?
Прежде всего, давайте определимся, о чем мы говорим здесь. Что такое целевая страница электронной коммерции и зачем она нужна вашему магазину?
Целевая страница — это веб-страница, предназначенная для того, чтобы побудить посетителей совершить определенное действие.
Для брендов электронной коммерции это может быть побуждение покупателей переходить на страницу продукта, просматривать новую коллекцию, присоединяться к вашему списку рассылки, чтобы разблокировать скидку, начать подписку или выполнить какую-либо другую цель конверсии.
Что касается того, почему вы должны создавать целевые страницы для своего магазина?
Целевые страницы электронной коммерции — это лучшее место для отправки входящего трафика из платной рекламы, сообщений в социальных сетях, электронных писем и других мест, где ваши клиенты могут узнать о вашем бренде в Интернете.
Что такое мобильная целевая страница?
Мобильная целевая страница — это любая целевая страница, предназначенная для клиентов, совершающих покупки со своих телефонов.
Самое приятное то, что вам не нужно создавать совершенно отдельную мобильную версию вашего сайта, чтобы он выглядел идеально. Вместо этого вы можете использовать такой инструмент, как Shogun Page Builder, чтобы создать адаптивную целевую страницу, которая будет великолепно выглядеть на любом устройстве.
Таким образом, ваша мобильная целевая страница не обязательно должна полностью отличаться от вашего магазина на компьютере.
Вы можете создавать адаптивные целевые страницы электронной коммерции с элементами, текстом и контентом, оптимизированными для устройства каждого посетителя.
С помощью Page Builder вы можете легко удалять, добавлять или изменять порядок элементов, заменять текст и редактировать кнопки CTA, чтобы создать идеальную мобильную среду.
#cta-mini-pb#Хотите узнать, что еще может сделать Конструктор страниц? Узнать больше
Задача создания страниц фирменного магазина для покупателей на любом устройстве
Домашняя страница The Ridge — настольная версия или мобильная версия
Что именно делает мобильную целевую страницу хорошей?
Многие рекомендации по созданию целевых страниц, которым вы следуете при разработке для покупателей с компьютеров, применимы и к дизайну целевых страниц для мобильных устройств.
Но если вы действительно хотите оптимизировать целевые страницы для мобильных устройств, вам необходимо уделять особое внимание пользовательскому опыту, расположению кнопок и времени загрузки.
Если бы кто-то просматривал вашу целевую страницу на компьютере и мобильном устройстве одновременно, суть этого была бы одна и та же.
Основные элементы будут одинаковыми.
Тем не менее, могут быть различия в сообщениях и элементах, которые создают оптимальный опыт покупок на каждом устройстве.
Например, в мобильной версии вашей целевой страницы может быть больше пустого пространства между разделами, чтобы вписаться в макет с одним столбцом.
Вступительная копия может быть короче. Кнопки могут быть больше, чтобы их было легче нажимать.
Чтобы ваша целевая страница хорошо выглядела на мобильных устройствах, она должна соответствовать рекомендациям, изложенным ниже.
Рекомендации для мобильных целевых страниц, которым следует следовать
Вот наш список рекомендаций по созданию отличной целевой страницы для мобильных устройств. Они очень близки к тому, что мы считаем элементами успешной целевой страницы электронной коммерции.
Уделите особое внимание содержимому верхней части страницы.
Независимо от того, для какого устройства вы разрабатываете дизайн, важно быть избирательным в отношении того, что видно в верхней части сгиба.
Вы не можете уместить столько же на экране мобильного устройства, что делает этот первоклассный объект недвижимости еще более ценным на мобильных устройствах.
Сохраняйте заголовок четким и лаконичным
Посетители должны сразу понять, о чем ваша мобильная целевая страница.
Это означает, что ваше изображение заголовка и копия должны передавать ценность и переходить прямо к делу.
Оправдывайте ожидания посетителей, повторяя сообщения и предложения, ведущие на страницу.
Отдайте предпочтение быстрому времени загрузки
В конкурентном мире электронной коммерции важна не каждая секунда, а каждая миллисекунда.
Посетители формируют мнение о вашем интернет-магазине менее чем за мгновение ока. (О 50 миллисекунд, если быть точным). Если ваша страница загружается слишком долго, вы вообще не сможете произвести впечатление до того, как они уйдут.
Учитывая, что мобильные покупатели могут иметь менее надежное подключение к Интернету, чем те, кто пользуется компьютером, время загрузки имеет решающее значение.
Вы можете внести несколько простых изменений в дизайн страницы для мобильных устройств, чтобы сократить время загрузки. Например, «ленивая загрузка» устраняет раздувание, загружая разделы страницы по мере прокрутки посетителями (а не все сразу, когда они попадают на вашу страницу).
Выберите макет с одной колонкой
Это одно из самых больших различий между дизайном целевых страниц для настольных компьютеров и мобильных устройств.
Использование одноколоночного макета помогает избежать беспорядка и отвлекающих факторов. Это позволяет легко читать на маленьком экране, не получая при этом крошечного шрифта или переполненной страницы.
Используйте удобный для мобильных устройств шрифт и форматирование
Когда дело доходит до выбора шрифта для мобильной целевой страницы, размер и стиль имеют значение.
Убедитесь, что ваш текст достаточно крупный и достаточно четкий, чтобы его можно было читать на маленьком экране. Стена текста никогда не будет хорошим видом для целевых страниц, но она особенно опасна для мобильных страниц.
Итак, используйте маркеры, разрывы строк, заголовки и форматирование, чтобы сделать его более удобным для мобильных устройств.
Будьте стратегическими с размещением CTA
Как и на любой хорошей целевой странице, ваши мобильные целевые страницы должны быть сосредоточены на одном призыве к действию.
Кроме того, на ваших мобильных целевых страницах должны быть кнопки, которые можно нажимать достаточно большими, чтобы их было легко нажимать. Это означает, что нельзя размещать кнопки в труднодоступной верхней левой части экрана.
Лучшее место для CTA — внизу экрана, по центру или справа.
Если ваша страница находится на более длинной стороне, рассмотрите возможность использования липкого CTA, чтобы он оставался видимым (и доступным для кликов) во всех точках.
Упрощайте и сокращайте формы
Если ваша цель конверсии состоит в том, чтобы посетители подписывались на что-то или заполняли форму, сделайте ее короткой и понятной.
Убедитесь, что поля достаточно большие, чтобы их можно было легко щелкнуть и заполнить. Между полями должно быть достаточно места, чтобы предотвратить случайный выбор неправильного поля.
Кроме того, постарайтесь сократить количество полей, чтобы не перегружать пользователей. Используйте опцию автозаполнения, если она включена у посетителя.
7 примеров лучших мобильных целевых страниц
Теперь давайте посмотрим, как некоторые из этих лучших практик выглядят на живых целевых страницах.
Мы собрали ряд целевых страниц электронной коммерции, которые отлично смотрятся на мобильных устройствах (включая несколько мобильных целевых страниц, созданных Shogun от наших клиентов!).
Нам нравятся эти примеры, потому что они действительно воплощают лучшие практики мобильных целевых страниц, предлагают отличный UX и облегчают посетителям конвертацию.
Note: поскольку эти примеры предназначены для просмотра на мобильных устройствах, вот краткое напоминание о том, как просмотреть мобильную версию любой страницы на компьютере.
- Начните с просмотра примера страницы, которую хотите просмотреть. (Ссылки приведены внизу каждого примера.)
- Затем щелкните правой кнопкой мыши в любом месте страницы, чтобы открыть раскрывающееся меню, и нажмите «Проверить».
- Отсюда вы можете переключиться с рабочего стола на мобильный, щелкнув значок размера экрана (выделен ниже).
- Вы также можете переключаться между различными размерами экрана телефона, выбрав устройство в раскрывающемся меню в верхней части страницы.
Быстро имитируйте работу мобильного браузера
№1: Блаженство
Блисси руководит Facebook трафик на эту мобильную целевую страницу из-за ограниченной по времени летней распродажи.
Страница содержит обзор бренда и включает в себя выбор различных категорий продуктов и страниц коллекций, на которые посетители могут нажимать.
Что вы можете узнать из этой мобильной целевой страницы:
- Сбалансируйте текст и изображения, чтобы заинтересовать покупателей. Blissy использует здоровое сочетание визуальных эффектов и текста, чтобы заинтересовать посетителей, не перегружая их. Здесь нет стен текста, и каждый раздел содержит что-то визуальное — даже отзывы клиентов, в которых вместо реальных фотографий клиентов используются мультяшные аватары.
- Сохраняйте разделы размером с укус, удобной для мобильных устройств. Хотя эта страница сама по себе довольно длинная, ее легко усвоить и следить за ней, потому что каждый раздел довольно краток. Посетители могут легко просмотреть весь раздел на экране, прежде чем перейти к следующему.
Смотрите полную страницу здесь
# 2: Проекты FEED
Проекты FEED создали эту страницу коллекций, чтобы повысить осведомленность и повысить конверсию для своей праздничной кампании.
Используя звездную силу известных имен, FEED Projects увеличивает влияние своей благотворительной программы подарков, в рамках которой с каждой покупкой раздаются праздничные обеды.
Что вы можете узнать из этой мобильной целевой страницы:
- Простые конструкции могут быть эффектными. Помимо изображения заголовка и вступления, основная часть этой страницы сосредоточена на изображениях продуктов. Это простой двухколоночный макет, но он позволяет передать всю важную информацию, которую клиенты могут захотеть узнать, прежде чем перейти на страницу продукта: название каждой сумки, цена, как она выглядит и сколько блюд пожертвовано, когда ты покупаешь.
#cta-paragraph-pb#Хотите добавить собственную коллекцию на целевую страницу для мобильных устройств? Попробуйте элемент коллекции продуктов Shogun, чтобы увидеть, как легко вы можете добавить коллекцию интерактивных продуктов или изображений.
- Переместите элементы, чтобы сделать их удобными для мобильных устройств. Вам не обязательно вносить серьезные изменения в дизайн страницы, чтобы оптимизировать ее для мобильных устройств. FEED Projects использует один и тот же кластер фотографий для своей целевой страницы для мобильных и настольных компьютеров, но форма меняется, чтобы лучше соответствовать каждому размеру экрана.
Страница коллекции FEED — десктоп и мобильная версия
Смотрите полную страницу здесь
№ 3: Хороший мальчик
Этот пример представляет собой страницу продукта пробиотического набора Goodboy’s Gut Check, в котором представлены две добавки для щенков с чувствительным желудком.
Покупатели могут сделать разовую покупку или подписаться на регулярные поставки.
Что вы можете узнать из этой мобильной целевой страницы:
- Используйте цвет, чтобы выделить несколько товаров в комплекте. На этой странице собраны вместе две добавки Goodboy для улучшения здоровья кишечника у собак клиентов. Поскольку покупателям, вероятно, интересны ингредиенты и преимущества любых добавок, которые они могут давать своим питомцам, Goodboy предоставляет отдельные разделы часто задаваемых вопросов для каждой формулы и выделяет их жирным фоном, который соответствует брендингу на этикетках.
- Пустое пространство (и отступы) — ваш друг. На этой странице представлено много информации, но макет, интервалы и отступы дают посетителям возможность дышать между блоками контента. Еще одна причина, по которой блоки часто задаваемых вопросов в разделе «Впечатляющий дуэт» работают так хорошо, заключается в том, что в них достаточно отступов, чтобы разделы удобно помещались на экране.
Смотрите полную страницу здесь
#4: Апрес
Бренд здоровья Après использовал Shogun Page Builder для создания этой целевой страницы для своей службы подписки с «автопополнением».
Адаптивный дизайн выглядит великолепно, и в нем легко ориентироваться на любом устройстве, поэтому клиенты могут подписаться на Après независимо от того, находятся ли они в дороге или заканчивают домашнюю тренировку.
Что вы можете узнать из этой мобильной целевой страницы:
- Используйте гифки, чтобы оживить значки. Нам очень нравятся симпатичные маленькие галочки, которые появляются над надписью «Попробовать их», и значок кнопки, который переключается между паузой, запуском и остановкой над надписью «Нет обязательств». Замена статических значков на гифки — это простой способ добавить движения на вашу мобильную целевую страницу (и визуально передать ценность), не добавляя раздувания или замедления.
- Разместите заголовки стратегически, чтобы вдохновить посетителей начать прокрутку. От забавного изображения героя, которое демонстрирует их красочный брендинг, до обещания скидки 10% и жирной кнопки CTA, которую нельзя пропустить, Après овладел искусством контента в верхней части страницы. Более того, они используют этот контент, чтобы дразнить остальную часть страницы и побуждать посетителей прокручивать страницу вниз. Разместив заголовок «Ваша безрисковая пробная версия апреса» чуть выше сгиба, приглашая посетителей прокрутить страницу вниз, чтобы узнать, о чем идет речь.
№ 5: ОЛИПП
На этой странице подписки на напитки OLIPOP показано, насколько легко клиентам начать или обновить свою подписку с помощью текстового сообщения.
Предлагая скидку 15% на все подписки и беспроблемную отмену, трудно придумать вескую причину. нет Подписаться.
Что вы можете узнать из этой мобильной целевой страницы:
- Предоставьте посетителям доступ к деталям предложения, не перегружая страницу. Используя элементы для экономии места (например, раскрывающийся список часто задаваемых вопросов в этом примере в разделе «Есть вопросы? У нас есть ответы!»), вы можете сделать свою страницу компактной и чистой, не жертвуя содержанием.
- Разместите заметные кнопки CTA по всей странице. Одна из первых вещей, которую посетители замечают, попадая на эту страницу, — это большая центральная кнопка «Подписаться сегодня». OLIPOP повторяет этот призыв к действию еще три раза со стратегическими интервалами (в том числе в самом низу страницы, прямо над нижним колонтитулом), чтобы максимизировать конверсию. Хотя лучшие практики предполагают, что на каждой целевой странице должен быть только один CTA, вы можете и должен повторить несколько раз.
Что еще мы рекомендуем: Чтобы сделать сообщение действительно заметным, мы предлагаем использовать контрастный цвет шрифта или полупрозрачный фон для любого текста, размещенного поверх изображения (в этом примере «Всегда бесплатная доставка»).
Смотрите полную страницу здесь
# 6: Первый день Inc.
Этот пример представляет собой длинную целевую страницу продукта, созданную First Day Inc.
Хотя это страница продукта для детских витаминов, она предназначена не только для продажи, но и для обучения и повышения осведомленности.
Что вы можете узнать из этой мобильной целевой страницы:
- Оптимизируйте макет для ландшафта и портрет. В настольной версии этой страницы преимущества представлены в удобной для чтения Z-образной форме. Однако этот макет плохо работает на экране телефона из-за узкой ширины. Итак, First Day Inc. разработала эту адаптивную целевую страницу, чтобы объединить преимущества в макете с одной колонкой на небольших экранах.
Целевая страница продукта первого дня — настольная или мобильная версия
- Используйте изображения и значки, чтобы разбить текст. Благодаря размещению изображений над текстом (вместо того, чтобы размещать их рядом), эта мобильная целевая страница обеспечивает множество визуальных перерывов. Горизонтальные элементы не только упрощают прокрутку на телефоне, но и улучшают читаемость.
Смотрите полную страницу здесь
# 7: хребет
Иногда меньше значит больше.
На этой мобильной целевой странице (которая, по совпадению, также является их домашней страницей) The Ridge использует минималистский дизайн с высококонтрастными секциями, черно-белым дизайном и простыми призывами к действию «Купить сейчас».
Что вы можете узнать из этой мобильной целевой страницы:
- Вам не нужно создавать совершенно разные дизайны страниц для посетителей с мобильных устройств и компьютеров. Как и The Ridge, вы можете создать универсальную витрину и точно настроить ее отображение на любом типе устройства. Независимо от того, посещаете ли вы их веб-сайт с телефона или компьютера, опыт и дизайн почти одинаковы — просто оптимизированы для каждого устройства в соответствии с рекомендациями, описанными выше.
- Вы можете показать больше на меньшем пространстве с помощью элемента карусели. Это позволяет посетителям увидеть ряд вариантов кошелька и нажать на тот, который больше всего бросается в глаза, без тонны прокрутки.
Смотрите полную страницу здесь
#cta-paragraph-pb#Ищете еще больше идей для целевых страниц? Проверьте эти 35 успешных магазинов Shopify, чтобы вдохновить вас на следующую сборку.
Как легко создать мобильную целевую страницу
Хотите знать, как создать адаптивную целевую страницу, которая выглядит потрясающе независимо от того, какое устройство используют ваши клиенты?
С помощью такого инструмента, как Shogun Page Builder, создать мобильную целевую страницу бренда стало проще, чем когда-либо.
Начните с нуля или выберите тему Shopify, удобную для мобильных устройств, и перетаскивайте элементы, чтобы создавать собственные страницы, которые отлично смотрятся на каждый устройство.
Вы можете легко переключаться между размерами экрана в Shogun Page Builder, чтобы создать полностью адаптивную и оптимизированную целевую страницу.
Легко переключайтесь между размерами экрана для создания адаптивных целевых страниц.
Конструктор страниц упрощает:
- Выберите, какие элементы будут отображаться на мобильных устройствах, настольных компьютерах и планшетах. Например, предположим, что ваша целевая страница содержит привлекающий внимание заголовок видео. Для клиентов, которые посещают мобильную целевую страницу, вы можете решить показывать статическое изображение вместо видео, чтобы обеспечить быструю загрузку.
- Показывать разные сообщения на разных устройствах. Это позволяет вам показывать определенные предложения мобильным пользователям (например, если ваш магазин продает аксессуары для телефонов, вы можете подтвердить в копии, когда покупатель использует свой телефон). Или просто используйте эту возможность для оптимизации длины копии с более короткими и выразительными сообщениями, которые лучше подходят для экрана мобильного устройства.
- Измените способ отображения элементов на разных размерах экрана. Многие элементы в нашей библиотеке имеют функции адаптивной целевой страницы, которые позволяют настраивать их отображение на различных устройствах. Например, вы можете включить автоматическое размещение значков или столбцов на небольших экранах. Или вы можете создать фоновый эффект параллакса для пользователей настольных компьютеров, но отключить его для мобильных клиентов, чтобы упростить работу. Вы также можете настроить поля и отступы, чтобы оптимизировать взаимодействие с клиентом на каждом устройстве.
Создавайте мобильные целевые страницы, достойные вашего бренда
Когда вы создаете и настраиваете свою целевую страницу в Конструкторе страниц, у вас есть полный контроль над тем, как страница выглядит и воспринимается на любом устройстве.
Попробуйте прямо сейчас и убедитесь, как легко создавать мобильные целевые страницы, которые стимулируют конверсии и продажи.
#cta-visual-pb#
