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

by on in
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看
By -
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

Instagram