Размер лендинга задают вопросы покупателя, на которые страница отвечает до заявки. Считают его в экранах, а не в пикселях: экран — то, что человек видит без прокрутки. Тому, кто знает товар и хочет узнать условия, хватит короткой страницы. Снабженцу, который сравнивает поставщиков и держит в руках спецификацию, нужна длинная: у каждого его вопроса своё место.
Ниже — как прикинуть длину, из каких частей собирают посадочную страницу, что на ней должно работать, кроме текста, и по каким ошибкам видно, что её пора переделывать. Примеры — из наших опубликованных кейсов для поставщиков труб и кабеля.
Какой размер лендинга нужен: сколько экранов
Длину удобно считать от покупателя. Выпишите, что он спрашивает у менеджера перед заказом:
- что это за товар и подходит ли он под мою задачу;
- на каких условиях вы его продаёте;
- чем вы надёжнее другого поставщика;
- кто у вас уже покупал;
- как оформить заказ и с кем говорить.
Каждому вопросу — свой блок с ответом. На нашей странице о разработке сайтов первое правило конверсионного дизайна звучит так: «один экран — одно действие». Блок не пытается рассказать всё сразу: он закрывает один вопрос и подводит к следующему шагу. Поэтому экраны лендинга считают по вопросам покупателя, а не по шаблону подрядчика.
Как это выглядит на длинной посадочной, видно по кейсу Снаб Пром. Компания продаёт стальные трубы и производит ППУ-изолированные — трубы в заводской теплоизоляции из пенополиуретана. Для каждого продукта мы сделали отдельную посадочную страницу. Обе длинные, с пятью формами захвата по всей длине: «Каждая форма появляется там, где посетитель уже получил достаточно информации для следующего шага». Подробно — в кейсе два лендинга вместо одного сайта.
Выходит, размер задаёт число вопросов, на которые нужно ответить, а не желание сделать «побольше» или «покороче». Какой длины бывают посадочные и когда какая уместна — в следующем разделе.
Формат лендинга по длине: одноэкранный лендинг и длинная страница
Короткий и длинный формат отличаются не дизайном, а тем, сколько человеку нужно узнать до заявки.
| Формат | Что помещается | Когда уместен |
|---|---|---|
| Одноэкранный | Конкретное предложение и кнопка заявки | Покупатель уже знает товар, ему нужны условия и способ связаться: запись, акция, простой заказ |
| Средний | Предложение, аргументы, доказательства, форма заявки, контакты | Товар понятен, но покупатель выбирает между поставщиками |
| Длинный | То же плюс характеристики, ответы на возражения и формы по ходу чтения | Товар сложный или дорогой, решение принимают несколько человек, покупатель сверяет спецификации |
Одноэкранный формат работает, когда у человека один вопрос и он готов действовать сразу. Если вопросов больше, короткая посадочная не сокращает путь к заявке: человек уходит искать ответы в другом месте.
Длинный лендинг — это не «много текста». Каждый его блок отвечает на свой вопрос, а формы стоят там, где у посетителя созрел следующий шаг, как у Снаб Пром из прошлого раздела.
Из чего собирают каждый из этих блоков — дальше.
Из каких частей состоит лендинг: от главного экрана до подвала
Части лендинга одни и те же у короткого и у длинного формата. Меняется другое: сколько места получает каждая и сколько раз повторяется форма заявки.
- Шапка — верхняя полоса страницы: логотип, меню, телефон и кнопка заявки. Она стоит над главным экраном и видна вместе с ним; меню на лендинге ведёт не в разделы сайта, а к блокам этой же страницы.
- Главный экран — его ещё называют главной страницей лендинга: то, что человек видит сразу после перехода по рекламе или из поиска. Здесь заголовок, предложение и кнопка заявки.
- Предложение — что вы продаёте, кому и на каких условиях.
- Аргументы — почему стоит выбрать вас: характеристики товара, условия поставки и оплаты.
- Доказательства — проекты, документы, сертификаты, отзывы клиентов.
- Формы заявки — короткие поля для имени, телефона и задачи; на длинной посадочной их несколько.
- Контакты — телефон, мессенджеры, адрес.
- Подвал — нижняя часть.
Шапка и подвал лендинга обрамляют страницу: шапка сверху, подвал снизу. Устроены они так же, как у многостраничного сайта. В статье структура сайта мы описали подвал так: «Подвал — нижняя часть: контакты, адрес, ссылки на важные разделы, реквизиты, политика конфиденциальности». Если коротко, что такое футер в дизайне: это второе название подвала, от английского footer. Поэтому футер лендинга и подвал — один и тот же блок.
Анатомия лендинга не задаёт порядок этих частей. Порядок, в котором блоки ведут человека к заявке, — тема отдельная: структуре продающего лендинга мы посвятим свою статью.
Разделы лендинга можно собирать под запрос посетителя. Для ЦСС Кабель — компании с каталогом кабельной продукции — мы сделали мультилендинг: «каждая рекламная кампания ведёт на один и тот же лендинг, но с параметром в ссылке». По этому параметру собирается главный экран: заголовок, изображение товара, предложение. Человек искал силовой кабель ВВГ — и сразу видит в заголовке силовой кабель ВВГ.
Текст и картинки — только половина работы. Вторая половина — то, что действует незаметно для посетителя.
Функционал лендинга: что должно быть в лендинге, кроме текста
Длинная страница с одним текстом — ещё не рабочий инструмент. На странице о разработке сайтов мы описываем, чем это заканчивается: «Реклама запущена, а посчитать нечего: откуда заявка, с какого запроса, сколько она стоила».
Поэтому на вопрос, что должно быть на лендинге, кроме текста, мы отвечаем списком из шести частей технической обвязки:
- Счётчики аналитики — показывают, откуда пришёл посетитель и что он сделал на сайте.
- Учёт звонков — коллтрекинг. Сайт показывает каждому посетителю свой номер и по набранному номеру видит, какая реклама привела звонок.
- Подмена заголовка под поисковый запрос. Посетитель искал «трубы ПНД 110 мм оптом» — и видит этот заголовок, а не общее «Полимерные трубы». На том же принципе собран мультилендинг ЦСС Кабель из раздела о частях.
- Всплывающие формы — предлагают оставить заявку, не прокручивая до конца.
- Обратный звонок — посетитель оставляет номер, менеджер перезванивает.
- Чат — вопрос можно задать, не уходя с сайта.
У самих форм тоже бывают свои задачи. У Снаб Пром к заявке можно прикрепить файл: снабженцы работают со спецификациями в Excel. Там же есть WhatsApp и отдельная форма «до 5 тонн» для розничных обращений.
Без этой обвязки длина ничего не решает: посчитать, какие блоки и какая реклама приводят заявки, не получится.
Размер страницы лендинга: ширина и высота
Когда заказчик спрашивает о размере, он обычно думает о пикселях. На деле ни ширину, ни высоту заранее числом не задают.
Ширина подстраивается под устройство: монитор, ноутбук, планшет или телефон. Заказчику её задавать не нужно — нужно увидеть, как всё выглядит на каждом из них.
Высота — сумма экранов: чем больше вопросов закрывает посадочная, тем она выше.
Отдельно — телефон. В статье создание макета сайта мы пишем: «Версия для телефона — отдельные экраны, а не только вид на компьютере». Блоки, которые на мониторе стоят в ряд, на телефоне встают друг под друга, и высота растёт. Поэтому размер мобильной версии считают отдельно: тот же ответ занимает там больше места.
Чтобы размер получился точным, подрядчику нужны исходные данные от вас.
Что нужно для создания лендинга
До начала работ заказчик готовит четыре вещи:
- Предложение. Что вы продаёте, кому и на каких условиях — одной-двумя фразами.
- Покупатель. Кто принимает решение и кто на него влияет: снабженец, инженер, директор.
- Запросы покупателя. Какими словами он ищет товар и что спрашивает у менеджера. Из этих вопросов и получается длина.
- Материалы и файлы. Фотографии, характеристики, сертификаты, прайс, проекты для блока доказательств, логотип.
Чем полнее этот набор, тем меньше подрядчик додумывает за вас. Как оформить ответы в бриф и техническое задание и как по ним собирают прототип, расскажем в отдельных статьях.
Когда страница собрана, её стоит проверить до запуска рекламы.
Ошибки лендинга: как проверить, что лендинг правильный
Ошибки лендинга видно ещё до запуска рекламы, если смотреть на него глазами покупателя. Вот те, что мы разбирали в своих кейсах и правилах.
- Слайдер с общими фразами вверху. Наше правило дизайна: «Первый экран — не слайдер с общими фразами, а конкретное предложение: что, для кого, по какой цене, и кнопка заявки».
- Две аудитории в одном месте. У Снаб Пром из первого раздела два продукта с разной аудиторией жили на одном сайте. Поэтому мы и разделили их на две посадочные.
- Длинный путь от объявления до заявки. У ЦСС Кабель был многостраничный сайт с каталогом на 10 000 позиций, и в кейсе записано: «Путь от объявления до формы заявки слишком длинный». Решение — мультилендинг из раздела о частях. Многостраничный сайт при этом остался для поиска и для тех, кто приходит целенаправленно.
- Длинная страница без обвязки. Реклама работает, а откуда пришла заявка, не видно. Что подключить — в разделе о функционале.
Для быстрого анализа лендинга подойдёт список из нашей статьи об этапах разработки — что смотреть на согласовании:
- понятно ли с первого экрана, что вы предлагаете и кому;
- видна ли кнопка заявки и звонка без прокрутки;
- как страница выглядит на вашем телефоне, а не только на мониторе.
К нему мы добавляем два пункта о размере: у каждого вопроса покупателя есть блок с ответом, а формы стоят там, где у человека созрел следующий шаг.
Хотите обсудить свой лендинг — опишите задачу в форме расчёта на странице разработка сайтов. В поле «Задача» — что вы продаёте и кому, в поле «Прикрепить файл» — набросок или список нужных частей, если он уже есть.
Вопросы и ответы о размере лендинга
Какой должен быть размер лендинга?
Размер лендинга должен вмещать ответы на вопросы покупателя до заявки, поэтому его считают в экранах. Знакомому товару с понятными условиями хватает одноэкранного формата, сложному товару для бизнеса нужен длинный, с формами по ходу. Как прикинуть длину, показано в первом разделе.
Какие размеры для сайта?
Размеры сайта по ширине не фиксируют: вёрстка подстраивается под монитор, планшет или телефон. Для телефона делают отдельную версию, подробнее — в разделе о ширине и высоте.
Что входит в создание лендинга?
Создание лендинга начинается с ответов заказчика: предложение, покупатель, его вопросы и материалы. Дальше идут проектирование, дизайн, вёрстка, наполнение и запуск — эти шаги по порядку описаны в статье этапы разработки сайта.
Чем отличается сайт от лендинга?
Лендинг — одна страница под одно предложение и одну аудиторию; меню на нём ведёт к блокам. Многостраничный сайт держит разные предложения в разных разделах.
Сколько стоит лендинговая страница?
Лендинг у нас стоит от 400 000 тенге, точная стоимость зависит от объёма задач. Из чего складывается цена, мы разобрали в статье сколько стоит сайт.
Заключение
Размер лендинга — это не высота в пикселях, а число вопросов покупателя, на которые он отвечает до заявки. Части у короткого и длинного формата общие, меняется только место под каждую. Чтобы посадочная не стала лонгридом, который нечем измерить, к тексту добавляют аналитику, учёт звонков и формы.
Если у вас уже есть набросок или список вопросов покупателя, приложите его к форме расчёта на странице разработка сайтов и опишите задачу — обсудим, какой длины и из каких частей нужна ваша страница.