カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

レスポンシブ対応HTMLメールの作成方法

気づいたら夏季休業から一ヶ月過ぎてました、、、こんにちは。
お休み中は二週間ポルトガルとスペインへ行っていました。後日時間を見つけて
旅行中の記事はアップしようと思ってます(予定)。
まあ帰国したら予想外に依頼が立て続けに入ってたり、さらに予想外なことに帰国してからの時差ボケがひどく、仕事もなかなか身が入らず(笑)ブログはさらに更新できませんでしたw 30代半ばにして体力の衰えを実感した夏でした・・・。。

さて、そんな使い物にならない時にHTMLメールのお仕事が入ってきました。
制作実積にも載せてますが、一応作成経験があるので楽勝〜と思ってたら「レスポンシブで」という余計な一言まで!w

HTMLメールはHTMLと名前がついてるくせにHTMLページとは別モノですね。。
メーラーが<head>内の記述を読まない為インラインCSSしか反応しないという・・・。。
しかもスマホでのgmailだとインラインCSSすら無視するとかいうし!
そのため、HTMLメールのコーディングはテーブルレイアウトが基本。
いまや制作現場では「過去の負の遺産」的扱いのテーブルレイアウトですが、こんなところで重宝されてたとは・・・!
今の20代のWEBデザイナーやコーダーさんはテーブルレイアウトを学校で教わらないらしいので、いじれない子がいるとききます(実際私の後輩でもいました)。
css3だのSASSだの言われててもテーブルレイアウトも経験していてこそのWEBデザイナーかな、と個人的には思いますw

そんな年寄り的なつぶやきは置いといて(今回は年齢を感じさせる文面が多いな^^;)レスポンシブHTMLメールですよ。
納期まで時間がなかったので、素敵なテンプレートを利用させていただきました!

antwort

こういう便利なものがある世の中に感謝・・・w
このantwortの強みは「あらゆるデバイスのメーラーで実証済み」ということ。
おお、時間ないからそれは助かる・・・w
と、まんまとのっかったわけです。

お客様としては画像を大きく見せたい、あとスマホで読みやすい文字サイズで(でもPCでの体裁もきれいにしたい)、というのが要望だったので、画像サイズはさすがにいじりました。
テスト配信前のURLでのチェックでもきちんとレスポンシブになってて、お客様からの反応も上々。
いざテスト配信してみたら・・・あれ?

インラインCSSがPCメーラーでもきいてない、、
スマホでメディアクエリが効いてない。。
アンドロイドだとテキスト拡大もできない。。。

なーーーーーーんーーーーーーーーーでーーーーーーーーー??!!!

慌てて他の大手会社からのHTMLメールを検証してみると、以下の点が判明しました

●メーラーはメディアクエリを認識しない
●スマホでのHTMLメールは横に回転しない(サイズ固定)
●スマホHTMLメールでテキストはi-Phoneだと拡大可能、アンドロイドは拡大不可

そして、そこから思い知ったこと。
やっぱテーブルレイアウト最強

しかしantwortさんよ、、ほぼ全てのデバイスで一体何を確認していたんだい?
これはデザインテンプレとしては便利ですが、やはりそこが限界かな。。
さっさとメーラーがメディアクエリ認識するようになればいいのにね。

Leave a Reply

メールアドレスが公開されることはありません。 が付いている欄は必須項目です