Etsy: レスポンシブなHTMLメールをつくる

http://codeascraft.com/2014/03/13/responsive-emails-that-really-work/

1 comment | 0 points | by WazanovaNews 約17時間前 edited


Jshiike 約17時間前 edited | ▲upvoteする | link

HTMLメールは、

  • AndroidのGmailはインラインCSSしかサポートしてない。<style>タグは効かず、media queryは使えず、外部のスタイルシートに頼れない。
  • Gmail.comはHTMLのサポートが限定されている。HTML5のものを含めてサポートされてないタグが多く、classやIDなどの属性が使えない。インラインCSSのみ使え、<style>タグもかなり制限されている。
  • iOS / Mac OS Xのメールアプリは、media queryや多くのCSSが利用できる。

という状況なので、レスポンシブなデザインのテンプレをつくるのは大変。そこを、Etsyの Kevin Gessnerが、どのデバイスにも対応できるHTMLメールテンプレのつくり方を解説してくれています。全体のサンプルコードはこちらを参照ください。

成果物としては、二列のカラム構成。モバイルの画面では一列にまとまるかたちとする。(イメージ図)

1) まずは、<div><table><p>タグのシンプルな構成で枠をつくる。

2) モバイルでのシングルカラムに対応するため、インラインCSSを追加。tableをtableでラップすることでコンテンツを囲むことで、両側に2%のgutterのあるバックグランド内に配置できる。cellspaceとcellpaddingの設定を忘れると、CSSで削除できない余計なスペースができるので要注意。(イメージ図)

3) Gmail.comがサポートしているCSSの情報は限られていて、一部のブログコメントやフォーラムへの投稿しかない。Gmailユーザは、タブレットや大きなデスクトップの画面など広いスペースがある環境でメールを読むことも多いが、media queryに対応していない。<style>タグ内での限られたCSSが使える。classとIDはだめで、タグ名のselectorは大丈夫。メールの違う箇所に違うスタイルを適用するというフレキシブルさはもてない。<style>は<head>タグ内での利用ができるが、<body>タグ内ではダメ。descendant, adjacent, child selectorを注意深く組み合わせると、ピンポイントで望むレイアウトがつくれる。Androidでの一列カラムを壊すことなく、Gmailで二列カラムのレイアウトを実現するスタイルは下記のとおり。(イメージ図)

       <head>
          <style type="text/css">
/*  1 */    table table {
/*  2 */      width: 600px !important;
/*  3 */    }
/*  4 */    table div + div { /* main content */
/*  5 */      width: 65%;
/*  6 */      float: left;
/*  7 */    }
/*  8 */    table div + div + div { /* sidebar */
/*  9 */      width: 33%;
/* 10 */      float: right;
/* 11 */    }
/* 12 */    table div + div + div + div { /* footer */
/* 13 */      width: 100%;
/* 14 */      float: none;
/* 15 */      clear: both;
/* 16 */    }
          </style>
        </head>
  • Line1-3で幅を固定。デスクトップのGmail向けなので可変デザインが目的ではない。これをラッブされた内側のtableに適用するので、600ピクセル幅のコンテンツにおける外側のpaddingは残る。両方のtableがないと、クライアントのUIで実行されるpaddingを失ってしまうことになる。
  • 次にメインのコンテンツをスタイルする。Line 4のselectorを右から左に読むと、tableの内側でdivが連続している。それはメインコンテンツ、sidebarとfotter divにあたるが、この時点ではそれでよい。コンテンツエリアの左側2/3（ マイナスすることのカラ間のgutter）をとるためにスタイルしている。
  • Line 8のselectorは、テーブル内のdivに続くdivに続くdivを見つけることで、sidebarをスタイルする。footerとsidebarをセレクトするが、メインコンテンツはセレクトせず、従前のスタイルを上書きする。sidebarは右側の1/3に配置される。
  • Line 12で、他の3つのdivに続くdivであるfooterをセレクトして、最大幅に設定する。従前のselectorとスタイルが適用されるので、Line 14でfloatスタイルをnoneに戻す。

4) iOSとMac OS Xのメールアプリでは、media queryとフルでCSSがサポートされている。630ピクセル幅のmedia queryを用意すると、Gamil.comとAndroidは無視するが、iPadやデスクトップのメールアプリでは従前のスタイルを上書き（!importantを忘れないように。）してくれる。

5) 注意点としては、上記の手法では、Androidタブレットでは、Android携帯向けの一列カラムになってしまう。Etsyのユーザベースの中では少数派なので、最適化はできてないがよしとしている。

NagiosのHTMLメールテンプレ

#etsy #レスポンシブデザイン

Back