Мы собрали руководство по оформлению письма для разных видов рассылок. В нем разбираемся, как оформлять письмо в целом и его отдельные элементы, чтобы выделяться среди конкурентов и повышать метрики.
Из чего состоит письмо: основные элементы
Оформление электронного письма нужно начинать с макета. Обычно он состоит из четырех основных элементов:
- прехедер
- шапка
- тело
- футер
Чтобы понять, как оформлять каждый из этих элементов, нужно определиться с целевой аудиторией рассылки и задачей, которую решает письмо. От этого будет зависеть текст и дизайн письма.
Рассмотрим каждый элемент.
Прехедер
Это текст, который в интерфейсе почты отображается рядом с темой письма в превью и дополняет ее.
Прехедер оформляется автоматически в почтовом ящике под цвет интерфейса почтового агента. Если нужно его скрыть, можно окрасить в цвет фона в редакторе или использовать CSS-команду «display:none», если верстаете письмо в HTML.
Шапка
В ней можно разместить заголовок письма, логотип, меню и другие дополнительные элементы. Чаще всего в шапке располагают кликабельный логотип или название компании, чтобы заинтересованный читатель мог сразу перейти на сайт.
Тело
Это основная часть письма, в которой располагается оффер, товары, подборка статей.
Тело письма состоит из:
- баннера, который привлекает внимание и содержит призыв к действию
- текста, который раскрывает оффер
- иллюстрации и фона, которые помогают расставить смысловые акценты и сделать письмо привлекательным
- карточки товаров, чтобы побудить пользователя к покупке
- ссылок для перехода на специальные страницы, сайт, оформления заявки
- кнопок, чтобы побудить к целевому действию
Футер
В нем размещают контактную и юридическую информацию, обязательную ссылку на отписку.
Мы определились со структурой письма, теперь пора переходить к оформлению каждого элемента.
Читайте также: Как составить макет письма для email-рассылки
Как оформлять отдельные элементы письма
Каждый элемент письма влияет на его конверсию.
Дизайн шапки
Шапка письма или хедер — первое, что видит получатель после открытия письма. От нее зависит, перейдет читатель к содержанию рассылки или закроет письмо.
Что важно учитывать при оформлении хедера:
- делать в фирменном стиле и использовать логотип, чтобы читатель сразу понимал, что письмо пришло от вашей компании
- прописывать тег Alt-текст (текстовое описание изображения), чтобы пользователь понимал, что изображено в шапке, если изображение в почте не загрузилось
- размещать минимум информации (главную тему письма или СТА)
Читайте также: Как правильно оформить шапку письма для email-рассылки
Баннер
Открывая письмо, пользователь должен заинтересоваться прочитать основное содержание. Для этого можно использовать баннер с основным оффером.
Как оформить баннер:
- Сделать правильного размера. Баннер не должен превышать ширину письма, а высота может быть любой. Желательно, чтобы баннер помещался в один экран. Оптимальная высота для компьютера — до 500 пикселей, для мобильных — до 1000.
- Использовать контрастные цвета, если позволяет фирменный стиль компании. Это поможет привлечь внимание, но главное не перестараться. Чтобы не ошибиться, можно использовать цветовой круг с помощью сервиса Color Scheme.
- Подбирать картинки в тему рассылки. По изображению должно быть понятно, о чем говорится в письме. Если в штате нет дизайнера, можно найти иллюстрации на бесплатных ресурсах, например, Pixabay, Unsplash, Picjumbo.
- Помещать на баннер только важную информацию, а подробности раскрыть в тексте письма.
- Добавить СТА, чтобы пользователь совершил целевое действие. Если на баннере есть промокод, продублируйте его в теле письма, чтобы можно было скопировать.
Читайте также: Как сделать баннер для письма: практические советы
Подбор шрифта
Текст — один из главных элементов в дизайне письма. Важно не только проработать само содержание, но и правильно подобрать шрифты. От этого также зависит, будут читать письмо или быстро закроют.
Основные правила для оформления текста в дизайне рассылки:
- Использовать минималистичные шрифты без наклонов, засечек и жирности. Необычные же шрифты уместны для заголовков и смысловых акцентов
- Использовать шрифты, которые распознает большинство почтовых клиентов. Например, Arial, Helvetica, Verdana и Tahoma
- Визуально разделять разные блоки текста с помощью размера шрифта. От 12 до 14 пунктов для обычного текста, от 14 до 20 пунктов для заголовков и от 20 — для названий
Когда вы определились со шрифтами, не забудьте проверить, как они отображаются на разных устройствах: текст должен комфортно читаться и на маленьких экранах.
Читайте также: Как подобрать шрифт для email-рассылки
Эмодзи
Эти символы используются в личных в переписках каждый день, поэтому и компании внедряют их в коммуникацию с клиентами. В отличие от переписки в мессенджерах, эмодзи в оформлении рассылки важно использовать аккуратно.
Например, если в письме от банка или государственной организации будут улыбки и сердечки, пользователи могут не так понять и даже отписаться. А в тематическом письме от интернет-магазина подарков эмодзи вполне допустимы.
Какие функции выполняют эмодзи в рассылке:
- Помогают дополнить тему письма. Чтобы письмо выделялось среди уведомлений об оплате и личных сообщений на почте, можно добавить эмодзи в тему письма
- Обращают внимание на важную информацию. Если нужно выделить часть текста, акцентировать на акционном предложении или другой важной информации, можно расставить акценты с помощью смайлов
- Заменяют текст или символы. Чтобы сократить тему письма, можно использовать эмодзи. Например, вместо слова «подарок»
- Подходят для маркирования списков. Например, в письме с чек-листом вместо стандартных маркеров можно использовать эмодзи галочки
Когда хотите использовать эмодзи в дизайне рассылки, важно делать это аккуратно: придерживаться tone of voice компании, использовать максимум 2-3 смайла на абзац и тестировать конверсию писем с эмодзи и без них.
Читайте также: Как правильно использовать эмодзи в рассылках
Изображения
Изображения ― важный элемент в оформлении email. Они нужны как в информационных, так и в рекламных рассылках. В оформлении email картинки помогают расставить акценты, показать товары, вызвать определенные ассоциации с контентом или добавить юмор.
По каким правилам стоит использовать изображения в рассылке:
- По изображению в баннере письма с первого взгляда должно быть понятно, о чем идет речь
- Изображение соответствует фирменному стилю компании
- Чем легче картинка, тем быстрее прогрузится письмо. Лучше использовать изображения весом не более 5 Мб
- Оптимальная ширина изображения не более 600 px. В таком размере оно прогрузится и на мобильной, и на десктопной версиях письма
- Кнопки должны быть от 44 х 44 px, чтобы на мобильной версии было легко на нее нажать
- Изображений не должно быть много, иначе письмо будет долго загружаться, или не прогрузится вообще
- У картинки должно быть Alt-описание. Оно покажется, если изображение не подгрузилось, и читатель понимал, как ему ориентироваться в письме
- Текста на картинке не должно быть много. Изображение — вспомогательный элемент, поэтому на нее лучше помещать только заголовки и фразы, на которых акцентировать внимание
Перед тем, как запустить рассылку, тестово отправьте письмо на разные почтовые клиенты. Проверьте, как оно прогружается и все ли корректно отображается на мобильных устройствах. Например, в Sendsay есть блочный Drag’n’Drop редактор, в котором можно посмотреть, как письмо будет выглядеть на разных устройствах.
Читайте также: Подбираем картинки для письма и оформляем email-рассылку с помощью изображений
Призыв к действию
В любом письме, даже информационном, нужно побуждать пользователя к действию: перейти на сайт, добавить товары в корзину, оформить платную подписку.
Призыв к действию (СТА) выполняет эту функцию ― от его оформления зависит, совершит пользователь действие или нет.
Обычно CTA оформляют в виде:
- кнопки
- баннера
- текста с гиперссылкой
Чтобы на них часто кликали, важно соблюдать некоторые правила:
- поместите СТА как можно выше в письме, а если их несколько, то в начале, середине и конце
- оформите призыв в виде кнопки, так как она более заметна, чем текст с гиперссылкой или на картинке
- выделите призыв к действию более ярким цветом, но в вашем фирменном стиле
- расположите СТА на расстоянии от других элементов письма
Оформляя призыв к действию, помните, что он должен быть не только заметным, но и понятным для пользователя. Главное для СТА — мотивировать к действию.
Читайте также: Как грамотно оформить призыв к действию в email-рассылке
Как оформить рассылку для разных событий
Дизайн информационной рассылки можно сделать шаблонным, периодически меняя отдельные элементы. Оформление электронного письма для праздников должно быть уникальным, ведь обычно людям приходит масса писем, и важно сделать так, чтобы внимание привлекло именно ваше письмо.
Что для этого нужно:
- Сделать нестандартный дизайн. Не используйте шаблонное оформление email, вроде черного фона к Black Friday или осенние листья ко Дню знаний. Лучше адаптируйте свой фирменный стиль письма к празднику. Для вдохновения можно подписаться на конкурентов, рассылки крупных компаний, чтобы не только черпать идеи, но и избежать одинаковых принципов в дизайне почтовой рассылки.
- Использовать геймификацию. Люди любят взаимодействовать с контентом, поэтому к празднику можно запустить тематическую игру или квиз, за прохождение которых предлагать читателям что-то полезное.
- Дарить подарки. Современная аудитория ждет письма со скидками перед праздниками, поэтому стоит подарить бонус, бесплатный чек-лист или недорогой продукт.
Читайте также: Новогодняя email-рассылка: идеи, примеры и полезные советы
Как оформить отдельные элементы праздничного письма:
- Придумать оригинальные тему и прехедер. Перед новым годом людям придут десятки писем с эмодзи Деда Мороза, а перед 1 сентября — с темой «Снова в школу». Чтобы выделиться, можно пошутить над этими стереотипами, а также использовать строчки из песен или прописать в теме ваше праздничное предложение.
- Использовать тематические визуальные элементы в шапке. Например, если в хедер вы поместили логотип, то перед Новым годом можно «надеть» на него красный колпак, «посыпать» снегом или «повесить» гирлянду.
- Адаптировать баннер. Читатель увидит его первым после открытия письма, поэтому поместите на баннер информацию о подарке, а на фон положите тематическую картинку или фотографию.
В погоне за оригинальностью в дизайне рассылки помните, что письма должны не раздражать, а приносить ценность. Поэтому просматривайте рассылки других компаний, анализируйте показатели своих и на основе этого разрабатывайте дизайн праздничного письма.
Читайте также: Как оформлять праздничные письма: полезные советы и удачные примеры
Идеи для дизайна email-рассылок
Мы проанализировали сотни писем от разных компаний и выявили для себя принципы дизайна email-рассылок, которые выделяют ее из общей массы.
Экспериментируйте с цветом. Например, можно залить письмо одним фирменным цветом компании и поместить на него текст. Главное, чтобы письмо было читаемым и не слишком ярким.
Добавьте динамику. Письма с динамичным контентом лучше привлекают внимание и выделяют письмо среди остальных. Для этого можно использовать GIF-изображения или APNG-формат, главное, чтобы динамичный файл весил не более 800 кб.
Добавьте интерактив. Игра или другой способ взаимодействия с контентом в дизайне email повысит вовлеченность читателей. Для простой реализации потребуется AMP-технология, которая встроена в некоторые сервисы для рассылок, например, Sendsay.
Сочетайте графику и фотографии. Часто в письмах встречаются стоковые изображения, они выглядят искусственно и банально. Поэтому если в штате есть дизайнер, разработайте свою уникальную графику, а также используйте реальные фотографии товаров или вашей команды.
Стилизуйте письмо. Стилизовать графические материалы сейчас в моде, и это можно использовать для вашей рассылки. Например, сделать письмо в виде страницы старой газеты или афиши.
Используйте фирменный стиль и фирменные иллюстрации. Ваше письмо читатели должны идентифицировать с вашей компанией, поэтому оформляйте ее в едином стиле с сайтом и рекламными коммуникациями.
Читайте также: 20+ крутых идей для email: примеры рассылок
Как оформить письмо для разных типов рассылок
Разные типы письма предполагают разный контент, разное оформление и расположение элементов.
Основные виды рассылок:
- с подборкой товаров и услуг
- акционная
- приветственная
- дайджест
Письмо с товарами и услугами должно мотивировать получателя совершить покупку. Как правило, оно отправляется по триггеру, перед или во время акции, и перед праздниками. Из чего состоит такое письмо:
- прехедера, который дополняет тему
- хедера, или шапки, с логотипом или названием магазина
- баннера (опционально) с тематическим изображением
- текста
- подборки товаров
- СТА с призывом к действию
- футера с кнопками соцсетей, контактами и ссылкой на отписку
Письма с такой структурой от разных компаний выглядят для пользователей одинаково. Чтобы выделиться, можно протестировать варианты расположения товаров:
- квадратная плитка с ценами и без
- прямоугольная плитка с ценами и без
- лаконичные карточки только с СТА-кнопкой или кликабельная плитка
- большие карточки с описанием товара
Можете придумать свое расположение элементов и протестировать их на подписчиках. Для этого в Sendsay есть A/B-тестирование, когда аудитория рассылки делится на 2 части и каждой отправляются письма с разным расположением одних и тех же элементов. Затем в сервисе рассылок можно будет оценить показатели рассылок и выбрать наиболее удачную.
Акционное письмо. Такое письмо должно привлечь внимание сразу после открытия, сфокусировать на теме и предложить совершить целевое действие. Подробности об акции лучше опустить вниз.
Письмо с акцией обычно состоит из:
- прехедера
- хедера
- баннера с коротким анонсом акции
- СТА
- текста с описанием акции и побуждением к покупке
- футера
Приветственное письмо. Такие письма отправляют после подписки на рассылку, регистрации в сервисе или личном кабинете интернет-магазина. Важно рассказать пользователю, что его ждет дальше: еженедельная рассылка об акциях или новых материалах блога.
В приветственном письме, как правило, есть:
- прехедер
- хедер
- приветствие в виде баннера с персональным обращением и объяснением, почему человек получил это письмо
- СТА (опционально) с призывом подтвердить подписку, регистрацию или предложением перейти на сайт
- текст-знакомство (опционально) с информацией о компании и содержании будущих рассылок, основными разделами магазина
- футер
Дайджест. Это письмо с подборкой информационных материалов: статей, видео, обновлениями за определенный период. Дайджесты помогают поддерживать связь с подписчиками и прогревать.
Элементы дайджеста:
- прехедер
- хедер
- баннер с картинкой по теме письма — если в дайджесте много картинок, то лучше не использовать баннер
- текст с содержанием дайджеста или приветствием
- подборка с кнопками и предложением читать подробнее
- опционально блок с информацией о продукте или акции, приглашением на мероприятие
- футер
Читайте также: Какой должна быть структура письма для email-рассылки
Чек-лист по оформлению письма для рассылки
- определите цели и задачи вашего письма, целевую аудиторию
- составьте структуру письма
- продумайте оформление каждого элемента
- используйте фирменный стиль, чтобы письмо было узнаваемым
- для основного текста выберите минималистичный шрифт, а для заголовка и баннера ― необычный
- лучше создать свои иллюстрации и фотографии
- используйте динамическую графику, она лучше привлекает внимание
- уделите внимание СТА — она один из главных элементов письма
- используйте эмодзи в теме и тексте, если они соответствуют tone of voice компании
- тестируйте письма, так вы найдете для себя самый привлекательный дизайн рассылки
Кроме того, мы делимся полезной информацией в сфере digital-маркетинга в нашем телеграм-канале, при подписке на который дарим книгу «Email-маркетинг для бизнеса». Подробнее о том, как ее получить, рассказали в закрепленном сообщении канала.
Подключайте Sendsay, чтобы сделать ваш email-маркетинг мощнее 💪
