email-template-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Email Template Design

邮件模板设计

Design production-ready HTML email templates using table-based layouts and inline CSS for maximum email client compatibility.

使用基于表格的布局和 inline CSS 设计可投产的 HTML 邮件模板，实现最大程度的邮件客户端兼容性。

Workflow

工作流

Clarify purpose - Determine the email type (marketing, transactional, lifecycle) and brand context
Select base template - Start from an asset template in
```
assets/
```
or build from scratch using the patterns below
Build structure - Use table-based layout with the boilerplate from
```
assets/base.html
```
Style inline - Apply all CSS as inline styles; use
```
<style>
```
block only as progressive enhancement
Test compatibility - Review against the client quirks in
```
references/client-compatibility.md
```
Optimize - Compress images, add alt text, verify dark mode, ensure accessibility

明确用途 - 确定邮件类型（营销类、事务类、生命周期类）和品牌要求
选择基础模板 - 从
```
assets/
```
目录中选择现有资产模板，或使用下文规范从零搭建
搭建结构 - 基于
```
assets/base.html
```
的样板代码使用表格布局搭建结构
内联样式 - 所有 CSS 都以内联样式的形式添加，仅渐进增强功能可使用
```
<style>
```
标签
兼容性测试 - 对照
```
references/client-compatibility.md
```
中的客户端兼容性问题核查
优化处理 - 压缩图片、添加 alt 文本、验证深色模式适配、确保可访问性达标

Email Type Selection

邮件类型选择

Type	Key characteristics	Template asset
Marketing / Newsletter	Hero image, CTA buttons, multi-section content	`assets/marketing.html`
Transactional	Data-driven, minimal design, clear information hierarchy	`assets/transactional.html`
Lifecycle / Drip	Personal tone, single CTA, storytelling flow	`assets/lifecycle.html`

类型	核心特征	模板资产路径
营销/通讯简报	头图、CTA 按钮、多区块内容	`assets/marketing.html`
事务类邮件	数据驱动、设计极简、信息层级清晰	`assets/transactional.html`
生命周期/触发类邮件	语气个性化、单个 CTA、叙事性内容流	`assets/lifecycle.html`

Core Architecture

核心架构

