わかりやすい言葉で、応答性のある電子メールテンプレートとレスポンシブなウェブサイトテンプレートの違いを説明して、コーダー/デベロッパーでなくても基本コンセプトを理解できるようにしたいと考えています。
「レスポンシブ（Responsive）」の定義から始めましょう。つまり、電子メールテンプレートまたはウェブサイトテンプレートには、デバイスの画面サイズ（表示されているもの）に応答し、最適なバージョンを表示する組み込みアルゴリズムが組み込まれています。
レスポンシブなテンプレートのコンセプトは比較的新しいもので、スマートフォンからタブレット、ミニタブレットなど、最近の（最近6年間で）普及している新しい視聴デバイスの氾濫に対応していますサイズおよび視野寸法。
レスポンシブウェブサイトテンプレート
ウェブページを閲覧するときは、通常、Firefox、Chrome、Safari、Internet Explorer、Operaなどのウェブブラウザを使用します。これらの異なるウェブブラウザの多様性にもかかわらず、4つの主要なインタプリタ（例えば、ウェブキット、トライデント、ゲッコ、ブリンク）のみが存在する。たとえば、OperaとChromeはBlinkテクノロジを使用してウェブページを解釈します。つまり、最新のバージョンのChromeでウェブページが正常に表示され、Operaの最新バージョンで正常に表示される可能性があります。同じウェブページが異なるブラウザで異なって表示されるため、4つの別個の基礎的なインタプリタを有することは、ウェブサイトプログラマの頭痛の原因となっている。残念なことに、すべてのブラウザ開発者は、共通の標準を構築するために共同作業するのではなく、すべてが引き離されて別々の方法をとっているのではなく、支配的に戦っています。結果として、開発者は、各ブラウザに何をすべきかを伝えるために、ウェブページ内に特別な指示を書く必要があります。特別な指示は、通常、ウェブページに埋め込まれた書式設定命令であるCSS（Cascading Style Sheet）の形式で行われます。これらの命令の例は次のとおりです。
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
上記のスニペットでは、-webkit-transitionはSafariブラウザのための特別な命令ですが、他のブラウザには特別な命令ではないため、Safariのブラウザだけが命令のWebkitの移行を書き留めています。
ウェブページでの応答性を実現するために、次のような 「Media Queries」というCSSコードに埋め込まれた特別な命令を使用して、ページがどのように応答するかを定義します。
@media (max-width: 320px) {
html {
font-size: 60.5%;
}
}
@media (max-width: 480px) {
html {
font-size: 70%;
}
}
「@media」は、デバイスの幅が320ピクセルよりも小さい場合に何が起こるかを定義するだけで、開発者は応答性を実現する特定の画面サイズを指定してページの書式を定義できます。
違い？
レスポンシブウェブサイトテンプレートとレスポンシブメールテンプレートの違いに関する最初の質問に戻ります。 ウェブサイトテンプレートがどのように応答性を実現するようにプログラムされたかを説明したので、メールテンプレートについても同じことを行います。ウェブサイトとメールの両方のための根底にあるメカニズム。
レスポンシブ電子メールテンプレート
残念なことに、電子メールブラウザ（または従来のMail User Agents-MUA）は、一部が完全にクラウドベース（例：Yahoo!メール）、アプリケーションベース（たとえばMicrosoft Outlook）、一部が2つのハイブリッド（例えば、ジンブラ）。これに加えて、電子メールブラウザではJavascriptコードの埋め込みが許可されておらず、CSS3のサポートは一貫してサポートされていないため、これらのテクノロジのいずれかを対応する電子メールテンプレートのプログラミングに採用することはできません。
では、電子メールテンプレートのレスポンスをどのように達成できますか？
2000年になってから、CSSが非常に人気を博したのは、ウェブページ上の要素の位置は、テーブル（またはネストしたテーブル）内のテーブルを独創的に使用することによって完全に制御されていました。電子メールテンプレートのプログラミングでは、このモデルから離れず、電子メールテンプレートはCSSではなくネストしたテーブルを使用してプログラムされています。メディアクエリはCSS3の指示であるため、電子メールテンプレートでは使用できません。そのため、電子メールテンプレートを応答性の高い方法にする必要があります。
創造的な開発者は、表やインラインのCSSディレクティブを使用して反応性の錯覚を与える問題を回避しましたか？
以下は、電子メールのリフローで2列を1列に並べて表示させるためのHTMLコードの例です。下のコードを理解できない場合は、先送りしないでください。
「max-width」とネストした表のディレクティブを使用することで、（非常に粗雑な方法で）反応的な表示を実現し、一方の表が他方の表の下でリフローされることがわかります。不可能ではないにしても、リフローの順序とリフローのトリガーを制御する方がはるかに難しくなります。
応答性のあるウェブサイトテンプレートとレスポンシブな電子メールテンプレートの違いに関する最初の質問に答えるために、両方のテクノロジーが同じことをしているように見えても、基礎となるテクノロジーは遠く離れていることがわかりました。実際には、ウェブサイトテンプレートと電子メールテンプレートのプログラミングコードにはほとんど類似点がありません。少なくとも今後5年間、ウェブサイトや電子メール用の別々の応答テンプレートを開発しなければなりません。
開発者としては、人生がよりシンプルになり、電子メールブラウザがより収束し、すべてのウェブブラウザとすべての電子メールブラウザで動作する単一のテンプレートを作成できるようになることを本当に願っています。それまでの開発者は、ウェブと電子メールのために別々のテンプレートを作成し、無数のブラウザで各テンプレートをテストする必要があります。
レスポンシブな電子メールコードの例：
<!– Start 2 Columns –>
<table align=”center” style=”width: 100%;max-width: 620px;”>
<tr>
<td style=”padding: 0;text-align: center;font-size: 0;”>
<!–[if (gte mso 9)|(IE)]>
<table width=”100%” cellspacing=”10″>
<tr>
<td width=”50%” valign=”top”>
<![endif]–>
<div class=”column” style=”width: 100%;max-width: 300px;display: inline-block;vertical-align: top;”>
<table style=”border-spacing: 0;width: 100%;font-size: 16px;text-align: left;”>
<tr>
<td align=”left”> Column 1 Text
</td>
</tr>
</table>
</div>
<!–[if (gte mso 9)|(IE)]>
</td><td width=”50%” valign=”top”>
<![endif]–>
<div style=”width: 100%;max-width: 300px;display: inline-block;vertical-align: top;”>
<table style=”border-spacing: 0;width: 100%;font-size: 16px;text-align: left;”>
<tr>
<td align=”left”>
Column 2 Text
</td>
</tr>
</table>
</div>
<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
</td>
</tr>
</table>
</li>
<!– End 2 Columns –>