UNIRRY

WEBデザインとホロスコープと宇宙のブログ

htmlメールのメルマガでよくある表示崩れと対処ポイント

mailmaga1

htmlメールのメーラー表示ではどんなバグがあるのか?

htmlメールは、tableコーディングになりますがけっこう各メーラーで表示に違いがでます。
一番大きく差が出るのは、Outlook2003までと2007からで、たとえばこんな違いがあります。

mailmaga00

私はメルマガ運用をやっていた時にwin7がでたばかりでだいぶこれに苦しんだのですが、レンダリング方法の違いが原因なんだそうです。
Microsoftによると、メールのレンダリング方法について、2003まではhtml形式だったのを2007からはWord形式に変更したらしく、解釈にだいぶ差がでてしまいました。2010も引き続きWord形式でレンダリングするので、2007で崩れていれば2010でも崩れています。

その他、tableの計算がちょっとでも間違っているとOutlookやWindowsLiveMailは正確におかしく表示しますし、thunderbirdなんかはちょっとのタグミスなどはうまいこと解釈しなおして崩さずに表示したりと、メーラーによって微妙な差があります。

Outlook2007、2010も含めたすべてのメーラーで表示を同じにするには

下記を徹底して組む必要があります。

・ガチガチのtableコーディングが前提条件。
・テキスト文字を扱う領域では、背景に画像を指定しない(outlook2007、2010では背景画像が繰り返されずに途中できれます、行間やフォントはメーラー依存のため各メーラーで縦幅に差が出ます)。
・どうしても縦線が必要な場合は タグのbackgroundに画像ではなく色指定することで、可変してもOKになるよう対処する。
・上下のmarginやpaddingのpx解釈に違いがあるのでspacer.gifの使用を徹底する。
・改行を一個もいれずにだらだらと長いソースを書くと、ときどき配信時に途中からカットされます。長くしすぎないように。

ガチムチのtableコーディングにしたけど、これって全部のメーラーで表示確認できるの?

ガチガチに組めていればだいたいは表示に差がないと思いますが、それらを徹底したあとで、実際に配信するhtmlメールがどんな表示になっているのか、PCみたいにちゃんとメーラーチェックしたい人がいると思います。

いっぱいメーラーをいれて全部IMAPで設定すればいいじゃない!とも思いますが、大変ですし、Outlookはバージョン違いで共存させることができないです。また調整が必要な場合、何度もテスト配信が必要になることに変わりはありません。会社で各メーラーをチェックする体制とPCが整ってます!という方は、よかったです、問題ありません。

ですが、会社によってはメルマガを配信しているのに、規定メーラーを指定していないところや、確認用のメーラーが用意されていないところ、テスト配信もそんなに何回もできるものじゃない、など作る側にとって品質管理が難しい状況にある人もいると思います。
お手上げになって「きっと大丈夫です(確認方法が会社にないんで実際にはみれてないですけど・・・)」、という状態で納品するのは気が引けますね。
いちいち配信せずに、コーディングしながら表示の確認ができたら楽なのに、と考えると思います。

過去にまさに上のような状況下で苦しんでいたのは私なのですが、いろろいろやり方を調べて考え、最終的にたどり着いた『ひとつのPCで色んなメーラー表示確認を実現する方法』を記事にまとめました。メルマガの運用をしていて、表示の確認に困っている人や担当者がいたら参考になるとうれしいです。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3