Email NewsLetter Background image and rounded corner

问题

i am coding Email Templates . Psd given to me that is to be converted to email template is having rounded corners and some background images .
Is it good to use background image and images to make rounded corners table or should i use css to make rounded corners along with background images .

回答1:

Use images for your corners. You won't get border-radius to work properly across all clients. A 10x10 transparent .png is the best option. I didn't make the rounded corner images but you should get the idea with this example:

<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>

回答2:

Background images

Basically, background images aren't an option at all, if you need support for a wide variety of email readers. It mostly affects Outlook 2007 and later, as well as Hotmail (haven't tested Outlook.com yet).

If the PSD has a large area with a bg image but no text on top of it, you can cut that part of the email as a foreground image.

If the same area has text content, there are 3 options:

Skip the bg image altogether.
Implement the bg image with inline CSS and aim for graceful degradation (accepting that the email won't look as good in some email readers).
Cut that part of the email as a single foreground image (with the text in the image). The risk of cutting text in an image is that it impacts usability (many email readers block external images by default), it hurts accessibility, and, most importantly, if the ratio of text to images becomes too low, that will trigger spam filters. So it's a good idea to do as little as possible of this (cutting text as images). But a little now and then is usually safe.

Before choosing either option 1 or 2, you'll probably need to clear it with the design team. And before doing a large amount of option 3, it would be wise to test it in a variety of spam filters.

The impact of bg images in HTML emails, and the need to minimize the use of them, should be communicated to designers early and often, as the issues with it are not common knowledge among them, even among the very best of them.

Rounded corners

As @samanthasquared mentioned, rounded corners aren't well supported in email readers. They'll need to either be implemented as images (or, as with background images, alternately skip them or choose graceful degradation, if that's acceptable to the design team).

You can reduce the total number of images the user has to download if you cut a single image for the entire top portion, and a single image for the entire bottom portion, rather than cutting separate images for each individual corner. Fewer images means faster loading and less risk of triggering spam filters.

回答3:

border-radius is very poorly supported in email clients, and while with more support, background-image will not display in Outlook 2007+.

See: http://www.campaignmonitor.com/css/

Also, for best cross client support, all of your CSS must be inline and you should use tables.

来源：https://stackoverflow.com/questions/14968618/email-newsletter-background-image-and-rounded-corner

标签

html-email

newsletter