インタラクティブEメールのフォールバック：インタラクティブ性の限定的なサポートと戦う方法

公開: 2019-01-31

3年連続で、インタラクティブな電子メールエクスペリエンスは、最もホットな電子メールデザイントレンドの1つに選ばれました。では、受信トレイにもっとインタラクティブなメールが表示されないのはなぜですか？多くのブランドにとって、限られた受信トレイプロバイダーのサポートが、よりインタラクティブなキャンペーンを送信しない主な理由です。

フォールバックが実施されている場合は、限定的なサポートを恐れる必要はありません。他のすべての受信トレイで機能的で美しいエクスペリエンスを保証しながら、サポートされている魅力的でインタラクティブな電子メールを作成するのに役立つ方法はたくさんあります。

フォールバックが重要な理由

HTMLおよびCSSのサポートは、電子メールクライアントによって異なり、電子メールの対話性を強化するために使用する可能性のあるHTMLおよびCSS要素の多くは、すべての場所でサポートされているとは限りません。

サポートされていない場合を考慮しないと、メールが壊れているように見える可能性があります。美しいインタラクティブな画像カルーセルのこの例を見てみましょう。

インタラクティブな電子メール画像カルーセル — 画像カルーセルを備えたShutterstockによるOffsetからのインタラクティブな電子メール。
CodePenでそれを参照してください。

強力な画像を備えたインタラクティブなカルーセルはAppleMailで見栄えがよく、サブスクライバーは矢印またはチェックボックスを使用して画像をめくることができます。しかし、これがYahoo!でまったく同じメールがどのように表示されるかを示しています。フォールバックがない場合はメールで送信します。

フォールバックがない場合、このメールは空白で表示されます — フォールバックのないインタラクティブな電子メール

フォールバックがないと、電子メールは壊れているように見え、多くのクリックが表示されない可能性があります。私たちはそれが起こらないようにしたいのです！それでは、防弾フォールバックを使用してインタラクティブな電子メールをどこでも機能させる方法を見てみましょう。

非表示と表示のフレームワークの力を使用する

非表示と表示のフレームワークは、電子メールで双方向性とフォールバックを設定するための最も基本的で一般的な戦術です。シンプルですが、それでも非常に強力です。

フレームワークは、その名前が示すとおりに機能します。フレームワークをサポートしていないクライアントの対話性を非表示にし、代わりにフォールバックを表示します。

HTMLに2つの完全に別個のセクションを設定します。1つはインタラクティブコンテンツ用で、もう1つは静的フォールバック用です。このようにして、これら2つの異なるタイプのコンテンツを指定できるだけでなく、電子メールのバージョンごとに異なるリンクと異なる追跡を設定して、インタラクティブバージョンと静的バージョンを追跡および比較することができます。 1通のメール内のA / Bテストと考えてください。

この単純化された例を使用して、電子メールコード内でこれをどのように実現するかを見てみましょう（またはCodePenをチェックしてください）。

 <!-- start INTERACTIVE_SECTION --> <!--[if (!mso)&(gte IE 10)]> <! -- --> <div > <div class=" content " > This is where the Interactive Content goes. </div> </div> <!--<![endif]--> <!-- end INTERACTIVE_SECTION --> <!-- start FALLBACK_SECTION --> <div > This is where the Fallback Content goes. </div> <!-- end FALLBACK_SECTION -->

インタラクティブセクションでは、条件ステートメントを使用して、インタラクティブ機能をサポートしていない電子メールクライアントからコンテンツを非表示にします。これには、対話性をサポートしないバージョンのOutlookからそれらの間のすべてを非表示にするMSO条件ステートメント、および他の非対話型電子メールクライアントのコンテンツを視覚的に非表示にするインラインCSS（緑色のコード）が含まれます。次に、濃い赤で強調表示されたコードは、インタラクティブセクションのコードをオーバーライドするスタイルをプルし、代わりにフォールバックセクションを非表示にします。

