Тренды в дизайне email-рассылок в 2017 году Статьи редакции

Колонка дизайн-студии AIC

Команда дизайн-студии AIC изучила исследования аналитиков и мнения специалистов email-маркетинга и написала для vc.ru колонку с трендами в дизайне email-рассылок в 2017 году.

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

Тренды 2016 года, которые будут жить в 2017 году

1. Адаптивный дизайн

Смартфоны победили десктоп. Согласно исследованиям Litmus, 55% писем открывают на мобильных устройствах. В 2017 году тенденция сохранится, поэтому самое время проверить свои рассылки на адаптивность. Руководствуйтесь основными принципами:

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

Телефония. Используйте возможности смартфонов: добавьте призыв к действию «позвонить» или «заказать звонок».

Разные CTA для мобильных и десктопа

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

Адаптивное меню

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

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

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

В интерактивных письмах нет статичного содержания: списки разворачиваются, элементы двигаются, картинки вращаются. Это позволяет превратить бесконечное «письмо-лендинг» в компактный макет с удобной навигацией.

Интерактивные элементы работают на CSS3, а спроектированы могут быть, например, в Adobe Experience Design или Sparkbox. Задача таких инструментов — помочь сосредоточиться на контенте, а не на вёрстке.

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

Сегодня существует множество почтовых клиентов — десктопные приложения (например, Microsoft Outlook, AOL, Thunderbird), веб-сервисы (Gmail, Mail.Ru Group), мобильные клиенты. В зависимости от того, какие технологии они используют, ваши дизайнерские изыскания в виде CSS-анимации будут работать или не работать в разных клиентах. Стоит предусматривать упрощенные варианты отдельных блоков и прописывать их в media queries.

К слову, в сентябре 2016-го Gmail, наконец, объявил о том, что клиент начинает поддерживать адаптивную верстку писем. Это большой шаг для индустрии почтовых клиентов в целом — переход на адаптивную верстку рассылок станет еще более массовым явлением.

3. GIF-анимация

Анимированные изображения — ещё один способ «оживить» рассылки. У них есть одно важное преимущество — простота производства. В то же время гифки способны наглядно продемонстрировать продукт в действии — поэтому, несмотря на то, что поклонники CSS предрекают скорейшую гибель GIF-анимации, та будет жить и процветать еще долго.

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

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

Еще одна важная деталь — если анимация не загрузится у пользователя (например, по причине медленного соединения) — тот увидит только ее первый кадр. Поэтому стартовый кадр должен быть максимально информативным. По этой же причине не стоит делать слишком «тяжелые» гифки.

4. Векторные изображения

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

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

Пара полезных JS-библиотек для работы с SVG-анимацией: SnapSVG и GreenSock GSAP.

5. Покупка в письме

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

Тренды в email-рассылках 2017 года

1. Видео

Будущее контент-маркетинга за видео — пишет газета The Guardian. По прогнозам Cisco, к следующему году видео охватит 69% всего интернет-трафика. Оно выйдет за пределы YouTube и будет активно применять в email-маркетинге.

Компании, уже внедрившие видео в свои рассылки, отмечают их эффективность:

  • Кликабельность увеличивается на 55%.
  • Пользователя тратят на просмотр письма на 44% времени больше, чем обычно.
  • На 41% увеличиваются расшаривания и публикации в социальных сетях.
  • Конверсия растёт на 24%, ROI — на 20%.
  • Средний чек увеличивается на 14%.

Несмотря на эти преимущества, видео редко встраивается в письма (обычно предпочитают давать ссылку на видеохостинг).

На деле вставить видео в рассылку нетрудно — большинство сервисов поддерживает вставку роликов по ссылке (тот же Mailchimp). Видео может быть и фоном для отдельных элементов или всего макета сразу. Для этого есть онлайн-редактор Mailigen.

2. Галереи изображений

