Фальшивое видео: альтернатива видео в электронной почте

Опубликовано: 2019-03-15

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

Но хотя настоящие видео не поддерживаются большинством клиентов, это не означает, что вам нужно прощаться с идеей добавления видео-взаимодействий в свои кампании. Введите: faux vide o !

Искусственное видео имитирует движение, подобное видео, с взаимодействием, которое позволяет вашим подписчикам чувствовать, что они воспроизводят видео в своем почтовом ящике. Существует ряд техник искусственного видео. Самый популярный из них был создан коллегой #emailgeek Кристианом Робинсоном, который представил свой подход к использованию CSS-анимации для прокрутки таблицы спрайтов отдельных видеокадров из Litmus Live в Лондоне в 2018 году. Вы должны проверить его выступление ниже или настроиться на Подкаст электронного письма №71, где мы рассказали о технике Кристиана.

В этом посте мы расскажем вам о технике, которую мы используем здесь, в Litmus. Он основан на анимированных GIF-файлах и имеет одно большое преимущество: он также работает в Gmail!

Пример искусственного видео

Зачем использовать фальшивое видео?

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

Техника искусственного видео поддерживается:

  • Gmail
  • Приложение Gmail
  • Apple Mail
  • Почта iOS для iPhone и iPad
  • Почта Samsung
  • Outlook для Mac

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

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

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

  1. Статическое изображение обложки
     В этом примере наше статическое изображение обложки называется cover-play.jpg . Это изображение будет отображаться по умолчанию, но оно исчезнет и покажет фоновый GIF-файл под ним, когда ваш подписчик взаимодействует с вашей электронной почтой. В нашем примере есть значок кнопки воспроизведения на статическом изображении обложки для имитации видео, но вам не обязательно включать его - вы можете включить любой вид графики или текста, если хотите, но не забывайте ALT текст !

    Как создать фальшивое видео
  2. Анимированное фоновое изображение в формате GIF
     Затем вам понадобится анимированное фоновое изображение в формате GIF - наше называется fauxvideo.gif . Это изображение будет отображаться, когда подписчик наводит курсор на статичное изображение обложки. Это будет помещено в код как обычное фоновое изображение.

    Анимированное фоновое изображение в формате GIF.

Настройка CSS / HTML

Давайте посмотрим, как использовать HTML и CSS для настройки фальшивого видео для вашей следующей почтовой кампании:

Встроенный CSS

Этот код помещается между тегами <head> </head> в верхней части вашего электронного письма.

 .showvideo:hover{ opacity: 0 !important; transition: 0.3s !important; } .showvideo { transition: 0.3s !important; }

Стиль : hover в этом коде изменяет изображение обложки на непрозрачность: 0 - фактически скрывая изображение - когда подписчик наводит курсор на раздел, показывая анимированный GIF в фоновом режиме. Переход в 0,3 секунды - это косметическое дополнение, добавляющее постепенное исчезновение зависания в почтовых клиентах, где оно поддерживается. Он добавлен как в классы, так и в классы без наведения, чтобы обеспечить плавный переход, когда подписчик наводит курсор на изображение и убирает мышь. (Примечание: вам не нужно устанавливать резервную копию VML для Outlook, потому что Outlook не поддерживает наведение.)

HTML

Вам нужно будет включить в свой HTML два раздела кода, ячейку <td> и ячейку <img> .

Это код для содержащей ячейки <td>, которая загружает анимированный GIF в качестве фонового изображения, даже когда изображение обложки находится сверху и взаимодействие неактивно.

 <td class="w100p" background=" http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif " bgcolor="#43a1e2" valign="top">

Это код для изображения cover-play.jpg , которое скрывается на : hover . Как видите, CSS в <head> активировал класс « showvideo ».

 <img class="showvideo" src="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/cover-play.jpg" width="600" border="0" alt="Play" />

А теперь просто сложите все вместе! Вы можете увидеть полный пример кода фальшивого видео в действии в этом CodePen .

Общие вопросы о фальшивом видео

Подходит ли имитация видео для мобильных устройств?

Абсолютно! В то время как анимированный GIF запускается при наведении курсора на рабочий стол, для отображения GIF на мобильном устройстве требуется касание или долгое нажатие. Однако, если в вашем электронном письме применяется переход по ссылке, при нажатии на ссылку будет запускаться браузер, и подписчик никогда не увидит видео. Без перехода по ссылке GIF будет воспроизводиться должным образом. При длительном нажатии будет отображаться GIF с переходом по ссылке или без него.
Подходит ли имитация видео для мобильных устройств?

Можете ли вы использовать изображения сетчатки с помощью этой техники?

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

Зачем использовать непрозрачность вместо других методов скрытия?

Использование display: none для элемента, на который наведен курсор, удаляет его из потока документов, и в конечном итоге вы получаете эффект, при котором изображения продолжают исчезать и снова появляться при наведении курсора, который не показывает анимированный GIF и не обеспечивает плавный переход:
используйте непрозрачность вместо других методов скрытия
Использование visibility: hidden даст аналогичный мигающий эффект:
Использование видимости: скрыто
Использование метода непрозрачности для скрытия изображения обложки обеспечивает максимально плавное отображение, но также имеет свои недостатки. Непрозрачность не поддерживается в следующих почтовых клиентах:

  • AOL
  • Yahoo
  • Outlook.com

Добавьте фальшивые видео в свою следующую рассылку по электронной почте

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

А если у вас возникнут вопросы, дайте нам их услышать!