HTML電子メール設計にはどのようなガイドラインがありますか？[閉まっている]

101

多くのクライアントおよびWebベースの電子メールインターフェース全体で優れた視覚的安定性を維持しながら、電子メールの豊富なHTML形式についてどのようなガイドラインを提供できますか？

Stack Overflowの質問に対する無関係な回答が示唆されました：

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

次のガイドラインが含まれています。

  1. <body><head>
    一部の電子メールクライアントではなくスタイルシートを配置します。CSSが頭から削除されますが、スタイルブロックが本文に（無効に）含まれている場合はそのままにします。
  2. これまでの可能な使用のインラインスタイル
    Gmailはどうかで、任意のスタイルシートを取り除くことができます<head>かで<body>使用して割り当てられますが、名誉のインラインスタイルstyle=""属性を
  3. 表に戻る
    電子メール標準は、Microsoft Wordレンダリングエンジンを使用したOutlook 2007のおかげで、近年、実際に大きく後退しています。スタイルシートを使用せずに配置について学んだことのほとんどを学習します。
  4. 画像に依存しない
    ほとんどのクライアントおよびほとんどのWebベースの電子メールクライアントは、ユーザーが画像の表示を明示的に要求しない限り、画像を表示しません。

また、どこで読んだか覚えていない「未確認」の真実もいくつかあります。

  1. テーブルで3レベル以上のネストを使用しないでください
    これは本当ですか。実行するとどうなりますか？これで窒息する特定のクライアントはありますか？
  2. セル/テーブルに背景画像をネストすることに注意してください
    私が理解しているように、背景画像が「輝く」だけでなく、降順のテーブル/セルに完全に新しく適用される状況に遭遇する場合があります。繰り返しますが、本当ですか？どのクライアント？

このリストを、トレンチからのより多くのガイドラインと経験で具体化したいと思います。

他に提案はありますか？

更新： HTML のデザイン部分のガイドラインとその一貫性を具体的に求めています。スパムフィルターを回避するための一般的なガイドラインに関する質問、および一般的な礼儀はすでにSOにあります。

html  email 
— カー
ソース
— John

回答:

63

「最新のHTMLとCSS」の観点からアプローチすると、まともなHTMLメールを作成するのは実際には非常に困難です。

最良の結果を得るには、それが1999年だと想像してください。

  • レイアウトのためにテーブルに戻る（またはできれば-複雑なレイアウトはしないでください）
  • 背景画像を恐れてください（Outlook 2007とGmailでは壊れます）。
  • Hot-mail-in-the-bodyのスタイルは、Hotmailが以前はその方法で受け入れていたためです。ただし、現在は削除されていると思います。styleCSSを使用する必要がある場合は、属性とともにインラインスタイルを使用します。
  • 完全に忘れる float
  • 画像がブロックされる可能性があることを覚えておいてください-背景とテキストの色を活用してください-画像が無効になっている読みやすいテキストがあることを確認してください
  • リンクと非常に注意してください、リンクテキスト内のURLのようなもの、そのルックスの特に警戒する-あなたの意志怒り「フィッシング」フィルタ（例えば<a href="http://domain.tld">www.someotherdomain.tld</a>ある悪いです）
  • ウェブメールクライアントの「折りたたみ」はページの非常に高い位置にある傾向があることを忘れないでください（1024x768画面では、ほとんどのインターフェイスは100ピクセル以上を表示しません）。あなたが誰であるかを知っています。
  • Outlookの最近のバージョンには、予想よりもかなり狭い「縦長」のプレビューペインがあります。固定幅のレイアウトには十分注意してください。使用する必要がある場合は、できるだけ狭くしてください。
  • フラッシュ、Javascript、SVG、キャンバスなどについては考えないでください。
  • テスト、たくさん。最新のOutlookでテストしてください（状況は大きく変わりました。HTMLレンダリングエンジンとしてWordが使用されており、機能が低下しています：Word 2007 HTML / CSSサポート）。Gmailもかなり気難しいです。驚いたことに、YahooのWebメールは非常に優れており、優れたCSSサポートを備えています。

