Outlookの習得：一般的なレンダリングの問題の振り返り

公開: 2016-08-31

マイクロソフトは、電子メール業界で最大のプレーヤーの1つです。 Microsoft Outlookとそれに対応するWebベースのOutlook.comは、全体で10％を超える市場シェアを保持しています。これはかなり巨大です！

ユーザーが多種多様な電子メールクライアントから選択できる世界で、Outlookはどのように人気を維持しているのでしょうか。 Microsoft Officeは、世界中の企業のコンピューターに一般的にインストールされているだけでなく、Windowsを実行している多くの家庭用コンピューターやラップトップにはMSOfficeがプリインストールされています。 MSOfficeにパッケージされているデフォルトの電子メールクライアントは…Outlookです。

次に、1996年にHotmailとして電子メールクライアントとしてのキャリアを開始したOutlook.comがあります。1997年にMicrosoftはHotmailを推定4億ドルで買収し、MSNHotmailとしてHotmailを立ち上げました。その後、Windows LiveHotmailに再びブランド名が変更されました。最後に、2013年にHotmailは完全にOutlook.comに置き換えられました。 Outlook.comの歴史がHotmailと織り交ぜられていることから、2015年の時点でOutlook.comのアクティブユーザー数が4億人を超えていることを知っても驚くことではありません。

Outlookでの一般的なレンダリングの問題

Outlook用の電子メールの作成は常に困難でした。 Outlook 2007以降、MicrosoftはInternet Explorerを使用した電子メールのレンダリングを停止し、代わりにMicrosoftWordをレンダリングエンジンとして使用することを選択しました。 WordまたはExcelからOutlookの電子メールにアイテムをシームレスにコピーして貼り付けることができたMicrosoftOfficeユーザーにとって朗報です。 HTMLを使用してEメールを作成するEメールマーケターや開発者にとってはそれほど素晴らしいニュースではありません。 HTML WebページをコピーしてWord文書に貼り付けると、WordがHTMLをどのように変換するかがわかります。

当然のことながら、そこにいる才能のある電子メール開発者は、彼らの美しいHTML電子メールがOutlookで同じように美しくレンダリングされることを確実にするために、多数の電子メールハッキングを開発することに魔法をかけ始めました。多くのハッキングにはVML（Vector Markup Language）が関係する傾向があるため、簡単な作業ではありません。VML（Vector Markup Language）は、電子メール開発のハードノックの学校で学ぶ傾向があります。

Outlook用の電子メールを開発するときに、電子メール開発者が直面する一般的な問題のいくつかについて簡単に説明します。

電子メール開発でのテーブルの使用

最新のWeb開発では、divなどのコンテナーを使用してコンテンツを含めることができ、テーブルは表形式のデータ専用に使用されます。ただし、divなどの要素をHTMLページ内に正しく配置するには、floatやpositionなどのCSS属性が必要になることがよくあります。

Outlookはこれらの属性をサポートしていません。クロスデバイス/クライアント/ブラウザのレンダリング能力を最大化するために電子メールを適切に構造化するために、開発者はテーブルを使用して電子メールを作成します。

テーブルは電子メール開発者のために何年も働いてきましたが、電子メールの設計に関して達成できることには制限があります。設計者は、テーブルを使用して設計を簡単に構築できるように、行と列の観点から考える必要があります。

VMLの背景画像

ライブテキスト。ライブテキスト。ライブテキスト。それはメールマーケティング担当者のモットーです。メールにできるだけ多くのライブテキストを入れて、メールが（スパムではなく）受信トレイに届き、誰もがアクセスでき、画像をオフにして読み取れるようにします。

背景画像を使用すると、パターンであろうと美しい写真であろうと、画像の上にライブテキストをオーバーレイできます。背景画像は、アクセス可能でありながら、メールデザインに美しい奥行き感を与えることができます。

ただし、Outlookは純粋なHTMLの背景画像をサポートしていません。 Outlookでは、背景画像を機能させるためにVMLを使用する必要があります。ありがたいことに、メールで背景画像を使用できるようにするために、VMLを完全に学ぶ必要はありません。キャンペーンモニターには、VMLおよびHTMLコードを生成して、電子メールに防弾の背景画像を表示するための優れたツールがあります。

アニメーションGIFはサポートされていません

電子メールでのビデオのサポートが不足しているため、電子メールをよりダイナミックで魅力的なものにするために電子メールマーケターが推進しているため、控えめなアニメーションGIFは、電子メールに活気を与えるのに最適な方法です。

ただし、OutlookはアニメーションGIFをサポートしていません。画像が読み込まれてユーザーに表示されている間、アニメーションの最初のフレームのみがレンダリングされます。

