Дизайн Маркетинг Шаблоны
~ 14 мин читать
4 комментарии
26685 просмотры
оценить
06 февраля

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

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

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

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

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

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

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

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

AMP Components in Emails_Email Design Trends

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

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

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

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

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

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

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

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

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

Stripo Email Design Trends Personalization

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

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

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

Stripo Email Design Trends Addressing by names

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

Stripo Email Design Trends Adding Merge-Tags

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

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

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

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

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

Stripo Top Email Design Trends for 2019 Interactive Elements

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

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

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

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

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

AMP_List

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

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

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

5. Анимации

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

GIF-анимации

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

Stripo Top Email Design Trends GIFs

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

APNG

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

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

CSS-анимации

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

Stripo Email Design Trends CSS Animation Litmus

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

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

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

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

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

Email Design Trends_RU_Highlighted Button

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

Highlighted Button Colors_Ru

Важно:

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

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

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

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

Email Design Trends_Dark Mode

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

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

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

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

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

Design Trends_3D Images

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

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

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

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

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

Email Design Ideas_Using 3D Images in Emails

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

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

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

Creative Typography_Email Design Trends

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Stripo Email Design Trends Accessibility

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

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

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

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

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

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

Stripo Hot Design Trends Embedded Video

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

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

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

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

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

В завершение

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

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

Выбирайте любой из более 300 шаблонов Stripo — это отличная основа для ваших email-кампаний!

sreekumar p 10 месяцев назад

Great article. I would like to know the feasibility of Dynamic Content generation (external API) in Stripo Email Template. Is it possible to include dynamic content?

Анна Кузнецова прокомментировал sreekumar p 10 месяцев назад

Sreekumar, Hello. Thank you for your interest in our blog. Yes, our API allows including dynamic content. Currently, all the details on how to build dynamic emails by using API you may find here: https://stripo.email/ru/stripo-api/ Soon, we'll publish a more detailed post on it. I'll duplicate the link here once the post is ready. But now, if you face some difficulties when working with our API, please email us at support@stripo.email and we'll be glad to assist. Have a good day!

M. qureshi 1 год назад

I find this one very helpful. I knew most of the stuff already but I missed few trends and this was a good reminder for me. Thanks for Sharing!

Анна Кузнецова прокомментировал M. qureshi 1 год назад

M. qureshi, Thank you for your kind words. I'm very glad you find this post useful. Thank you for your interest in our blog!

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Stripo Template Kits_Featured Image
9 дней назад · 8 мин читать
Template Kits, или как получить гайдлайны для создания шаблонов и брендовую айдентику в одном месте

Template Kits является нашей совершенно новой услугой, цель которой — помочь: a) вам создавать фирменные брендовые рассылки независимо от того, какое агентство или email-дизайнера вы нанимаете для построения своих будущих кампаний; b) дизайнерам легко усвоить правила и требования к письмам для любого бренда, чтобы создавать рассылки без лишних затрат времени; c) облегчить и ускорить процесс онбординга новичков в вашей команде. Мы генерируем Template Kit для любого вашего проекта в течение всего одной минуты совершенно бесплатно. Содержимое Template Kit: подробные рекомендации для создания шаблонов «Brand Guidelines» — здесь мы собираем всю информацию...

Дизайн Шаблоны How-to
12 дней назад · 7 мин читать
Как сделать письмо адаптивным

Адаптация писем под мобильные устройства, также известная как mobile-friendly design, уже перестала быть чем-то уникальным — теперь это одна из обязательных опций. Поэтому при создании адаптивного письма с помощью Stripo вы можете смело использовать нашу библиотеку готовых шаблонов — все они уже адаптивны. Соответственно, созданные на их основе сообщения будут корректно отображаться на всех устройствах. Но часто бывает и так, что вам нужно решить нестандартную проблему — вы хотите, чтобы ваше письмо отображался на мобильных девайсах особым образом. Итак, давайте поговорим именно...

Структура Шаблоны How-to
Будьте всегда в курсе последних новостей в области email-маркетинга!