HTMLメールは、AndroidのGmailはインラインCSSしかサポートしてない。queryは使えず、外部のスタイルシートに頼れない。Gmail.comはHTMLのサポートが限定されている。HTML5のものを含めてサポートされてないタグが多く、classやIDなどの属性が使えない。インラインCSSのみ使え、<style>タグもかなり制限されている。queryや多くのCSSが利用できる。いう状況なので、レスポンシブなデザインのテンプレをつくるのは大変。Gessnerが、どのデバイスにも対応できるHTMLメールテンプレのつくり方を解説してくれています。全体のサンプルコードはこちらを参照ください。成果物としては、二列のカラム構成。モバイルの画面では一列にまとまるかたちとする。<div><table><p>タグのシンプルな構成で枠をつくる。モバイルでのシングルカラムに対応するため、インラインCSSを追加。tableをtableでラップすることでコンテンツを囲むことで、両側に2%のgutterのあるバックグランド内に配置できる。cellspaceとcellpaddingの設定を忘れると、CSSで削除できない余計なスペースができるので要注意。Gmail.comがサポートしているCSSの情報は限られていて、一部のブログコメントやフォーラムへの投稿しかない。queryに対応していない。<style>タグ内での限られたCSSが使える。classとIDはだめで、タグ名のselectorは大丈夫。メールの違う箇所に違うスタイルを適用するというフレキシブルさはもてない。<style>は<head>タグ内での利用ができるが、<body>タグ内ではダメ。selectorを注意深く組み合わせると、ピンポイントで望むレイアウトがつくれる。Androidでの一列カラムを壊すことなく、Gmailで二列カラムのレイアウトを実現するスタイルは下記のとおり。&lt;/head>Line1-3で幅を固定。デスクトップのGmail向けなので可変デザインが目的ではない。これをラッブされた内側のtableに適用するので、600ピクセル幅のコンテンツにおける外側のpaddingは残る。両方のtableがないと、クライアントのUIで実行されるpaddingを失ってしまうことになる。次にメインのコンテンツをスタイルする。4のselectorを右から左に読むと、tableの内側でdivが連続している。divにあたるが、この時点ではそれでよい。マイナスすることのカラ間のgutter)をとるためにスタイルしている。8のselectorは、テーブル内のdivに続くdivに続くdivを見つけることで、sidebarをスタイルする。footerとsidebarをセレクトするが、メインコンテンツはセレクトせず、従前のスタイルを上書きする。sidebarは右側の1/3に配置される。12で、他の3つのdivに続くdivであるfooterをセレクトして、最大幅に設定する。14でfloatスタイルをnoneに戻す。queryとフルでCSSがサポートされている。queryを用意すると、Gamil.comとAndroidは無視するが、iPadやデスクトップのメールアプリでは従前のスタイルを上書き(!importantを忘れないように。注意点としては、上記の手法では、Androidタブレットでは、Android携帯向けの一列カラムになってしまう。Etsyのユーザベースの中では少数派なので、最適化はできてないがよしとしている。