幸運を ;）

さらに質問に答えるために更新してください：

テーブルで3レベル以上のネストを使用しないでください

これはLotus Notesに関する古いガイドラインだと思います。ネストされたテーブルは問題ないはずですが、実際には、それらを必要とするほど複雑なレイアウトがある場合は、とにかく問題が発生するでしょう。レイアウトはシンプルにしてください。

セル/テーブルに背景画像をネストすることに注意してください

これは上記に関連している可能性があり、同じことが当てはまります。複雑になっている場合は問題が発生します。Outlookの最近のバージョンは背景画像をまったくサポートしていません。そのため、背景画像を完全に無視することをお勧めします。

— ダン
ソース
3
HTML電子メールサポートがそれほど発展していないのはなぜですか？なぜ私たちは、1999年に戻ったかのように、このすべての悪い慣行を継続して実施する必要があるのですか
— smonff 2013年
bgimages stackoverflow.com/a/17358553/413032をサポートするための回避策があります。ms-word html。@ smonffを交互に使用する私はあなたに完全に同意します。........ MS-Wordによってhtmlがレンダリングされる理由
— DavutGürbüz2013年
1
リトマスのEmail Coding 101を確認してください。
— Shaijut、2015年
13

常にマルチパートMIMEを使用し、プレーンテキストの代替を提供します。

— ジービー
ソース
3

このボイラープレートを見てください。これはhtml5boilerplateに似ていますが、電子メールの場合：http ://htmlemailboilerplate.com/

— welldan97
ソース
おっと、もうなくなった。
— Sean McMillan
2

これはあなたが質問している質問よりも低いレベルだと思いますが、HTMLメールをできるだけ多くのクライアントで正しく表示したい場合は、有効なMIMEを使用していることを確認してください。特に、電子メールが有効なMIMEと見なされるためには、ヘッダーに（単語のRFCの意味で）次の両方のヘッダーを含める必要があります。

MIME-Version:
Content-Type:

非常に厳密なクライアントは、これらのいずれかが欠落している場合、HTMLを未加工のテキストとして表示します。もっとよく知っているはずの多くの大規模なオンラインベンダーがこれを台無しにしたことに驚くでしょう（特に、過去にAmazonとACMからのMIME-Version：ヘッダーが欠落したHTMLメールを受け取ったことがあります）。

— jj33
ソース
1
  • 背景画像は信頼できません。
  • 実際には簡単ですが、JavaScriptはありません。
  • 現在のファイル/バッファーをメールとして送信できるエディターを使用するか、少なくとも、ファイルの内容をHTMLメールとして送信できるプログラムを見つけてください。 HTMLをコピーしてOutlook（または他のメールプログラム）に貼り付けて電子メールをテストしないでください。
— ジョナサンアーケル
ソース
1

アドバイスの3つの単語：テスト、テスト、テスト。

LitmusApp.comのメールテストサービスをご覧ください。あなたは彼らにメッセージを送り、彼らはそれをたくさんのクライアントにレンダリングし、結果のスクリーンショットを見せます。それは完璧ではありませんが、かなり良いです。

（ちなみに、8.0より前のLotus Notesは本当に、HTMLメールの臭いがします）

また、インラインCSSスタイルだけでなく、可能な限りタグに切り替えることをお勧めします。

— エリ
ソース
0

スタイルブロックを含める場合は、「。classname」または「。」で改行しないでください。何でも。期間の前にブレースか何かを入れます。これを行わないと、一部のWebメールシステムでスタイルシートが正しく表示されません。

多くの人々は、この動作のために電子メールでCSSブロックを使用できないと誤って想定しています... IIRC "。" SMTPの本文の区切り文字です。システムは、1つのメッセージの内容が新しいメッセージとして誤って認識されるのを防ぐために、メールストアでエスケープする傾向があります。これが処理される方法は、ピリオドのある新しい行で始まるすべてのスタイルを壊す傾向があります。

— アインシュタイン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.