Email Template

1. Use table for layout
2. Set width in every cell, 把寬度設在table cell裡，避免使用百分比
3. 使用table nesting的方式來取代float，也有一說，儘量避免nesting table
4. Cellpadding 和 Padding選擇一個用
5. 使用bgcolor及width:100%代替，wrap the email in a 100% width table
6. Avoiding unnecessary whitespace in table cell, 不要有空白在td裡
7. inline css
8. Avoild shorthand for fonts and hex notation : 儘量不要用縮寫
9. link: inline寫入color, 在link裡再加 xxx
10. Avoid spacer imags
11. [另]user a spacer.gif 部份的browser無法接受空白的cell, 哪怕有設定寬高，所以可以用空白圖片代入。
12. 圖片要加alt 
13. 圖片都要有長寬
14. alt和圖片長寬這件事可能要選擇性，如果選片很嚴重的佔格，就要有長寬。這裡各家說法不一
15. 如果要用圖片作底圖，最好也設定background-color以避兔圖片出不來的狀況，某些client沒有支援background
16. window live hotmail and gmail add a few pixels of additional padding below images, so img{display:block;}
17. [mobile] : width less than 600px
18. [mobile] : webkit-text-size-adjust:none
19. 避免使用border 而是用td width="1"
20. Encode all characters "SOME" -> "SOME&quto;
21. 不要加入javascript

設計email tempalte幾件要注意的事

1. keep the design simple
2. Testing in mail browser
3. Sign up for all the major email clients (google /  hotmail / yahoo /  AOL)
4. Give the user a way out

mailchimp inline-css 可以轉css成inline

nodeJS Nodemailer 可以發信

Email Testing

http://www.priceline.com/hotels/startOffer.do?&refid=CO1492259&refclickid=10496003SID

http://litmus.com/

Email Template Resource

1. AntWork http://internations.github.com/antwort/
2. http://leemunroe.github.io/html-email-template/email.html