前端無遠弗屆

因為電子報是透過email閱讀器閱讀，而非瀏覽器

會有語法是否支援的問題，因此製作電子報時要注意以下幾點：

• 不使用div排版，請使用table來編排
• 圖片使用絕對路徑
• <img>要設定正確的width和height
• 「alt」屬性要設定
• 不使用css seletor，使用inline-css
  在中設置style讓browser依照CSS rander出來是很正常，但email client就不一樣了，請將css個別地寫在tag行內
• 圖片與文字重疊
  通常我們會用兩種方法來重疊圖片與文字，一個是把圖片設為background-image
  但是不是每個閱讀器都能正常顯示<table>標簽的background-image
  另一個方法是使用z-index與position: absolute
  但是position可能會因不同的閱讀器排版跑掉
• 不使用absolute排版，請使用static或float的排版方式
• <img>中間出現空白
  單一圖片中可能出現空白，可以使用display:block去除白線。
  兩張圖片中間也可能出現空白，如果是位於表格中不同表格的圖片，這時要將表格歸零
  在<table>中使用 cellpadding="0" cellspacing="0" border=“0"來去除表格的「預設寬度」，
  並使用float:left來去除位於不同表格「連續圖片」的空白。
  有時是同一表格中的兩張圖片出現空白，檢查是不是程式碼中多打了一個空白鍵。
• 留白空間的排版
  可以使用1x1px的gif圖檔來製造「留白」，不要只設定寬度或高度，避免排版跑掉。
• 背景圖無法顯示
  1. 不是每個閱讀器都能正常顯示<table>標簽的background-image，建議設計的時候背景還是以簡潔、單色為主。
  2. 另一個方法是用切圖來輔助，把圖片與重疊的文字一起切下來，但是這樣如果使用者的閱讀器若不支援原本設計的字形時，就會出現eDM上出現兩種字型的狀況。
  3. 還有一個方法比較麻煩就是製作兩個版本，一個是eDM版本設計較為簡潔，當使用者點下「View this email in browser」時，打開一般網頁版
• 版面寬度
  一般網頁的寬度大約為960px，但eDM可能會透行動裝置來閱讀，寬度最寬就以550px~600px較為適合，或是做成Responsive的eDM更好。
• 切圖
  圖檔大小要格外注意，圖檔如果很大可能會被outlook壓縮
  如果圖檔太大可以考慮切成幾份，一方面也能加快讀取的速度
• EDM文末加入一個「取消訂閱此電子報」的連結

用瀏覽器打開該eDM按「Ctrl+A」全選後直接到email中貼上，就可以寄到各種不同的email閱讀器中測試。

參考來源：

http://hanasan.tian.yam.com/posts/56605300

http://toughpeter.blogspot.tw/2014/01/html.html