Изображения можно объединять в слайдер или галерею, а не разбрасывать по всему макету, как это делают бренды в большинстве случаев. «Галерейный» подход экономит пространство и позволяет лучше управлять вниманием пользователя.

3. Гибридная верстка рассылок

Технология hybrid coding вместо того, чтобы полагаться на media queries, помогает создавать макеты, адаптивные по умолчанию. Технология совмещает принципы статичной и «резиновой» верстки, что позволяет ей корректно подстраиваться под размеры экрана даже у пользователей Microsoft Outlook.

4. Яркие цветовые схемы

Общие тенденции веб-дизайна найдут отражение в рассылках. Дуплекс потеснит полноцветные изображения (мы писали об этом стиле в блоге), а общее оформление писем станет ярким — как в «Мемфисе».

Насыщенные цвета помогают лучше структурировать контент.

5. Типографика и навигация

Даже великолепно оформленные письма иногда не работают, как этого хочется бизнесу. Причина — в контенте. Оно заслуживает такого же пристального внимания, как и макет. Речь о типографике.

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

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

Текст — главный инструмент в рассылках. Согласно исследованиям, 43% пользователей не используют просмотр изображений в почтовых программах. Чтобы выделить ключевые сообщения, применяйте стили для текста — цвет, начертание и размер кегля. Сам текст набирайте веб-шрифтами или подгружайте нужные с Google Web Fonts.

Как сделать макет plain-text динамичным? Используйте отступы. Они делают текст удобным для чтения, поэтому пользователи изучают такие письма тщательнее — это подтверждает исследование по психологии.

6. Интеграция с социальными сетями

Ссылки на социальные сети — обязательный элемент каждого письма. В 2017 году их будет всё чаще дополнять встроенная «живая» лента — например, Twitter.

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

7. Мини-игры в рассылках

Рассылки всё больше становятся похожи на веб в принципе — все веб-технологии, к которым мы привыкли, постепенно кочуют внутрь писем.

Мы всё уже привыкли к тому, что рассылки стали интерактивными — опросы, товарные карточки, просто анимированные элементы. В скором времени от email-маркетинга стоит ожидать более смелых экспериментов по вовлечению пользователей — например, в письма будут интегрировать небольшие игры — например, с механикой point-and-click.

Почему рассылки не умрут в 2017 году

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

— Пол Бакхейт, программист и ведущий разработчик Google

Смерть email-маркетингу предрекали много раз — от SMS, социальных сетей и даже приложений для совместной работы. Однако маркетологи продолжают использовать рассылки. Эксперты дают этому три объяснения:

  • Персонализация. Электронная почта — это канал коммуникации, где содержимое можно адаптировать для каждого получателя в отдельности.
  • Окупаемость. Рассылки — один из самых доступных инструментов маркетинга. ROI может достигать 4300%.
  • Измеримость. Эффективность рассылок легко измерить, при этом письма можно оптимизировать и улучшать результаты с каждой отправкой.

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

0
8 комментариев
Написать комментарий...

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
gw

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

Ответить
Развернуть ветку
Иван Касаткин

Если подписан на 50+ сайтов, тогда да, засоряют.

Ответить
Развернуть ветку
Mikey

а векторные изображения уже можно использовать при верстке писем разве? Вроде как рекомендовался растр всегда из-за совместимости.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Иван Трифонов

На деле вставить видео в рассылку нетрудно
- вставить нетрудно, только вот отображается корректно не везде

накой делать слайдер в рассылках? CTA сделать хороший - и пусть на сайт переходят, там смотрят..

Ответить
Развернуть ветку
Aleksei Shabelskii

Круто! СПасибо за обзор.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Kirill Ross

Какие тренды? Вы видели акутальную конверсию с рассылки?

Ответить
Развернуть ветку
Сережа Пресвятов

!IMPORTANT

Ответить
Развернуть ветку
Александр Герасимов

такое чувство, что это была статья типа "тренды веб дизайна 2014", из нее сделали эту...

Ответить
Развернуть ветку
Читать все 8 комментариев
null