すべての電子メールクライアントで動作するようにHTML電子メールを作成するにはどうすればよいですか？

Question

これはあいまいな質問ですが、私はどんな指針も感謝します。私の顧客はHTML電子メールを送信する電子メール加入者リストを持っています。問題は、異なる電子メールクライアントが閲覧したときに電子メールが一貫して見えないことです。たとえば、電子メールはGmailではすばらしいが、OutlookやAOLではひどいと思われるかもしれない。

この問題はすべての解決策に適していますか？つまり、使用できるCSSルールがありますか？ご協力いただきありがとうございます。

Answer 1

大雑把に、私はあなた

1. はいつも一緒にHTMLとプレーンテキストの一部を追加することを忘れないでください、あなたのhtml
2. を作成する代わりにdiv要素のネストした表を使用するのに役立つかもしれ少数ドゥのといけないことのリストを表示することができますメールが「HTMLとして表示」が「いいえ」に設定されているところからトリミングされないことを確認します。
3. 常にインラインCSSを使用してください。

4. イメージが72ppiを超えないように最適化してください。

5. 背景画像を使用しないでください。

6. 外部リンクされたCSSを使用しないでください。
7. メッセージ全体に1つの画像を使用しないでください。
8. 電子メール用にHTMLを記述するときは、Webページとは異なるとみなしてください。はい、実際には、Webブラウザが電子メールクライアントよりhtmlをレンダリングするのに十分な能力を持っているので、それらは異なっています。

Answer 2

CSSとメディアクエリのサポートがクライアントによって異なるため、HTMLメールの性質はすべてのメールクライアントではまったく同じにはなりません。しかし、あなたは一貫して見え、優雅に劣化するように、取ることができる手順があります。

私はここから始めたいと思います：https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919これは、他のメールを作成するためのベースとして使用できる流体メールテンプレートを構築する素晴らしい記事です。メールにはthe source codeも含まれています。

電子メールがコード化されたら、Litmusのようなサービスでチェックして、多くのクライアント/デバイスでどのように見えるかを確認できます。 Litmusは電子メールの問題のトラブルシューティングにも最適です。

最終的に、HTMLメールのキャンペーンモニターのCSSサポートリストをチェックしてください：https://www.campaignmonitor.com/css/これは地球上で最も人気のあるモバイル、ウェブ、デスクトップのトップ10のメールクライアントのCSSサポートの完全な内訳です​​。

Outlookの場合、本当に苦労する可能性がありますが、Outlookを特に対象とするためにOutlookの条件付きタグを使用するようにしてください。条件タグの詳細については、this threadの最初の答えを確認してください。ボーナスのヒント：Outlookのコードタグ内にスタイルを配置する場合は、！importantをスペースの前に必ず使用してください。