更新：Gmailがレスポンシブデザインのサポートを開始、フォントスタイリングの改善+アクセシビリティのためのCSS

公開: 2016-09-30

9月30日の早朝、Gmailは、メールの世界が長い間求めてきたもの、つまり埋め込みスタイルとレスポンシブデザインをサポートするための変更の展開を開始しました。

私たちは何について話していますか？

Gmailはこれまで、メールの<head>内のクラスまたはIDをサポートしていませんでした。そのため、メールデザイナーはインラインCSSを使用してメールのスタイルを設定する必要がありました。 これで、GmailはクラスとIDを含む埋め込みCSSをサポートするようになり、GmailでインラインCSSを使用する必要がなくなります。 これは、Gmailが最終的にメディアクエリとレスポンシブメールをサポートすることも意味します。

ニュースに追いつくだけですか？ 展開を監視しながら、ライブティッカーの更新をフォローするか、予想されるすべての変更の概要と、以下の電子メールマーケターにとっての意味を読んでください。

Gmailアップデートライブティッカー

更新されたGmailメールクライアントの現在のビューは次のとおりです。

Gmailクライアント

更新のロールアウト

デスクトップウェブメール

チェックグリーン

モバイルウェブメール

check-X

Gmail Androidアプリ（Gmailアカウント）

チェックグリーン

Gmail Androidアプリ（Gmailifiedアカウント）

チェックグリーン

Gmail Androidアプリ（POP / IMAPアカウント）

check-X

GmailiOSアプリ

チェックグリーン

Gmailによる受信トレイ（ウェブメール）

チェックグリーン

Gmailによる受信トレイ（iOS）

チェックグリーン

Gmailによる受信トレイ（Android）

チェックグリーン

G Suite Basic（以前のGoogle Apps for Work）

チェックグリーン

Google Apps Free Edition（レガシー）

check-X

  • 11月7日午前11時30分EDT

Gmail iOSアプリのメジャーアップデートには、<style>とメディアクエリをサポートするためのレンダリングアップデートが含まれています。 すべてのGmailモバイルアプリがレスポンシブメールをサポートするようになりました。 また、レンダリングが更新されたすべてのGSuiteアカウントも表示されます。

  • 10月12日午前9時EDT

米国外のGSuiteアカウント（Litmusプレビューを含む）がレンダリングの更新を取得するのを見始めています。 すべてのアカウントが更新されたことが確認できたら、ロールアウトチャートを更新します。

  • 10月4日午前9時30分EDT

上記の完全なロールアウトチャートをリリースしました。 Gmailのアカウントプラン名が変更されていることに注意してください。

G Suite Basic（以前のGoogle Apps for Work）アカウントの場合、更新は米国のアカウントにのみロールアウトされている可能性があります。 Litmusユーザーの場合、G Suite Basic Email Previews（現在もGoogle Appsというタイトル）は、現在更新が行われていない英国ベースのアカウントを使用していることに注意してください。

  • 10月4日午前4時EDT

メディアクエリをサポートするためのロールアウトは、AndroidのGmailアプリとInbox byGmailアプリの両方で完了しているように見えます。 iOSアプリでのメディアクエリサポートの変更に気付いた人もいますが、サポートはまだすべてのアカウントで一貫しているわけではありません。

  • 9月30日午前8時EDT

AndroidのGmailアプリにも変更が加えられました。 クラスとIDはメールの冒頭で取り上げられています。 一部のAndroidGmailアプリアカウントのメディアクエリサポートも確認されていますが、テストしたすべてのアカウントでサポートが一貫しているわけではありません。 サポートは地域間で徐々に展開される可能性があります。

更新はGmailによってInboxにも展開されており、メールの先頭にIDとクラスがサポートされています。

  • 9月30日午前5時30分EDT

Gmailは、レンダリングエンジンのアップデートを段階的に展開しているようです。 Gmail Webクライアントは、すべてのブラウザ（Chrome、Safari、Firefox）の<head>でクラスとIDをサポートしており、どちらもHTMLで正しく参照されています。

また、GmailのWebクライアント全体でメディアクエリがサポートされていることもわかります。

レスポンシブメールデザインをサポートするGmail

ただし、これまでのところ、メールの先頭にあるスタイルタグもメディアクエリも、Inbox byGmailまたはGmailアプリではサポートされていません。

  • 9月29日午後11時55分EDT

それが起こっています！ Gmailは、レンダリングマシンへの変更の展開を開始しました。 ロールアウトを監視しているので、更新にご期待ください。

ニュースを共有する→

これらの変更がEメールオタクにとって何を意味するか

2016年8月31日、GmailはCSSプロパティ表示のサポートを開始すると発表しました。 <style>およびメディアクエリをサポートします。

これは、GmailでのCSSサポートを拡張し、メールデザイナーがメッセージのレンダリング方法をより細かく制御できるようにするための全体的な取り組みのほんの一部です。

– Googleのプロダクトマネージャー、Pierce Vollucci

これは電子メールコミュニティにとって大きなニュースであり、電子メールの設計と開発に大きな影響を及ぼします。

レスポンシブメールと<スタイル>をサポートするGmail

Gmailはこれまで、メールの<head>内のクラスまたはIDをサポートしていませんでした。そのため、メールデザイナーはインラインCSSを使用してメールのスタイルを設定する必要がありました。 これで、GmailはクラスとIDを含む埋め込みCSSをサポートするようになり、GmailでインラインCSSを使用する必要がなくなります。 これは、Gmailが最終的にメディアクエリとレスポンシブメールをサポートすることも意味します。

つまり、次のコードがGmailで正しくレンダリングされるようになりました。

 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>

サポートされているCSSの完全なリストは、この投稿の下部、またはGmailの公式ドキュメントで確認できます。 今後のメディアクエリサポートの完全なリストは次のとおりです。

サポートされているタイプ

  • 全て
  • 画面

サポートされているクエリ

  • 最小幅
  • 最大幅
  • 最小デバイス幅
  • max-device-width
  • オリエンテーション
  • 最小解像度
  • 最大解像度

サポートされているキーワード

  • と
  • それだけ

これはメールにとって何を意味しますか

これらの更新は、電子メールの開発とワークフローの大きな転換点を示しており、設計者とマーケターは、CSSのインライン化を必要とせずに、よりアクセスしやすい電子メールキャンペーンを作成できます。

市場への影響：メディアクエリがまもなく標準になります

多くの電子メールは、メディアクエリに依存してコンテンツとデザインを微調整し、さまざまな画面サイズでより使いやすいエクスペリエンスを作成します。 ただし、メディアクエリはどこでも機能するとは限りません。 最も注目に値する、そして苛立たしいサポートの欠如は、歴史的にGmailから来ていました。これは、<head>からコードを取り除き、そこに含まれるスタイルやメディアクエリで有名です。

Gmailのメディアクエリのサポートにより、 75％以上のメールクライアントがレスポンシブデザインをサポートします。 これが、WindowsPhoneのような他の電子メールクライアントの標準になることを願っています。

FabFourのようなハッキーなレイアウト構造の必要性を減らしました

でのメディアクエリに対するGmailのサポートの欠如に対抗するために、電子メールオタクは回避策について高くも低くも見えてきました。 そのような回避策の1つは、CSS calc（）関数と3つのwidth、min-width、およびmax-widthプロパティを含むFabFourテクニックです。

メールデザイナー、これらの複雑なレイアウト構造に別れを告げる時が来ました。 ただし、覚えておいてください。Outlook用のテーブルが必要です。 （私たちはまだ電子メール標準を作成していません…。まだ）。

ただし、ハイブリッド/スポンジ開発は、Outlookなどの問題のあるクライアントのベースライン構造として電子メール開発に引き続き位置付けられています。

CSSインライン化に別れを告げる

「インライン化」スタイルは、CSSおよび関連するフォーマット指示を電子メールの<head>のスタイルブロックからHTMLの<body>に移動します。 従来、スタイルがインラインに移動されなかった場合、メール本文のスタイルはGmailに表示されませんでした。

no-inline-edited-03

これらの更新により、CSSのインライン化は不要になります。 メールデザイナーは、HTMLドキュメントの<head>に配置された埋め込みスタイルを使用できるようになりました。 埋め込みCSSは、すべての主要な電子メールクライアントでサポートされます。

メールはよりアクセスしやすくなります

キャンペーンを成功させるには、電子メールでのアクセシビリティが不可欠です。 購読者があなたの電子メールを読んだり操作したりできない場合、彼らが行動を起こす方法はありません。

埋め込まれたCSSサポートにより、電子メールデザイナーは、スタイルをコンテンツから分離し、電子メールにセマンティックでアクセス可能なマークアップを使用できます。

大きなテキストとタッチフレンドリーなボタンはアクセシビリティの向上に役立ちますが、スクリーンリーダーで使用するためのHTMLの準備も同様です。 これを念頭に置いて、デザイン内のテキストと画像の健全なバランスを確保し、メールに書かれたコンテンツを調整してメインメッセージを配信します。

Gmailは、ピッチ、ピッチ範囲、句読点、発話速度などのCSSベースのスクリーンリーダー設定の追加サポートにより、マーケティング担当者がメールにアクセスしやすくすることをさらに容易にしました。

タイポグラフィのサポートが増加します

