久しぶりにHTMLメールを作成しました。以前記事を書いた時から状況が変わっており、改めて最新情報をリサーチしてみました！

調査編はこちらから

コーディングと文字サイズの関係性

iOS10 標準メールアプリにて、コーディングと文字サイズの関係性を検証しました。
gmailアプリでも同様の傾向でした。
テンプレートはこちらを利用しています。

横幅を固定した実装の場合

横幅XXXpxで固定された実装の場合、スマートフォンから見たときのテキストサイズが変動します。
指定している横幅が大きいほど、縮小して表示されます。
環境によっては横スクロールが出る場合もあります。発生条件は確定していませんが、後から画像を読み込んだ際に発生する傾向があります。

ソースはこのようになります。

[html]
<!--外側のテーブル-->
	<table cellpadding="0" cellspacing="0" border="0" width="100%" id="backgroundTable" bgcolor="#e0e0e0" style="font-size:16px; color:#000000;">
		<tr>
			<td valign="top" align="center">
<!--max-widthに、最大値を指定する-->
				<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="max-width:700px;" bgcolor="#ffffff">
<!--略　テーブルでもりもりコーディングしていきます。-->
				</table>
			</td>
		</tr>
	</table>
[/html]

リキッドの実装の場合

「横幅最大値まではリキッド、それ以上は固定」「フルリキッド」となるようなソースで組んだ場合。

スマートフォンから見たときのデバイステキストサイズが固定されます。
ソースはこのようになります。

[html]
<!--外側のテーブル-->
	<table cellpadding="0" cellspacing="0" border="0" width="100%" id="backgroundTable" bgcolor="#e0e0e0" style="font-size:16px; color:#000000;">
		<tr>
			<td valign="top" align="center">
<!--widthに、横幅の固定値を指定する-->
				<table cellpadding="0" cellspacing="0" border="0" align="center" width="700" bgcolor="#ffffff">
<!--略　テーブルでもりもりコーディングしていきます。-->
				</table>
			</td>
		</tr>
	</table>
[/html]

HTMLメールでもメディアクエリ解禁の兆し

gmailでもメディアクエリが利用できるようになりました。
メディアクエリに対応しているブラウザはこちらの通りです。

WEBメール	Gmail Outlook.com (Hotmail) Yahoo! Mail AOL
スマートフォン	Android 2.3以降　標準メールアプリ iOS5以降　標準メールアプリ

メディアクエリを使い、デバイス幅に合わせて文字サイズなどを変更する実装も現実的になったと思います。
ただし、デスクトップのメールアプリケーションを中心として、依然として対応しない環境もありますので、「メディアクエリに対応していれば読みやすいが、対応していなくても読める」レベルを目指すとちょうどいいと思われます。
2014年の対応状況
http://freshinbox.com/blog/email-client-media-query-and-embedded-styles-support-2014/
2016年9月の対応状況（gmailがメディアクエリに対応）
https://developers.google.com/gmail/design/css

結論　リキッド＋最大横幅固定がオススメ

リキッドデザインで組むと、スマートフォンで見た横幅に関わらず、デバイステキストサイズが固定されます。
あらゆる横幅の指定を%にする必要があるため手間はかかりますが、テキストのサイズをコントロールしやすいという観点からはおすすめです。
最大の横幅についてですが
1. PCでどのように見えるようにしたいか
2. 添付する画像をスマートフォンでどの程度の密度で見せたいか
を基準に考えるといいかと思います。
画像の中にテキストを入れていきたい場合は、画像の横幅を広げる程縮小度が上がる点に留意するといいです。

• 
• 
•