CSS・XHTML/コーディングルール/メールマガジンを作る際に気をつけること - 意匠部@wiki BETA

コーディングについて

  1.旧式のHTMLを使用する
     CSSレイアウトは使用しないで、安全で旧式のテーブルレイアウトを使用する。

※float、positionなどは非対応、widthやmarginの解釈が間違ってるクライアントが多い

  2. スタイルは、インラインで指定する
     head部分のスタイル指定を無視するメーラーがあるので、CSSはインラインで指定する。

※もちろん外部スタイルシートも危険

  3. 背景画像に頼った[[デザイン]]にしない
     &bold(){背景画像が表示されない場合がある}ので、表示されなくても破綻しないデザインにする。
  4. 画像は表示されないものと考える
     &bold(){画像が表示されない場合でも、情報が伝わるようにデザインする。}
  5. 画像には、altを設定する
     画像が表示されない場合、altに記述したテキストで情報を伝えられます。
  6. パス指定は、絶対パスを使用する
     画像のパスは、http://から記述します。

※もちろんURLも。最後にローカルで開いてもすべて表示されることを確認する癖をつけること

背景はtable要素のbackground／bgcolorで指定するのが無難
ただしOutlook2007では背景画像いっさい使えません！
http://itpro.nikkeibp.co.jp/article/COLUMN/20061031/252271/

  7. ファイルの容量は、小さくする
     容量が大きいとスパムメールになる場合があるため、可能な限り小さい容量にする。

※ソース中の改行やスペースを取るなど小さな努力が必要。

  8. フラッシュやフォームは、避ける
     フラッシュやアニメーションGIFは、ファイル容量を大きくします。
     フォームはセキュリティフラグを出すか、動作しません。

※Flashは表示できないクライアントがほとんど。Outlook2007ではかなりのhtmlタグ・属性が使えなくなっている

  9. より小さいスペースでもよいデザイン
     デザインの幅は、少なくとも800px、できれば750px以内を目安に設計します。

※実質的には幅650pxくらいまでがいいのではないかと思われる（ノートPCで2カラムのメーラを使う環境を想定するとその辺がギリ）

引用部分：HTMLメールの制作時に気をつけたい9つのポイント（コリス）
http://coliss.com/articles/build-websites/operation/work/879.html

• 日本語の場合、文字コード、改行コードは配信システムに依存するので要確認。手動で配信する場合はiso-2022-jp（JIS）、改行コードはCR/LF
• DTDはHTML4.01で。XHTMLは正しく解釈されないことがある
• 国内主要メーラで必ず表示確認すること。OutlookExpress,Thunderbird,Becky!あたりは必須。

テキストパートも用意する

• multipart/alternative方式で配信すれば、htmlメールを受信しない設定にしている人にはテキストパートが表示される。

意外と厄介なのがWEBメール

参考：CSS support in email clients
http://www.campaignmonitor.com/css/

• 上記の表を見るとわかるように、特にGmailは外部CSSの読み込み、headへの記述共に使えない。でも最近は使ってる人多いし、対応したい。
• backgroundなど重要なプロパティも一切使えない。背景画像で装飾したい場合はtableのbackground属性を使う
• スペーシングはsp.gif（名前は任意。透明で1px*1pxのgif画像）を使うのが一番安全。
• width,height,margin,padding,border辺り無視されることがあるので注意
• valid志向の人は発狂しそうになるけど、グッとこらえること。
• WEBメールに対応する場合、tableレイアウトかつCSSはすべて（aタグも含め）インラインで記述する

• gmailで隙間が空く問題

背景画像を指定しているセル、画像だけが入っているセルで隙間があく。

font-size:0;
line-height:0;
vertical-align-bottom;

を指定し、ソースの改行やスペースをとると解消される。

アクセス解析も忘れずに

• imgタグで計測
• クリック数を計測する場合はリンクをすべて計測用URLに置き換える

検証

自分で検証する場合

1. ブラウザで表示させたｈｔｍｌを全選択
2. gmailでhtmlメール編集画面に貼り付け
3. 送信