電子郵件NewsLetter背景圖像和圓角

Question

我編碼Email Templates。給我的Psd將被轉換爲電子郵件模板有rounded corners和一些background images。
使用背景圖像和圖像製作圓角表格還是應該使用css來製作rounded corners以及background images。

Answer 1

爲您的角落使用圖像。您不會在所有客戶端都能正常工作。一個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> 

Answer 2

border-radius在電子郵件客戶端中的支持很差，雖然在支持更多的情況下，background-image將不會在Outlook 2007+中顯示。

參見：http://www.campaignmonitor.com/css/

而且，最好的跨客戶端的支持，所有的CSS必須是內聯，你應該使用table秒。

Answer 3

背景圖像

基本上，背景圖片是不是一種選擇，在所有的，如果你需要支持適用於各種電子郵件閱讀器。它主要影響Outlook 2007及更高版本，以及Hotmail（尚未測試Outlook.com）。

如果PSD有一個大面積的bg圖像，但沒有文本，可以將該部分電子郵件剪切爲前景圖像。

如果同一區域有文字內容，有3個選項：

1. 跳過背景圖片完全。
2. 使用內嵌CSS實現bg圖像，目標是優雅的降級（接受電子郵件在某些電子郵件閱讀器中看起來不太好）。
3. 將該部分電子郵件剪切爲單個前景圖片（使用圖片中的文字）。圖像中剪切文本的風險是它會影響可用性（許多電子郵件閱讀器默認會阻止外部圖像），這會傷害可訪問性，最重要的是，如果文本與圖像的比率過低，則會觸發垃圾郵件過濾器。因此，儘可能少地做這件事是一個好主意（將文本剪切爲圖片）。但不時有時通常是安全的。

在選擇選項1或2之前，您可能需要將其與設計團隊一起清除。在做大量的選項3之前，最好在各種垃圾郵件過濾器中進行測試。

bg圖像在HTML電子郵件中的影響以及最小化使用它們的需求應該儘早且經常地傳達給設計人員，因爲它們之間的問題並不是它們之間的常識，即使是最好的他們。

圓角

正如@samanthasquared提到的，圓潤的邊角都沒有得到很好的電子郵件閱讀器的支持。他們需要以圖像的形式實現（或者與背景圖像一樣，交替跳過它們或者選擇優雅的降級，如果這對於設計團隊來說是可以接受的）。

如果您爲整個頂部切割單個圖像，併爲整個底部切割單個圖像，而不是爲每個單獨的角切割單獨的圖像，則可以減少用戶必須下載的圖像總數。圖片較少意味着加載速度更快，觸發垃圾郵件過濾器的風險更小。