Outlookで電子メールを開いているサブスクライバーがいて、アニメーションGIFを使用している場合は、アニメーションの最初のフレームをカウントします。 GIFはシンプルに保ち、アニメーションはメッセージに不可欠ではありませんが、アニメーション全体を見ることができる人にとっては追加のメリットのようになります。

p、div、およびタグのパディングはサポートされていません

パディングは、要素にスペースを導入できる優れたCSS属性です。これは、電子メール内の要素を配置したり、要素の周囲に呼吸の余地を作成してデザインを強化したりするのに便利なCSS属性です。

このための簡単な回避策は、テーブル内のHTML属性cellspacingおよびcellpaddingを使用して、テーブル内の要素の周囲にスペースを作成することです。

段落にパディング（pタグ）を導入するには、スタイル属性mso-line-height-rule：exactly;を使用します。行の高さと組み合わせて、コピーとテキストに余裕を持たせ、フォローしやすくします。

 <p>Your text here</p>

Outlookだけではありません

デスクトップクライアントは何年もの間電子メール開発者に問題を提起してきましたが、電子メール開発者が取り組むための新しいバージョンのOutlook.comがあり、それ自体がレンダリングの癖の独自のシェアを投げかけています。その多くは、Outlookに見られる癖とは異なります。（もちろん。）

1つの変更は、正しい方向への一歩ではありませんでした。Outlook.comは、一連のメディアクエリ内に配置されたものをすべて削除します。したがって、メールのモバイル版とデスクトップ版を区別する方法はありません。

しかし、いくつかの良いニュースがあります。修復された古いバージョンのOutlook.comにあったレンダリングのバグがいくつかあります。最も注目すべきは、フロート/マージンハックです。古いバージョンのOutlook.comでこれらのCSS属性を理解するには、大文字または大文字と小文字の組み合わせを使用して記述する必要がありました。今、ケースは関係ありません。

以前は、Outlook.comがmargin属性を理解するには、次のものを使用する必要がありました。

 Margin: 10px;

しかし今、あなたは使うことができます：

 margin: 10px;

変更点のより完全なリストについては、電子メール開発者のRemi Parmentierが、新しいOutlook.comについて知っておくべきことと、電子メール開発者が注意すべきことについてすばらしいブログを書いています。
Outlookをマスターする

コードの関連性を維持する

電子メール開発者として働いたことがある場合、電子メールのレンダリング機能の目標の投稿が必要以上に動いているように感じることがよくあります。電子メールの開発が進化し続けるにつれて、Outlookへの「変換」を必要とする新しい技術が常に存在するようになります。

たとえば、Gmailモバイルアプリがモバイルバージョンのメールを確実にレンダリングするためにハイブリッド/スポンジメール開発が導入されたとき、メール開発者はOutlookがそれらのメールをレンダリングできるようにする新しい手法も作成しました。

電子メール開発者がさらに限界を押し広げ、多くの人がテーブルのない電子メールを作成することを熱望しているため、これらの新しい手法は、まだ使用されているOutlookの多くのバージョンに対して単純化する必要があります。

革新的で才能のある電子メール開発者がこれまで以上に需要があったと言っても過言ではありません。 VMLはまだ電子メールで習得されておらず、OutlookがレンダリングエンジンとしてWordを使用している限り、これは電子メール開発者が知識と価値を押し続けることができる重要な領域になります。

メールの作成には時間がかかります

Outlookが電子メール開発者に課すこれらすべての課題、およびサポートする必要のある電子メールクライアントとデバイスのリストの増加により、電子メールマーケティングにかなりの時間がHTML電子メールの開発とテストに費やされているのも不思議ではありません。

2016年の電子メール作成の状況では、回答者の44％以上が電子メールの開発に3時間以上費やしたと報告しています。これは短時間ではなく、Eメールマーケティングワークフロー全体を検討する際に考慮する必要があります。

Outlookは、電子メール開発者にとって常に扱いにくい獣でした。残念ながら、それはかなりの電子メールクライアントの市場シェアを持っているので無視することはできません。それはあなたがB2Bマーケティング部門で働いているならもっと大きくなる可能性があります。単純に、Outlookは無視できません。

メールをOutlookで機能させるのに苦労していますか？

マイクロソフトと提携して、Outlookの電子メールレンダリングのバグに優先順位を付け、問題をより迅速に特定し、コミュニティに改善と修正を発表しました。

Outlookを改善し、レンダリングのバグを送信するのを手伝ってください。

Outlookレンダリングのバグを送信する→