Баннер – первое, что видит читатель, открывая рассылку. Поэтому важно оформить его так, чтобы письмо прочитали полностью. Кроме того, хороший баннер для email:
- сообщает важную информацию
- задает тональность и настроение электронного письма
- повышает узнаваемость бренда через фирменные элементы
Чтобы сделать хороший баннер, нужно учесть несколько важных моментов в дизайне, о которых расскажем далее.
Правильный размер
Стандартная ширина письма – 600 пикселей и ширина баннера не должна превышать это значение. Иначе картинка может обрезаться при просмотре со смартфона или планшета.
Высота может быть любой. Здесь нужно учитывать, как изображение будет выглядеть на экране. Баннер высотой до 500 пикселей поместится в один экран компьютера, а высотой 1000 пикселей – нет. Со смартфонами проще: баннер до 1000 пикселей поместится на экране большинства смартфонов.
Также не рекомендуется делать баннеры для email рассылки весом более 200 Кб или помещать много картинок в одно письмо – это замедляет загрузку.
Подробнее о размере баннера для рассылки по почте и общих требованиях к электронному письму мы писали в статье «Каким должен быть размер письма».
Контрастные цвета
Яркие и контрастные баннеры привлекают внимание, но нельзя забывать о правилах цветовых сочетаний, чтобы картинка не вызывала желание поскорее ее перелистнуть.
Проще всего подбирать сочетания по цветовому кругу с помощью сервиса Color Scheme. Если у бренда есть корпоративные цвета, то в email-маркетинге лучше придерживаться указанной палитры в дизайне.
Кроме того, по баннеру должно быть понятно, о чем пойдет речь: распродажа обуви или мебели, обзор новых книг или подборка статей. Также с его помощью можно задавать настроение письма.
Тематические изображения
Старайтесь подбирать картинки, которые будут ассоциироваться с тематикой письма. Вот несколько примеров:
- реклама акции или скидки – изображение товара или услуги, фото ваших клиентов с товарами
- новостная рассылка – главная новость или тематическое изображение, ассоциации к темам новостей
- реклама мероприятия – фото с предыдущих событий или аналогичные со стоков
- анонс инфопродукта – фото основателя проекта или его команды
Если у вас нет корпоративного фотобанка, используйте бесплатные стоки, например:
- Pixabay – бесплатный ресурс медиа файлов, разрешенных для использования в коммерческих целях
- Unsplash – бесплатный фотосток с атмосферными фотографиями
- Picjumbo – англоязычный сток, материалы с сайта можно использовать без лицензии
Важная информация
Если у вас скидка или акция, постарайтесь, чтобы информация считывалась мгновенно. Укажите главное в нескольких словах, а подробности распишите в теле письма, чтобы рекламный баннер был информативным и лаконичным.
Сравните два баннера ниже: на первом лаконичная и понятная информация об акции, на втором много текста, из-за чего баннер выглядит перегруженным. В тело письма без потери смысла можно вынести уточнения об ограничениях или информацию про подбор ухода.
Еще больше советов по созданию акционных рассылок вы найдете в статье «Как писать email-рассылки об акциях».
Графические элементы
Используйте в дизайне графические элементы, чтобы сделать акцент на важную информацию или задать настроение: стикеры, рамки, иконки, эмодзи и прочие элементы, которые подходят вашей нише и понятны аудитории.
Если в шапке письма нет логотипа компании, то разместите его на баннере, чтобы при беглом просмотре почты сразу было понятно, от кого письмо.
Кнопка действия
Добавьте СТА в виде кнопки, если от пользователя требуется действие: перейти, купить, забронировать. Если на баннере для письма есть промокод, продублируйте его ниже, чтобы текст можно было скопировать. Также можно прикрепить к рекламному баннеру ссылку, при нажатии на которую промокод применится автоматически.
Подробнее о трендах оформления СТА-кнопки читайте в статье «Дизайн email-рассылок: правила и тренды 2022».
Ссылка и alt-текст
Добавьте ссылку и alt (альтернативный) текст, который нужен, если картинка не загрузится. Обычно в поле alt-текста дублируют текст с баннера или описывают изображение, например: солнце на закате или девушка на тренировке.Обычно альтернативный текст и ссылка прописываются в меню редактирования картинки. Покажем, как их добавить на примере редактора сервиса для email-рассылок Sendsay. В разделе «Рассылки» нужно нажать кнопку «Создать выпуск» и перейти в блочный редактор.
С помощью этого редактора можно без навыков верстки быстро создать письмо, которое адаптируется под мобильные и десктопные форматы. Есть возможность предпросмотра письма на разных устройствах.
Чтобы написать альтернативный текст, в редакторе нужно добавить новую секцию с картинкой. Затем загрузить изображение и кликнуть по нему мышкой – появится дополнительное меню с возможностью заменить картинку, выбрать способ выравнивания, добавить ссылку и альтернативный текст.
Анимация
Используйте вместо статичного изображения анимацию в формате GIF или APNG. Не делайте для почтовой рассылки сложную и тяжеловесную анимацию, потому что она не загрузится у получателя. Достаточно сделать подвижными некоторые элементы:
- сияние блестящих предметов, например, украшений или косметики
- постепенное появление элементов с описанием товара
- слайд-шоу товаров
- бегущая строка с сообщением об акции
Помните, что рекомендуемый размер баннера не должен превышать 200 Кб.
Также рекомендуем увеличивать насмотренность: подписаться на почтовые рассылки местных и иностранных конкурентов, черпать вдохновение в сервисах с подборками. Например, искать по запросу «баннер для рассылки» в Pinterest или просматривать примеры оформления писем на сайте Email Gallery.
Также можно сделать шаблоны баннеров под разные типы писем — рекламные с крупной типографикой, новостные, транзакционные и прочее. Такие шаблоны сэкономят время и расходы на email-маркетинг.
Чек-лист баннера для рассылки
- Яркая картинка, которая вызывает желание прочитать письмо
- Соблюдены корпоративные цвета бренда, если требуется
- Суть предложения указана в нескольких словах или цифрах
- Графические элементы подходят тематике ниши и привлекают внимание
- CTA-кнопка яркая и выделяющаяся
- Добавлены ссылка и alt-текст
- Подходящий размер баннера рассылки
- Опционально: анимация вместо статичного фото
