web-dev-qa-db-ja.com

HTMLメールを作成する際のベストプラクティスと考慮事項

私は10年以上ウェブサイトを開発してきましたが、ウェブ向けの開発の習慣の多くは、電子メールクライアント向けの開発には役に立たないことがすぐにわかりました。これにより、私は非常に多くのフラストレーションを感じました。そのため、GmailやOutlookなどのために時々デザインしている自分自身のような他の人のために、ベストプラクティスと必要な考慮事項を明らかにするための質問をしたいと思いました。

例：<style>...</style> vsインラインCSS。

要するに、何がウェブの世界から電子メールの世界に移行し、何が移行しないのか。

htmlcsshtml-email
79
Sampson

これは、HTMLメールを学ぼうとする人のためのリソースをリストするのに最適な場所のようです。これは（おそらく）Webで見つかるHTMLメールリソースの最も包括的なリストです。幸せな学習。

入門ガイド：

CSSサポートと一般ガイド：

Html-emailでCSSを常にインライン化する必要があります。 CSS Inlining Tools のリストはこちら

レスポンシブガイド：

テンプレートとフレームワーク：

レスポンシブな代替例：

また、上記のTed Goas Responsiveリンクには、優れた流動的な例があります。

トラブルシューティングと一般ガイド：

[〜＃〜] vml [〜＃〜] を使用して、Outlookで背景画像を機能させる必要があります（ bodyタグ内 を除く）。いくつかのVMLリンクを次に示します。

117
John

私は今、仕事のために（かなりの時間で）これらをやっています。 HTMLメールには多くの落とし穴があります。さまざまな電子メールクライアントがHTMLを互いに異なってレンダリングし、IE6を高度に見せます。

これまでに学んだことの要約です。

  • インラインCSSを使用：スタイルは常にサポートされているわけではありません。
  • テーブルレイアウトを使用：知っていますが、divレイアウトはcssに依存しており、メールクライアントの多くは対処できません。
  • rowspanを使用しないでください：これは奇妙な間隔の問題を引き起こします。
  • 背景画像を使用しない：これらのサポートは制限されています。
  • 「display：block」を含むスタイルイメージタグ：これにより、hotmailの奇妙な間隔の問題が修正されます。
  • 複数のテーブルを使用する場合、それらを1つの親テーブルにネストします：これにより、より奇妙な間隔の問題が防止されます。
  • Javascriptを使用しないでください：やはりあまりサポートされていません。
  • 画像がなくてもメールが判読できることを確認してください：ユーザーはそれらをロードできません。
  • オンラインバージョンを提供してリンクする：メールクライアントがひどい場合でも、ユーザーは目的のコンテンツを見ることができます。
  • テスト、テスト、テスト：あるメールクライアントで機能するからといって、他のメールクライアントで機能するわけではありません。大事なのはOutlook 2007です。Wordを使用してHTML（ため息）をレンダリングします。

これは包括的なリストからはほど遠いですが、ほとんどの人が正しい軌道に乗るはずです。

34
Magpie

インラインcssとテーブル-2000年頃のWeb開発を考えれば大丈夫です。キャンペーンモニターには、電子メールクライアントが処理できるものに関する優れたリソースがあります。また、テストに http://www.emailonacid.com/ を使用します-大量のテストを送信する必要がなくなります。

5
matpol

私自身も、このガイドが非常に役立つことを発見しました： 電子メールクライアントのCSSサポートのガイド 。

3
BalusC

これも良いので、どの電子メールブラウザでどのインラインCSSがサポートされているかを確認してください。 http://www.campaignmonitor.com/css/

私もlitmusapp（google it！）をお勧めします。これは物事をチェックするための良いツールです。

0
jos