こんにちは、この記事はHTML5 Advent Calendarの2日目になります。
タイトルは釣りです！ ここでは、HTMLメールの話をしたいと思います。
なぜ、テーブルレイアウトか？
最近、TechFeedというエンジニア向けのキュレーションサービスを作りまして（宣伝）、そこで記事の配信にHTMLメールを使っています。HTMLメールのレンダリングは、ブラウザのHTML5の対応状況に比べて非常に遅れており、テーブルレイアウトがまだまだ生き残ってる状況です。ここでは、それらのHTMLメールへの鬱憤をつらつらと書いていきたいと思います。
TechFeedのメール
HTMLメールのリッチ化
Webサービスには、モバイルアプリのようなプッシュ通知(※) はないので、Webサービスにとってメールは数少ないリエンゲージメントの手段です。ここで少しでもコンバージョンを上げるために、最近では多くのWebサービスがHTMLメールをリッチにしています。そこで気になるのが各メールクライアントのCSS対応状況でしょう。
※ まだ十分に普及していませんが Service Workerを使えば、プッシュ通知は可能です。
各メールクライアントのCSS対応状況
Campaign MonitorというメールのマーケティングサービスがCSS対応状況まとめているので、そちらを参照します。詳細なComaptible Tableもダウンロードできるのでおすすめです。
The Ultimate Guide to CSS
対応状況を確認すると、シェアがそれなりに高くて対応状況がひどいのはOutlookとGmailです。これらのメールクライアントに対応するためには以下の制限の中でHTMLメールを記述する必要があります。
- link要素でstyleが読み込めない（style属性に記述する）
- もちろんmedia queriesは使えない
- まさかfloatが使えない
- positionが使えるという奇跡はなかった
- まあ他にもだいたい使えない
このうち、1に関しては書いたCSSをインライン化するinline-cssというモジュールがあるので問題はないのですが、レイアウトに関してはテーブルレイアウトを使わざるを得ない状況ですね。それだけならまだマシだったのですが、メーラーによってはさらに制約があります。
主にGmailの制約
- なんかコンテンツの内容に合わせて勝手に拡大・縮小表示されたりする。
- 同じ画像をたくさん使うとスパム判定される恐れがあるのでspacer.gifとか昔のハックは使えない
- 画像を除いたサイズが100KB程度以上は省略される
などなど、考えただけで頭が痛くなることばかりです（笑）。HTMLメールの作り方自体は、すでにいろいろなノウハウが世の中にあるので困った方は探してみてください。
まとめ
HTMLメールはストレスがマッハ。という愚痴でした！
世間では、HTML5だなんだと言われていますがHTMLメールに関してはまだまだのようです。MozillaのThunderbirdやAppleのApple Mailは、実装も凄く進んでいるので、MicrosoftやGoogleもブラウザばかりだけでなく、こちらも是非改善していってもらえればと、切に思う次第であります。