12 топ-трендов дизайна рассылок в 2020 году

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

Результаты опроса, проведенного Litmus, и прогнозы специалистов Email on Acid, а также лучшие примеры дизайна писем в наших входящих, говорят о таких трендах этого года:

• AMP компоненты в рассылках, или динамический контент;
• персонализация;
• интерактивность;
• контент в режиме реального времени;
• анимации;
• оптимизация писем под темную тему;
• 3-D изображения;
• иллюстрации;
• кастомные шрифты, или типографика как элемент письма;
• автоматизация создания писем;
• доступность;
• встроенные видео.

1. AMP компоненты в рассылках, или динамический контент

За годы развития email-канала мы привыкли к его статичности. Картина резко меняется с появлением АМР-технологии: теперь получатели рассылок могут совершать массу действий сразу в письме, не переходя на сайт. На сегодняшний день список возможностей АМР невелик, но и это, согласитесь, огромный шаг вперед в развитии этого канала. На сегодняшний день эта технология позволяет получателям:

• отвечать на вопросы и оставлять отзывы, не переходя на Google-форму или другой опросник;
• листать карусели изображений;
• бронировать отели;
• формировать заказ и переходить на сайт уже непосредственно для оплаты;

• и делать другие интерактивные фишки, которые вы сможете придумать.

Чтобы создать такое письмо, вы можете использовать документацию amp.dev или готовый шаблон из нашей библиотеки. 

Подробно о том, что такое АМР и как создавать AMP-письма с помощью Stripo, вы сможете прочитать в нашем блоге.

Мы подготовили более 15 писем в нашей библиотеке шаблонов с готовыми АМР-элементами— попробуйте разнообразить ваши рассылки. 

2. Персонализация

Здесь в первую очередь нужно помнить, что персонализация — нечто намного большее, чем простое обращение к получателям по имени. Хотя обращение по именам тоже должно присутствовать в ваших письмах, но на самом деле продвинутая персонализация включает в себя следующие методы:

• имя отправителя – это не обсуждается. Получатели должны видеть, кто к ним обращается. Кроме того, 65% американцев принимают решение, стоит ли открывать письмо, исходя из имени отправителя;

• персонализированные заголовки – это может быть обращение по имени плюс использование некоторых фактов, которые показывают получателям, что вы обращаетесь непосредственно к ним.

Люди во всем мире получали письма – «амстердамские футболки», «лондонские футболки» и т.д. Это было довольно забавно — и, конечно, каждый получатель знал, что сообщение предназначено именно ему;

• персонализированные предложения - добавьте ценности своим предложениям, сделав их индивидуальными. Общие предложения сейчас считаются неактуальными и довольно часто летят в мусорную корзину;

• подпись – хороший способ быть вежливым и отличная техника персонализации ваших писем. Сообщите клиентам имя человека, который к ним обращается.

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

Stripo позволяет вам добавлять теги персонализации в текст письма. Просто дважды кликните по тексту, и над шаблоном вы увидите кнопку “Теги персонализации”.

Кликните по ней, выберите ESP, с помощью которого собираетесь отправлять рассылку, и добавьте переменную, которую планируете использовать для текущей кампании.

3. Интерактивность

Интерактивные элементы требуют от клиента действий непосредственно в письме.

Когда-то задачей интерактивности было развлечь получателей. Но теперь ее цель — сделать электронное письмо более функциональным и избавить клиента от излишних действий, которые могли бы спровоцировать его на выход из письма.

Вы не хотите создавать такие письма, потому что это сложная работа? Или вам приходилось создавать интерактивные элементы с помощью стороннего инструмента, а затем как-то запихивать их в шаблон, при этом опасаясь, что шаблон сломается или перестанет быть адаптивным? Забудьте эти муки! Stripo предоставляет вам встроенные микроинструменты для создания эффектов ролловера и таймеров обратного отсчета непосредственно в редакторе — и все делается практически моментально! Прямо с этого момента больше не вспоминайте о проблемах рендеринга и убитом на них времени. Интерактивность, которую вы создаете в Stripo, полностью веб-безопасна и корректно работает почти во всех email-клиентах.

Подсказка по дизайну писем этого типа: чтобы привлечь аудиторию к интерактивному элементу, сделайте акцент именно на нем. Избегайте отвлекающих моментов и лишних изображений.

4. Контент в режиме реального времени

Сегодня очень важно предоставлять пользователям только свежую информацию. Например, фонды могут показать обновленную сумму денег, которую удалось собрать, а UEFA, FIFA, MLB и другие спортивные организации – счет матчей в режиме реального времени. Пользователям остается только обновлять письмо каждые 5 минут.

А вот АМР-list позволяет вам показывать пользователю всегда свежую информацию, независимо от того, когда он открывает ваше письмо.

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

Также, в режиме реального времени можно предоставлять прогноз погоды, свободные места в самолете и т.д.

