Outlookの電子メールレンダリング：心配をやめてOutlookを愛する方法を学びました

公開: 2021-07-02

私たちは皆そこにいました。興味深いGIF、アクセス可能なボタン、人目を引く画像を使用して、美しいメールを作成します。それからあなたはそれをテストします、そしてそれはそれが完全に壊れているOutlookを除いて、それは素晴らしく見えます。人々は壊れた電子メールであなたが望むように従事することはできません。

Outlookは長い間メールマーケターの悩みの種でしたが、そうである必要がありますか？どうすればそれを扱うことができますか？多くの欠点があるにもかかわらず、私がOutlookを好きになった経緯を知るために読んでください。カバーします：

Outlookのバージョン
Outlookの癖に関するヒント
修正するためのコード

MicrosoftOutlookの多くのバージョン

「Outlook」という名前は、いくつかの異なるレンダリングエンジンと少なくとも2つの異なる表示設定を備えたいくつかの異なる電子メールクライアントをカバーしています。あなたがそれを許すならば、これのすべては大きな頭痛の種になる可能性があります。飛び込んで、少しまっすぐにできるかどうか見てみましょう。

Outlook 2007-2019

これらは、OutlookのWindowsデスクトップバージョンです。これらはレンダリングエンジンとしてWordを使用します。これは、電子メールが手紙を書くようなものだった時代に意味がありました。ああ、もっと簡単な時代。しかし、電子メールマーケターにとっては、HTML電子メールをレンダリングするためにそれをカットするわけではありません。

120 DPI （1インチあたりのドット数）は複雑さを増します。 Windowsユーザーは、120DPIを選択して画面の解像度を上げることができます。その場合、デスクトップ電子メールクライアントはそれを尊重し、画像とテキストをより大きく更新します。これはあなたの電子メールに大混乱をもたらす可能性があります。

Outlook for Mac

これは、MacデスクトップバージョンのOutlookです。レンダリングエンジンとしてWebkitを使用します。つまり、電子メールのレンダリングに関する限り、通常はAppleMailやiOSと同等です。お使いのブラウザで見栄えが良い場合は、ここで見栄えがする可能性が十分にあります。

Outlook.comとOutlookモバイルアプリ

これらのクライアントはWebkitまたはWebkitベースのレンダリングエンジンを使用しているため、優れたHTMLレンダリングを提供し、通常は電子メールを壊しません。

Outlook Office 365

Outlook Office 365には、デスクトップ電子メールクライアントとWebベースの電子メールクライアントの2つの異なるバージョンがあります。デスクトップバージョンはOutlook2007-2019に似ており、レンダリングエンジンとしてWordを使用します（電子メールでは難しい）。 Webベースの電子メールクライアントはWebkitまたはBlinkを使用し、Outlook.comと同様に電子メールをレンダリングします（はるかに簡単です）。

壊れたメールはもうありません

90以上の電子メールクライアント、アプリ、およびデバイス（Outlookのすべてのバージョンを含む）で電子メールをプレビューして、ブランド上でエラーのないサブスクライバーエクスペリエンスを確保します。

方法を学ぶ→

それらすべてを支配する1つのOutlook

1月、Microsoftは、デスクトップクライアントを2022年のいつかからどこでも機能する1つのクライアントに置き換えるという「OneOutlook」ビジョンを発表しました。

新しい電子メールクライアントは、現在のOutlook WebAppsに基づいています。そのため、Webkitベースのレンダリングエンジンが搭載され、HTMLメールが適切にレンダリングされることが期待されています。残念ながら、これらの古いデスクトップクライアントはすべて、それが発生したときに消えるだけではないため、ある程度サポートする必要があります。

するかしないか、試してみません

あなたの頭はもう回転していますか？

もしそうなら、それをあなたのために蒸留しましょう：重要なポイントは、WordとWebkitの2つの異なるレンダリングエンジンで作業しているということです。 Webkitはコーディングが簡単で、Wordはより困難です。どちらも本当に良いことでも悪いことでもありません。それらは異なるアプローチを必要とし、考慮に入れる必要のある異なる癖があります。

Outlookデスクトップクライアントの一般的なレンダリングの問題のいくつかと、それらを解決する方法を見てみましょう。

画像に幅と高さの属性を含めてください

Outlookは、幅と高さのCSSスタイルをサポートしていません。幅と高さの属性を含めない場合、Outlookは画像を実際のサイズで表示します。網膜画像を使用している場合（そうあるべきです）、それはあなたがあなたの電子メールを壊すであろう巨大な画像を手に入れることを意味します。

見通し — Outlookでwidth属性のないRetina画像により、電子メールが広くなります

ALTテキストを含める

Outlookのセキュリティメッセージに画像を表示させないでください。必ずALTテキストを含めてください。特に、Outlookは、ユーザーがこの機能をオンにしない限り、デフォルトで画像を表示しないためです。

テーブルを使用してください

