Тенденции действительно хорошего дизайна электронной почты: запись вебинара + вопросы и ответы

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

На этом веб-семинаре мы рассмотрели тенденции дизайна электронной почты на протяжении многих лет. Как выглядела электронная почта в начале 2000-х? Какие тренды попали в круг победителей в 2019 году? И что будет значительным в 2020 - или даже в 2030 году? Команда Really Good Emails присоединилась к нам, чтобы совершить поездку по переулку памяти дизайна электронной почты и помочь нам сделать прогнозы о том, что будет дальше.

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

Вопросы и ответы

Большое спасибо всем, кто задал вопрос во время вебинара! Вот краткий обзор наших ответов на самые популярные вопросы, а также наш ответ на некоторые вопросы, которые мы не получили во время веб-семинара. Есть дополнительные вопросы? Пожалуйста, оставьте их в комментариях.

Чем отличаются эти тенденции дизайна электронной почты между B2C и B2B?

Майк Нельсон : Эти тенденции одинаковы для B2B, B2C и некоммерческих организаций. То, что вы находитесь в одной вертикали, не означает, что вы не можете использовать дизайнерские идеи другой. Единственная вертикаль, которая, кажется, имеет свое собственное ощущение, - это правительственные электронные письма, которые обычно содержат очень много текста.

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

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

Лили Уорт : Я думаю, что термин «пустое пространство» часто рассматривается как отрицательное пространство, что удобно, поскольку оно не зависит от цвета.

Есть какие-нибудь советы, как включить более продуманные элементы визуального дизайна в электронные письма с простым текстом?

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

Майк : Если вы не пишете длинную статью и не используете электронную почту в качестве средства массовой информации, постарайтесь ограничить свои абзацы парой или несколькими предложениями. Используйте маркированный список, где вы можете обобщить идеи. Используйте специальные символы, такие как «################», чтобы создавать визуальные перерывы между идеями. У нас есть несколько хороших примеров писем в текстовом и буквенном стиле в этой коллекции на RGE .

Лили : Я согласна с Джейсоном. Использование разных размеров и толщины шрифтов - и, возможно, пары разных стилей шрифтов для создания некоторой иерархии - поможет сделать электронное письмо легко читаемым и удобоваримым. Вы, безусловно, можете проявить творческий подход к типографике; в нижней части нашего сообщения в блоге о жирной типографии есть несколько хороших примеров текстовых электронных писем .

Есть ли способ сделать анимацию и анимированные GIF доступными?

Лили : Анимация должна играть вспомогательную роль, поэтому ключевые сообщения и призыв к действию должны присутствовать в написанном контенте . Если анимация содержит какую-либо отдельную важную информацию, ее следует представить в теге ALT.

Что касается самой анимации, частота мигания контента от 2 Гц до 55 Гц может нанести вред пользователям, страдающим светочувствительной эпилепсией. Кроме того, пользователи с ослабленным зрением могут испытывать трудности с чтением или просмотром содержимого в формате GIF до изменения анимации. Убедитесь, что ваши анимированные GIF-файлы имеют плавные переходы или не переходят от одного кадра к другому с высокой скоростью.

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

Есть ли какие-нибудь инструменты, которые вы бы посоветовали для создания анимации и GIF-файлов?

Мэтт Хельбиг : Мы все еще видим, что бренды используют такие инструменты, как Adobe Photoshop или After Effects. Добавление некоторых CSS-анимаций или эффектов наведения может быть хорошим способом добавить движения в вашу электронную почту с помощью нескольких строк кода.

Лили : Для создания анимации, которую мы показываем в электронных письмах Litmus, мы используем Adobe Animate. Это программное обеспечение позволяет нам создавать анимацию в форматах GIF, PNG и HTML5. Те, кто работал с Flash в прошлом, найдут это программное обеспечение знакомым.

Уитни Рудесил Пит : Если вы хотите реализовать анимированные PNG (APNG) , в настоящее время невозможно сохранять анимацию в формате APNG с помощью Adobe Photoshop или Adobe Animate. Когда мы включаем APNG в наши электронные письма, мы используем Adobe Animate для создания анимации, но мы экспортируем каждый кадр как один PNG. Чтобы преобразовать все эти отдельные PNG в APNG, вы можете использовать такой инструмент, как PNG Animator, или эту бесплатную альтернативу от ezgif.com .

Используются ли персонализированные иллюстрации в B2B и B2C аудиториях или в основном в B2C?

Майк : Они примерно равны. Примеры, которые мы использовали в веб-семинаре, возможно, выглядели более потребительскими, но все они были от компаний B2B: Mailchimp (продажа услуг электронной почты другим компаниям), HelpScout (продажа технологий обслуживания клиентов предприятиям) и Bulb (продажа энергии предприятиям). .

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

Есть ли по-прежнему проблемы с отображением интерактивных функций в почтовых клиентах?

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

Что насчет темного режима, обеспечивающего лучшую доступность?

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

Как вы думаете, как эти тенденции в дизайне могут работать с аудиторией старше 65 лет?

Майк : Мы не говорили об этом конкретно, но в электронных письмах, которые мы демонстрировали на веб-семинаре и которые мы видим в Really Good Emails , значительно увеличился размер шрифта по сравнению с тем, что было всего несколько лет назад. Это то, что принимает более старая демография. Также известно, что тенденции баухауса и швейцарского дизайна движутся вперед.

Лили : Как предполагает Майк, ретро-стили, которые станут популярными в 2020 году, скорее всего, вызовут ностальгию по более старшему поколению. Упрощение также может быть полезно для вашей аудитории, поскольку электронные письма становятся еще менее загроможденными, что значительно упрощает чтение и понимание сообщения и призывов к действию.

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

Лили : К сожалению, невозможно узнать, будет ли расширена поддержка веб-шрифтов, но мы определенно хотели бы, чтобы это произошло. Этот удобный инструмент может помочь вам найти подходящий вариант для использования с вашим веб-шрифтом.

Как вы думаете, как будет развиваться персонализация, когда дело доходит до некоторых из этих новых тенденций?

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

Кроме того, вот все коллекции действительно хороших писем для тенденций, которые мы рассмотрели на веб-семинаре:

• Пользовательские иллюстрации
• Более продуманный визуальный дизайн
• Более темный дизайн
• Более смелые цвета
• Анимированные письма