1

私はコーディングしてEmail Templatesいます。メールテンプレートに変換するために私に与えられたpsdにはrounded corners、いくつかのbackground images.
背景画像と画像を使用して角の丸いテーブルを作成するのは良いですか、それとも 一緒に使用cssする必要がありますか。rounded cornersbackground images

4

3 に答える 3

3

背景画像

基本的に、さまざまな電子メール リーダーのサポートが必要な場合、背景画像はまったくオプションではありません。主に Outlook 2007 以降、および Hotmail に影響します (Outlook.com はまだテストしていません)。

PSD の大きな領域に背景画像があり、その上にテキストがない場合は、電子メールのその部分を前景画像として切り取ることができます。

同じ領域にテキスト コンテンツがある場合は、次の 3 つのオプションがあります。

  1. bg 画像を完全にスキップします。
  2. インライン CSS を使用して bg 画像を実装し、適切な劣化を目指します (一部の電子メール リーダーでは電子メールが適切に表示されないことを受け入れます)。
  3. 電子メールのその部分を 1 つの前景画像として切り取ります (画像内のテキストを含む)。画像内のテキストをカットするリスクは、ユーザビリティに影響を与え (多くの電子メール リーダーはデフォルトで外部画像をブロックします)、アクセシビリティを損なうことです。最も重要なのは、テキストと画像の比率が低くなりすぎると、スパム フィルターがトリガーされることです。したがって、これをできるだけ少なくすることをお勧めします (テキストを画像として切り取る)。しかし、時々少しは安全です。

オプション 1 または 2 のいずれかを選択する前に、おそらく設計チームと一緒にクリアする必要があります。オプション 3 を大量に実行する前に、さまざまなスパム フィルターでテストすることをお勧めします。

HTML メールでの背景画像の影響と、それらの使用を最小限に抑える必要性は、設計者の間では、最高のデザイナーの間でさえ、問題は一般的な知識ではないため、早い段階で頻繁にデザイナーに伝える必要があります。

丸い角

@samanthasquared が述べたように、丸みを帯びた角は電子メール リーダーでは十分にサポートされていません。それらは画像として実装する必要があります (または、背景画像と同様に、デザイン チームが許容できる場合は、それらをスキップするか、グレースフル デグラデーションを選択する必要があります)。

個々のコーナーごとに別々の画像をカットするのではなく、上部全体の 1 つの画像と下部全体の 1 つの画像をカットすると、ユーザーがダウンロードする必要がある画像の総数を減らすことができます。画像が少ないほど、読み込みが速くなり、スパム フィルターをトリガーするリスクが少なくなります。

于 2013-02-21T17:07:19.830 に答える
3

コーナーに画像を使用します。すべてのクライアントでborder-radiusが適切に機能するわけではありません。10x10 の透明な .png が最適なオプションです。角の丸い画像は作成しませんでしたが、次の例でアイデアを得る必要があります。

<table width="320" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#959595">
  <tr>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>
    <td width="100" height="10">
    </td>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>    
  </tr>
  <tr>
    <td width="10">
    </td>
    <td width="300">
      Here is your content<br>...<br>...<br>...
    </td>
    <td width="10">
    </td>    
  </tr>
    <tr>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>
    <td width="100" height="10">
    </td>
    <td width="10" height="10" bgcolor="#ffffff">
      <img src="" style="display:block;">
    </td>    
  </tr>
</table>
于 2013-02-20T16:19:16.447 に答える
0

border-radiusはメール クライアントでのサポートが非常に不十分であり、さらにサポートbackground-imageされていますが、Outlook 2007 以降では表示されません。

参照: http://www.campaignmonitor.com/css/

また、最適なクロス クライアント サポートを得るには、すべての CSS をインラインにする必要があり、tables を使用する必要があります。

于 2013-02-20T02:18:11.240 に答える