Это будущее дизайна электронной почты

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

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

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

Электронный маркетинг в 2020 году Подготовьтесь к будущему электронного маркетинга с помощью идей 20 ведущих экспертов, а также результатов опросов тысяч маркетологов и потребителей. Скачать сейчас

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

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

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

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

Карусель в электронном письме?

Некоторое время назад британский розничный торговец B&Q отправил электронное письмо, которое поджег отрасль.

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

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

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

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

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

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

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

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

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

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

Подобно цветам фона в примере «Еженедельная электронная почта», блок отображения использует анимацию ключевых кадров CSS, чтобы оживить и без того хорошо продуманную кампанию. Что действительно здорово, так это то, что электронное письмо прекрасно реагирует, красиво складывая каждый раздел на мобильных устройствах. Адаптивный дизайн и анимированные значки служат для улучшения данных об использовании мобильной электронной почты.

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

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

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

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

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

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

Более вкусные меню электронной почты

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

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

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

Конкурсы сообщества: поистине передний край

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

Для нашего второго конкурса люди придумывали интересные шаблоны навигации. Мы были потрясены некоторыми результатами, такими как липкая концепция навигации Реми Парментье:

Пытаетесь что-то новенькое?

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

Попробовать Litmus бесплатно →