Фолбэки для интерактивных писем: как справиться с ограниченной поддержкой интерактивности

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

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

## Почему фолбэки важны

Поддержка HTML и CSS варьируется в зависимости от почтового клиента, и многие элементы, которые вы можете использовать для создания интерактивности, могут отображаться не везде.

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

Интерактивная карусель с эффектными изображениями отлично смотрится в Apple Mail, позволяя подписчикам пролистывать картинки с помощью стрелок или переключателей. Но вот как то же самое письмо отображается в Yahoo! Mail, если не настроен фолбэк:

Без фолбэков письмо выглядит «битым» и вряд ли получит много кликов. Мы этого не хотим! Поэтому давайте разберемся, как сделать так, чтобы интерактивные письма работали везде, используя надежные фолбэки.

## Использование фреймворка «скрыть и показать»

Фреймворк «скрыть и показать» — это самая базовая и распространенная тактика для настройки интерактивности и фолбэков в email. Несмотря на простоту, она очень эффективна.

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

Вы создаете два полностью раздельных раздела в своем HTML: один для интерактивного контента, другой для статического фолбэка. Таким образом, вы можете не только задать эти два разных типа контента, но и настроить разные ссылки и разную аналитику для каждой версии, что позволяет отслеживать и сравнивать интерактивную и статическую версии. Думайте об этом как об A/B-тесте внутри одного письма.

Давайте посмотрим, как реализовать это в коде вашего письма на упрощенном примере:

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

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

## Использование внешних таблиц стилей

Стили, используемые для переключения между секциями, выносятся во внешние файлы CSS с правилами `!important`, которые переопределяют встроенные стили. Вы добавляете тег `` на внешний файл в самый низ тега ``, чтобы обеспечить корректную работу стилей.

## Мастерство специфичности CSS

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

Почему внешний файл лучше встроенного или инлайнового CSS? Если почтовый клиент поддерживает эту функцию, он, скорее всего, поддерживает и все стили, содержащиеся во внешнем файле. Разделение интерактивного CSS таким образом снижает риск конфликтов с неинтерактивным кодом.

## Вишенка на торте: оптимизация через прогрессивное улучшение

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

## ХОТИТЕ БОЛЬШЕ ПОЛЕЗНЫХ МАТЕРИАЛОВ?

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