Новый инструмент для e-mail маркетинга
133,33
рейтинг
30 июня 2015 в 10:12

Разработка → Как сверстать фоновое HTML5-видео в email-сообщении перевод



Бывают случаи, когда для максимизации эффекта почтовой рассылки, дизайнерам и маркетологам приходится придумывать нестандартные ходы. Команда почтового сервиса Litmus в своем блоге рассказала о том, как с помощью HTML5 создать письмо, фоном которого служит видео.

Видео проигрывалось в почтовых программах Apple Mail и Outlook 2011 для Mac. В остальных почтовых клиентах отображалось обычное изображение. Ниже представлено пошаговое руководство по созданию такого видео-письма.

Верстка для десктопа


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

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f2ae44" width="100%">

Внутри таблицы предусмотрена ячейка, содержащая изображение для «плана Б», если видео не загрузится:

<td align="center" bgcolor="#f2ae44" style="padding: 0 0 50px 0; background-color: #f2ae44; background: url(http://pages.litmus.com/l/31032/2014-04-17/2hs7p/31032/17346/video_bg.jpg) top center no-repeat;background-size: cover;" width="100%">

Это «запасное» изображение выглядело так:



Такая картинка была нужна по двум причинам:

  • Большинство почтовых клиентов не поддерживают фоновое видео в письмах.
  • Некоторые подписчики могли испытывать сложности с загрузкой видео из-за большого размера файла.

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

На следующем шаге видео было завернуто в в качестве первого элемента в ячейке :

<div class="video-wrap">

Поскольку фоновые видео поддерживаются только в Webkit-based почтовых клиентах (Apple Mail, Outlook 2011 для Mac), то была использована заточенная под этот движок media query для применения CSS к
 в случае обнаружения Webkit-клиента:

@media screen and (-webkit-min-device-pixel-ratio: 0) { div[class="video-wrap"]{ height: 750px; position: relative; overflow: hidden; padding:0; margin:0;} }

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

Затем внутрь этой обернутого помещается видео:

<video autoplay="autoplay"loop="loop" class="video" style="display: none;"> <source src="https://litmus.com/videos/TEDC-short-clips-tinted-compressed.mp4" type="video/mp4"> </video>

Поскольку видео поддерживается только в Webkit-клиентах, использовался формат .mp4. Можно было также добавить видео в форматах .ogg или .ogv, чтобы видеть видеофон могли и пользователи Firefox, но представители Litmus решили, что это не целевая аудитория, и не стали утяжелять письмо.

Важный момент: по умолчанию видео было скрыто с помощью опции display: none. Поскольку тег
Автор: @lol_wat Kevin Mandeville
Pechkin.com
рейтинг 133,33
Новый инструмент для e-mail маркетинга

