待って。 私のメールに何が起こったのですか？ ウェビナーレコーディング

公開: 2016-02-11

ほぼすべてのデザイナーと開発者は、キャリアのある時点で、希望するかどうかに関係なく、電子メールを作成する必要があります。 しかし、膨大な数の電子メールクライアントは、それぞれ独自のレンダリングの問題を抱えており、電子メールの設計問題の猛攻撃に戸惑い、多くの人が首を横に振っています。

このような多くのシナリオを経験してきた私たちは、SendwithusのAlex Mohrと協力して、電子メールを初めて使用する人々が直面する最も一般的な問題と、さらに重要なことに、これらの問題の解決策に光を当てました。

ウェビナーに参加する機会がなかった場合は、「待ってください。 私のメールはどうなりましたか？」、心配しないでください。 スライドをダウンロードして、以下の記録を確認できます。

スライドの表示と記録→

できる限り試してみてください。ウェビナー中に尋ねられたすべての質問に答えることはできませんでした。 そして、いくつかの素晴らしいものがありました。 ですから、私はこの機会を利用して、Eメールのマーケティングとデザインに足を踏み入れただけの人からよく寄せられる質問のいくつかに答えています。

なぜグーグルとマイクロソフトはメールのレンダリングがとても苦手なのですか？

すべての電子メールクライアントは、電子メールキャンペーンのコーディングに使用される2つの言語であるHTMLとCSSのレンダリングに問題があります。 これは、それらがすべて異なるレンダリングエンジンを使用しているためです。 レンダリングエンジンは、画面にレンダリングされるコードと実際のレンダリング方法を決定する電子メールアプリケーションの基盤となる部分です。

レンダリングエンジン

GoogleのGmailの場合、セキュリティ上の理由から、プリプロセッサを使用してメールからコードの特定の部分を取り除きます。 他のほぼすべてのウェブメールクライアントがこれまでにそれを理解しましたが、Gmailは基本的にメールの<head>に埋め込まれたCSSスタイルを取り除きます。 また、多くのデザイナーがこれらのスタイルを使用してキャンペーンの外観を決定しているため、Gmailではこれらのメールが影響を受けます。

メディアクエリ（従来のレスポンシブデザインで使用されるCSSトリガー）がそのセクションに存在するため、これはGmailのモバイルクライアントで特に顕著になります。 これが、Gmailの貧弱なレンダリング機能に対する直接的な解決策として、ハイブリッド（またはスポンジ）コーディングなどの手法が開発された理由です。

MicrosoftのOutlookクライアントの場合、問題はOutlookが実際にレンダリングエンジンとしてMicrosoftWordを使用しているという事実にあります。 そうです、学生やビジネス関係者が同様に使用するリッチテキストエディタは、HTMLおよびCSSコードをレンダリングするために使用されます（または少なくともそれは試みます）。 古いバージョンのOutlookは、インストールされているバージョンのMicrosoftのWebブラウザーであるInternet Explorerを使用して電子メールコードをレンダリングしていましたが、Outlook 2007では、Wordを使用してOutlookユーザーがリッチテキストを簡単に編集できるようになりました。

電子メールの設計者にとって残念なことに、Wordでは、Webや電子メールキャンペーンで一般的に使用されているHTMLとCSSのサポートが非常に限られています。 このWeb標準の限定的なサポートにより、Outlookでは壊れているように見える電子メールキャンペーンが発生します。 そのサポートを理解することは、Outlookやその他の電子メールクライアントで電子メールの見栄えを良くするための最初のステップです。

HTMLおよびCSSの電子メールクライアントサポートをよりよく理解するためのいくつかのリソースを次に示します。

  • キャンペーンモニターのCSSの究極のガイド
  • GmailとCSSを理解する：パート1とパート2
  • MicrosoftOutlookクライアントでのレンダリングの違いに関するガイド
  • デバイス、オペレーティングシステム、アプリ、エンジンがレンダリングに与える影響
  • デスクトップレンダリングの問題？ 一握りのレンダリングエンジンに初期テストを集中させる
  • Webメールレンダリングの説明：プリプロセッサが敵である理由

Webフォントを使用しているときにOutlookが適切なフォントを表示しない場合、どのように対処しますか？

