制作符合Mail格式的HTML

2017/03/14 Basic

我们在做报表类方案的时,我们通过web页面进行了数据展示,此时期望能够把这个网页通过邮件客户端发送到用户邮箱中,如果我们为了保持页面和邮件内的样式的统一,就很期望做到页面内容的复用,不再为邮件内容单独制定一套模板,当用户的内容样式谁内容而不同时,无法通过单一的模板来解决,是否可以通过复用页面的html内容来达到目的呢?

比如我们的页面结构是模块化的,每一个模块内的内容可能都随着模块的不同而呈现出不同的样式,如下图: http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/85c79200d05ddb180dbb9c9e13d4faa7.png

如果我们让用户一键拷贝内容,在一键发送邮件,既可以做到页面内容的复用,也可以简化用户复制粘贴以及启动邮件客户端的繁琐任务。

问题来了,在我们实践过程中,为了支持足够美观的模块,使用了CSS3、HTML5等一些新特性,但是在内容复制到邮件客户端进行发送后,收到的邮件随着客户端的不同而呈现出不同的样式(当然,是样式错乱),这里面发生了什么呢?

经过查询一番资料,发现,不同的邮件客户端有不同的HTML过滤规则,我们需要遵循HTML Email规范。

html email基本原则:

  1. 只能从外部引用图片,没有外部样式表,字体,视频(html5开始改变这一点)等。
  2. 在电子邮件客户端(电子邮件客户端=为Outlook,Gmail,Hotmail,Yahoo等)中对CSS元素的支持有限。 您可以查看一个对比表格,什么客户端支持什么的样式功能。
  3. 表格最常用于布局html电子邮件。
  4. 测试,你需要测试你的邮件在不同的电子邮件客户端下。

html email 文档类型申明:

目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>HTML Email编写指南</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
</html>

使用table代替css布局

由于电子邮件无法支持标准,是不可使用div、section或article——替代的是使用table。此外,你需要使用大量的表格嵌套,因为HTML电子邮件既不支持colspan和rowspan属性。

这是多个table容器,并且使用嵌套table格式。我们一般会在最外面设置一个table(#backgroundTable),充当排序的容器 ,它指定了电子邮件客户端中的可见空间的宽度。因为一些客户端任意地限制区域呈现 ,不设置可能导致奇怪对齐的内容。然后我们再在内部设置一个table,用来作为真正内容的容器,第二个table最好设置一定的宽度,防止超过客户端的显示宽度。

<table cellpadding="0" cellspacing="0" border="0" style="margin:0; padding:0; width:100% !important; line-height: 100% !important;">
    <tr>
        <td valign="top"> 
        	<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
        	<tr><td>邮件内容</td></tr>
        	</table>
        <td>
    </tr>
</table>

第一个table设置的样式表有助于重置某些电子邮件客户端特定的格式。

table自适应? table 在 bootstrap panel中无法宽度自适应,解决办法是使用固定表格:table-layout:fixed;

Max-Width都支持? 并不是所有邮箱客户端都支持max-width。为了让邮件兼容Outlook和Lotus Notes 8 & 8.5,我们要把每个table放在条件语句里,这样就会有一个固定宽度table。这种方法针对IE(Lotus Notes使用IE内核)和Microsoft Outlook。

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
            <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        Hello!
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

奇怪的是,苹果邮箱客户端(通常非常先进)也不支持max-width属性。但它支持media queries,所以只要viewport是600px宽的屏幕,我们可以在’content’样式里添加固定宽度。

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>

多列布局: 我们在进行多列布局的时候,不能把列宽度给占满了,需要预留一定的空间,比较好的实践是:预留25px的空间来防止Outlook堆叠你的table。因为Outlook会在边框宽度上占用一定的宽度。 如何达到预留空间的方式呢?通过使用table的align属性实现。

使用表格代替段落

同样,由于缺乏对标准的支持,使用标准的标签,如h1,h2,h3或p并不是一个好主意。我发现这些渲染在电子邮件客户端存在相当大的麻烦。 你最好选择将每一块文本放在息的单元格中,并且将行内样式应用于这个单元格。

CSS行内样式代替样式表

所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里,可以看到很多css的伪标签都是不被支持的。 不要忘记:你不能将多个类应用于HTML电子邮件,因为它不支持的这些。每个元素最多可以有一个类。

也不要忘记:你不能用简短的样式缩写如font-size(例如:style=”font:8px/14px Arial,sans-serif”),因为HTML电子邮件不支持它,你需要展开单独写,margin也不例外。

简化开发框架:

我们可以参考 https://github.com/seanpowell/Email-Boilerplate 这里的要求,然后填充我们自由的邮件。 https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch–webdesign-12770 这里给出了我们如何使用table一步一步创建出期望的HTML Email,以供参考。

参考:

http://www.ruanyifeng.com/blog/2013/06/html_email.html http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/ http://articles.sitepoint.com/article/code-html-email-newsletters http://dennisdeacon.wordpress.com/2008/06/09/top-10-email-best-practices/http://www.catswhocode.com/blog/best-practices-for-coding-html-emails https://webdesign.tutsplus.com/zh-hans/articles/creating-a-simple-responsive-html-email–webdesign-12978 https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch–webdesign-12770

Search

    Post Directory