20 дельных советов о дизайне вашей email-рассылки

Офисный работник в среднем получает 120–140 писем в день. Над многими из этих них трудится целая команда:

• Email-маркетолог. Думает над темами писем, временем отправки и другими штуками, которые повысят открываемость и переходы.
• Email-дизайнер. Превращает информацию в красивые адаптивные письма. Дизайн влияет на общее впечатление от рассылки и количество переходов.
• Email-верстальщик. Верстает письма и добавляет интерактивные элементы. Его задача — сделать так, чтобы письмо не разъехалось в разных почтовых клиентах, а пользователям было удобно читать рассылку с любого устройства.

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

Для удобства мы разбили советы на категории:

• тип письма;
• структура;
• контент;
• визуал.

Тип письма

1. Перед созданием письма определитесь с его типом. В зависимости от этого будет меняться дизайн:

• Приветственные письма. Не пишем много текста и используем минимум изображений. Следим, чтобы по дизайну письма подписчик сразу понял, кто прислал письмо.
• Знакомство с продуктом, описание преимуществ. В таких письмах обычно много изображений, иногда есть встроенные видео.
• Новостные письма. Обычно это лонгрид, который прерывается тематическими изображениями.
• Рекламные письма. Цель такого письма — продвинуть и продать. Используйте больше заманчивых картинок и меньше текста.
• Транзакционные письма. Эти письма приходят в ответ на какое-то действие клиента. Обычно в них есть изображение продукта и тематический текст: уведомление о доставке, подтверждение заказа или оплаты.

Структура письма

2. Email шириной 600 пикселей уходит в прошлое. Многие девайсы имеют ширину 800 пикселей и больше. Это дополнительное пространство можно использовать, чтобы привлечь внимание пользователей.

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

3. Брендированные элементы в письме. Создайте шаблон письма с хедером и футером. Это экономит время — макет можно использовать для различных типов рассылки.

4. Придерживайтесь шаблонов в одну колонку. С таким макетом будет проще и быстрее создать письмо для мобильных приложений.

5. Используйте сетку. Чтобы письмо нормально отображалось в разных устройствах, верстальщики собирают макет с помощью таблиц. Если макет сделан по сетке, верстать письмо будет удобнее.

Контент

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

7. Свяжите изображения с текстом. Некоторые подписчики отключают отображение картинок в письме. Убедите пользователя посмотреть картинку — напишите alt-текст, который заинтересует читателя.

8. Никогда не создавайте письмо из одного изображения. Большинство провайдеров автоматически отправляют в спам письма, которые сверстаны одной картинкой.

9. Будьте внимательны к шрифтам. От них зависит удобство чтения и общее впечатление от письма. Старайтесь использовать 1-2 безопасных шрифта в одном сообщении.

Мы написали статью, о том какие шрифты можно использовать в email-рассылках.

10. Указывайте запасной вариант для небезопасных шрифтов. Иногда в рассылку нужно вставить шрифты, которые отображают не все почтовые клиенты. Для таких случаев при верстке нужно указать запасной шрифт. На него переключится почтовый клиент, если не сможет отобразить исходный шрифт. Другой вариант — вставить декоративный или редкий шрифт в виде картинки.

11. Кнопка должна выделяться. Визуально выделить кнопку можно с помощью контрастных цветов или нетипичного расположения в письме.

12. Кнопку можно использовать больше одного раза. Некоторые подписчики не переходят по ссылке в начале письма и просматривают его до конца. Вторая кнопка поможет не потерять таких клиентов.

13. Большинство подписчиков используют F-образный паттерн чтения. Помните об этом при размещении контента в письме.

14. Не делайте кнопки на базе изображений. Они будут отображаться некорректно, если у пользователя отключены картинки. Вместо них лучше использовать «пуленепробиваемые» кнопки — они везде отображаются одинаково. У Email On Acid есть статья о том, как сверстать такую кнопку.

Визуальный контент

15. Первый кадр GIF анимации должен раскрывать ее суть. Outlook и Lotus Notes не проигрывают анимацию, а показывают только ее первый кадр. Убедитесь, что подписчик сможет по нему понять смысл GIF.

16. Избегайте «тяжелых» GIF-анимаций. GIF вмещает много информации и в целом уменьшает размер письма. Но тяжелые GIF-анимации увеличивают общее время загрузки сообщения. Некоторые подписчики могут закрыть письмо, если оно будет долго загружаться.

17. Используйте GIF как резерв видео. Встроенные видео поддерживают большинство почтовых клиентов, но не все. Используйте GIF с кадрами из видео, чтобы заинтересовать клиентов и заставить их посмотреть полную версию ролика.

18. Всегда вставляйте ссылки «посмотреть в браузере» и «отписаться». Даже если отправляете простое текстовое письмо, ссылка на просмотр в браузере поможет людям с нестабильным интернет-соединением. Ссылка на отписку тоже должна быть в каждом письме. Без нее почтовые службы отклонят письмо или отправят рассылку в спам.

Как сделать дизайн письма еще лучше

19. Работайте над макетом. Когда вставляете динамические блоки, убедитесь в том, что объем контента соответствует размеру макета. Если контента больше, блоки будут накладываться друг на друга. Если меньше — останется много пустого места.

20. Подумайте, нужна ли вообще интерактивность в письме. Добавляйте только то, что будет полезно пользователю. Простое письмо всегда лучше того, которое вообще не откроется. Для интерактивных писем нужны отдельные шаблоны под мобильные устройства. А это — дополнительное время и расходы.

* признан минюстом РФ иноагентом