前陣子剛好有機會做到電子報（e-newsletter）的專案，
發現有許多地方與一般的網站有很大的差異，
參考了很多網路上的資料，
想說把這些東西整理出來跟大家分享。

製作網站時，
前端工程師最基本的工作就是確保在各主流瀏覽器中，
畫面都能正常呈現，
但是Html電子報與一般網頁最大的不同就是：
使用者是透過email閱讀器閱讀，而非瀏覽器。
所以Javascript、jQuery、Flash這些東西在讀取的時候就會有問題，
在Html與CSS的排版上也會有支援的問題。


這邊把一些遇到常見的問題分成程式與設計列出來，
希望能夠幫助兩邊的溝通。

給Developer的注意事項：
必須使用table來編排，而非div
<table>是比較歷史悠久的標籤，
相對的也比較多email閱讀器支援這個標簽，
在排版上的設定也比較不會跑掉。
使用inline-css
使用外部連進來的CSS會有問題，
導致eDM開啟時沒有style，
所以在製作時記得要把class與其他style放到Html中。
<img>要設定正確的width和height
為了避免某些email閱讀器讀取、縮放時出現問題，
圖片要定義寬高確保圖片與排版的空間正常。
要打「alt」屬性
「alt」就是「alternative text」即替代文字，
有時候使用者不會把整封郵件下載下來，
或是網路壞掉等狀況導致圖片無法顯示，
這時候「alt」屬性就很重要，
可以讓未顯示的圖片顯示替代文字讓使用者看到。
圖片與文字重疊
通常我們會用兩種方法來重疊圖片與文字，
一個是把圖片設為background-image，
但是不是每個閱讀器都能正常顯示<table>標簽的background-image，
另一個方法是使用z-index與position: absolute，
但是position可能會因不同的閱讀器排版跑掉，
所以與你的設計師討論這些問題，
在設計與程式找到平衡點，
才能讓使用者看到完整的eDM。
<img>中間出現空白
單一圖片中可能出現空白，
可以使用display:block去除白線。
兩張圖片中間也可能出現空白，
如果是位於表格中不同表格的圖片，
這時要將表格歸零，
在<table>中使用 cellpadding="0" cellspacing="0" border=“0"來去除表格的「預設寬度」，
並使用float:left來去除位於不同表格「連續圖片」的空白。
有時是同一表格中的兩張圖片出現空白，
記得檢查是不是自己腦殘在程式碼中多打了一個空白鍵。
<img>如果有設連結會在IE中出現藍紫色外框
使用 a img { border: none; }來去除。
留白空間的排版
可以使用1x1px的gif圖檔來製造「留白」，
不要只設定寬度或高度，
避免排版跑掉。
給Designer的注意事項：
背景圖無法顯示
如同剛剛提過的，
不是每個閱讀器都能正常顯示<table>標簽的background-image，
建議設計的時候背景還是以簡潔、單色為主，
另一個方法是用切圖來輔助，
把圖片與重疊的文字一起切下來，
但是這樣如果使用者的閱讀器若不支援原本設計的字形時，
就會出現eDM上出現兩種字型的狀況。
還有一個方法比較麻煩就是製作兩個版本，
一個是eDM版本設計較為簡潔，
當使用者點下「View this email in browser」時，
打開一般網頁版，
這樣就能隨心所欲的設計了。
版面寬度
一般網頁的寬度大約為960px，
但eDM可能會透過電腦以外的裝置，
像是平板電腦、智慧型手機來閱讀，
這時候閱讀的寬度最寬就以550px~600px較為適合，
當然做成Responsive的eDM更好。
切圖
圖檔大小要格外注意，
圖檔如果很大可能會被outlook壓縮，
如果圖檔太大可以考慮切成幾份，
一方面也能加快讀取的速度，
畢竟無論如何我們還是很難保證所有的閱讀器、瀏覽器都能完美呈現。
最後，
關於瀏覽器與閱讀器的支援，
記得就是一直測試！測試！測試！測試！測試！測試！
可以用瀏覽器打開該eDM然後直接按「Command+A」全選然後直接到email中貼上，
就可以寄到各種不同的email閱讀器中測試，
然後密切與你的客戶、工程師、設計師溝通，
讓每個人知道問題的原因並找到最好的解決方式。