EDM开发注意事项
前不久开始负责公司的EDM模板前端开发.
看了下公司以前同事制作的EDM模板, 代码真是不敢恭维. 最明显的错误居然在页面上用<style>.
做了几个EDM下来, 也积累了点经验. 除了网上常见的那些注意事项, 还有下面这些. 写下来, 对自己对别人都会有用:
1. 所有图片设置border="0" style="display:block";
2. 所有链接设置text-decoration:none;
3. 所有空行, 线条最好用table元素表示;
4. 所有table把cellspacing, cellspadding设置为0;
5. 当需要限制行文字高度时, 须同时设置max-height, height, line-height. 这里max-height很重要:
- 因为gmail会自动把height改成min-height, 这时候你如果不设max-height在gmail里达不到overflow hidden的效果.
6. 内容中包含email地址时, 须设置下颜色, 因为有些邮件系统会加上默认样式. 比如QQ mail会加上蓝色带下划线的链接;
2014-01-12 updated:
7. 修正一些邮件客户端的css解析问题:
/* Client-specific Styles */
/* Force Outlook to provide a "view in browser" button. */
#outlook a{padding:0;}
/* Force Hotmail to display emails at full width */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}8. 一些间距, 空白尽量避免用margin, padding实现, 最好使用td来实现. 因为padding等在outlook客户端上被忽略;
9. 使用br代替p来换行;
10. EDM最佳宽度550-600. 不过这个有时也不是我们能够决定的.
介绍一个EDM测试工具: https://litmus.com/, 给它发邮件后, 它能把你的EDM在所有web, 客户端, 手机端的效果截图出来, 很牛叉, 可惜是收费的.
后面如果有新的, 会再补充进来...
