EDM設計經驗

EDM設計經驗

編寫html郵件與編寫一般html頁面有很大的不同
因為主流郵件信箱會對html郵件做過濾 :
- 基於郵件安全性考量，js就會被過濾掉，包含監聽事件onclick、onmouseover..
- CSS也會被部分過濾掉

google、homail的郵件內容是被佈局在整個郵件的某個div中
所以要注意如果你在裡面寫入
<style type="text/css"> body {font-size:30px;} </style>頁面字體就會被影響
為了兼容各種郵件信箱，不可使用上述外連css的寫法，需使用inline-css，確保樣式能被套用

以下幾點需要注意:

1. 頁面寬度650-800px，最大不要超過800px

2. 不要使用div排版，選用table來佈局

3. 使用inline-css，確保樣式能被套用，並將樣式寫在 <td> <font> 裡面
<td style="font-family:微軟正黑體; font-size:12px;"> 文字 <td>
<font style="font-family:微軟正黑體; font-size:12px;">文字</font>

4.不使用flash、java、javascript、frames，如果畫面中想要動態效果，將flash文件轉成gif動畫使用

5.有背景圖時，style內容裡面background可以設置color，但是img會被過濾，不能用CSS來設置背景圖片。但可以直接寫在代碼裡 ex: <table background="圖片絕對路徑" cellspacing="0" cellpadding="0">

6. 使用<ul><li>時，樣式寫在<ul style=""><li></li></ul>

7. img來源需使用「絕對路徑」: 要是在網路是有絕對網址可以開啟的圖，不要寫成本地路徑<img src="image/logo.gif" alt="">，img設定width、height、alt

8.EDM要設有連結，"如果無法查看郵件內容，請點此連結"，讓使用者可以連到放有相同內容的web頁面

9. 好用:
寬可以設border-left:10px solid transparent產生假寬度
高度用<br />

---

常見問題 :
Q : 圖片間有白色空隙怎麼辦?
A : 在img tag上加{display:block;}，即可消除不必要空隙


EDM設計因為client太多元，想要在outlook、google..以及他們的各種版本上完美呈現並不是一件容易的事，但掌握上述幾點大原則，版面也不會差太多


想要更深入研究可以參考下列文章 :
How To Code HTML Email Newsletters

看各個信箱支援的CSS樣式 :
CSS Support for email client

可以利用此網站貼上html測試EDM :
 PutsMail

可以利用此網站貼上html，直接瀏覽在各信箱呈現的樣子 :
Preview Email in Gmail, Hotmail, AOL, and Yahoo in seconds





參考網路資源
http://blog.yam.com/hanasan/article/56605300
http://yiyingloveart.blogspot.tw/2013/03/email-csshtml.html
http://yiyingloveart.blogspot.tw/2012/12/htmledm.html
http://big5.jrj.com.cn/gate/big5/blog.jrj.com.cn/6829336752,3495177a.html


深入學習!一系列教程(en)
https://webdesign.tutsplus.com/series/mastering-html-email--webdesign-17696