レスポンシブ対応HTMLメールの作成方法
気づいたら夏季休業から一ヶ月過ぎてました、、、こんにちは。
お休み中は二週間ポルトガルとスペインへ行っていました。後日時間を見つけて
旅行中の記事はアップしようと思ってます（予定）。
まあ帰国したら予想外に依頼が立て続けに入ってたり、さらに予想外なことに帰国してからの時差ボケがひどく、仕事もなかなか身が入らず（笑）ブログはさらに更新できませんでしたw 30代半ばにして体力の衰えを実感した夏でした・・・。。
さて、そんな使い物にならない時にHTMLメールのお仕事が入ってきました。
制作実積にも載せてますが、一応作成経験があるので楽勝〜と思ってたら「レスポンシブで」という余計な一言まで！w
HTMLメールはHTMLと名前がついてるくせにHTMLページとは別モノですね。。
メーラーが<head>内の記述を読まない為インラインCSSしか反応しないという・・・。。
しかもスマホでのgmailだとインラインCSSすら無視するとかいうし！
そのため、HTMLメールのコーディングはテーブルレイアウトが基本。
いまや制作現場では「過去の負の遺産」的扱いのテーブルレイアウトですが、こんなところで重宝されてたとは・・・！
今の20代のWEBデザイナーやコーダーさんはテーブルレイアウトを学校で教わらないらしいので、いじれない子がいるとききます（実際私の後輩でもいました）。
css3だのSASSだの言われててもテーブルレイアウトも経験していてこそのWEBデザイナーかな、と個人的には思いますw
そんな年寄り的なつぶやきは置いといて（今回は年齢を感じさせる文面が多いな＾＾；）レスポンシブHTMLメールですよ。
納期まで時間がなかったので、素敵なテンプレートを利用させていただきました！
こういう便利なものがある世の中に感謝・・・w
このantwortの強みは「あらゆるデバイスのメーラーで実証済み」ということ。
おお、時間ないからそれは助かる・・・w
と、まんまとのっかったわけです。
お客様としては画像を大きく見せたい、あとスマホで読みやすい文字サイズで（でもPCでの体裁もきれいにしたい）、というのが要望だったので、画像サイズはさすがにいじりました。
テスト配信前のURLでのチェックでもきちんとレスポンシブになってて、お客様からの反応も上々。
いざテスト配信してみたら・・・あれ？
インラインCSSがPCメーラーでもきいてない、、
スマホでメディアクエリが効いてない。。
アンドロイドだとテキスト拡大もできない。。。
なーーーーーーんーーーーーーーーーでーーーーーーーーー？？！！！
慌てて他の大手会社からのHTMLメールを検証してみると、以下の点が判明しました
●メーラーはメディアクエリを認識しない
●スマホでのHTMLメールは横に回転しない（サイズ固定）
●スマホHTMLメールでテキストはi-Phoneだと拡大可能、アンドロイドは拡大不可
そして、そこから思い知ったこと。
やっぱテーブルレイアウト最強
しかしantwortさんよ、、ほぼ全てのデバイスで一体何を確認していたんだい？
これはデザインテンプレとしては便利ですが、やはりそこが限界かな。。
さっさとメーラーがメディアクエリ認識するようになればいいのにね。