偽のビデオ：電子メールのビデオのフォールバック

公開: 2019-03-15

ビデオマーケティングの力を否定することは絶対にありません。 ビデオコンテンツには、静止画像よりも迅速にストーリーを伝える力があります。 それはより感情的です。 それはあなたが書面で説明するために段落をとったであろうものを数秒以内に伝えることを可能にします。 したがって、多くの電子メールマーケターが電子メールにビデオを含めることに関心を持っているのは当然のことですが、ほとんどの電子メールクライアントがビデオのサポートを提供していないことを知っているだけです。

ただし、実際の動画はほとんどのクライアントでサポートされていませんが、動画のようなインタラクションをキャンペーンに追加するというアイデアに別れを告げる必要があるわけではありません。 入力：偽のビデオo ！

フェイクビデオは、チャンネル登録者が受信トレイで動画を再生しているように感じられるインタラクションで、動画のような動きを模倣します。 そこには多くの偽のビデオ技術があります。 最も人気のあるものは、2018年にLitmus Live LondonでCSSアニメーションを使用して個々のビデオフレームのスプライトシートをスクロールするという彼のアプローチを提示した、仲間の#emailgeek Kristian Robinsonによって作成されました。以下の彼の講演をチェックするか、 Kristianのテクニックを取り上げたEメールデザインポッドキャスト＃71 。

この投稿では、ここリトマスで使用しているテクニックについて説明します。 アニメーションGIFに基づいて構築されており、1つの大きな利点があります。Gmailでも機能します。

偽のビデオの例

なぜ偽のビデオを使用するのですか？

電子メールのビデオは人気のあるトピックですが、HTML5ビデオを完全にサポートする唯一の電子メールクライアントであるAppleMailとiOSMailでのみ機能します。 偽のビデオ技術を使用することにより、より多くの電子メールクライアントをサポートして、電子メール内の実際のビデオを模倣できます。

偽のビデオ技術は、以下によってサポートされています。

  • Gmail
  • Gmailアプリ
  • アップルメール
  • iPhoneおよびiPad用のiOSメール
  • サムスンメール
  • Outlook for Mac

これは、この手法をサポートする電子メールクライアントの市場シェア全体の64％以上です。 したがって、キャンペーンにビデオのような動きを追加しようとしている場合、偽のビデオ手法を利用すると、HTML5ビデオを利用した場合よりも多くのサブスクライバーがビデオコンテンツを見ることができます。

偽のビデオを作成する方法：レイヤード画像を使用してライブビデオを模倣する

次のメールキャンペーンでこの偽のビデオテクニックを使用するには、同じサイズの2つの画像が必要になります。静的なカバーとアニメーション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; }

このコードでホバースタイルは不透明に表紙画像を変更：0 -effectivelyバックグラウンドでアニメーションGIFを明らかに、画像場合セクション上の加入者ホバーを隠します。 0.3秒の遷移は表面的な追加であり、サポートされている電子メールクライアントのホバーに段階的なフェードを追加します。 ホバークラスと非ホバークラスの両方に追加され、サブスクライバーが画像にカーソルを合わせてマウスをオフにしたときにスムーズに移行できるようにします。 （注：Outlookはホバーをサポートしていないため、OutlookのVMLフォールバックを設定する必要はありません。）

HTML

HTMLには、 <td>セルと<img>セルの2つのコードセクションを含める必要があります。

これは、カバー画像が上にあり、インタラクションがアクティブでない場合でも、アニメーションGIFを背景画像としてロードする<td>セルを含むためのコードです。

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

これは、 ： hoverで非表示になっているcover-play.jpg画像のコードです。 ご覧のとおり、 <head>のCSSは「 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が表示されず、スムーズな遷移が提供されません。
他の非表示方法の代わりに不透明度を使用する
可視性：非表示を使用すると、同様の点滅効果が生成されます。
可視性の使用：非表示
不透明度メソッドを使用してカバー画像を非表示にすると、最もスムーズなエクスペリエンスが提供されますが、欠点もあります。 次の電子メールクライアントでは、不透明度はサポートされていません。

  • AOL
  • Yahoo
  • Outlook.com

次のメールキャンペーンに偽の動画を追加する

もっと偽のビデオを見るのが待ちきれません。 したがって、今後の電子メールで偽のビデオテクニックを使用する場合は、ぜひご覧ください。 以下のコメントであなたのデザインへのリンクを自由に共有してください。

ご不明な点がございましたら、お気軽にお問い合わせください。