2012年12月18日 星期二

HTML製作edm的技巧與問題


不管是系統通知信/電子報,還是會員註冊成功的信,總之只要是寄到他人信箱的信,
都要注意很多地方。之前UI曾經給我的畫面是,他希望使用者收到的edm之後,裡面還要有hover行為,真是嚇死我了(收信的mail system會有過濾的機制,機於郵件安全性的考量,所有JavaScript會被過濾掉,包含所有的監聽事件)

光是要兼容大部分的信箱可以看到幾乎一樣的畫面就已經不是ㄧ件簡單的事情了...
最後找出來的原則就是 :

  • 以table排版
  • Inline styles are still king with email=>任何CSS都要寫在行內
  • margin如果沒有作用,高度用<br>替代,寬度用border-left:20px solid transparent(用透明顏色產生一個假的寬度)
  • 圖檔勿過大
  • 所有的文字或是有超連結的文字,要設定css的color,因為在某些信箱會把顏色跳成很一般的藍色跟紫色


這篇文章提供了非常仔細的描述 EDM郵件製作規範完整版 (2011-08-21 14:54:44)
我想我寫再多也不會超過他,如果我還有機會碰到製作EDM,有什麼怪異的點我會再把他記起來。

如果寫行內樣式還是無法解的問題,可以參考這個網站 :
裡面有哪些信箱系統支援/不支援哪些css,可以做個參考。
圖片來源(截圖自) : http://www.campaignmonitor.com/css/



其他連結 :






1 則留言:

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...