HTMLメールのデザインにはどのようなガイドラインがありますか？
多くのクライアントとWebベースの電子メールインターフェースで視覚的な安定性を維持しながら、電子メールのリッチHTMLフォーマットに対してどのようなガイドラインを与えることができますか？
Stack Overflowの質問に対する無関係な回答は、次のことを示唆しています。
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
次のガイドラインが含まれます。
- スタイルシートを
<body>ではなく<head>に配置する
一部の電子メールクライアントはCSSを頭から取り除きますが、スタイルブロックが（無効に）本体にある場合は残します。 - 可能な限りインラインスタイルを使用する
Gmailは、<head>または<body>のいずれのスタイルシートでも削除しますが、style=""属性を使用して割り当てられたインラインスタイルを尊重します - テーブルに戻る
電子メール標準は、Microsoft Wordレンダリングエンジンを使用するOutlook 2007のおかげで、近年大きな後退を遂げています。スタイルシートなしのポジショニングについて学んだことのほとんどを学びましょう。 - 画像に依存しないでください
ほとんどのクライアントとほとんどのWebベースの電子メールクライアントは、ユーザーが特に表示を要求しない限り、画像を表示しません。
また、どこで読んだか覚えていない「未確認の」真実もいくつかあります。
- テーブルで2レベル以上のネストを使用しないでください
これは本当ですか。行うとどうなりますか？これにこだわる特定のクライアントはいますか？ - セル/テーブル内の背景画像のネストに注意してください
理解しているように、背景画像が「輝く」だけでなく、降順のテーブル/セルに完全に新しく適用される場合があります。繰り返しますが、本当ですか？どのクライアントですか？
トレンチからのより多くのガイドラインと経験でこのリストを具体化したいと思います。
さらなる提案を提供できますか？
更新：HTMLの設計部分とその一貫性のガイドラインを具体的に求めています。 スパムフィルターの回避 および 一般的な礼儀 の一般的なガイドラインに関する質問は既にSOにあります。
実際に本当に '現代のHTMLとCSS'の観点からアプローチすると、まともなHTMLメールを作成するのは困難です。
最良の結果を得るには、1999年だと想像してください。
- レイアウトのテーブルに戻る（または、できれば、複雑なレイアウトを試みないでください）
- 背景画像を恐れてください（Outlook 2007とGmailで壊れます）。
- スタイルタグインザボディーの問題は、Hotmailが以前はその方法でそれを受け入れていたためです。 CSSを使用する必要がある場合は、
style属性でインラインスタイルを使用します。 floatを完全に忘れる- 画像はおそらくブロックされることを忘れないでください-背景とテキストの色を有利に使用してください-画像が無効になっている読みやすいテキストがあることを確認してください
- リンクには非常に注意してください。リンクテキスト内のURLのように見えるものには特に注意してください-「フィッシング」フィルタ（たとえば、
<a href="http://domain.tld">www.someotherdomain.tld</a>はbad） - ウェブメールクライアントの「折り畳み」はページの非常に高くなる傾向があることに注意してください（1024x768の画面では、ほとんどのインターフェイスは100ピクセル程度しか表示されません）。あなたが誰であるかを知っています。
- Outlookの最近のバージョンには、予想よりもかなり狭い「ポートレート」プレビューペインがあります。固定幅レイアウトを使用する必要がある場合は、できる限り狭くしてください。
- フラッシュ、Javascript、SVG、キャンバスなどについてthinkしないでください。
- テスト、たくさん。必ず最新のOutlookでテストしてください（状況は大きく変化しています！HTMLレンダリングエンジンとしてWordを使用しており、障害があります： Word 2007 HTML/CSSサポート ）。 Gmailもかなり扱いにくいです。驚くべきことに、YahooのWebメールは非常に優れており、ニースCSSをサポートしています。
がんばろう ;）
更なる質問に答えるために更新：
テーブルで2レベル以上のネストを使用しないでください。
これはロータスノーツに関する古いガイドラインであると思います。入れ子になったテーブルshould大丈夫ですが、実際には、それらを必要とするほど複雑なレイアウトがある場合は、とにかく問題が発生するでしょう。レイアウトを維持しますsimple。
背景画像をセル/テーブルにネストすることに注意してください
これは上記に関連している可能性があり、同じことが当てはまります。複雑になっている場合は、willに問題があります。 Outlookの最近のバージョンは背景画像をまったくサポートしていないため、完全に忘れることをお勧めします。
常にマルチパートMIMEを使用し、プレーンテキストの代替を提供します。
Campaign Monitorの背後にいる人々は、多くの有益な情報を掲載した Email Standards Project Webサイトも開始しました。
このボイラープレートを見てください。これはhtml5boilerplateに似ていますが、メールの場合は http://htmlemailboilerplate.com/
これはあなたが尋ねている質問よりも低いレベルだと思いますが、HTMLメールをできるだけ多くのクライアントで正しく表示したい場合は、有効なMIMEを使用していることを確認してください。特に、電子メールが有効なMIMEと見なされるためには、ヘッダーに（WordのRFCの意味で）これらのヘッダーの両方が含まれている必要があります。
MIME-Version:
Content-Type:
これらのいずれかが欠落している場合、非常に厳密なクライアントはHTMLを生のテキストとして表示します。知っておくべき大規模なオンラインベンダーがこれを台無しにしたことに驚くでしょう（特に、過去にAmazonとACMからのMIME-Version：ヘッダーがないHTMLメールを取得しました）
- 背景画像は信頼できません。
- 実用的ですが、javascriptなしです。
- 現在のファイル/バッファを電子メールとして送信できるエディターを使用するか、少なくとも、ファイルの内容をHTML電子メールとして送信できるプログラムを見つけます。 HTMLをコピーしてOutlookに貼り付けてメールをテストしない（または他のメールプログラム）.
アドバイスの3つの単語：テスト、テスト、テスト。
LitmusApp.comのメールテストサービスをご覧ください。あなたは彼らにメッセージを送り、彼らはそれをたくさんのクライアントにレンダリングし、結果のスクリーンショットを見せます。完璧ではありませんが、かなり良いです。
（8.0より前のLotus Notesは、本当に、本当にHTMLメールに悪臭を放ちます）
また、インラインCSSスタイルだけでなく、可能な限りタグに切り替えることをお勧めします。
画像を埋め込む、それらにリンクしないでください。
これは悪いです ：
<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>
これはいい ：
<img src=cid:myImage/>
ええ、奇妙に見えますが、これを確認してください 電子メールへの画像の埋め込みに関するガイド 。
スタイルブロックを含める場合、「。classname」または「。」で新しい行を開始しないでください。何でも。期間の前にブレースまたは何かを置きます。これを行わないと、一部のWebメールシステムではスタイルシートが適切に表示されません。
多くの人は、この動作のために電子メールでCSSブロックを使用できないと誤って想定しています... IIRC "。" SMTPの本文区切り文字です。システムは、1つのメッセージの内容が新しいメッセージとして誤認識されるのを防ぐために、メールストアでエスケープする傾向があります。これを処理する方法は、ピリオドのある新しい行から始まるスタイルを壊す傾向があります。