メールマガジンを作る際に気をつけること

コーディングについて

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

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

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

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

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

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

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

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

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

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

• 上記の表を見るとわかるように、特に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. 送信