Будущее дизайна электронных писем

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

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

Давайте рассмотрим вызовы, связанные с экспериментальным дизайном писем, и соберем некоторые из наших любимых футуристических email-кампаний.

Усилите свою email-стратегию

Получите экспертные мнения и отраслевые бенчмарки из последнего отчета о состоянии email-маркетинга. Поднимите свою email-игру на новый уровень.

## Дизайн писем не должен быть ограничивающим

Когда большинство людей думают об email-маркетинге, они представляют себе скучные, шаблонные рассылки от компаний, стремящихся что-то продать. И если вам поручили создать email-кампанию, вы, скорее всего, смотрите на кучу HTML-таблиц и встроенного CSS, считая минуты до того момента, когда сможете собрать письмо, которое более-менее работает везде.

Хотя основы дизайна писем действительно немного устарели, на самом деле нет предела тому, что можно сделать с их помощью, проявив немного креативности, планирования и проведя множество тестов. Да, дизайнерам писем приходится использовать табличную верстку (спасибо, Outlook!), встроенный CSS и пробираться через море хаков, но, как показывают приведенные ниже примеры, в почтовом ящике все равно можно создать нечто удивительное.

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

## Карусель в письме?

Некоторое время назад британский ритейлер B&Q отправил письмо, которое взбудоражило индустрию.

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

В письме используется ряд свойств CSS3, а также умное таргетирование для создания эффекта. С помощью CSS-переходов, анимаций, z-index и свойства overflow дизайнеры создали умное письмо, которое так и просится, чтобы его нажали.

Еще более впечатляет то, что все прекрасно работает и в почтовых клиентах, которые не поддерживают эти продвинутые техники.

## Безумные цвета и «Звездные войны»

Британское агентство Action Rocket уже давно лидирует в области дизайна электронных писем. С помощью своего еженедельного дайджеста новостей об email-маркетинге под названием Email Weekly они тестируют креативные техники, которые впоследствии могут появиться в клиентских кампаниях.

Один из наших любимых примеров — их письмо с вопросом: «Какого цвета это письмо?».

Используя CSS-анимации на основе ключевых кадров, они анимировали фоновые цвета заголовка, создавая завораживающий, почти галлюциногенный эффект. Сначала это едва заметно, но как только подписчик замечает анимацию, он уже не может отвести взгляд.

Еще один отличный пример от Action Rocket — их недавний дайджест, вдохновленный «Звездными войнами», где они использовали экспериментальное свойство -webkit-perspective вместе с CSS-трансформациями, чтобы воссоздать культовый начальный титр любимого всеми научно-фантастического фильма.

## Инфографика в письме?

Хотя агентство display block регулярно отправляет отличные письма, их недавняя инфографика в email действительно привлекла наше внимание.

Похоже на пример с анимацией фоновых цветов из Email Weekly, display block использует CSS-анимации на основе ключевых кадров, чтобы добавить динамики в уже хорошо продуманную кампанию. Особенно здорово то, что письмо прекрасно адаптируется под мобильные устройства, аккуратно складывая каждый блок. Адаптивный дизайн и анимированные иконки усиливают впечатление от отличных данных об использовании мобильной почты.

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

## HTML5-видео и интерактивные туры

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

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

А чтобы отметить запуск нашего редактора кода писем Builder, он пошел еще дальше и создал интерактивный тур прямо в письме.

Используя CSS-анимации, хак с чекбоксами и активное применение свойства CSS content, он демонстрирует функции Builder прямо в почтовом ящике — давая подписчикам возможность оценить продукт, даже не заходя в систему. Код, который это обеспечивает, довольно объемный, но вы можете посмотреть его прямо в Builder (что-то вроде email-версии фильма «Начало»).

## Более удобные меню в письмах

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

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

Нам так понравилось решение Джерри, что мы предложили участникам показать другие креативные шаблоны навигации в одном из наших конкурсов сообщества…

## Конкурсы сообщества: по-настоящему передовые идеи

Наши конкурсы сообщества — это место, где мы действительно бросаем вызов людям придумывать безумные идеи. Каждый месяц мы даем им тему и позволяем проявить свои навыки. Наш первый конкурс, посвященный креативному использованию ALT-текста, дал потрясающие результаты, например, игру Space Invaders прямо в письме:

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

## Пробуете что-то новое?

Хотя пробовать новое в email-дизайне увлекательно, многое может пойти не так, если не протестировать кампании тщательно. Email Previews упрощает тестирование любой техники в десктопных, веб- и мобильных почтовых клиентах.