ユーザーのデバイスにインストールするのではなく、Web経由で提供されるフォントであるWebフォントの人気が高まっています。 それらは企業が彼らのタイポグラフィでブランドを維持し、ライブテキストを奨励することを可能にするので、それらは電子メールマーケターにとって理想的なツールです。 残念ながら、すべての電子メールクライアントでサポートされているわけではありません。 また、Outlookの場合、サポートが不足していると、HTMLで宣言されているフォールバックフォントの代わりにTimes NewRomanが表示される状況になります。

以前、影響を受けるテキストにHTMLクラスといくつかのOutlook固有のCSSを必要とするソリューションでこの問題に対処しました。 このソリューションは依然としてうまく機能しますが、よりクリーンで保守が容易なソリューションが注目を集めています。 Action Rocketの人々によって最初に提案されたこのソリューションでは、@ font-faceルールを使用してフォントを提供し、電子メールの先頭にあるメディアクエリでそれらをラップする必要があります。

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

このソリューションは、Outlookが宣言されたフォントスタックにフォールバックすることを保証しながら、コードを汚染するHTMLクラス属性を必要としないため、優れたアプローチです。 テクニックの詳細については、ActionRocketの元の記事をご覧ください。

モバイルで青いリンクが発生しないようにするにはどうすればよいですか？

モバイルデバイスは便利なツールです。 それらをさらに便利にするために、Appleのような企業は、ユーザーが連絡先、カレンダー、またはマップアプリに情報をすばやく追加できる機能を電子メールクライアントに追加しました。 あなたが電子メールでこのようなものを見た可能性は高いです：

ios_links

特定のテキストのような住所、日付、時刻、電話番号は、相互作用できることを示すために、青い下線付きのリンクとして強調表示されています。 残念ながら、これらの青いリンクは、設計の観点とアクセシビリティの観点の両方から問題を引き起こすことがあります。 暗い背景の明るいテキストが青に変わると、それらのリンクは（不可能ではないにしても）読みにくくなり、操作はもちろんです。

ブルーリンク-アクセシビリティ

この問題の解決策について以前に書いたことがあります。これにより、そのテキストのスタイルを維持できますが、ここでも、新しい解決策が人気を集めています。 次のスニペットを含めると、HTMLに追加のマークアップを必要とせずに、iOSの青いリンクが削除されることがわかりました。 メールの先頭に入れて送信してください。

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

一部のウェビナー参加者は、上記のCSSが特にAppleデバイスを対象としていることを鋭く指摘しました。 私の最近のテストでは、青いリンクはAndroidで問題になっていないことが示されていますが、一部のLitmusコミュニティメンバーは、電話番号などのAndroidとGmailのリンクで問題が発生しています。 コミュニティディスカッションをチェックして、いくつかの巧妙な回避策を確認してください。

レスポンシブ画像を処理するための最良の方法は何ですか？ 網膜画像はどうですか？

レスポンシブメールデザインを採用する人が増えるにつれ、レスポンシブ画像の必要性が高まっています。 レスポンシブ画像を処理するための私の最善のアドバイスは、素晴らしい電子メール開発ニュースレターの開発者であるJulieNgのために私が習得したテクニックです。

基本的に、画像のサイズはimgタグ内でさまざまな方法で宣言します。 一部の電子メールクライアントがより大きな網膜画像をフルサイズで表示しないようにするには、width属性を使用して幅を宣言します。 これにより、適切なベースライン幅がピクセル単位で提供されます。 レスポンシブメールの場合は、画像の幅、最大幅、最小幅をインラインCSSとして宣言します。 次に例を示します。

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

当然、画像が無効になっている場合にALTテキストを提供し、display：blockを宣言する必要があります。 画像の周りの不要な空白を防ぐため。 画像をさらに制御する必要がある場合は、メールの先頭にあるクラスとCSSを使用して画像をターゲットにできます。 埋め込まれたCSSはどこでもサポートされているわけではないことを覚えておいてください。

網膜画像に関しては、電子メールの画像の意図した表示サイズの2倍で画像を作成するのが最善の策です。 たとえば、600px x 200pxの画像がある場合は、1200px x400pxの画像として作成して保存します。 通常はメールに含めてください。 前述のwidth属性を使用すると、Outlookなどのクライアントで途方もなく巨大な画像として表示されるのを防ぎ、Retina画面を備えたデバイスで画像がきれいに鮮明に表示されます。

