×

如何重构好我们的邮件页面

作者:Terry2014.06.24来源:Web前端之家浏览:12958评论:0
关键词:重构邮件

群发邮件一种常用的网站营销模式,作为前端人员,必须对“邮件页面”的重构进一步研究和了解。

回忆当初我第一次做邮件页面的时候,原本一个很简单版面设计,半小时左右就可以搞定,但是从开始到最后email出去达到完美效果,整整搞了3个小时。其实现在想想,当初太天真了,哈哈!!

为什么呢?原因就是当初把“邮件页面”和“普通页面”的重构混为一谈了。

目前各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,CSS代码也会被部分过滤。

那么在“邮件页面”的重构我们需要注意哪些事项呢,我自己总结了以下几点:

◆ 样式必须采用内联方式,不要采取外联方式。比如<div style="font-size:12px">内容....</div>;

◆ 大框架采用table布局;

◆ 尽量使用图片,少用背景,并且图片必须设置宽度和高度,以及alt属性,避免图片不显示;

◆ 如果使用背景图片的话,也可以的。但有些邮箱不支持css里定义background里的image,包括background:url(”…”)和background-image:url(“..”),比如gmail。解决方法:在div的外面加上一层  <table>和<td>并在<td>里加上background属性,就可以正常显示了。例如:

  1. <table>

  2.   <tr>

  3.    <td  background="https://www.jiangweishan.com/xxx.jpg">

  4.      <div>test</div>

  5.    </td>

  6.   </tr>

  7. </table>

目前就总结以上几点。希望能帮到大家,如果您有更多有关“邮件页面”重构的经验之谈,都可以留言,大家一起进步。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/email-web.html

网友评论文明上网理性发言已有0人参与

发表评论: