Gmail, Outlookをはじめ、デスクトップ・ブラウザ・スマホメールにレスポンシブ対応のHTMLメールのテンプレート -Cerberus
Post on:2016年1月14日
sponsors
HTMLメールのコードは通常のWebページより難しい、という人は少なくないと思います。しかもレスポンシブ対応のHTMLメールになると、更に難易度があがります。
メールでよく利用されるレイアウトのパターンをシンプルにまとめた、レスポンシブ対応のHTMLメールのテンプレートを紹介します。
Cerberusの特徴
Cerberusは現在主流のメールクライアントをサポートしたレスポンシブ対応のHTMLメールのテンプレートで、MITライセンスで無料で利用できます。
サポートしているクライアントは、下記の通り。
- デスクトップ
-
- Outlook 2000/02/03/07/10/13 (Windows)
- Outlook 2011/16 (Mac)
- Apple Mail
- Thunderbird
- ブラウザ
-
- Gmail
- Outlook.com
- Yahoo
- Aol
- Outlook Web Access
- スマホ
-
- Mail (iOS)
- Gmail (iOS, Android 4.4)
- Mail (Android 4.4)
- Mailbox (iOS)
- Inbox (iOS)
- Yahoo (iOS)
参考に最近のメールクライアントのシェアは、こんな感じです。
Email Client Market Share and Popularity
※2015年12月のデータ
CerberusのHTMLメールのテンプレート
各テンプレートのコードは、元ページ or GitHubからダウンロードできます。
テキストと画像で構成された基本的なテンプレート。
シンプルな1カラムのレイアウトで、狭いスクリーンでは水平に縮小されて表示されます。このテンプレートでは、異なるスクリーンごとにサイズの再構成は行いません。
レスポンシブ対応のテンプレート。
異なるスクリーンに合わせてサイズやレイアウトを構成するモバイルクライアント上で機能する複雑なレイアウトで実装されています。AndroidやGmailなどのMedia Queriesに非対応なクライアントでは、縮小されて表示されます。
上2つの良いとこ取りをしたテンプレート。
ハイブリッドはメールクライアントのMedia Queriesのサポートに関係なく、異なるスクリーンに合わせてレイアウトを構築します。すべてのメールクライアントに最適化なレイアウトを提供しますが、若干コードの量が多いです。
sponsors
