邮件模版(edm) 如何更好的兼容移动端?

1、html采用表格布局,模板通常是1-3列式布局,推荐1-2列式,如下图:

image001

点击下载更多邮件模版

2、响应式设计可使用@media 媒体查询语句或百分比布局。

3、移动设备邮件模板宽度建议480px

4、单张图片尺寸不要超过1728px,否则outlook显示不全。

5、邮件内容图文比例4:6

image003

点击下载更多邮件模版

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”



发表评论

电子邮件地址不会被公开。 必填项已用*标注