電子メールは長い道のりを歩んできました。多くの電子メールクライアントで<div>ブロックを使用できますが、Outlookはその1つではありません。 Outlookは、幅やパディングなど、<div>タグに適用するほとんどのスタイルを無視します。したがって、代わりにコンテンツに<table>タグを使用することが重要です。

Outlook固有のコードを使用してレンダリングの問題を解決してください

これですべての問題が解決するわけではありませんが、Outlook固有のCSSを含めると、Outlookでしか見られないレンダリングの問題を解決できる場合がよくあります。または、Outlookで機能していない小さなブロックを非表示にし、条件付きコードを使用して、特定のバージョンのOutlookで機能するバージョンを表示することもできます。（条件付きコードについては後で詳しく説明します。）

小さな画像やテーブルセルに行の高さを追加してください

Outlookは、テーブルのセルと画像に最小の高さを設定します。したがって、テーブルセルをスペーサーとして使用している場合、または画像が小さい場合は、表示する高さに等しい行の高さ属性を要素に追加してください。例えば：

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

DPIスケーリングの問題を修正してください

Windowsコンピューターには、テキストとグラフィック要素を拡大して読みやすくするために、ユーザーが変更できる（または場合によってはデフォルトで高く設定されている）グローバル設定があります。これはアクセシビリティには最適ですが、一部の要素のみが拡大され、他の要素は拡大されないため、Outlookにはあまり適していません。

幸いなことに、修正があります。まず、XML名前空間をHTMLタグに追加する必要があります。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

次に、</ head>タグの直前に画像スケーリングを修正するコードを追加します。

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

そして最後に、設定された幅を、テーブルの属性としてではなく、ピクセルを含むCSSプロパティとして含めるようにしてください。

✗width =” 600”ではこれではありません：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

はい、 style =” width：600px;”のように：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

これにより、120DPIクライアントの問題のほとんどが修正されます。この修正の前後のこの並べて比較を見てください：

Outlook 2013、120 DPI （修正なし）	Outlook 2013、120 DPI （修正あり）

何が違うのでしょう？

ホバー効果が機能することを期待しないでください

Outlookは、ホバー疑似クラスをサポートしていません。他の電子メールクライアントでの電子メールのアクセシビリティを向上させるための対話を作成するために、それを含める必要がありますが、Outlookで機能しない場合でも驚かないでください。

ポイントを伝えるためにアニメーションGIFに依存しないでください

Outlookデスクトップクライアントは、アニメーションGIFをサポートしていません。最初のフレームにOutlookに表示する画像を表示させることも、アニメーションGIFをOutlookから非表示にして、条件付きコーディングを使用して必要な静止画像を表示することもできます。（繰り返しになりますが、次に条件付きコーディングについて詳しく説明します。）

フォールバックなしでインタラクティブコンテンツを使用しないでください

インタラクティブな電子メールは、Outlookにとっては大したことではありません。これらは、AMPコーディングまたはチェックボックスハックのいずれかに依存しますが、どちらもOutlookではサポートされていません。

電子メール用のAMPの場合、AMPファイルの代わりにHTMLファイルが表示されるため、追加のコーディングは必要ありません。チェックボックスハックの双方向性については、インタラクティブコンテンツを非表示にし、Outlookフォールバックを表示する必要があります。繰り返しになりますが、条件付きコーディングはここでのあなたの友達です。

画像にパディングやマージンを追加しないでください

Outlookは、画像のパディングとマージンを取り除きます。代わりに、画像の周囲のテーブルセルにパディングを追加してください。または、コピーと同じセルに画像がある場合は、コピーの周囲のタグにマージンを追加します（<h1>、<h2>、<p>など）。

恐怖は電子メールのキラーです：Outlookの恐怖に立ち向かうために必要なコード

Outlookのデスクトップ電子メールクライアント用に優れた電子メールをコーディングするには、「通常の」HTMLおよびCSSの外に飛び出す必要があります。これらのクライアントでメールを輝かせるのに役立つコードには、条件付きコーディング、MSOプロパティ、VMLの3種類があります。

何か新しいものを扱うのは怖いかもしれませんが、それだけの価値があることを約束します。そして、あなたがそれを適切に機能させるその瞬間？ KesselRunを12パーセク未満で作成したような気分になります。

条件付きコーディング

条件付きコーディングとは、サブスクライバーが使用している電子メールクライアントまたはブラウザーを調べ、コメント内の条件を満たしている場合にのみコードを表示するコーディングです。

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

これを使用して、バージョン番号を追加することにより、Outlookのデスクトップクライアントの特定のバージョンをターゲットにすることもできます。

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

ただし、Outlookは単純ではないため、バージョン番号は電子メールクライアントの名前と一致しません。

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016、Outlook 2019、およびOffice365デスクトップ= mso 16

そして、（lt）未満、（gt）より大きい、（lte）以下、または（gte）以上のクライアントの範囲をターゲットにすることで、より複雑にすることができます。例えば：

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

したがって、特定のクライアントで発生している野生のものだけが表示されている場合は、そのクライアントを具体的にターゲットにして、より適切なコンテンツを非表示にして表示することができます。

