この記事は、レスポンシブな電子メールテンプレートのプログラミングという難しい作業をしているコーダー/開発者を対象としています。経験豊かな電子メールテンプレートのプログラマにとって、ここに述べた電子メールブラウザの多くの特質はあなたにはよく知られていると確信しています。
応答性のある電子メールテンプレートを初めてプログラミングする人にとって、EDMの現在の業界標準は600pxです。したがって、さらに進める前にこの標準を使用してください。私はここで非常に徹底的にこれを議論しました： EDMの幅の標準。
まず最初に、ここにする事のリストがあり、レスポンシブな電子メールテンプレートをプログラミングするためのものではありません：
どこでもJavascriptを使用しないでください。スパムスコアが高くなり、すべてのインスタンスが電子メールブラウザの99％によって無視されます。
CSSスタイルシートを埋め込まないでください（例：<link rel = “stylesheet” type = “text / css” href = “http：//xxxxxxx/xxxx.css”>）
Gmailが無視するので、<style type = “text / css”> .class1 {} … </ style>に<head>内のCSSスタイル情報を入れないでください。
テンプレート内の表示レイアウトを整理するのに<div>を使用しないでください。また、Outlookが正しく処理する方法を知らないため、<div>の使用は避けてください。
表示レイアウトを整理するには<table>を使用します。
応答性を実現するためにインラインスタイルでmax-width：600pxを使用します
私は主要な電子メールブラウザのそれぞれと遭遇した互換性の問題のいくつかを議論する：
（1）GMAIL
理由はわかりませんが、Gmailのヘッダーに書かれているすべてのスタイルの説明は無視されます。
例えば
<head>
<style type = “text / css”>
</ style>
</ head>無視されます。
したがって、すべてのスタイル命令は「インライン」である必要があります。
<td style = “color：＃000000;”>ランダムテキスト</ td>
ご覧のように、これは膨大な量のコードの二重性を引き起こします。 2つのアプローチがあります：スタイルシートを上にしてHTMLを書いて、最後にインライニングツールを使用して、HTMLにインライン展開されたすべてのコードを取得し、ライブに行く前にスタイル情報を削除します。私はこのアプローチを試してみましたが、実際にはあなたのソースコードをすべてバージョン管理しようとしていて、変更の各反復に多くの余分な作業が含まれている場合は特に機能しません。最善の方法は、<style>をすべて一緒に使用することを避けることです。
（2）Yahooメール
彼らは最近、電子メールブラウザのインタプリタをアップグレードしました。現在、モバイル版はメディアクエリ（@mediaなど）に対応する予定ですが、Microsoft Outlookは依然としてメディアクエリをサポートしていないため、電子メールの中で応答性をもたらすためにまだ使用できるものはありません。
私がYahoo Mailで発見したのは、<body>タグに背景イメージを埋め込むことができないということです。
よって、電子メールテンプレートの完全な背景イメージが必要な場合は、それを実行する唯一の方法は、背景イメージをテーブルに配置することです。
例えば
<body>
<table width = “100％” background = “http：//sxxxxx/background.jpg” style = “背景画像：url（ ‘http：//sxxxxx/background.jpg’）;”> ….
</ table>
</ body>
（3）Microsoft Outlook
かつて、Outlook（およびOutlook Express）は電子メールブラウザの分野で市場シェアの80％を占めていました。悲しい事に、彼らは重要な点で減少しています。
Outlookは実際には<div>とstyle = “inline-block;”を理解していないた、Outlookで同じ効果を実現するたびに、同じ効果を達成するためにカスタムOutlookコード（通常は表）を作成する必要があります。
例えば
<！ – [if（gte mso 9）|（IE）]>
<table width = “100％” cellspacing = “10”>
<tr>
<td width = “100％” valign = “top”>
<！[endif] – >
<div class = “column” style = “width：100％; max-width：600px; display：インラインブロック; vertical-align：top;”>
…………………..
</ div>
<！ – [if（gte mso 9）|（IE）]>
</ td> </ tr> </ table>
<！[endif] – >
<！ – [if（gte mso 9）|（IE）]>で始まるものは、Outlookと上記のコードで解釈されるため、カスタムOutlookのスニペットは、他のメールブラウザでは<div>が動作します。
—-
他の電子メールブラウザの特定の点については、次の記事で説明します。
読んでいただき、ありがとうございます。