Комментарии (33)

  • +23
    > К сожалению, ни одно популярное мобильное почтовое приложение не поддерживает фоновые HTML5-видео.

    К счастью! Мало им дурацких анимированных фонов на страницах, теперь еще и в письма его засунули
    • –5
      плюсую.
      даже картинки в фоне писем не нужны, да и маркетинговый шлак не нужен.
      • 0
        А при чем здесь верстка писем и маркетинговый шлак? Есть письма, получение которых пользователи желают и потому подписываются на соответствующую рассылку.
        • +7
          Есть вещи, которые лучше не открывать, например — ящик Пандоры. Ну или вставка видео в фон письма. Искренне надоюсь, что почтовые сервисы за подобные вещи будут отправлять письма в спам.
          • +1
            Ну широкой поддержки этой возможности в любом случае ожидать не следует, так что все ок. Это просто интересная техника, которую можно использовать узконаправлено (ниже привели пример кейса). А так-то, plain text письма зачастую даже эффективнее (мы об этом, кстати, тоже писали).

            В общем и целом желать каких-то запретительных мер — это по умолчанию не очень хорошо и умно, лучше требовать рационального и корректного использования существующих возможностей.
            • 0
              > А так-то, plain text письма зачастую даже эффективнее
              Что вы это понимаете — это: конечно: отлично, но не все настолько умны, к сожалению.
              Представьте себе классический спам «увеличьте член» с «превью эффективности» на фоне. Вот только что это стало возможным :) Да, я знаю, я конченный пессимист. :)

              Есть возможности, которые никогда не будут использованы по прямому назначению. Особенно если у них этого самого прямого назначения нет. Лично у меня фоновое видео вызывает исключительно раздражение, так как оно:
              a) Грузит состему (я не знаю, как они это делают, даже флешплееры работают лучше. Возможно — дело в альфаблендинге с вышележащим слоем.)
              б) Грузит мой не самый быстрый интернет-канал
              в) Отвлекает от просмотра страницы
              г) Ужасно отвлекает от просмотра страницы своим дёрганьем во время загрузки.
              • +3
                Ну тут речь идет не о спаме («увеличьте член»), а о том, как можно использовать этот инструмент в рамках маркетинговых кампаний, включающих почтовые рассылки своим подписчикам (то есть тем людям, что на это подписались), которые используют подходящие программы/устройства и будут не против получить подобное письмо. Сервисы вроде Печкина принципиально не отправляют спам (про это вот тут очень много и подробно написано), поэтому эти опасения просто немного не в тему.

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

                По поводу фонового видео, мне оно тоже не всегда и не везде нравится, но иногда бывает что прямо вот в тему (что еще раз доказывает положительная реакция на вот это конкретное письмо, по ссылке в конце есть много отзывов из твиттера).
        • 0
          зачем же портить желанное письмо фоновой картинкой, тем более фоновым видео?
    • 0
      Ну вот подписчики, которые получили такое письмо с фоновым видео, остались по большей части довольны. В некоторых ситуациях это может быть уместно.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +3
          Не мне, но отвечу. Ну вот например анонс конференции по email-маркетингу и дизайну, который соответственно отправлялся подписанным на обновления специалистам в этой области. В твиттере народ радовался довольно активно.

          Just received the most mind-blowing marketing email from @litmusapp… Embedded video in an email. How is this even happening!?— Jono Kane (@nokapixel) 17 апреля 2014


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

              Ну и да, рекламный контент, нацеленный на коммьюнити рекламного контента — это не кейс использования? Или все, кто не интересуются условной информационной безопасностью, не настоящие пользователи? В общем, непонятно.
              • 0
                это не кейс использования, это презентация технологии тем, кто будет её в дальнейшем использовать в работе.

                те, кто не интересуются условной информационной безопасность, не интересуются условной информационной безопасностью.
                бактериологическое оружие очень удобно и эффективно по мнению его создателей и производителей, например.
                • +1
                  это не кейс использования, это презентация технологии тем, кто будет её в дальнейшем использовать в работе.

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

                  Короче вам про Фому, вы про Ерему, и конца этому не видно. Тут в комментах уже все разжевали двадцать раз, достаточно уже, думаю :)
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Спасибо за пост, добавила в избранное, интересная техника. Если аккуратно использовать, то можно добиваться хорошего эффекта.
  • +1
    Хорошая тема для подкастов, если видео не особо длинное и информативное.
  • –5
    Верстка писем — это тупиковая ветвь эволюции. Письмо должно отображаться в виде текста. Так легче воспринимать информацию и работать с ней, при этом никто не мешает дать ссылку на страницу в тексте письма. Все рекламные рассылки — это плохо или хорошо замаскированный спам, который лезет мне в инбокс. Ну а за видео в письме, когда я на дорогом 3g, отдельное спасибо.
    • +1
      Письмо должно отображаться в виде текста

      Называйте это почтовой открыткой.

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

      Да я работаю в email маркетинге, но 90% рассылок, что я вижу — несусветное говно. И такие эксперименты как в топике как минимум нужны, чтобы понять насколько они эффективны/нужны/полезны/ущербны.

      Ну и главное, всем не угодишь.
      • 0
        Не понимаю почему заминусовали автора прошлого комментария, но я целиком и полностью с ними согласен.Любая верстка и попытка сделать из письма веб-страницу — порочна.
        По-дефолту 90% почтовых клиентов не показывает эту верстку и контент из сети. Как следствие весь вау-эффект который придумали маркетологи и реализовали дизайнерам имеет ровно противоположный эффект: Письмо либо набор не читаемого текста, либо письма нет вообще. Рассылая ваши письма, помните что примерно так они будут выглядеть у получателей.


        • –2
          Денис, я работаю с сорока почтовыми клиентами и лишь 15% из них блокируют содержимое из сети. Откуда вы взяли статистику в 90%, не поделитесь?

          Теперь вопрос не только к вам, но и ко всем хейтерам. Клоунадой заниматься не надоело? Не нравится не читай, но не надо прикидываться дурачком, играть в проповедника и бросаться словами типа «порочность».

          Маркетологи не зря жрут свой хлеб. Они приносят доход компаниям.

          Ну и самое смешное — это ваши примеры. Зачем же верстать все письмо картинками, если можно просто сделать брендиованную рассылку.

          Ко ко ко?
          • +1
            Видимо проф деформация. У меня картинки отображаются только в ipad-почтовике. Остальные (Bat, Thunderbird, Lotus, Gmail, Opera) картинок нет. Учитывая что многим знакомым настраивал компы я — у них так же не будет отображено кратинок. Согласен с вашим аргументом, исправлюсь: у 90% моих знакомых эти письма не будут отображаться корректно.
            Складывается ощущение, маркетологи живут в каком то свое мире придумывая для маркетологов (минуту назад общася с нашими, приславшими вертиклаьный макет рекламы в телевизор О_о Так красивее).
            • +2
              там выше в комментариях один из маркетологов привел в пример эффективности этого шлака восторженную реакцию на шлак у другого маркетолога.
              действительно, виртуальный мир маркетологов. почему бы им не обсуждать всё это на профильных сайтах, вот в чем вопрос.
          • +1
            > если можно просто сделать брендиованную рассылку.
            Вы часто открываете вложения из писем от неизвестных людей?
            • –1
              Вложения — никогда. Отображение картинок включаю для всех писем, которые меня маломальски заинтересовали.
          • 0
            Про 90% это, наверное, преувеличение, но цифру в 50% я ранее встречал многократно, причем зачастую это как стандартные настройки почтовых клиентов, так и почтовых сервисов с их веб-интерфейсами.

            Маркетологи не зря жрут свой хлеб. Они приносят доход компаниям.

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

            Зачем же верстать все письмо картинками, если можно просто сделать брендиованную рассылку.

            Потому, что красивая сетка зачастую корректно отображается, мягко говоря, не у всех. В итоге, многие, кто хочет сложную структуру или вид письма, в итоге забивают на жонглирование проблемами совместимости и делают тупо все картинками. Это тоже печальные реалии.
  • +1
    Красивое решение, но с тем же успехом можно было бы вставить гифку и повесить на нее ссылку. При хорошей репутации домена в спам не попадет.
  • +1
    Горите в аду горемаркетологи вместе с дизайнерами.
    Мало этого шлака на станицах, теперь и в почту собрались совать.
    • –2
      Попробуйте en.wikipedia.org/wiki/Lynx_(web_browser)
      • +2
        А я пользуюсь (серьезно).
        Вижу вы ценитель, могу еще посоветовать en.wikipedia.org/wiki/Arachne_(web_browser) Им тоже иногда пользуюсь.
        • –2
          В таком случае откуда анальный зуд?
          • +2
            По работе получаю письма от маретологов крупных компаний (HP, VMWare, Cisco). И все их письма выглядят примерно как мои скриншоты выше. закрываю не читая, что бы они там не хотели донести до меня.
            По этому остерегаю вас от ложных выводов. Писма с видео нравятся маркетологам. Конечные пользователи восторгов не разделяют.

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

Самое читаемое Разработка