Дизайн email-рассылки: что нужно знать об оформлении электронного письма

Электронная почта давно стала неотъемлемой частью нашей жизни и одним из самых популярных и эффективных способов коммуникации. А зачастую, электронная почта это первый канал контакта с потенциальными клиентами и позволяет поддерживать связь с существующими клиентами. Для того, чтобы email-рассылки были эффективными нужно быть и художником, и маркетологом, и IT-специалистом и даже немного психологом. Для всего этого нужны базовые знания в этих сферах и большое желание вызывать интерес у аудитории.

В данной статье мы расскажем о самых базовых правилах оформления и наполнения писем.

Что нужно знать о дизайне писем?

Дизайн рассылок оказывает влияние на общую визуальную привлекательность и функциональность письма. От дизайна зависит, будут ли подписчики читать письмо до конца, регистрироваться на мероприятие и ждать следующее письмо. Более того, неправильное оформление писем может привести к некорректному отображению у получателя или даже попаданию в спам.

Начнем с основ:

1.Элементы письма

Письма верстают таблицами, поэтому каждый элемент занимает участок в виде прямоугольника (это нужно учитывать еще на этапе создания макета). Наполнение каждого из элементов может быть разным: текст, изображение, кнопка, GIF-анимация, ссылка…

Классическое письмо состоит из прехедера (короткая полоса в начале письма), шапки, тела письма и футера. Все, что находится снаружи этих элементов — фон. Чем меньше колонок с контентом в электронном письме, тем проще его воспринимать. Поэтому одной-двух обычно достаточно.

2. Размер письма

Размер от 570 до 800 пикселей — оптимальная ширина письма. Если ширина будет больше, то есть вероятность, что на некоторых устройствах письмо не поместится на экран и поэтому появится горизонтальная полоса прокрутки или нужно будет масштабировать письмо. При этом, длина письма может быть любой: прокрутить письмо по длине обычное дело, а заданный фон может помочь органично завершить дизайн и поспособствовать органичному отображению на разных экранах. Ведь важно, чтобы письмо органично смотрелось на разных устройствах.

3.Цвета, общий стиль, шрифты

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

В email-рассылках нужно использовать один из «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях, а именно:

.

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

Когда дело касается дизайна рассылок, почти всегда действует принцип: «меньше, значит больше». Не стоит перегружать email письма фотографиями и текстом, оставляйте максимальное количество свободного пространства.

В чем особенности дизайна и верстки писем?

Создание писем отличается от разработки сайтов и приложений. Основная проблема в том, что в письмах не работают многие CSS и HTML-теги. Это специальные настройки, которые отвечают за внешний вид страниц в интернете. Например, в письме не получится наложить два элемента друг на друга или добавить анимацию кнопке.

Другая проблема заключается в том, что почтовики (Outlook, Mail.Ru, Gmail, почта Mac) по-разному отображают письма. Внешний вид рассылок зависит по большей части от движка почтового клиента и незначительно — от операционной системы. От почтовых клиентов зависит скругление углов HTML-таблиц, отображение шрифта, вертикальное выравнивание элементов, подчеркивание ссылок и т.д.

Что нельзя и что можно вставлять в письмо?

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

• Одну картинку вместо полноценного письма
• JavaScript
• Flash-анимацию
• CSS-анимацию
• Сокращенные ссылки
• Формы
• Параллаксы

Некоторые из этих элементов не будут отображаться в рассылке (например, Flash-анимации, JavaScript). Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращенные ссылки, письмо из одной картинки).

Что можно (и нужно) вставлять в письмо:

• Текст
• Картинки: PNG, JPEG, BMP
• GIF-анимацию
• Видео (вставляется картинка или GIF-анимация с превью видео, обернутая в ссылку на полную версию ролика)
• Ссылки

Как создать макет в Newsmine?

Создать макет Вы можете либо в Редакторе макетов, либо скопировать готовый HTML-код и вставить его в Стандартном редакторе на вкладке Текст.

Также вы можете воспользоваться готовыми макетами, которые загружены на Вашем сайте.

На что обратить внимание в 2024?

Ранее персонализация была трендом, а теперь это уже базовое требование для рассылок.  Обращение по имени и персонализированный контент по рубрикам (интересам) поможет сделать письмо интересным для конкретного получателя. Ведь каждый  уникален и должен чувствовать это.

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

Пробуйте, экспериментируйте и делайте яркие рассылки! Отчеты по статистике, Карта кликов и Переходы — это те инструменты, которые помогут Вам проанализировать насколько была интересна рассылка подписчикам.

Если вам нужна помочь в создании макетов писем или есть вопросы, Вы можете обратиться к нам!