跳到主要内容

HTML 模板制作指引

设计规范​

HTML 邮件模板制作中参考以下指引可减少兼容性问题，提升用户体验。

主题​

  • 邮件主题行最多可有18个字符
  • 保持简单并突出主要主题以获得更高的点击率

文本​

  • 将文本与 HTML 的比例保持在30%到70%之间，比例越高越好
  • 避免使用 “——”、“！”、“…” 等特殊符号
  • 避免使用敏感和促销字词，如 “免费”、“折扣”、“特价”、“低价”、“便宜”、“视频”、“赚钱”、“群发邮件”、“致富”、“收入”、“友谊”、“付款”、“商机”、“秘密”、“机密”、“神秘”、“秘方” 等，因为它们会增加邮件被分类为垃圾邮件的可能性；如果必须使用特殊字词，请将其转换为图像
  • 模板中的所有链接必须使用绝对路径
  • 链接长度不能超过255个字符，且不能包含空格或中文，否则可能导致链接无法追踪

图像​

  • 确保所有图像都有 <img alt> 属性
  • 合并并压缩图像，以减少请求次数并加快图像加载速度
  • 可以使用 Base64 编码将小且重要的图像嵌入 HTML
  • 谨慎使用图像，因为某些邮件客户端默认不加载图像，或过多的图像也可能加载失败
  • 将页面上的图像数量限制为8张，并确保图像总大小不超过 1MB，降低被标记为垃圾邮件的风险
  • 不要对图像链接使用标签，因为它们可能会被归类为垃圾邮件
  • 图像文件名不得包含 "ad" 字样，因为这可能会导致图像被标记为广告

布局​

  • 充分利用表格元素，因为它与大多数邮件客户端兼容
  • 建议将页面宽度设置在 600px 至 800px 之间，以减少邮件拉伸和布局错位
  • 避免使用复杂的布局
  • 避免使用 <div> 表格之外的元素
  • 不要使用复杂的交互，且避免使用动画

文件大小​

  • HTML 文件大小建议在 50KB 以下
  • Gmail 将截断如果超过 102KB 的 HTML 内容，且整个邮件大小不能超过 25MB

基本 HTML 模板​

如果您没有构建 HTML 模板的经验，建议从入门 scaffold 开始创建模板：

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title>html title</title>
        <style type="text/css">
            body {
                font-size: 12px;
                font-family: Arial;
            }
        </style>
    </head>

    <body>
        <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
            style="background:#fff;width:100%;margin:0 auto;max-width:800px">
            <tbody>
                <tr>
                    <td align="center">
                        <h2>An example of text</h2>
                        SmartLink is an advanced CRM tailored for the gaming sector. Unlike traditional CRMs that offer
                        generic solutions, SmartLink is built from the ground up to address the unique needs of game
                        developers and publishers. It provides a comprehensive suite of tools that integrate seamlessly
                        with
                        gaming environments, enabling companies to manage and analyze player data effectively.
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <h2>An example of image</h2>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <a href="https://smartlink.intlgame.com/">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                                <tbody>
                                    <tr>
                                        <td>
                                            <img src="https://sg-smartlink-prod-1300342648.cos.ap-singapore.myqcloud.com/29162/4a55107bde0043669403780cabd6d3dc.jpg"
                                                style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;"
                                                height="auto" alt="Welcome Image">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <h2>Mock the image not loaded</h2>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <!-- 图像内容 -->
                        <a href="https://smartlink.intlgame.com/">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                                <tbody>
                                    <tr>
                                        <td>
                                            <img src="your image link"
                                                alt="Click here if you can't view images"
                                                style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;"
                                                height="auto">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </a>
                    </td>

                </tr>
                <tr>
                    <td align="center">
                        <h2>You should provide subscribe or preferences options.</h2>
                        Upload to SmartLink after finish the email template. You can config the footnote in SmartLink
                        directly
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

    </html>

不支持的 HTML 元素​

// JavaScript相关标签
<script>
<noscript>
  
// 多媒体相关标签
<audio>
<video>
<embed>
<object>
<iframe>
<applet>
  
// 表单相关标签
<form>
<input>
<button>
<select>
<textarea>
<fieldset>
<label>
  
// 交互性标签
<details>
<dialog>
<menu>
<menuitem>
  
// 其他标签
<base>
<link>    // 主要用于引用外部CSS或资源
<meta>
<style>   // 内嵌样式表会被剥离，但内联样式仍然有效
<frame>
<frameset>
<noframes>
<iframe>
<param>
<canvas>
<map>
<area>
<svg>

不支持的属性​

// animation
animation
transition
keyframes

// advanced layout
flex
grid
position: fixed
position: sticky

// some selectors
:hover
:focus
:active
::before
::after

// font
@font-face

常用 HTML 代码片段​

适配阿拉伯语​

与许多其他语言不同，阿拉伯语是从右到左书写的，使用时需要进行适配。

<!-- ensure the charset -->
<meta charset="UTF-8">

<!-- set the direction and text align -->
<tr>
    <td align="center" style="direction: rtl; text-align: right;">
      هذا نص باللغة العربية.
  </td>
</tr>

设置网页跳转​

对于邮件客户端不下载图像的场景，您可有效地使用 <img alt> 属性跳转到包含该图像的一个网页。

<a href="https://smartlink.intlgame.com/">
  <img src="your image link"
      alt="Click here if you can't view images" />
</a>

限制图像水平滚动​

将图像放在表格内以避免水平滚动。

<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
    style="background:#fff;width:100%;margin:0 auto;max-width:800px">
    <tbody>
        <tr>
            <td align="center">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                    <tbody>
                        <tr>
                            <td>
                                <img src="your image link"
                                    style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;max-width:800px"
                                    height="auto" alt="Welcome Image">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
</table>

添加移动设备兼容​

@media only screen and (max-width:650px) {
    .font-auto {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .font-size-auto {
        font-size: 80px !important;
        line-height: 120px !important;
    }
}

设置背景颜色​

大多数邮件客户端都不太支持背景属性。

<!-- QQ Client don't support this -->
<body style="background:red"></body>

<!-- Outlook Client don't support Image background -->

实用外部工具​

Litmus：检查移动兼容性

Email on Acid：检查模板问题

Mail-tester：综合评价分数