Баннер — первое, что видит читатель, открывая рассылку. Поэтому важно оформить его так, чтобы письмо прочитали полностью. Кроме того, грамотно оформленный баннер в электронном письме:
- сообщает важную информацию;
- задаёт тональность и настроение;
- повышает узнаваемость бренда через фирменные элементы.
Чтобы сделать такой баннер, нужно учесть несколько моментов в дизайне, о которых расскажем далее.
Как сделать баннер для email-рассылки
Баннер складывается из нескольких элементов: изображение, текст, кнопка, ссылка. Для каждого из них есть свои правила — следуя им, получится сделать эффективное главное изображение письма.
Правильный размер баннера для рассылки
Стандартная ширина письма — 600 пикселей, и ширина баннера не должна превышать это значение. Иначе картинка может обрезаться при просмотре со смартфона или планшета.
Высота может быть любой. Здесь нужно учитывать, как изображение будет выглядеть на экране. Баннер высотой до 500 пикселей поместится в один экран декстопной версии, а высотой 1000 пикселей — нет. Со смартфонами проще: баннер до 1000 пикселей отобразится полностью на экране большинства устройств.
Также не рекомендуется делать баннеры для email-рассылки весом более 200 Кб или помещать много картинок в одно письмо — это замедляет загрузку.
Поэтому к баннеру нужно добавить ссылку и alt (альтернативный) текст — он отобразится, если картинка не загрузится. Обычно в поле alt дублируют текст с баннера или описывают изображение — например: девушка на тренировке или скидка 10% на всё.
Контрастные цвета
Яркие и контрастные баннеры привлекают внимание, но важно соблюдать правила цветовых сочетаний, чтобы картинка не вызывала желание поскорее её перелистнуть.
Проще всего подбирать сочетания по цветовому кругу с помощью специального сервиса, например, Color Scheme. Если у бренда есть корпоративные цвета, то в email-маркетинге лучше придерживаться указанной палитры в дизайне.
По баннеру должно быть понятно, о чём пойдёт речь в письме — например, о распродаже обуви или мебели, обзоре новых книг или подборке статей. Также с его помощью можно задавать настроение письма.
Если в письме речь идёт о скидке или акции, лучше указать оффер на баннере в нескольких словах, а подробности расписать в теле письма — тогда начало письма будет информативным и лаконичным.
Графические элементы
Лучше подбирать картинки, которые ассоциируются с тематикой письма. Вот несколько примеров:
- реклама акции или скидки — изображение товара или услуги, фото клиентов с товарами;
- новостная рассылка — главная новость или тематическое изображение, ассоциации с темами новостей;
- реклама мероприятия — фото с предыдущих событий или аналогичные со стоков;
- анонс инфопродукта — фото основателя проекта или его команды.
Если нет корпоративного фотобанка, можно использовать бесплатные стоки.
Также в дизайне баннера можно использовать графические элементы, чтобы сделать акцент на важную информацию или задать настроение: стикеры, рамки, иконки, эмодзи и прочие элементы, которые подходят нише и понятны аудитории.
Если в шапке письма нет логотипа компании, то разместите его на баннере, чтобы при беглом просмотре почты сразу было понятно, от кого письмо.
Кнопка призыва к действию
Добавьте СТА (call to action — призыв к действию) в виде кнопки, чтобы пользователь совершил покупку, прочитал статью или другое целевое действие. Если на баннере для письма есть промокод, продублируйте его ниже, чтобы текст можно было скопировать.
Мобильная адаптация
Если баннер не адаптирован под маленький экран, текст может стать нечитаемым, а детали изображения — потеряться.
Вот несколько правил для мобильной адаптации баннера:
- Крупный текст — заголовок должен читаться даже на экране 320 пикселей в ширину.
- Минимум мелких элементов — на смартфоне они просто сольются.
- Контраст текста и фона — на ярком солнце экран может бликовать.
В блочном конструкторе в CDP Sendsay письмо адаптируется под мобильное устройство, и баннер масштабируется под ширину экрана, сохраняя пропорции. Но перед отправкой стоит протестировать письмо на реальных устройствах.
Ещё один момент — тёмная тема в почтовых клиентах. Она меняет фон письма, и если у баннера прозрачный фон (PNG), элементы могут стать нечитаемыми. Поэтому лучше использовать непрозрачный фон или проверять, как баннер выглядит в тёмной теме.
Анимация
Используйте вместо статичного изображения анимацию в формате GIF. Не делайте для почтовой рассылки сложную и тяжеловесную анимацию, потому что она может не загрузиться у получателя. Достаточно сделать подвижными некоторые элементы:
- сияние блестящих предметов — например, украшений или косметики;
- слайд-шоу товаров;
- бегущая строка с сообщением об акции.
Рекомендуемый размер баннера с анимацией — не больше 200 Кб.
Также полезно развивать насмотренность: подписаться на почтовые рассылки конкурентов, черпать вдохновение в сервисах с подборками — например, искать по запросу «баннер для рассылки» в Pinterest.
Где в письме разместить баннер
Главный баннер для письма размещают в самом начале — так он сразу попадает в поле зрения пользователя. Это хорошо работает в рассылке с акциями и важными анонсами, когда нужно мгновенно донести главное предложение.
Если письмо информационное или образовательное, баннер можно поставить в середине между блоками контента. Например, после вводного текста и перед основной частью. Так он станет визуальным разделителем.
Типичные ошибки при создании баннера
Даже хорошо продуманное предложение может не сработать, если баннер оформлен с ошибками. Вот пять самых распространённых проблем.
Перегруженный дизайн
Когда на баннере слишком много элементов, пользователю сложнее выделить главное — может быть непонятно, куда смотреть и что делать. Оптимально для баннера: один визуальный акцент, короткий заголовок (5–7 слов) и CTA-кнопка.
Мелкий текст
На смартфоне баннер сжимается до 320–375 пикселей в ширину. Если текст был мелким на макете 600 пикселей, на телефоне он станет нечитаемым. Поэтому важно проверять баннер на предпросмотре и увеличивать шрифт при необходимости.
Цвет текста сливается с фоном
Особенно критично, если у баннера прозрачный фон — в тёмной теме почтового клиента элементы могут слиться с фоном. Лучше использовать контрастные сочетания и проверять читаемость в разных режимах.
Слишком тяжёлый файл
Тяжёлый баннер (больше 1 Мб) может загружаться долго — особенно на мобильном интернете, и в таком случае пользователь закроет письмо, не дождавшись загрузки. Рекомендуемый вес — до 200 Кб для статичных изображений и до 500 Кб для GIF-анимации.
Баннер без понятной цели
Баннер должен помогать подписчику понять, что предлагают в письме и какое действие от него ожидают. Если после просмотра баннера это неочевидно — стоит изменить его.
Как оценить эффективность баннера
Даже самый красивый баннер бесполезен, если он не приводит к целевому действию. Вот метрики, которые помогут понять, работает ли баннер для email-рассылки.
- CTR (Click-Through Rate) — главный показатель эффективности. Он показывает, какой процент подписчиков кликнул по баннеру или CTA-кнопке.
- Карта кликов — показывает, куда именно нажимают пользователи. Если большинство кликов приходится на баннер, а не на кнопку, стоит сделать весь баннер кликабельным.
Найти лучший вариант баннера поможет A/B-тестирование. Этот метод позволяет сравнить два варианта письма и выбрать тот, который даёт лучший результат. Для этого часть аудитории случайным образом делится на две группы, каждая получает свою версию письма. Через несколько часов система определяет победителя по количеству открытий или кликов и может отправить лучший вариант остальным подписчикам. Тестировать можно цвета, текст, расположение CTA, наличие или отсутствие анимации.
Чек-лист баннера для рассылки
- Привлекательная картинка, которая вызывает желание прочитать письмо.
- Соблюдены корпоративные цвета бренда.
- Суть предложения указана в нескольких словах или цифрах.
- Графические элементы подходят тематике ниши и привлекают внимание.
- Контрастная CTA-кнопка.
- Добавлены ссылки и alt-текст.
- Подходящий размер баннера рассылки (ширина до 600 px, вес до 200 Кб).
- Проверена адаптивность под мобильные устройства.
- Опционально: анимация вместо статичного фото.
Частые вопросы о баннерах для email-рассылок