条件付きコメントを使用して、「if！mso」は「ifnot mso」を意味し、Outlookからコンテンツを非表示にすることもできます。

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

注意点：条件付きコードはOutlookデスクトップクライアントでのみ機能します。ここで多くの問題が発生するため、Webメールクライアントの修正よりもこれらが必要になる可能性があります。

ただし、Webクライアントをターゲットにする方法もありますが、一方のOutlookWebクライアントをもう一方のクライアントよりもターゲットにする方法はありません。したがって、Outlook.comをターゲットにする場合は、Office 365 Webクライアントもターゲットにします（デスクトップクライアントはターゲットにしません）。

Outlookがすべてのクラス名に「x_」を追加するという事実を利用して、Outlook Webクライアントをターゲットにすることができますが、属性セレクターではこれを行いません。したがって、クラス「foo」があり、Outlook Webクライアントで異なる方法で処理する場合は、次のコードでターゲットを設定できます。

[class~="x_foo"] { }

（この修正をしてくれたMark Robbinsと、howtotarget.emailをくれたDylan Smithに感謝します。）

MSOプロパティ

上記のように、Outlookデスクトップ電子メールクライアントにのみ影響する、追加できるOutlook固有のCSSがあります。かなり一般的なものがいくつかありますが、すでに聞いたことがあるかもしれません。

mso-hide：すべて;

このプロパティは、Outlookデスクトップクライアントからすべてを非表示にします。電子メールが転送されるときに削除されるので、それがサブスクライバーが頻繁に利用することがわかっている機能である場合は、それ自体を使用することには注意してください。「念のため」のコーダーであれば、「msoではない場合」の条件付きコードと組み合わせることができます。

mso-line-height-rule：正確に;

このプロパティにより、Outlookはline-heightプロパティで指定した位置に行の高さを表示します。これがないと、Outlookは必ずしも行の高さを尊重しません。精度が重要な業界で働いている場合は、おそらくこのプロパティに精通しているでしょう。

mso-padding-alt

これは少し一般的ではありませんが、私は時々それを使用しなければなりませんでした。 Outlookに固有のパディングを宣言できます。したがって、セルにある通常のパディングがOutlookで正しくレンダリングされない場合は、 mso-padding-altを使用して、Outlookのデザインに合った値を設定できます。

mso-ansi-font-size

これは私がたまにしか使用しないもう1つのものです。 Outlookに固有のフォントサイズを設定できます。したがって、Outlookがフォントを他の電子メールクライアントよりも少し大きくレンダリングしていて、不要なコピーの最終行が短くなってしまう場合は、 mso-ansi-font-sizeを追加し、コピーに合うフォントサイズを設定します。

使用できるMSOプロパティは他にもたくさんあるので、先に進んで、レンダリングの問題を修正するものがあるかどうかを確認してください。

VML

VMLはVectorMarkupLanguageの略です。これはMicrosoftのバージョンのSVGですが、言語は減価償却されており、ほとんど使用されていません（電子メールです！）。 MicrosoftにはVMLのドキュメントがオンラインでアーカイブされているため、VMLを使用してOutlookでベクターを作成する方法を調べることができます。VMLは引き続きサポートされています。理論的には、Microsoftが「OneOutlook」モデルに移行すると、VMLを残すことができます。

VML名前空間宣言を必ず含めてください。私は通常、ボイラープレートテンプレートの<html>要素に追加して、必要なときにいつでもVMLを使用できるようにします。

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

それができたら、MSO条件内のコードにVMLを追加できます。

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

そのコードは、200px x50pxの青い長方形を作成します。電子メールで実際に使用できるものではないかもしれませんが、VMLを使用して、角が丸いボタンをコード、背景画像、および背景のグラデーションに追加できます。キャンペーンモニターには、Stigによって作成された2つのツールがあり、角が丸い背景画像やボタンを作成するのに役立ちます。これらは、学習しているときにVMLを追加するための優れた方法であることがわかりました。

VMLを使用して、偽の絶対ポジショニング、シャドウエフェクト、またはフォールバックを作成し、OutlookでCSSアートをサポートすることもできます。一度飛び込んだら、VMLでできることはたくさんあります。

長生きしてメール

Outlookは長い間メールマーケターの悩みの種でしたが、そうである必要はありません。

適切なツールを使用すると、Outlookで正しく表示される美しい電子メールを作成できます。この投稿全体のリソースをチェックして、Outlookコーディングチョップを構築し、LitmusBuilderとEmailPreviewsを使用してEメールでテストしてください。 Outlookのコーディングは、解決されるのを待っているパズルだと考えてください。Outlookとそのすべての癖が大好きになるかもしれません。

Litmusを使用してOutlookでメールをテストする

送信を押す前に、Outlookでメールがどのように表示されるかを確認し、問題を修正してください。 Litmusを使用すると、サブスクライバーが使用できるピクセル単位の完璧な電子メールを作成していることを確信できます。

無料トライアルを開始→