[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Philipp Kontsarenko", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","email_\u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438","\u0434\u0438\u0437\u0430\u0439\u043d_email_\u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a","\u0442\u0440\u0435\u043d\u0434\u044b_2017"], "comments": 15, "likes": 19, "favorites": 67, "is_advertisement": false, "section_name": "default", "id": "20382" }
Philipp Kontsarenko
11 193

Тренды в дизайне 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-рассылок в своей контент-стратегии и помните, что дизайн — это только половина успеха.

#Интерфейсы #email_рассылки #дизайн_email_рассылок #тренды_2017

Статьи по теме
«Мемфис» в веб-дизайне: как «яркий» тренд из 80-х возвращается в 2016 году
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления