Fałszywe wideo: rozwiązanie zastępcze dla wideo w e-mailu

Opublikowany: 2019-03-15

Nie można zaprzeczyć sile marketingu wideo. Treści wideo mają moc opowiadania historii szybciej niż statyczne obrazy. To bardziej emocjonalne. Pozwala w ciągu kilku sekund komunikować się, co zajęłoby opisanie akapitów na piśmie. Nic więc dziwnego, że wielu sprzedawców e-maili jest zainteresowanych umieszczaniem wideo w swoich wiadomościach e-mail — tylko po to, by dowiedzieć się, że większość klientów poczty e-mail nie oferuje obsługi filmów.

Ale chociaż większość klientów nie obsługuje prawdziwych filmów, nie oznacza to, że musisz pożegnać się z pomysłem dodawania do kampanii interakcji podobnych do filmów. Enter: faux vide O!

Fałszywe wideo naśladuje ruch podobny do filmu, a interakcja pozwala subskrybentom poczuć się, jakby odtwarzali wideo w swojej skrzynce odbiorczej. Istnieje wiele technik fałszywego wideo. Najpopularniejszy został stworzony przez innego #emailgeek Kristiana Robinsona, który zaprezentował swoje podejście do korzystania z animacji CSS do przewijania arkusza sprite poszczególnych klatek wideo z Litmus Live London w 2018 roku. Email Design Podcast #71 gdzie omówiliśmy technikę Kristiana.

W tym poście przeprowadzimy Cię przez technikę, której używamy tutaj w Litmus. Jest oparty na animowanych plikach GIF i ma jedną wielką zaletę: działa również w Gmailu!

Przykład fałszywego wideo

Dlaczego warto korzystać ze sztucznego wideo?

Chociaż wideo w wiadomościach e-mail jest popularnym tematem, działa tylko w Apple Mail i iOS Mail — jedynych klientach poczty e-mail, które zapewniają pełną obsługę wideo HTML5. Korzystając z techniki fałszywego wideo, możesz imitować prawdziwe filmy w wiadomości e-mail, korzystając z wielu innych klientów poczty e-mail.

Technika sztucznego wideo jest obsługiwana przez:

  • Gmail
  • Aplikacja Gmail
  • Poczta Apple
  • Poczta iOS na iPhone'a i iPada
  • Poczta Samsung
  • Outlook dla komputerów Mac

To ponad 64% całkowitego udziału w rynku klientów poczty e-mail obsługujących tę technikę. Jeśli więc chcesz dodać do swoich kampanii trochę ruchu podobnego do filmów, wykorzystanie techniki sztucznego wideo oznacza, że ​​Twoje treści wideo mogą być oglądane przez większą liczbę subskrybentów, niż możesz osiągnąć, korzystając z wideo HTML5.

Jak stworzyć fałszywe wideo: używanie warstwowych obrazów do imitowania wideo na żywo

Aby użyć tej techniki sztucznego wideo w następnej kampanii e-mailowej, będziesz potrzebować dwóch obrazów o tym samym rozmiarze: statycznej okładki i animowanego GIF-a, ułożonych warstwami jeden na drugim.

  1. Statyczny obraz okładki
     W tym przykładzie nasz statyczny obraz okładki ma nazwę cover-play.jpg . Jest to obraz, który będzie wyświetlany domyślnie, ale zniknie i odsłoni obraz GIF w tle, gdy subskrybent wejdzie w interakcję z Twoim e-mailem. Nasz przykład ma ikonę przycisku odtwarzania na statycznym obrazie okładki, która imituje wideo, ale niekoniecznie musisz ją dołączyć — możesz dołączyć dowolną grafikę lub tekst, jeśli chcesz, ale nie zapomnij swojego Tekst ALT !

    Jak stworzyć fałszywe wideo
  2. Animowany obraz tła GIF
     Następnie będziesz potrzebować animowanego obrazu tła GIF — nasz ma nazwę fauxvideo.gif . Jest to obraz, który zostanie ujawniony, gdy subskrybent najedzie kursorem na statyczny obraz okładki. Zostanie on umieszczony w kodzie jako normalny obraz tła.

    Animowany obraz tła GIF.

Konfiguracja CSS/HTML

Przyjrzyjmy się, jak używać HTML i CSS, aby skonfigurować fałszywe wideo do następnej kampanii e-mailowej:

Wbudowany CSS

Ten kod znajduje się między tagami <head></head> u góry wiadomości e-mail.

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

Styl :hover w tym kodzie zmienia obraz okładki na krycie: 0 — skutecznie ukrywa obraz — gdy subskrybent najedzie kursorem na sekcję, odsłaniając animowany GIF w tle. Przejście 0,3 sekundy jest dodatkiem kosmetycznym, dodając stopniowe zanikanie wskaźnika myszy w klientach poczty e-mail, w których jest obsługiwane. Jest dodany zarówno do klas najechania, jak i bez najechania, aby zapewnić płynne przejście, gdy subskrybent najedzie kursorem na obraz i zniknie myszą. (Uwaga: nie musisz ustawiać rezerwy VML dla programu Outlook, ponieważ program Outlook nie obsługuje najechania kursorem).

HTML

Musisz umieścić w kodzie HTML dwie sekcje kodu, komórkę <td> i komórkę <img> .

Jest to kod komórki zawierającej <td> , która ładuje animowany plik GIF jako obraz tła, nawet jeśli obraz okładki znajduje się na górze, a interakcja nie jest aktywna.

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

To jest kod dla obrazu cover-play.jpg, który jest ukryty na :hover . Jak widać, CSS w <head> aktywował klasę „ 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" />

Teraz po prostu złóż to wszystko razem! Możesz zobaczyć pełny przykładowy kod fałszywego wideo w akcji w tym CodePen .

Często zadawane pytania dotyczące fałszywych filmów

Czy faux wideo na telefon komórkowy jest responsywny?

Absolutnie! Podczas gdy animowany GIF uruchomi się po najechaniu kursorem na pulpicie, wystarczy dotknięcie lub długie naciśnięcie, aby wyświetlić GIF na urządzeniu mobilnym. Jeśli jednak w wiadomości e-mail zostanie zastosowane kliknięcie, link uruchomi przeglądarkę po dotknięciu, a subskrybent nigdy nie zobaczy wideo. Bez kliknięcia GIF będzie odtwarzany zgodnie z oczekiwaniami. Długie naciśnięcie spowoduje wyświetlenie GIF-a z kliknięciem lub bez.
Czy faux wideo na telefon komórkowy jest responsywny?

Czy w tej technice można używać obrazów siatkówki?

Tak! Na potrzeby tego przykładu nie użyliśmy obrazów siatkówki, ale z pewnością możesz użyć obrazów siatkówki z fałszywym wideo, jeśli ma to sens z punktu widzenia ogólnego czasu ładowania wiadomości e-mail. Uważaj, aby nie używać zbyt dużych obrazów lub GIF-ów, które mogą negatywnie wpłynąć na czas ładowania wiadomości e-mail. Koniecznie sprawdź nasz post dotyczący obrazów siatkówki .

Po co używać krycia zamiast innych metod ukrywania?

Użycie display:none na najechanym elemencie usuwa go z przepływu dokumentu, a w efekcie uzyskuje się efekt, w którym obrazy znikają i pojawiają się ponownie po najechaniu kursorem, co nie pokazuje animowanego GIF-a ani nie zapewnia płynnego przejścia:
użyj krycia zamiast innych metod ukrywania
Użycie widoczności:ukryte dałoby podobny efekt migania:
Korzystanie z widoczności: ukryte
Użycie metody krycia do ukrycia obrazu okładki zapewnia najbardziej płynne wrażenia, ale ma też swoje wady. Krycie nie jest obsługiwane w następujących klientach poczty e-mail:

  • AOL
  • Wieśniak
  • Outlook.com

Dodaj fałszywe filmy do następnej kampanii e-mailowej

Nie możemy się doczekać, aby zobaczyć więcej fałszywych filmów. Więc jeśli użyjesz techniki fałszywego wideo w nadchodzącym e-mailu, z przyjemnością to zobaczymy! Zapraszam do udostępnienia linku do swojego projektu w komentarzach poniżej.

A jeśli masz jakieś pytania, daj nam je usłyszeć!