電子メールでアニメーションGIFを使用しようとしている人へのアドバイスはありますか？

頑張れ！ アニメーションGIFは、メールキャンペーンに動きと興味を追加するための素晴らしい方法です。 私たちはこのテクニックが大好きで、電子メールでアニメーションGIFを使用するための広範なガイドを作成しました。

アニメーションの最初のフレームのみを表示するMicrosoftOutlookで最も注目に値する、どこでもサポートされているわけではないことを理解してください。 GIF内の画像は、購読者に重要な情報を伝えるためではなく、説明の目的で使用されていることを確認することをお勧めします。 この種の情報は、GIFや画像などが無効になっている場合でもサブスクライバーが読むことができるように、常に電子メールにライブテキストとして表示する必要があります。

多くの人がGIFはただの楽しみだと思っていますが、多くの製品会社がアニメーションGIFを使用して製品との相互作用を披露し、基本的に製品に触れる前に製品の使い方を教えています。 MailChimpの素晴らしい例を次に示します。

mailchimp-interface-gif

GIFは、すべてのメールマーケティング担当者のツールボックスに追加するのに最適です。 ただし、アドバイスの1つは、それらを控えめに使用することです。 すべてのキャンペーンに多数のGIFが含まれていると、すぐに驚きの感覚が失われます。 キャンペーンや何かクールなもののショーに本当に注目を集めたいときに時々それらを使用してください。

電子メールでビデオを使用することについてどう思いますか？

アニメーションGIFと同じように、動画はチャンネル登録者の注意を引くための優れた方法です。 残念ながら、ビデオ自体は電子メールクライアント全体でさらにサポートが少なくなっています。 かつては電子メールでビデオの背景を使用できましたが、それはAppleMailとOutlookforMacでのみサポートされていました。

ただし、それでも、ビデオを電子メールと組み合わせて使用​​することを思いとどまらせることはできません。 人々はビデオを絶対に愛し、企業はユーザーとのエンゲージメントを高める方法としてビデオマーケティングをますます使用しています。 電子メールでビデオを使用する最良の方法は、ランディングページにリンクする電子メールキャンペーンに再生ボタン付きのビデオの静止画像を含めることです。 ユーザーはそれがビデオであることをすぐに理解し、ランディングページでビデオを見ることができます。

電子メールに埋め込まれたビデオは優れたユーザーエクスペリエンスを可能にしますが、Wistiaにいる私たちの友人は、ランディングページがより良いソリューションである理由についていくつかの良い点を述べました。

  • ランディングページのビデオは他の場所で再利用できます。 これは永続的なコンテンツリソースです。
  • ランディングページは、さらなる相互作用を促進します。 受信トレイで動画の視聴が終了したら、あと何をする必要がありますか？
  • ランディングページで動画をより簡単に共有できます。

したがって、電子メールキャンペーンでは必ずビデオを使用してください。ただし、少なくとも今のところは、電子メールでビデオを表示することを意味するものではないという事実に同意してください。

推奨するレスポンシブメールフレームワークはありますか？

ウェビナーでより良いメールキャンペーンを構築するためのいくつかのリソースについて言及しましたが、ここで繰り返して拡張する価値があることは間違いありません。

レスポンシブメールフレームワークとテンプレートに関する限り、利用可能な数があります。

  • テッド・ゴアスのケルベロス
  • MailChimpのEメールブループリント
  • Zurb's Foundation for Emails
  • MailjetのMJML

私たちのお気に入りの1つは、さまざまな送信シナリオ用の5つのレスポンシブテンプレートを含む独自のスレートです。 どのオプションを選択する場合でも、電子メールクライアント全体でそれらをテストして、サブスクライバーが予期しない事態に陥っていないことを確認してください。

スライドと記録を見る

「待ってください。 私のメールはどうなりましたか？」 最も一般的な電子メールの問題とその解決策を特定するとともに、すべての電子メールをテストすることの重要性に触れ、Sendwithusを使用してトランザクション電子メールをテストする方法についても検討しました。 初めて見逃した場合は、スライドをダウンロードして、以下の記録を表示できます。

スライドの表示と記録→