又有一陣子沒來寫文章了，今天來聊一聊有關電子報(也稱EDM)設計的基本原則好了。一般使用者可能每天都會收到來自Yahoo!奇摩 or Pchome網路家庭等等電子商務網站寄來的廣告信件，這些大型的網站可能有專業的前端設計團隊，所以你看得到的廣告信大致上版面都不會跑掉，但也常收到一些EDM(比如說銀行寄來的)，裁切的圖片中間常有白線露出破綻(Gmail)，這些其實不能怪網頁設計者，是因為HTML格式電子郵件設計和一般網頁標準化有很大的發展落差。其次主要原因也是因為收信的client軟體實在太多元，對W3C網頁格式的支援度不一，所以設計電子報時，HTML和CSS的使用要小心謹慎。
以下就個人經驗列出一些在設計HTML格式電子報頁面的原則和注意項目供參考
1.不使用div排版，請使用table來編排
看到這原則第一點，不知道會不會有很多人腦中浮現一堆問號(笑)，這和網頁編排設計的原則是恰恰相反的。在這裡解釋一下，如果你的edm就是一張大圖，垂直切成幾張小圖很單純的設計，你可以使用div沒問題，但若你的edm是內容是有一些比較特別的編排，請務必使用table來配置img和text。原因很簡單，因為table tag歷史悠久，它是最能被大多數email client辨識的tag，容錯率高。
2.不使用css seletor，請使用inline-css
原因同上，因為在<head>中設置style讓browser依照CSS rander出來是很正常但email client就不一樣了，為了確保你要的樣式可以正常地被呈現，請將css個別地寫在tag行內。
3.圖片(img)之來源(src)請設為「絕對路徑」，這是基本中的基本
4.圖片(img)請務必設置正確的width和height屬性，alt屬性亦然
5.不使用影片及flash相關tag
6.不使用javascript
安全性考量
7.不使用absolute排版，請使用static或float的排版方式 支援性考量，EDM版面盡量以簡單、大方、易讀性佳為設計原則。
8.EDM文末加入一個「取消訂閱此電子報」的連結 在近年來垃圾廣告郵件氾濫的時代，即使你是一家正常發送電子報給會員的電子商務網站，也請加入這個功能，以免被spam
常見疑難雜症補充
Q:為什麼我的 EDM 在thunderbird 或 outlook上 看起來很好，但在Gmail觀看時，圖片之間會有空白？
A:這是一個已知的議題，即使在目前最新版的Chrome及其他browser用Gmail瀏覽EDM仍會存在這個怪異情況，圖片會被主動加入margin，幸好這個問題也很容易解決。方法是請在img tag上加入{display:block}即可消除不必要的空白間隙。
html email(newsletter) coding 更深入的研究
如開頭所說，EDM設計和網頁設計的最大不同是，Clients太多元但沒有一個共用的標準，光一個微軟outlook就有experss、2003、2007、2010版本，更別說現在又多了smartphone也可以來收email，其它像hotmail或LotusNotes在世上也是很多人在用。因此真的要作到100%收到信都可以完美地呈現不是一件簡單工作。
本文上面列出的八大點，其實是個大原則，基本上都有顧到的話，至少可以有七八成跑不掉。但我相信一定會有一些人想要作到盡善盡美，有這樣需求的人可以參考以下一些很棒的文章整理(英文)，讀完之後相信會有很大的助益！
http://blog.yam.com/hanasan/article/56605300
原也網頁設計、網站規劃、網站行銷。
留言列表
