1、html采用表格布局,模板通常是1-3列式布局,推荐1-2列式,如下图:
2、响应式设计可使用@media 媒体查询语句或百分比布局。
3、移动设备邮件模板宽度建议480px。
4、单张图片尺寸不要超过1728px,否则outlook显示不全。
5、邮件内容图文比例4:6。
6、文字行高line-height、元素间距要定义在块状元素上(p、td、h、li等)才能起作用。
7、尽量写行内样式。
8、不要使用背景图片或gif动态图。
9、尽量不要用float、position来写邮件效果,outlook不支持。
10、邮件中的按钮尽量不要用图片,可写个一行一列的表格,里面放个a标签。因为按钮在邮件中比较重要,用图片的话,可能发到客户邮箱未被允许加载图片。
11、在一些低版本客户邮件端会遇到元素之间莫名其妙的几像素间距,怎么调都调不好,这时候可以试一下把html源码压缩一下。
12、img标签要给alt属性,再图片未加载的情况,这个提示的文字就会显示比较重要。
13、一定要给p标签和h系列标签指定一个margin和padding(我一般默认全部设置margin:0;padding:0;),不然不同的邮箱收到的邮件,间距不一致。font-size、font-weight也要指定,不然显示也不一致。
14、英文、数字不折行显示的话,给包裹的td加上word-break:break-all。
15、Outlook会自动为table cell 添加1px border,请在邮件顶部的内联样式中加上 table td { border-collapse: collapse; }
16、table标签上如果不需要边框和间距请加上 border=”0″ cellpadding=”0″ cellspacing=“0”