2012年11月12日 星期一

html電子報設計原則整理(edm design rules)-原也網頁設計、網站規劃、網站行銷

 又有一陣子沒來寫文章了,今天來聊一聊有關電子報(也稱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

原也網頁設計、網站規劃、網站行銷。

沒有留言:

張貼留言