メールクライアントごとの仕様の違いを考慮する

http://www.sitepoint.com/optimizing-for-the-inbox/

1 comment | 1 point | by WazanovaNews 2年以上前 edited


Jshiike 2年以上前 edited | ▲upvoteする | link

メールの復権」を書いてから4ヶ月ほどたちましたが、その後、自分がかつてユーザ登録したweb/アプリサービスがメールのニュースレター配信を次々とはじめていて、それが日々自分のinboxで実感できます。米国だけの傾向なのかどうかよくわかりませんが、ユーザと接点を持つ手段としてメールを見直す傾向は右肩上がりのようですね。

こうなってくると、メールクライアントごとの仕様の違いを考慮して、製作 & テストしなくてはいけないということ。そこそこ工数のかかるタスクです。

GiltのLauren Ribandoが紹介しているコツは、

  • デザイナーとしては、リンクを示す青色をサイトに合ったカラーで上書きしたいものだが、GmailとYahooメールは単純に<a>タグで指定するだけではうまくいかない。<a>タグの中に<span>タグをネストさせて、二重にhex値を指定している。
  • 更にGmailでは、#FFFFFFもしくは#000000の白黒色を指定しても、青色を上書きできない。#FFFFF1もしくは#000001のように若干値をずらし、<a>タグと<span>タグで二重に指定するとうまくいく。
  • iOSでは、電話番号 / 住所 / 日付が、<a>タグを使ってなくてもハイパーリンクとして認識される。個別に<span>タグで囲ってから、適切な色に変えるとよい。iOSはトップラインのCSSとmedia queryをサポートしているので、対応する数が多ければ、色を一度指定して、そのclassを順次適用させることもできる。
  • 画像マップはメールクライアントでサポートされてないことも多いので、画像をスライスする。しかし、OutlookとGmailでは、スライスした画像の間に白い余白がでてしまうので、各画像に display:blockを追加する。
  • AndroidのGmailアプリでは、複数のカラムのあるネストしたテーブル構造のときに、各カラムの横幅が変更されてしまうことがある。
    • セル内に同じ横幅の画像を置く場合は、セルにmin-width値を設定する。
    • セル内のコンテンツの横幅が意図通りにならなければ、セルの最初のコードにtransparent GIFを追加し、イメージタグの横幅をあるべきセルの値にする。更に、セルにmin-width値を設定。
  • iOSで独自のボーダーが設定されてしまうことがある。バックグランドカラーや画像がテーブル内の行に適用されるとき、iOSはバックグランドカラーを継承して、テーブルの外側にボーダーをつくる。そして、ズームインすると消える。
    • 親のバックグランドカラーにラップするかたちでのテーブルを追加。そして、従前はこの中で表示されていたバックグランドカラーを含むテーブルとセルをネストさせることで、テーブル全体に意図した色を適用できる。
  • Return PathLitmusなどのツールを使ってテストするとよい。

原文にサンプル画像とコードもあるので、ご参照ください。

#gilt


ワザノバTop200アクセスランキング


Back