仕事で月に3本はhtmlメールを作成してます。
クライアントのオーダーでレスポンシブhtmlメールが必要になったので、試行錯誤した結果をまとめておきます。

第1回は、htmlメール作成の際に注意することと流れ。
レスポンシブhtmlメールの制作の前に、htmlメール制作の基本事項をまとめておきます。

htmlメール制作で気をつけること

・基本はtableタグでレイアウトする。
cssを使ってfloatさせたり、positionプロパティを使ったりしてはいけない。
昔はwebsiteもtableでレイアウトしていたけど、旧石器時代のような感もあるなぁ。若い子は知らないだろうな。。。

・配信する時には、画像は格納されるサーバの絶対パスを参照する必要がある。
当たり前だが、相対パスだとリンク切れする。

・CSSは外部参照にしてはいけない。
かつ、Gmailでは内も読まれないから、インライン（body以下のhtmlの要素にsytleを直に）で書く必要がある。
とはいえ、インラインで書くと編集作業が大変だし、メンテナンス性が落ちるから、編集・制作時は外部参照にしておいて、納品時にインラインにするのがベスト。

・文字コードはメールを配信するシステムによって指定があったりする。
例えば、Synergy!のPOEMだとshift-jis。
制作を開始する前に、仕様を確認した方がよい。

・メーラーによってCSSの独自解釈がある。
ブラウザでレビューしてOKでも、メーラーによっては崩れる。

主要メーラーのCSSサポート状況は下記のサイトで確認できる。
The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/

かつ、デバッグがブラウザよりはるかに大変。
一度メールを送信しないと行けないし、そもそも対象とするメーラーをそろえるのは現実的でない。
MacユーザがOutlook環境を作るのは簡単じゃない。
ブラウザ確認用にWindowsをもっててもOutlookは別途お金がかかるし。

Litmus

https://litmus.com/
こちらのサービを使うと主要メーラーでの表示をテストしてくれるようです。
費用は79$/月。
月の制作本数が3本だけだと、制作費に対してのコストがちょっと重いので、自分は使ってません。

CSSのtips。作ってて蓄積したノウハウ

・font-family/font-sizeはtableタグに設定する。
設定しないと文字が大きく表示される。bodyだけに指定してもきかない。
入れ子になったtableは子要素にもfont-family/font-size指定をしないと外れる。
親要素のtableタグのstyleが継承されないっぽい。

・tdにはword-break:break-allを指定する。しないとメーラーによっては改行が入らずtdの横幅を突き抜ける。

・背景画像は使用しない。

（そのうち追加します。）

【Outlook2013での注意事項】
marigin:0 auto;では左右センタリングしない。
左右のピクセル幅を数値で指定すること。
例）横幅640pxのメールで、幅620pxの要素の左右に10px余らせたいとき。
margin: 0 10px;

（制作会社目線の）制作の流れ

1）メール配信システムの仕様を確認する。
あと、画像をおくサーバとパスを確認しておく。（自分でサーバへアップできる場合は問題ない）。
可能であれば、サポートするメーラーも確認しておくとよい。

2）htmlメールを作成。
この時画像への参照パスは相対パスで書く。
CSSは外部参照で作ってもOK。
この段階でクライアントレビューをして合意を取る。

3）内容が確定したら、画像を絶対パス参照にして、CSSをインライン化して納品する。

ここまでが基本的な流れと気をつけること。
そのうち追加があればアップデートすると思います。

次回に続く。

htmlメール作成時に参考にさせていただいたサイトはこちら。
ありがとうございます。

http://nxpg.net/blog/?p=1119
http://www.tam-tam.co.jp/tipsnote/html_css/post5371.html