Разбираемся, как правильно расположить баннер, карточки товаров и другие элементы, чтобы сделать макет письма для рассылки по электронной почте.
Из чего состоит письмо
Содержимое электронного письма подчинено определенной логике: сначала идет прехедер, потом шапка, тело и подвал.
Эту структуру письма можно использовать как образец. Дальше в статье мы рассмотрим каждый элемент и его составляющие. Но перед тем, как составлять макет рассылки, нужно разобраться:
- Кто будет получать письмо. Например, клиенты банка
- Зачем отправляем письмо. Например, для оформления заявок на открытие счета в банке
Выбранная аудитория и сформированная цель сообщения – это фундамент макета email-рассылки, от которого будет зависеть внутренняя логика и оффер письма. Об этом мы рассказывали в статье про то, как сделать сделать рассылку по email с нуля.
В email-рассылке важно помнить про размеры макета – лучше сделать ширину письма в 600 пикселей, тогда письмо в почтовом ящике будет нормально отображаться.
Как правильно сделать прехедер
Прехедер – это текстовое уточнение темы письма, которое попадает в превью.
Например, вот письмо блога про инвестиции с анонсом новой статьи. В прехедере написано: «Истории провалов инвесторов» – этот текст пойдет в превью и отобразится первым после темы.
Зачем нужен прехедер: с ним можно дополнить тему, чтобы повысить открываемость письма.
Как сделать прехедер в макете рассылки: прописывайте в прехедере текст в зависимости от темы письма. Например, тема рекламной рассылки «Запускаем продажу новых наушников». В прехедере можно указать:
- Скидка 25 % для самых быстрых
- Не боятся воды и влаги
- Активное шумоподавление
- Красный, черный, белый цвета
Если прехедер выглядит некрасиво, то его можно спрятать так, чтобы он не отображался в почтовом ящике получателя:
- Если верстаете макет email-письма в редакторе – окрасьте текст прехедера в цвет фона
- Если верстаете макет email-письма в HTML – используйте CSS-команду «display:none». На всякий случай можно дополнить команду: указать размер прехедера в один пиксель и использовать в шрифте цвет фона
Как правильно сделать шапку письма
Шапка письма – это место для размещения логотипа, заголовка, меню и другой дополнительной информации. Шапку письма еще называют «хедером».
Зачем нужна шапка: она помогает идентифицировать письмо, его тему и поставить ссылку на сайт компании.
Как использовать шапку в макете email-рассылки: можно использовать для разграничения ссылок. Например, шапка выступает логотипом компании и ссылка ведет на главную страницу сайта.
Шапка пригодится для визуализации основного оффера.
В шапке можно разместить меню меню или показать персональные данные клиента отображения персональных данных клиента – актуально для магазинов и маркетплейсов. В шапке могут быть ссылки на разделы сайта, личный кабинет клиента и количество бонусных баллов.
Больше примеров и особенностей этой части письма мы разобрали в отдельной статье, которая поможет вам правильно оформлять шапку.
Как правильно наполнить письмо
После прехедера и шапки идет «тело письма». Это основная часть email-рассылки, в которой содержится оффер, подборка товаров или полезная информация.
Баннер: как выбрать и расположить
Баннер может занимать все тело письма, но чаще – только его часть. В письме бывает один или сразу несколько баннеров. Часто баннеры делают яркими, красивыми и эффектными.
Зачем нужен: для привлечения внимания, создания тональности сообщения и призыва к действию. К баннеру обычно прикреплена ссылка, которая ведет на страницу предложения или сайт компании.
Как использовать в макете email-рассылки: зависит от формата письма. Для рекламной рассылки в баннер выносят главную мысль, слоган, цепляющие слова, оффер, размер скидки, условия спецпредложения. В баннере можно использовать яркие иллюстрации, которые привлекают внимание.
Если при оформлении макета основная ставка делается на визуал и привлечение внимания, то текст и подробности предложения можно расположить ниже.
В письме может быть несколько баннеров. Действует правило: один баннер – один оффер – одно действие.
В информационной рассылке по баннеру можно понять содержание сообщения до его чтения.
В баннере может быть не только картинка, но и заголовок. Он будет интриговать, раскрывать тему или служить подводкой.
Разные оформления баннеров позволяют создавать рубрики рассылок или визуально объединять письма для спецпроектов. Когда люди открывают письмо и видят непривычное оформление, то это задает особое настроение и тон рассылке.
Текст: как работает в письме и на что обратить внимание
Текст – это основная информация, которая идет после баннера.
Зачем нужен: если мы говорим про рекламную рассылку, то здесь дополнительно раскрывается оффер и работает с возможными возражениями. В информационной рассылке текст – основной элемент письма.
Как использовать в макете email-рассылки: четких правил нет, но есть рекомендации, которые помогут сделать текст лучше и понятней.
Пишите про людей, а не про компанию. Текст хорошо срабатывает, когда решает проблемы аудитории или предлагает решение. Мало кому интересны новости компании формата «мы лучшие на рынке». Что от этого меняется в жизни клиента? Если ничего – значит сообщение пройдет мимо. Такую новость лучше использовать в качестве подводки: «Мы лучшие на рынке и все благодаря вам. Вот, что вы покупали в этом году».
Также избегайте воды и штампов. Вместо:
- «Лидеры рынка» – «Лидеры рынка в 2021 году по версии Форбс»
- «Лучший продукт» – «По исследованию компании N наш товар выбирают чаще, чем товары конкурента»
- «Качественные материалы» – «Используем итальянскую кожу, а у мастеров подтвержденные профессиональные сертификаты»
Структурируйте текст – разбивайте его на абзацы, делайте подзаголовки, выделяйте цитаты. Рекомендуем делать текст в одну или максимум две колонки, потому что так верстка не поплывет на разных устройствах и грамотно перестроится на мобильную и обратно.
Вот как можно использовать одну или две колонки в зависимости от содержания письма.
Две колонки подойдут для дайджеста, рекламной рассылки или подборки – так человек зацепил больше предложений взглядом и чем-то заинтересуется.
Подробнее про текст в рассылках ― в статье, как за 17 шагов сделать качественный текст.
Иллюстрации и фон рассылки: на что обратить внимание
Чтобы оформить макет письма, нужно помнить про визуал рассылки – это не только картинки для товаров или иллюстрации для текста, но и фоновый цвет, подложки и графические элементы. У нас есть большая статья на эту тему – «Подбираем картинки для письма и оформляем email-рассылку с помощью изображений».
Зачем нужны: не только для визуального оформления рассылки, но и для выделения смыслов и создания тональности письма.
Как использовать в макете письма для рассылки: здесь потребуется помощь дизайнера, но вы можете использовать готовые красивые иллюстрации из сервисов-конструкторов (например, Canva) или брать фотографии с фотостока (например, Unsplash).
Далее – несколько подходов к оформлению в качестве примеров:
- Графика позволяет дополнительно разделить смысловые блоки письма
- С помощью фона и цвета можно создать в письме настроение. А еще, это выглядит красиво и стильно
- Графика позволяет заменить текст там, где он не нужен или дополнить его
Карточки товаров: как расположить и привлечь внимание
Если вы создаете макет электронного письма для магазина, то ваши рекламные рассылки могут содержать готовые карточки товаров. Покупку можно совершить как прямо внутри письма (используется AMP-технология), так и при переходе по ссылке на сайт.
Карточка обычно устроена так: изображение + текстовое описание + цена. Карточки могут быть как в один, так и несколько столбцов.
Зачем нужны: предоставить клиенту в письме предложение товаров, которые можно купить прямо сейчас. Используется для реакционных, рекламных и триггерных рассылок.
Как использовать в макете email-рассылки: карточки товаров располагаются в теле письма, их можно отделять тематически. Например, первая линия – скидки на кроссовки, вторая линия – новое поступление, третья – товары для ухода за обувью.
В редакторе Sendsay есть бесплатный конструктор шаблонов под каталоги товаров или письма в стиле «брошенная корзина».
В карточке главное – фотография товара, цена и кнопка для покупки. Подобрали удачные примеры карточек товаров:
- Карточки товаров в ряд – когда товара много и при его выборе клиент опирается на визуал
- Карточки товаров столбцом – когда товара немного, а визуал не играет особой роли
Ссылки: как правильно добавлять в текст и баннеры
Чтобы создать макет письма, не стоит забывать про ссылки. В письме ссылка может быть указана прямо в тексте, на картинке, шапке или кнопке.
Зачем нужна ссылка: для формирования заявок и переходов на сайт. С помощью ссылок можно понять при анализе, на какие элементы чаще кликают и в будущем доработать письмо. Для отслеживания статистики переходов лучше добавить UTM-метку – это можно сделать с помощью бесплатного сервиса от Tilda.
Как использовать в макете email-рассылки: ссылки можно ставить на любый элемент письма, но соблюдайте логику. Если на баннере указана скидка, то при переходе по ссылке человек должен попасть на специальную страницу с акционным товаров, а не на главную страницу сайта.
Примеры, как еще используют ссылки:
- Для увеличения кликабельности и переходов на сайт – любой элемент в письме ведет на товар
- Для разграничения переходов на сайт. Каждая ссылка ведет на свою страницу сайта. Подойдет для дайджестов и подборок
Кнопки: как расположить и что написать
Кнопки обычно ведут на сайт компании или в приложение. Их можно оформить картинкой со ссылкой или с помощью HTML-кода.
Зачем нужны кнопки: они помогают привлечь внимание читателя и призывают совершить действие.
Как использовать в макете email-рассылки: как и в случае со ссылкой хорошо работают кнопки, которые читаются без контекста или наоборот, дополняют его.
Вот, например, рассылка от Сбербанка, где кнопки подписаны словом «узнать». Чтобы понять, куда ведет ссылка, придется прочитать текст над кнопкой.
Это можно исправить, сделав кнопки самостоятельными по смыслу.
Другой вариант – добавить новый смысловой контекст, который пересекается с темой. Например, пойти от вопросов которые волнуют читателей.
Иногда кнопки позволяют пробить «баннерную слепоту». Хороший пример – рассылка Т—Ж.
Что разместить в подвале
Подвал письма еще называют футером. Это обязательный элемент, где по закону «О рекламе» нужно указать ссылку на отписку. В Sendsay ссылка для отписки формируется автоматически. Кроме того, в подвал обычно добавляют юридическую и контактную информацию: телефон, сайт, соцсети, адрес.
Зачем нужен: для соблюдения закона «О рекламе» и справочной информации.
Как использовать в рассылке:
- Оставить в подвале ссылки на приложения, соцсети, службу поддержки и другие дополнительные опции
- Разместить меню со ссылками на сайт, чтобы не нагружать шапку
- Разместить юридическую информацию – часто это касается банковского, медицинского, табачного, алкогольного и финансового сектора бизнеса
Чек-лист разработки макета
Чтобы ничего не забыть при составлении макета:
- Определена целевая аудитория рассылки и желаемое действие
- Ширина макета – 600 пикселей
- Прехедер дополняет тему письма
- В шапке расположен логотип, заголовок, иллюстрация или меню сайта
- Баннер привлекает внимание и призывает совершить действие
- Текст понятен, разбит на абзацы, его можно считать глазами
- Иллюстрации дополняют повествование или задают тон сообщению
- Карточки товаров оформлены в ряд или по порядку
- Ссылки оформлены гипертекстом или добавлены на картинки, баннеры, логотипы
- Кнопки призывают совершить действие или дополняют контекст
- В подвале письма стоит ссылка на отписку от рассылки и есть контактная информация.