Every email template follows this skeleton:

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
  <title>{{email_title}}</title>
  <!--[if mso]>
  <noscript><xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelPerInch>96</o:PixelPerInch>
    </o:OfficeDocumentSettings>
  </xml></noscript>
  <![endif]-->
  <style>
    /* Reset — progressive enhancement only */
    table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; }
    img { -ms-interpolation-mode:bicubic; border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
    body { margin:0; padding:0; width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      .dark-bg { background-color: #1a1a2e !important; }
      .dark-text { color: #e0e0e0 !important; }
    }

    /* Responsive */
    @media only screen and (max-width: 600px) {
      .stack-column { display: block !important; width: 100% !important; max-width: 100% !important; }
      .mobile-padding { padding-left: 16px !important; padding-right: 16px !important; }
      .mobile-full-width { width: 100% !important; }
      .mobile-hide { display: none !important; }
      .mobile-center { text-align: center !important; }
    }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4;">
  <!-- Preview text (hidden preheader) -->
  <div style="display:none; max-height:0; overflow:hidden;">
    {{preview_text}}&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
  </div>

  <!-- Outer wrapper -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f4f4;">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- Inner container (600px max) -->
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="mobile-full-width" style="background-color:#ffffff; border-radius:8px; overflow:hidden;">
          <!-- CONTENT ROWS GO HERE -->
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

所有邮件模板都遵循以下骨架结构：

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
  <title>{{email_title}}</title>
  <!--[if mso]>
  <noscript><xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelPerInch>96</o:PixelPerInch>
    </o:OfficeDocumentSettings>
  </xml></noscript>
  <![endif]-->
  <style>
    /* Reset — 仅用于渐进增强 */
    table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; }
    img { -ms-interpolation-mode:bicubic; border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
    body { margin:0; padding:0; width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }

    /* 深色模式 */
    @media (prefers-color-scheme: dark) {
      .dark-bg { background-color: #1a1a2e !important; }
      .dark-text { color: #e0e0e0 !important; }
    }

    /* 响应式 */
    @media only screen and (max-width: 600px) {
      .stack-column { display: block !important; width: 100% !important; max-width: 100% !important; }
      .mobile-padding { padding-left: 16px !important; padding-right: 16px !important; }
      .mobile-full-width { width: 100% !important; }
      .mobile-hide { display: none !important; }
      .mobile-center { text-align: center !important; }
    }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4;">
  <!-- 预览文本（隐藏的前置摘要） -->
  <div style="display:none; max-height:0; overflow:hidden;">
    {{preview_text}}&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
  </div>

  <!-- 外层包裹容器 -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f4f4;">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- 内层内容容器（最大宽度600px） -->
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" class="mobile-full-width" style="background-color:#ffffff; border-radius:8px; overflow:hidden;">
          <!-- 内容行在此处添加 -->
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Essential Patterns

核心常用模式

CTA Buttons (Outlook-safe)

CTA 按钮（兼容 Outlook）

html

<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
  <tr>
    <td align="center" style="border-radius:6px; background-color:#2563eb;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="{{url}}" style="height:44px; width:200px; v-text-anchor:middle;" arcsize="14%" fill="true" stroke="false">
        <v:fill type="tile" color="#2563eb"/>
        <v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial,sans-serif; font-size:16px; font-weight:bold;">Button Text</center></v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="{{url}}" style="display:inline-block; padding:12px 32px; font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:6px; background-color:#2563eb;">Button Text</a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

html

<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
  <tr>
    <td align="center" style="border-radius:6px; background-color:#2563eb;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="{{url}}" style="height:44px; width:200px; v-text-anchor:middle;" arcsize="14%" fill="true" stroke="false">
        <v:fill type="tile" color="#2563eb"/>
        <v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial,sans-serif; font-size:16px; font-weight:bold;">按钮文本</center></v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="{{url}}" style="display:inline-block; padding:12px 32px; font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:6px; background-color:#2563eb;">按钮文本</a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

Two-Column Layout (responsive)

双列布局（响应式）

html

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding: 20px;">
      <!--[if mso]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="280" valign="top"><![endif]-->
      <div class="stack-column" style="display:inline-block; width:280px; vertical-align:top;">
        <!-- Left column content -->
      </div>
      <!--[if mso]></td><td width="20"></td><td width="280" valign="top"><![endif]-->
      <div class="stack-column" style="display:inline-block; width:280px; vertical-align:top;">
        <!-- Right column content -->
      </div>
      <!--[if mso]></td></tr></table><![endif]-->
    </td>
  </tr>
</table>

html

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding: 20px;">
      <!--[if mso]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="280" valign="top"><![endif]-->
      <div class="stack-column" style="display:inline-block; width:280px; vertical-align:top;">
        <!-- 左列内容 -->
      </div>
      <!--[if mso]></td><td width="20"></td><td width="280" valign="top"><![endif]-->
      <div class="stack-column" style="display:inline-block; width:280px; vertical-align:top;">
        <!-- 右列内容 -->
      </div>
      <!--[if mso]></td></tr></table><![endif]-->
    </td>
  </tr>
</table>

Hero Image

头图

html

<tr>
  <td style="padding:0; line-height:0;">
    <img src="{{hero_image_url}}" alt="{{hero_alt}}" width="600" style="display:block; width:100%; max-width:600px; height:auto;" class="mobile-full-width">
  </td>
</tr>

html

<tr>
  <td style="padding:0; line-height:0;">
    <img src="{{hero_image_url}}" alt="{{hero_alt}}" width="600" style="display:block; width:100%; max-width:600px; height:auto;" class="mobile-full-width">
  </td>
</tr>

Design Rules

设计规则

600px max width for the content container
All critical styles inline —
```
<style>
```
blocks are for progressive enhancement only (resets, dark mode, responsive)
Tables for layout — use
```
role="presentation"
```
on every layout table
System-safe font stacks —
```
font-family: Arial, Helvetica, sans-serif;
```
or
```
Georgia, 'Times New Roman', serif;
```
. Web fonts via
```
@import
```
work in Apple Mail, iOS Mail, and some Android clients only
Images: always set explicit
```
width
```
,
```
height:auto
```
,
```
display:block
```
,
```
border:0
```
, and meaningful
```
alt
```
text
Backgrounds: use inline
```
background-color
```
; background images require VML fallback for Outlook — see
```
references/client-compatibility.md
```
Spacing: use
```
padding
```
on
```
<td>
```
cells, never
```
margin
```
on tables
Links: always use absolute URLs with
```
https://
```
Preheader text: hidden preview text improves open rates; pad with
```
&#847;&zwnj;&nbsp;
```
to prevent email clients from pulling body content

内容容器最大宽度为600px
所有核心样式内联编写 —
```
<style>
```
块仅用于渐进增强功能（重置样式、深色模式、响应式适配）
使用表格实现布局 — 所有布局表格都需要添加
```
role="presentation"
```
属性
使用系统安全字体栈 — 如
```
font-family: Arial, Helvetica, sans-serif;
```
或
```
Georgia, 'Times New Roman', serif;
```
。通过
```
@import
```
引入的网络字体仅在 Apple Mail、iOS Mail 和部分安卓客户端可用
图片规范：始终明确设置
```
width
```
、
```
height:auto
```
、
```
display:block
```
、
```
border:0
```
，并添加有意义的
```
alt
```
文本
背景规范：使用内联
```
background-color
```
；背景图片需要为 Outlook 添加 VML 降级方案 — 参考
```
references/client-compatibility.md
```
间距规范：在
```
<td>
```
单元格上使用
```
padding
```
设置间距，禁止在表格上使用
```
margin
```
链接规范：始终使用带
```
https://
```
的绝对路径 URL
前置摘要文本：隐藏的预览文本可提升打开率；使用
```
&#847;&zwnj;&nbsp;
```
填充可避免邮件客户端自动拉取正文内容作为预览

Accessibility

可访问性

Use semantic
```
lang
```
attribute on
```
<html>
```
Add
```
role="presentation"
```
to all layout tables
Provide descriptive
```
alt
```
text for all images
Maintain minimum 4.5:1 contrast ratio for text
Use at least 14px font size for body text
Structure content in logical reading order (not reliant on visual layout)
Include a plain-text version or web-view link

在
```
<html>
```
标签上添加语义化的
```
lang
```
属性
为所有布局表格添加
```
role="presentation"
```
属性
为所有图片添加描述性的
```
alt
```
文本
文本对比度至少保持4.5:1
正文字号至少使用14px
按照逻辑阅读顺序组织内容（不依赖视觉布局传递信息）
提供纯文本版本或网页版查看链接

Dark Mode

深色模式

Support three strategies (apply all):

@media (prefers-color-scheme: dark)
in

<style>

— works in Apple Mail, Outlook.com

color-scheme: light dark
meta tag and CSS property — opts into native dark mode handling
Transparent images — use PNGs with transparency so logos adapt to dark backgrounds; provide light/dark logo variants when possible

For full dark mode quirks per client, see

references/client-compatibility.md

同时应用三种适配策略：

在
```
<style>
```
中添加 @media (prefers-color-scheme: dark)
规则 — 适用于 Apple Mail、Outlook.com
添加 color-scheme: light dark
元标签和 CSS 属性 — 启用原生深色模式处理能力
使用透明背景图片 — 采用带透明背景的 PNG 格式，让 logo 可适配深色背景；条件允许时提供明暗两套 logo 版本

各客户端完整的深色模式兼容问题可参考

references/client-compatibility.md

。

Pre-Send Checklist

发送前检查清单

All CSS is inline (use a CSS inliner tool if needed)
Preview text is set and padded
All images have
```
alt
```
,
```
width
```
,
```
display:block
```
CTA buttons use VML fallback for Outlook
Links are absolute
```
https://
```
URLs
Responsive breakpoint at 600px tested
Dark mode classes applied to key elements
Unsubscribe link present (required for marketing emails by CAN-SPAM / GDPR)
Plain-text fallback available
Total email size under 102KB (Gmail clipping threshold)

所有 CSS 已内联（必要时使用 CSS 内联工具处理）
预览文本已设置并完成填充处理
所有图片都已添加
```
alt
```
、
```
width
```
、
```
display:block
```
属性
CTA 按钮已添加 Outlook 兼容的 VML 降级方案
所有链接都是带
```
https://
```
的绝对路径 URL
600px 响应式断点已测试
核心元素已添加深色模式适配类
包含退订链接（CAN-SPAM / GDPR 要求营销邮件必须提供）
纯文本降级版本已准备
邮件总大小低于 102KB（Gmail 截断阈值）