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


83

私は10年以上ウェブサイトを開発してきましたが、ウェブ用に開発する私の習慣の多くは、電子メールクライアント用に開発するときには役に立たないことがすぐにわかりました。これは私に非常に多くの欲求不満を引き起こしたので、私は質問をするだろうと思いました:

時々GmailやOutlookなどのデザインをしている私のような他の人にとってのベストプラクティスと必要な考慮事項は何ですか?

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

つまり、Webの世界から電子メールの世界に何が移行し、何が移行しないのでしょうか。

回答:


131

これは、HTMLメールを学ぼうとしている人にとっていくつかのリソースをリストするのに最適な場所のようです。これは(おそらく)Web上で見つかるHTML電子メールリソースの最も包括的なリストです。幸せな学習。

スタートガイド:

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

CSSは常にhtml-emailにインライン化する必要があります。これがCSSインライン化ツールのリストです

レスポンシブガイド:

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

レスポンシブ代替例:

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

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

Outlookで背景画像を機能させるにはVMLを使用する必要があります(bodyタグを除く)。VMLリンクは次のとおりです。


37

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

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

  • インラインCSSを使用する:スタイルが常にサポートされているとは限りません。
  • テーブルレイアウトを使用する:私は知っていますが、divレイアウトはcssに依存しており、多くの電子メールクライアントは対応できません。
  • 行スパンを使用しないでください:これにより、奇妙な間隔の問題が発生します。
  • 背景画像を使用しないでください:これらのサポートは制限されています。
  • 「display:block」を使用した画像タグのスタイル設定:これにより、hotmailの奇妙な間隔の問題が修正されます。
  • 複数のテーブルを使用する場合、それらを1つの親テーブルにネストします。これにより、より奇妙な間隔の問題が回避されます。
  • Javascriptを使用しないでください:これもあまりサポートされていません。
  • メールが画像なしで判読できることを確認してください:ユーザーが画像を読み込めない場合があります。
  • オンラインバージョンとそれにリンクを提供する:これにより、電子メールクライアントがひどい場合でも、ユーザーは目的のコンテンツを見ることができます。
  • テスト、テスト、テスト:1つの電子メールクライアントで機能するからといって、他のクライアントで機能するとは限りません。大事なのはOutlook2007です。これはWordを使用してHTMLをレンダリングします(ため息)。

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


5

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


また、mailchimpが提供するガイドラインもここにあります: mailchimp.com/articles/email_marketing_guide
Dal Hundal 2010
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.