[前端,EDM]最會跑版的EDM注意事項

EDM電子報,因為讀者使用不同的郵件系統,會看起來不一樣。
因為CSS有些吃有些不吃:Gmail、Hotmail、Yahoo都滿寬鬆的,但Outlook很多東西不支援,所以需要因為它寫得比較嚴謹,注意事項整理如下:

最會跑版的EDM注意事項

1.有些郵件系統不吃<head></head>裡面的東西:

因為有些郵件系統不吃<head></head>裡面的東西,所以CSS全部要用style寫在<標籤>裡面。
如:
<td style="font-size:16px;font-family:微軟正黑體; color:#ffffff;">

2.信箱瀏覽器不吃的屬性全部拿掉:

這些屬性不是全部種類的信箱都吃,所以有看的話全部拿掉。
看到全部拿掉:
padding、margin、float:right、style="background: url('xx.jpg');"

內容寫法詳細介紹:

*表格:

訂定寬度,內部排版的大塊td最好也訂定寬度才不會跑版
border,cellspacing,cellpadding下0避免誤差

*排版(邊界)

全部使用table去排版,左右邊界就全部用td去設定左右邊的寬度
 (也有都用border的寫法<style="border:transparent 10px solid;">)
不要用padding屬性。div、p不吃,很麻煩所以乾脆都不要用
不要用margin屬性。Outlook某版本不吃,所以不要用。
如:
<tr>
    <td width="15">內文</td>
    <td height="10">內文</td>
    <td width="15">內文</td>
</tr>

*排版(對齊)

不要用float靠左靠右,Outlook不吃
如:
左右對齊<td style="text-align:center">或<td align="center">
上下對齊<td style="vertical-align: top;">或<td valign="top">
置中對齊<td colspan="2" align="center" valign="middle">

*圖片

不要用使用CSS的背景放圖,Outlook不吃,如:style="background: url('xx.jpg');"
使用「絕對連結」,因為EDM就支身寡人被寄出,不能掛東西在身邊
長寬記得寫死
額外加style="outline:0;border:0;float:left;",可預防圖片一些奇怪的多出來少一點對不齊等問題。
如:
<img src="http://abcd/images/xx.jpg" width="500" height="390" style="outline:0;border:0;float:left;">

*文字樣式

文字樣式的字型全部要寫在裡面,離文字近一點好,不然隔太多層有時會吃不到。
如:
<td style="font-size:16px;font-family:微軟正黑體; color:#ffffff;">

其他工具延伸參考

各郵件系統支援度查詢:詳細清單一覽,英文版^^
電子豹:使用免費電子報系統自己試發做檢查,要記得用Outlook看

沒有留言:

張貼留言

Instagram