Несколько лет назад адаптивный дизайн ворвался на рынок интернет-разработок как панацея от нехорошего юзабилити веб-ресурсов и самый верный путь к оптимизации конверсии мобильных пользователей.
Превратившись в актуальный тренд, сейчас он употребляется для повышения сокровища офферов дижитал-агентств и некоторых конструкторов сайтов.
В этом посте мы давайте разберемся, по какой причине многие узнаваемые интернет-маркетологи не применяют этот подход в собственной работе, из-за чего отечественная платформа не торопится за модой и без того ли нужен адаптивный дизайн в принципе?
Адаптивный дизайн — это иллюзия
Настоящий адаптивный дизайн — это сгусток скриптов, кроме того возможно сообщить ИИ. Мы имеем большой опыт в продвижении и создании посадочных страниц и совершенно верно знает — адаптивность лендингам ни к чему.
Landing Page — это web-минимализм, и для действенной работы нужно уходить от сложностей, разбивать их на меньшие части, дабы каждому сегменту пользователей выдать необходимый итог.
Лучшую «адаптивность» сейчас снабжают сегментированные мобильные целевые страницы, каковые применяют фактически все большие ритейл популярные бренды и сервисы. Это комфортно, скоро, кратко и красиво.
Для наглядности обрисуем механизм действия «адаптивного дизайна» большинства конструкторов веб-ресурсов. На первый взгляд работа с ним думается эргономичной — внес трансформации в веб-шаблон один раз и сэкономил минуту-вторую. Переместил элемент, и наподобие как не требуется делать то же самое на мобильном макете.
Настроил интеграции, скрипт обратного звонка — и все, это лучший редактор лендингов на свете! Запускаешь оффер, ожидая прекрасный результат, но с этого момента неприятности начинаются у ваших визитёров.
Лень при создании сегментированной мобильной версии в этом случае — не двигатель прогресса, а первая ступень на пути к неэффективной работе вашего ресурса привлечения клиентов.
- Тим Эш специально для LPgenerator: Из-за чего про адаптивный дизайн стоит забыть?
Неприятности псевдо-адаптивности
1. Первое, что почувствует визитёр, зайдя на лендинг с мобильного устройства (так как адаптивность как раз для мобильных) — страница загружается очень медлительно или по большому счету не желает грузиться. Оно и ясно: мобильные устройства не предусмотрены для этого.
Любой виджет, любой слайдер, применяемый в веб-версии может послать потенциального клиента в очередь к соперникам. Большое время загрузки landing page не должно быть больше 3-4 секунды. Этого времени визитёру достаточно, чтобы выяснить, останется ли он на странице либо закроет ее.
2. Второе, что пользователь заметит: элементы web-варианта посадочной страницы попросту свалены в «стакан» шириной 320 пикселей. Другими словами анатомия простой веб-версии лендинга поделена на сегменты, и при определении мобильного устройства эти сегменты распределяются по высоте страницы без конкретной систематизации.
Большой заголовок начинает переноситься на другую строчок по всем правилам русского, слайдеры не вмещаются в рамки и стрелки их пролистывания не видны, виджеты занимают пол-экрана и закрывает собой нижнюю лид-форму, всплывающие окна popup вызывают второй скроллбар слева на странице, рядом с главным. Сам «лендинг» наряду с этим делается высотой с Empire State Building. Очевидно и время загрузки страницы возрастает многократно.
С компьютера страница выглядит вот так:
но со смартфона…
3. Один из ответственных пунктов — познание, что у каждой посадочной страницы должна быть отдельная цель и, как следствие — личные механизмы ее успехи. В частности, мобильная версия страницы не должна включать в себя целый контент web-версии.
Она должна быть эргономичной и функциональной для просмотра именно на мобильном устройстве: кнопка звонка в одно касание, корректный фон, уменьшенный отсутствие и вес изображений «лишних» скриптов. В случае если сервис предлагает «убрать» с мобильной версии элементы при помощи каких-то настроек, то знайте: за это воздействие будут отвечать дополнительные скрипты и, быть может, элементы все же будут находиться на странице, но в «невидимом» состоянии. Вес остается весом, и скрипты сокрытия — лишние килограммы на теле стройного направляться.
- Из-за чего адаптивный дизайн это не оптимизация мобильной конверсии?
Сегментированные мобильные лендинги LPgenerator
Это красивый козырь для предусмотрительного маркетолога. Сущность несложна: браузер мобильного устройства применяют люди, у которых мало времени для изучения информации.
Они смогут пребывать в давке метро либо за рулем автомобиля, в очереди поликлиники либо переходить улицу по пешеходному переходу. У них имеется только пара секунд по окончании входа на вашу страницу, дабы быть заинтересованными, осознать о чем идет обращение, проникнуться этим и решить покинуть лид (или надавить на кнопку звонка).
Пара секунд, дабы оценить результат вашей вероятно недельной работы! Вот такие они, «визитёры» мобильных страниц. Пользователи стационарных компьютеров/ноутбуков/планшетов по большей возможности находятся в комфортных условиях, исходя из этого главная страница держит «удар временем», но не мобильная версия.
Создание мобильного лендинга начинается с полной переработки главной, либо веб-страницы. Нужно выбрать только «самое-самое» и строго направляться канонам: один призыв к действию, минимальный комплект изображений и текста. Принципиально важно выполнять целостность восприятия контента, поскольку это один из самые важных факторов успеха любого одностраничника.
Другими словами все смысловое содержание должно направлять визитёра на исполнение определенного действия, которое так же направлено на получение пользы самим визитёром. Этому, конечно же, предшествует разработка неповторимого предложения. Лендинг обязан сработать как выстрел снайпера — совершенно верно в цель и никак в противном случае.
Необходимо признать тот факт, что люди не обожают просматривать. Исходя из этого раскрывать главные изюминки товара необходимо тезисно, а не методом написания долгих абзацев. Делайте основной упор на те преимущества, каковые клиент возьмёт от применения вашего товара.
Необходимый комплект элементов:
- неповторимое предложение,
- раскрывающий контекст предложения фон или картина,
- призыв к действию,
- лид-форма.
Из приятных изысков, каковые понравятся визитёру, возможно добавить кликабельный контактный номер телефона в заголовке лендинга: вместо выбора пунктов и выделения строки меню необходимо только прикоснуться к экрану. максимум скорости и Минимум действий для установления контакта. Ну, а потом в дело вступают ваши навыки маркетолога — предложите клиенту то, от чего легко нереально отказаться.
Пример веб и мобильной версии лендинга из магазина посадочных страниц LPgenerator:
*изображения демонстрируют лишь часть страниц, полноценный просмотр дешёв по ссылке
Вместо заключения
Разработка еще не так умна и продвинута, дабы мочь приспособить веб-версии лендингов в адекватные и корректные мобильные варианты машинально.
Особенно это актуально тогда, в то время, когда вы используете некоторый шаблон, что настраиваете в блочном редакторе конструктора веб-ресурсов, где как правило вся разработка адаптивности сводится к несложному скрипту, что трансформирует веб-вариант в мобильный «стакан» шириной 320 пикселей.
Высоким вам конверсий!
Артем Кабалкин,
основатель LPgenerator
Случайные статьи:
- Как поймать «на крючок» новых пользователей?
- 8 Выводов из анализа статистики 18 000 сайтов e-commerce
Дизайн адаптивного лендинга. С чего начинается разработка. часть 1
Подборка похожих статей:
-
Тим эш специально для lpgenerator: почему про адаптивный дизайн стоит забыть?
Тим Эш (Tim Ash) — узнаваемый интернет-маркетолог, CEO и основатель SiteTuners, стратегического агентства по оптимизации конверсии, за плечами которого…
-
Почему адаптивный дизайн это не оптимизация мобильной конверсии?
В 2014 году Джереми Смит (Jeremy Smith), специалист по оптимизации конверсии, написал в собственном блоге: «Классическая оптимизация погибла, и на ее…
-
Респонсивный vs адаптивный дизайн: что лучше для пользователя?
Современные веб-маркетологи и разработчики все чаще отдают предпочтение респонсивному дизайну (responsive design), разрешающему создать страницу,…
-
Адаптивный дизайн — новая эра мобильного маркетинга
Современные потребители весьма и весьма требовательны. В наши дни любой хочет взять продукт (контент), идеально соответствующий всем объективным и…