これらの更新に伴うもう1つの大きな変更は、CSSフォントプロパティの追加サポートです。 たとえば、Gmailはcolumn-countやcolumn-gapなどの属性のサポートを開始します。これにより、テーブルなしでテキストの列を作成できます。 さらに、font-kerningとfont-variant-capsにより、追加のフォントスタイルが可能になります。 ただし、今後のリリースではWebフォントがサポートされるようには見えません。

バックグラウンドの追加サポートが来ています

Gmailでは、background-clip、background-position、そして最も重要なbackground-sizeなどのCSS背景プロパティの追加サポートが導入されています。 背景サイズのサポートにより、メールにはスケーラブルでレスポンシブな背景画像を含めることができます。

Gmailでメールをテストする

これらの変更はメールにどのように影響しますか？ Litmusを使用して、Gmailや70以上の他のメールクライアントでメールを即座にプレビューします。 これらの変更はまだ公開されていませんが、Gmailが公開するとすぐにLitmus InstantPreviewsに反映されることに注意してください。

Litmusを無料でお試しください→

公式ドキュメント

主要な電子メールクライアントが初めて公式のCSSおよびHTMLサポートドキュメントを公開しました。 これは主要な業界初です。 ありがとう、Gmail！

次のCSSプロパティは、GmailおよびInbox byGmailでサポートされます。

  • 方位角
  • バックグラウンド
  • 背景ブレンドモード
  • 背景クリップ
  • 背景色
  • 背景画像
  • 背景-起源
  • 背景位置
  • 背景-繰り返し
  • 背景サイズ
  • 国境
  • ボーダーボトム
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • ボーダーボトムスタイル
  • border-bottom-width
  • ボーダー崩壊
  • ボーダの色
  • ボーダー左
  • ボーダー-左-色
  • ボーダーレフトスタイル
  • border-left-width
  • ボーダー半径
  • ボーダー右
  • ボーダー-右-色
  • ボーダーライトスタイル
  • border-right-width
  • ボーダー間隔
  • ボーダースタイル
  • ボーダートップ
  • ボーダートップカラー
  • border-top-left-radius
  • border-top-right-radius
  • ボーダートップスタイル
  • border-top-width
  • ボーダー幅
  • ボックスサイジング
  • 休憩後
  • 休憩前
  • 侵入
  • キャプション側
  • クリア
  • 色
  • 列数
  • カラムフィル
  • 列ギャップ
  • 列ルール
  • 列-ルール-色
  • 列ルールスタイル
  • 列ルール幅
  • 列スパン
  • 列幅
  • 列
  • 方向
  • 画面
  • 標高
  • 空のセル
  • 浮く
  • フォント
  • フォントファミリー
  • font-feature-settings
  • フォントカーニング
  • フォントサイズ
  • font-size-adjust
  • フォントストレッチ
  • フォントスタイル
  • フォント合成
  • フォントバリアント
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • フォントの太さ
  • 身長
  • 画像の向き
  • 画像解像度
  • 隔離
  • 文字間隔
  • 行の高さ
  • リストスタイル
  • リストスタイルの位置
  • リストスタイルタイプ
  • マージン
  • マージンボトム
  • マージン左
  • マージン右
  • マージントップ
  • 最大高さ
  • 最大幅
  • 最小の高さ
  • 最小幅
  • ミックスブレンドモード
  • オブジェクトフィット
  • オブジェクトの位置
  • 不透明度
  • 概要
  • アウトラインカラー
  • アウトラインスタイル
  • アウトライン幅
  • オーバーフロー
  • パディング
  • パディングボトム
  • パディング-左
  • パディング-右
  • パディングトップ
  • 一時停止
  • 一時停止後
  • 一時停止-前
  • ピッチ
  • ピッチ範囲
  • 引用符
  • 豊かさ
  • 話す
  • スピークヘッダー
  • 話す-数字
  • 話す句読点
  • 発話速度
  • ストレス
  • テーブルレイアウト
  • text-align
  • text-combine-upwrite
  • テキスト装飾
  • テキスト-装飾-色
  • text-decoration-line
  • text-decoration-skip
  • テキスト装飾スタイル
  • テキスト強調
  • テキスト-強調-色
  • テキスト強調スタイル
  • テキストインデント
  • テキストの向き
  • テキストオーバーフロー
  • テキスト変換
  • text-underline-position
  • unicode-bidi
  • 垂直整列
  • 声の家族
  • 幅
  • 単語間隔
  • 書き込みモード

受信トレイに最新のストレートを届ける

Gmailロールアウトの追加の変更と、それがユーザーに与える影響については、随時お知らせします。 毎週のニュースレターを購読して、メールデザインのプロ向けの最新コンテンツを受信トレイに直接配信してください。 毎週。