web-dev-qa-db-ja.com

HTMLメールのスタイル設定のベストプラクティス

メールニュースレターのHTMLテンプレートを設計しています。多くのメールクライアントはリンクされたスタイルシートを無視し、他の多くの（Gmailを含む）はCSSブロック宣言を完全に無視することを学びました。インラインスタイル属性は私の唯一の選択肢ですか？ HTMLメールのスタイル設定のベストプラクティスは何ですか？

htmlcssemail
187
Joe Mornin

キャンペーンモニターには、優れた サポートマトリックス があり、さまざまなメールクライアントでサポートされているものとサポートされていないものが詳しく説明されています。

Litmus のようなサービスを使用して、複数のクライアント間で電子メールがどのように表示されるか、フィルターなどでキャッチされるかどうかを表示できます。

123
Jim

私は以前にHTMLメールの戦いと戦いました。メールクライアント間の互換性を最大限に高めるためのスタイリングに関するヒントをいくつか紹介します。

  • インラインスタイルあなたは親友です。スタイルシートを絶対にリンクせず、<style>タグを使用しないでください（たとえば、GMailはそのタグとそのコンテンツをすべて削除します）。

  • あなたのより良い判断に対して、se and abuse tables。 <div>sはそれをカットしません（特にOutlookで）。

  • 背景画像を使用しないでください、それらはむらがあり、あなたを困らせます。

  • 一部の電子メールクライアントは、入力されたハイパーリンクを自動的にリンクに変換します（自分で<a>をアンカーしない場合）。これにより、ネガティブな効果が得られる場合があります（たとえば、各ハイパーリンクに異なる色を表示するスタイルを設定している場合）。

  • 実際のリンクを別のものとハイパーリンクするよう注意してください。たとえば、http://www.google.comを入力してからhttps://gmail.com/にリンクしないでください。一部のクライアントは、メッセージにスパムまたは迷惑メールのフラグを付けます。

  • 画像をできるだけ少ない色で保存して、サイズを節約します。

  • 可能であれば、画像を埋め込むをメールに入れてください。電子メールをダウンロードするために外部Webサーバーに連絡する必要はなく、電子メールの添付ファイルとして表示されることもありません。

そして最後に、テスト、テスト、テスト！各電子メールクライアントは、ブラウザとは異なる方法で処理を行います。

237
Michael Irigoyen

メールチンパンジーは、やってはいけないことについてかなりいい記事を持っています。 （私はあなたが望むもののために間違った方法で聞こえるのを知っています）

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

一般に、Webデザインの悪い習慣であるとあなたが学んだすべてのことは、htmlメールの唯一の選択肢のようです。

基本は次のとおりです。

  • 画像の絶対パスがあります（例 https://stackoverflow.com/random-image.png ）
  • レイアウトにテーブルを使用します（私がそれを推奨するとは思わなかった！）
  • インラインスタイルを使用します（また、古いスタイルのCSSも、ほとんどの場合2.1、box-shadowは機能しません;））

できる限り多くのメールクライアントでテストするか、上記で提案した他の誰かがLitmusを使用してください。 （ジムの功績）

編集：

Mail Chimpは、コミュニティで このツール を利用できるようにすることで素晴らしい仕事をしました。

CSSクラスをHTML要素にインラインで適用します！

35
SamMullins

ここに投稿された回答に加えて、この記事を必ずお読みください。

http://24ways.org/2009/rock-solid-html-emails

9
Stephan Muller

私がいつもHTMLメールについて戻るリソースは CampaignMonitorのCSSガイド です。

彼らのビジネスはメール配信のみに焦点を当てているため、彼らは自分のものを知っているだけでなく、誰もが

6
Gareth

「そうそう。スタイルシートを使用してHTMLページを作成し、jQueryを使用して各要素のスタイル属性にスタイルシートを適用します。このようなもの：

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

次に、DOMをコピーして、電子メールで使用します。

5
Nathan MacInnes

画像のマッピングはかなりうまくいくと思います。画像のヘッダーまたはフッターがある場合は、bgcolor = "fill in the blank"を必ず適用してください。ほとんどの場合、Outlookは画像を読み込まず、透明なヘッダーが残るためです。少なくとも、メールの全体的な感触で機能する色を指定すれば、ユーザーのショックは少なくなります。スタイリングシートを使用しないでください。またはCSSで！避けてください。

コンテンツをWordからコピーするか、Googleの共有ドキュメントからコピーするかに応じて、（command + F）すべての（ '）および（ "）を検索し、コードとして表示されるため、編集ソフトウェア（特にdreemweaver）内で置き換えてくださいそして、それはただ良くありません。

ALTはあなたの親友です。 ALTタグを使用して、すべての画像にテキストを追加します。オッズは適切にロードされないためです。そして、そのALTテキストは人々に（画像を見る）ボタンをクリックさせるものです。また、画像の幅、高さを定義し、ボーダーを0にして、画像の周りに奇妙な線が入らないようにします。

Photoshop内のすべての画像の編集を検討してください。画像の両側に15ピクセルの境界線を付けます（背景を透明にし、PNG 24として保存します）。時々、電子メールクライアントは、画像に適用するパディングスタイルを読み取らないため、奇妙なフォーマットを避けることができます！

また、リンクの下の行が特に面倒なので、<style = "text-decoration：none; color：#whatever color you here！"を適用すると>行が削除され、希望の外観が得られます。

すべてのルックアンドフィールを実際に混乱させることができます。

1
Stephen