Как создать анимированную карточку-перевертыш в электронном письме

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

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

Так как же нам это удалось? Я очень рад, что вы спросили.

## Создание анимации

Мы начинаем с создания самой продвинутой версии: версии с анимированной карточкой. Создание карточки-перевертыша для веба относительно просто и не требует продвинутой CSS-анимации. Но, конечно, это электронное письмо, поэтому нам придется внести некоторые интересные изменения, чтобы оно работало, поскольку не все поддерживается.

Сначала мы создаем контейнеры для лицевой и оборотной стороны карточки:

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

Затем мы оборачиваем все это условным кодом, чтобы скрыть его от Outlook, и ячейкой таблицы с классом «interactive»:

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

Нам нужно указать размер карточек, используя ширину и высоту, чтобы они соответствовали размеру изображений. Затем мы применяем это к самому внешнему div, чтобы нам не приходилось беспокоиться о том, что какой-либо из внутренних div будет другого размера. Мы также добавляем свойство `perspective`, чтобы получить 3D-эффект анимации.

.card-flip { width: 162px; height: 250px; perspective: 500px; }

Далее мы добавляем тень (для забавы) и трансформацию к div `content`:

.content { box-shadow: 0 0 15px rgba(0,0,0,0.1); transition: transform 1s; }

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

.front, .back { position: absolute; width: 100%; height: 100%; }

Теперь, когда карточки стилизованы, добавим анимацию. Мы собираемся вращать карточку по оси Y:

.card-flip:hover .content { transform: rotateY( 180deg ) ; transition: transform 0.5s; }

Для веба нам нужно было бы включить `transform-style: preserve-3d;`, но это не поддерживается в электронной почте. Вместо этого мы скроем обратную карточку, придав ей `opacity: 0`, а затем будем переводить `opacity` обратной карточки до 100% при наведении.

.back { opacity: 0; transition: opacity 0.5s; } .card-flip:hover .back{ opacity: 100%; transition: opacity 0.5s; }

Чтобы переход был плавным, мы сделаем противоположное для лицевой карточки.

.front { opacity: 100%; transition: opacity 0.5s; } .card-flip:hover .front{ opacity: 0; transition: opacity 0.5s; }

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

@media screen and (-webkit-min-device-pixel-ratio: 0) { .fallback { display: none; } .interactive .card-flip { display: block; } .card-flip { width: 162px; height: 250px; perspective: 500px; } .content { box-shadow: 0 0 15px rgba(0,0,0,0.1); transition: transform 1s; } .front, .back { position: absolute; width: 100%; height: 100%; } .card-flip:hover .content { transform: rotateY( 180deg ) ; transition: transform 0.5s; } .back { opacity: 0; transition: opacity 0.5s; } .card-flip:hover .back{ opacity: 100%; transition: opacity 0.5s; } .front { opacity: 100%; transition: opacity 0.5s; } .card-flip:hover .front{ opacity: 0; transition: opacity 0.5s; } }

И вуаля! Анимированная карточка, которая работает в Apple Mail!

## Запасные варианты, потому что это электронная почта.

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

### Запасной вариант с поддержкой наведения

Gmail, Yahoo и AOL поддерживают `:hover`, поэтому нам не нужно терять интерактивный элемент в этих клиентах. Но, поскольку они не поддерживают `position: absolute;`, нам нужно предоставить другую версию.

В этих случаях мы обернем тег `` с фоновым изображением вокруг другого изображения. Затем, когда мы наведем курсор на тег ``, мы заставим изображение исчезнуть.

Сначала мы стилизуем `` с фоновым изображением.

Затем мы убедимся, что он отображается как блок, и зададим ему ширину и высоту, чтобы фоновое изображение отображалось.

Замена изображения легко достигается путем добавления состояния `:hover` к классу, а затем указания изображению исчезнуть.

.card:hover img { display: none; box-shadow: 4px 4px 3px rgba(0,0,0,0.12); }

Дополнительный бонусный совет по кодированию!

Использование техники `display: none` выше может быть резким. Вы можете сгладить переход, используя `opacity: 0;` вместо этого, а затем добавив `transition: opacity 0.5s;` как к состоянию `:hover`, так и инлайн к изображению:

.card:hover img { opacity: 0; box-shadow: 4px 4px 3px rgba(0,0,0,0.12); transition: opacity 0.5s; } . . .

Это в настоящее время не поддерживается в Gmail, Yahoo или AOL, поэтому ничего не изменится там, но для клиентов Apple Mail, которые предпочитают сокращенное движение, это добавит приятный штрих.

Поскольку этот запасной вариант по-прежнему является интерактивной версией, мы помещаем его внутрь ячейки таблицы с классом `interactive` сразу после анимированной версии, а затем добавляем некоторые стили, чтобы скрыть его в WebKit-клиентах:

.interactive .card { display: block !important; }

Поскольку `` имеет инлайн-стиль `display: block`, нам нужно добавить `!important`. Это также означает, что это будет версия по умолчанию.

### Запасной вариант без поддержки наведения

Есть два места, где эффект наведения не поддерживается: Outlook и мобильные клиенты.

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

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

Для этих запасных вариантов мы использовали список, но вы также можете использовать абзац или просто лицевое изображение, если хотите. На самом деле, что угодно, что подходит вашему дизайну. Независимо от того, какой контент вы используете, вы захотите обернуть его в div или ячейку таблицы и присвоить ему класс `fallback`, чтобы вы могли нацелиться на него:

Руководство по веб-шрифтам в электронной почте

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

Руководство по веб-шрифтам в электронной почте

Если вы делаете только версию для Outlook, вы можете опустить раздел для мобильных устройств и просто оставить версию для Outlook, обернутую в условный код ``.

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

.fallback { display: none; }

Поскольку запасной вариант также содержит контент для Outlook, добавьте условные стили, чтобы вернуть его туда:

Нацельтесь на большинство мобильных клиентов, добавив стили в медиа-запрос на основе размера экрана (не забудьте `!important`, чтобы учесть инлайн-стили в классе `.card`!):

@media screen and (max-width:600px) { .fallback { display: block; } .interactive { display: none !important; } }

Но это не учитывает iPad, у которых та же функциональность, что и у iPhone, *и* они работают на WebKit. Для них мы обратимся к howtotarget.email и обнаружим, что можем нацелиться на iPad с помощью некоторого хитрого кода:

@media (hover: none){ _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .interactive { display: none !important; } _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) .fallback { display: block; } }

И, уф, это было путешествие, но вот и все! Ну, почти…

## Не забудьте учесть…

### Темный режим

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

### Предпочтения по сокращенному движению

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

@media (prefers-reduced-motion) { .interactive .card { display: block !important; } .interactive .card-flip { display: none; } }

### Обрезка Gmail

Это много кода для одной карточки. Добавление большего количества карточек добавляет больше кода. Можно уложиться в лимит обрезки Gmail (у нас было 5 карточек и весь остальной выпуск!), но это определенно то, о чем следует помнить. Если вы обнаружите, что превышаете лимит, попробуйте минимизировать свой код. Обычно я использую EmailComb, но я знаю, что существуют редакторы кода, которые позволяют минимизировать код во время его создания.

Готовый код можно посмотреть здесь.

## Как это сработало?

Поскольку существовали разные версии, мы смогли включить UTM-коды для отслеживания эффективности ссылок в различных письмах. Мы обнаружили, что ссылки на интерактивный контент составили 12,2% от общего числа уникальных кликов в письме. И, хотя мы не знаем, является ли это статистически значимым, мы действительно увидели увеличение CTR, когда использовали этот интерактивный элемент в качестве прогрессивного улучшения.