102
4

9 に答える 9

64

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

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

  • レイアウトのためにテーブルに戻ります (またはできれば - 複雑なレイアウトを試みないでください)。
  • 背景画像には注意してください (Outlook 2007 と Gmail では壊れます)。
  • 本文にスタイル タグが含まれているのは、Hotmail が以前はそのように受け入れていたためです。styleCSS を使用する必要がある場合は、属性でインライン スタイルを使用します。
  • すっかり忘れてfloat
  • 画像がブロックされる可能性があることに注意してください - 背景とテキストの色を有利に使用してください - 画像が無効になっている読み取り可能なテキストがあることを確認してください
  • リンクには十分注意してください。特に、リンク テキストに URL のようなものがある場合は注意してください。「フィッシング」フィルタを怒らせることになります (例: <a href="http://domain.tld">www.someotherdomain.tld</a>is bad ) 。
  • ウェブメール クライアントの「折り目」は、ページの非常に高い位置にある傾向があることに注意してください (1024x768 の画面では、ほとんどのインターフェイスは 100 ピクセル程度しか表示されません)。あなたが誰であるか知っています。
  • 最近のバージョンの Outlook には、予想よりもかなり狭い「縦長」のプレビュー ペインがあります。
  • フラッシュ、Javascript、SVG、キャンバスなどについて考えることさえしないでください。
  • テスト、たくさん。最近の Outlook で必ずテストしてください (状況は大きく変わりました! HTML レンダリング エンジンとして Word を使用するようになりましたが、Word 2007 HTML/CSS のサポートには問題があります)。Gmail もかなり扱いにくいです。驚いたことに、Yahoo の Web メールは非常に優れており、優れた CSS サポートを備えています。

幸運を ;）

さらに質問に答えるために更新します。

テーブルで 2 レベルを超える入れ子を使用しないでください

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

セル/テーブルの背景画像の入れ子に注意してください

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

于 2008-09-24T14:39:01.923 に答える
13

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

于 2008-09-24T14:25:40.893 に答える
9

Campaign Monitor の背後にいる人々は、多くの有益な情報を掲載したEmail Standards Project Web サイトも開始しました。

于 2008-09-24T14:42:35.720 に答える
3

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

于 2011-12-22T09:39:09.520 に答える
2

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

MIME-Version:
Content-Type:

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

于 2008-09-24T15:02:42.847 に答える
1
  • 背景画像は信頼できません。
  • 実際には非常に簡単ですが、 javascript はありません。
  • 現在のファイル/バッファを電子メールとして送信できるエディタを使用するか、少なくともファイルの内容を HTML 電子メールとして送信できるプログラムを見つけてください。 HTML をコピーして Outlook (またはその他のメール プログラム) に貼り付けてメールをテストしないでください。
于 2008-09-24T14:31:35.247 に答える
1

画像を埋め込みます。リンクしないでください。

これは悪いです ：

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

これはいい ：

<img src=cid:myImage/>

ええ、奇妙に見えますが、電子メールへの画像の埋め込みに関するこのガイドを確認してください。

于 2010-11-25T15:08:20.830 に答える
0

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

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

于 2009-06-19T16:13:38.933 に答える