關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356393

    累積人氣

  • 24

    今日人氣

    3

    追蹤人氣

html電子報設計原則整理(edm design rules)

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}即可消除不必要的空白間隙。

2014.11.13 更新:由於不少人寫信或留言詢問Gmail的跑版,在這裡再次補充。img display 設為 block 後,如果二張圖之間還是有 space, 這取決於你是否在圖片上加了連結或是其他不明原因。下面列了一個 code sample,style很長,但CSS全寫上去的話就可以消除更多不可預期的跑版。

最後一招,二張圖片 img HTML TAG 之間不要按 ENTER 留斷行,直接讓他們串在一起也是一個可嘗試的方法,如果上一步的 inline-css 全加了還是不成功,再來試這個吧。






html email(newsletter) coding 更深入的研究

如開頭所說,EDM設計和網頁設計的最大不同是,Clients太多元但沒有一個共用的標準,光一個微軟outlook就有experss、2003、2007、2010版本,更別說現在又多了smartphone也可以來收email,其它像hotmail或LotusNotes在世上也是很多人在用。因此真的要作到100%收到信都可以完美地呈現不是一件簡單工作。

本文上面列出的八大點,其實是個大原則,基本上都有顧到的話,至少可以有七八成跑不掉。但我相信一定會有一些人想要作到盡善盡美,有這樣需求的人可以參考以下一些很棒的文章整理(英文),讀完之後相信會有很大的助益!

相簿設定
標籤設定
相簿狀態