Как сделать баннер для письма: практические советы

Как сделать баннер для письма: практические советы

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

  • сообщает важную информацию
  • задает тональность и настроение электронного письма
  • повышает узнаваемость бренда через фирменные элементы

Письма с изображениями выглядят понятнее и нагляднее текстовых
Письма с изображениями выглядят понятнее и нагляднее текстовых

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

Правильный размер

Стандартная ширина письма – 600 пикселей и ширина баннера не должна превышать это значение. Иначе картинка может обрезаться при просмотре со смартфона или планшета.

Высота может быть любой. Здесь нужно учитывать, как изображение будет выглядеть на экране. Баннер высотой до 500 пикселей поместится в один экран компьютера, а высотой 1000 пикселей – нет. Со смартфонами проще: баннер до 1000 пикселей поместится на экране большинства смартфонов.

Пример отображения письма на разных устройствах
Пример отображения письма на разных устройствах

Также не рекомендуется делать баннеры для email рассылки весом более 200 Кб или помещать много картинок в одно письмо – это замедляет загрузку.

Пример того, как при плохом интернет соединении не загружается половина картинок в письме
Пример того, как при плохом интернет соединении не загружается половина картинок в письме

Подробнее о размере баннера для рассылки по почте и общих требованиях к электронному письму мы писали в статье «Каким должен быть размер письма».

Контрастные цвета

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

Проще всего подбирать сочетания по цветовому кругу с помощью сервиса Color Scheme. Если у бренда есть корпоративные цвета, то в email-маркетинге лучше придерживаться указанной палитры в дизайне.

Пример яркого и контрастного баннера в корпоративных цветах компании
Пример яркого и контрастного баннера в корпоративных цветах компании

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

Пример яркой графики к тематической распродаже в магазине техники
Пример яркой графики к тематической распродаже в магазине техники

Тематические изображения

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

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

Пример тематической картинки для анонса скидки на курсы по рисованию
Пример тематической картинки для анонса скидки на курсы по рисованию

Если у вас нет корпоративного фотобанка, используйте бесплатные стоки, например:

  • Pixabay – бесплатный ресурс медиа файлов, разрешенных для использования в коммерческих целях
  • Unsplash – бесплатный фотосток с атмосферными фотографиями
  • Picjumbo – англоязычный сток, материалы с сайта можно использовать без лицензии

Важная информация

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

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

Сравните яркость и лаконичность двух баннеров
Сравните яркость и лаконичность двух баннеров

Еще больше советов по созданию акционных рассылок вы найдете в статье «Как писать email-рассылки об акциях».

Графические элементы

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

Примеры акцентных графических элементов в почтовой рассылке сервиса для SMM-специалистов
Примеры акцентных графических элементов в почтовой рассылке сервиса для SMM-специалистов

Если в шапке письма нет логотипа компании, то разместите его на баннере, чтобы при беглом просмотре почты сразу было понятно, от кого письмо.

Примеры баннеров с логотипами компании
Примеры баннеров с логотипами компании

Кнопка действия

Добавьте СТА в виде кнопки, если от пользователя требуется действие: перейти, купить, забронировать. Если на баннере для письма есть промокод, продублируйте его ниже, чтобы текст можно было скопировать. Также можно прикрепить к рекламному баннеру ссылку, при нажатии на которую промокод применится автоматически.

Примеры ярких баннеров для рассылки с СТА-кнопкой
Примеры ярких баннеров для рассылки с СТА-кнопкой

Подробнее о трендах оформления СТА-кнопки читайте в статье «Дизайн email-рассылок: правила и тренды 2022».

Ссылка и alt-текст

Добавьте ссылку и alt (альтернативный) текст, который нужен, если картинка не загрузится. Обычно в поле alt-текста дублируют текст с баннера или описывают изображение, например: солнце на закате или девушка на тренировке.Обычно альтернативный текст и ссылка прописываются в меню редактирования картинки. Покажем, как их добавить на примере редактора сервиса для email-рассылок Sendsay. В разделе «Рассылки» нужно нажать кнопку «Создать выпуск» и перейти в блочный редактор.

Создание нового письма в сервисе Sendsay
Создание нового письма в сервисе Sendsay


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


Предпросмотр письма, собранного в блочном конструкторе: слева вид с версткой для десктопа, справа вид с версткой для смартфона
Предпросмотр письма, собранного в блочном конструкторе: слева вид с версткой для десктопа, справа вид с версткой для смартфона

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

Добавление alt-текста и ссылки в блочном редакторе Sendsay
Добавление alt-текста и ссылки в блочном редакторе Sendsay

Анимация

Используйте вместо статичного изображения анимацию в формате GIF или APNG. Не делайте для почтовой рассылки сложную и тяжеловесную анимацию, потому что она не загрузится у получателя. Достаточно сделать подвижными некоторые элементы:

  • сияние блестящих предметов, например, украшений или косметики
  • постепенное появление элементов с описанием товара
  • слайд-шоу товаров
  • бегущая строка с сообщением об акции

Помните, что рекомендуемый размер баннера не должен превышать 200 Кб.

Пример баннера для электронной почты в формате GIF
Пример баннера для электронной почты в формате GIF

Также рекомендуем увеличивать насмотренность: подписаться на почтовые рассылки местных и иностранных конкурентов, черпать вдохновение в сервисах с подборками. Например, искать по запросу «баннер для рассылки» в Pinterest или просматривать примеры оформления писем на сайте Email Gallery.

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

Чек-лист баннера для рассылки

  • Яркая картинка, которая вызывает желание прочитать письмо
  • Соблюдены корпоративные цвета бренда, если требуется
  • Суть предложения указана в нескольких словах или цифрах
  • Графические элементы подходят тематике ниши и привлекают внимание
  • CTA-кнопка яркая и выделяющаяся
  • Добавлены ссылка и alt-текст
  • Подходящий размер баннера рассылки
  • Опционально: анимация вместо статичного фото
Email *