結論

• メール以外の通知サービスも検討する
• HTMLメールは必要が無ければ送らない(テキストメールにする)
• 複雑なCSSの作成はしない
• CSSサポートや各クライアントの表示を確認できるツールを利用する
• Windows版Outlookには注意せよ

ハマりポイント1

Outlookでめちゃくちゃスタイルが崩壊する

Outlook(Windows)版はWordのレンダリングエンジンを利用しているらしく、CSSスタイルのサポートが厳しい状況。

CSS3の機能はかなりの割合サポートしていないし、CSS2についてもまちまち。

令和だしどのクライアントもCSS3サポートしてるだろとナメてはいけない。Outlookは利用ユーザーが多いので無視できない。

こいつのおかげでメールが複雑なデザインにならず、シンプルに保たれている説がある。

ref 1: Account Engagement emails don’t display properly in Outlook ref 2: float、ダメ、絶対。HTMLメールを作る前に押さえるべき基本事項。

ハマりポイント2

Gmailで画像が表示されない

Gmailではセキュリティの都合によりbase64エンコードされたCSS中に埋まっている画像を表示できないらしい。そんくらい表示させてほしい。

添付しないとだめ。何故かOutlookは表示できるぞ。

ref 3: Base64 encoded image is not showing in gmail

どうすべきか

• 複雑なコンテンツをメールで送信しない
• MailTrapを利用すると、よく使われているメーラーのCSSサポート状況を確認できる
• ユーザーが少ないメーラーへの対応は面倒なのでやらない
• 各メーラーでの表示を確認できるサービスも便利だが…大規模サービスでもないならここまでは必要ないかなぁ

感想

おじさんテクノロジー難しすぎ