コンテンツは表示されていなくても読み込まれるため、「視覚的に」呼びかけたかったのです。インタラクティブセクションに取り込む可能性のあるすべての画像やその他のファイルは、フォールバックレイアウトの読み込み時間に影響を与えるため、これは注意することが重要です。回避策として、両方のレイアウトで可能な限り同じ画像を活用してみてください。

コンテンツについては、フォールバックセクションに従来の電子メールコードを入力するか、既存の静的電子メールコードにそれらの<div>をラップするだけです。 インタラクティブセクションでは、あなたが実装に興味を持っているCSSのみの技術の任意の並べ替えで遊ぶこと自由に感じ。 CSSのみのカルーセル、ホットスポット、クイズ、スクロールエフェクトなどを検索すると、すばらしいインスピレーションを得ることができます。

外部にリンクされたスタイルシートの利用

一方、濃い赤のコードで参照されているCSSは、次のようなコードを含む外部リンクされたCSSファイルでホストされています。

 #interactive { display: block !important; max-height: inherit !important; overflow: visible !important; } #staticfallback { display: none !important; } #interactive .content { Font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; display: block; color:#ffffff; }

#interactiveと#staticfallbackスタイルはすべて持っている重要！。 HTMLのインラインCSSをオーバーライドできるようにするルール。これらは、レイアウトを表示および非表示にする主要なスタイル宣言です。 #interactive .content宣言は、インタラクティブレイアウトが通常より多くの仕事には、この例よりも必要であろうけれども、あなたが、実際にスタイルあなたのインタラクティブコンテンツに使用したいコードを表します。たとえば、インタラクティブレイアウトにのみ表示されるCTAのスタイルを設定する場合は、 ＃interactive .cta （またはセレクターがインタラクティブセクションに固有である場合は.interactive-cta ）のような新しい宣言を作成し、追加します。 CSSファイルへのスタイル。

次に、この簡略化された例のように、 <head>タグの一番下にあるこの外部スタイルシートを参照するリンクタグをHTMLに追加します。

 <head> <style type="text/css"> /* Boilerplate Styles */ /* Responsive Media Query Styles */ /* Progressive Enhancement Styles */ </style> <!-- External CSS for Interactive Version --> <link rel="stylesheet" type="text/css" href=" http://your-url.com/hideshow.css "> </head>

CSSの特異性をマスターする

お分かりのように、CSS固有のトリックがたくさん含まれています。 CSS自体は「カスケードスタイルシート」の略で、CSSそして、特異性によって、どのルールが勝つかが決まります。したがって、すべての埋め込みCSSの後に<link>タグを配置することは、外部CSSファイル内のすべてのスタイルがその前にあるスタイルをオーバーライドできるようにするために重要です。

では、なぜ埋め込みまたはインラインCSSではなく、外部にリンクされたCSSファイルなのですか？電子メールクライアントがこの機能をサポートしている場合、外部CSSファイルに含まれているすべてのスタイルをサポートしている可能性が高いためです。このようにインタラクティブCSSを分離しておくと、インタラクティブスタイルが非インタラクティブコードと競合する可能性が低くなるため、意図しない結果が生じることはありません。

ケーキの上のアイシング：プログレッシブエンハンスメントを備えた限定的なインタラクティブサポート用に最適化

2つのメインバージョン（インタラクティブバージョンと静的フォールバック）を設定したら、先に進んで、いくつかの基本的なインタラクティブ要素を使用して静的フォールバックバージョンを拡張できます。上記の電子メールの静的バージョンは、ロゴとCTAのホバー効果を使用してより魅力的になっています。

これらのシンプルで強力なホバー効果を作成する方法については、こちらをご覧ください。

このようなリソースがもっと必要ですか？

最高のEメールマーケティングとデザインのヒント、統計、およびリソースを受信トレイに直接入手し、Eメールイノベーションの最前線にとどまります。

知っておく→