Создать такой контент можно с помощью Nifty.images, они предоставят вам код для встраивания в шаблон.

Можно также воспользоваться нашим готовым шаблоном, в котором уже есть АМР-компонент. Вам останется только настроить политику CORS, и ваше письмо готово.

5. Анимации

Говоря об анимации, мы подразумеваем форматы GIF и CSS.

GIF-анимации

Как добавить GIF-файлы в электронное письмо? Большинство редакторов позволяют вставлять их как обычные изображения. Хотя в некоторых вам нужно будет вставить ссылку. В Stripo это можно реализовать любым способом.

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

APNG

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

Существенным минусом данного файла можно назвать тот факт, что он пока не поддерживается Gmail, как веб версией, так и приложениями, и Outlook на Windows.

CSS-анимации

 Как правило, CSS-анимация применяется для кнопок и изображений. Ее основная задача – показать получателям, что для совершения какого-либо действия нужно кликнуть выделенный элемент.

Для анимации кнопок вы можете использовать код или воспользоваться уже существующим инструментом.

Как это работает:

• вам нужно войти во вкладку Оформление;

• далее перейти в раздел Кнопка;

• активировать опцию Подсвечивать по наведению;

• после чего укажите, какой цвет примет ваша кнопка при наведении на нее и какой цвет примет текст кнопки.

Важно:

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

6. Оптимизация писем под темную тему

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

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

Можно подойти к задаче кардинально: сменить дизайн и использовать только темные цвета в рассылках, что будет весьма неплохим решением.

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

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

7. 3-D изображения

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

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

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

8. Иллюстрации

Иллюстрации сделают ваши рассылки более выделяющимися и узнаваемыми по сравнению с фотографиями.

Все чаще и чаще можно встретить их во входящих.

Посмотрите, как стильно выглядит рассылка от Trello.

9. Кастомные шрифты, или типографика как элемент письма

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

Кроме этого, шрифты становятся ключевым элементом дизайна.

10. Автоматизация создания писем

Автоматизация процесса создания писем – это то, чего мы все хотим. Чем меньше времени мы тратим на дизайн письма, тем больше его остается на создание вдохновляющего текста.

Согласно исследованиям Litmus, создание одного письма занимает в среднем до 24 часов. Это та еще боль. Особенно когда нужно сделать до 9 рассылок одновременно.

Наши смарт-блоки позволяют создавать карточки товаров одним кликом мыши – вы вставляете URL-адрес страницы нужного товара, и Stripo автоматически генерирует изображение товара, цену, описание и кнопку CTA. Если хотите, можно добавить больше полей.

Кроме того, вы можете создавать до 64 схожих писем в минуту, используя Stripo API. Мы скоро добавим в блог подробный пост о том, как это делать.

11. Доступность

Требования доступности разработали для того, чтобы письма, которые создают маркетологи, могли быть “прочитаны” людьми с нарушениями зрения. Сегодня существует 285 таких требований. Некоторые бренды решили придерживаться этих правил еще и потому, что людям приходится использовать программы чтения экрана даже из-за временных неудобств. Сейчас все больше людей ежедневно используют голосовых помощников своих телефонов, чтобы взаимодействовать с электронной почтой. Поэтому стоит убедиться, что в наших письмах использованы лучшие методы обеспечения доступности.

Требования доступности писем в двух словах:

• язык указан в шапке HTML;

• указан тип содержимого <charset="UTF-8">;

• у изображений есть альт-текст;

• сохранен коэффициент контрастности;

• двойной межстрочный интервал;

• описательные ссылки;

• хорошо заметные кнопки CTA;

• все предложения (даже те, которые находятся перед кнопками) и точки маркера заканчиваются точкой или точкой с запятой.

Перед тем как отправлять письмо ценным подписчикам, будьте добры, проверьте соблюдение всех параметров доступности с помощью  функции campaign precheck от Email on Acid.

12. Встроенные видео

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

Добавить видео в письмо можно двумя способами:

• вставить ссылку на видео;

• встроить видео в формате MP4.

Конечно, интерактивным является только второй вариант. Но он поддерживается лишь некоторыми почтовиками. Поэтому мы предлагаем воспользоваться нашим спец кодом: он передает встроенное видео для пользователей с устройствами Apple и ссылку для остальных.

Если письмо открыт на Mac или iPhone, получатель увидит мини-изображение и кнопку Play, и видео будет воспроизводиться прямо в письме.

Если же письмо открыто на другом устройстве, то отображается картинка-превью с Youtube – и после нажатия Play получатель будет перенаправлен на Youtube.

В этом посте мы подробно изложили, как реализовать оба способа добавления видео в письмо с помощью Stripo и получить спец код встраивания, чтобы сделать сообщение интерактивным.

Можно также использовать этот шаблон со встроенным видео. Просто замените ссылки – и ваше письмо готово.

В завершение

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

К счастью, Stripo дает вам возможность легко и быстро применять все тренды 2020 года.