用途:该技能面向响应式、跨客户端 HTML 邮件模板与新闻简报的制作,输出为单个自包含的 .html 文件,目标是让邮件在真实邮件客户端(Gmail、Outlook、Apple Mail)中不被剥离或破坏。邮件渲染不同于浏览器渲染,当资料中的规则与常规网页设计直觉冲突时,以邮件规则为准。
主要能力与规则: 布局与样式:使用嵌套表格构建结构,不使用 flexbox、grid、浮动或 position;一个居中的外层包裹表格,最大宽度 600px,单列纵向流(堆叠行优于并排列)。所有样式内联到对应元素上。不使用 JavaScript(会被普遍剥离)、外部样式表和 Web 字体;使用邮件安全字体栈(Arial、Helvetica、Georgia、Verdana、Tahoma、'Courier New')并提供通用回退。视觉设计通过有颜色的表格单元格、边框、间隔单元格和文字实现,而非图片;由于此处无处托管项目图片,被引用的项目文件对收件人并不存在。若必须使用图片,则留出明确标记的占位单元格并附 alt 文本,并提示用户在发送前换成已托管的 https URL。按钮采用“防弹”做法:带内边距的表格单元格配 bgcolor 和内联 border-radius,其中链接以 display:block 和内联颜色填满单元格,不使用图片,也不使用加样式的元素。
客户端差异:Outlook(Word 引擎)需为每个表格/单元格指定显式宽度,用 mso-line-height-rule:exactly 设置行高,并将仅 Outlook 的修复放入条件注释中。Gmail 会截断超过约 100KB HTML 的邮件,需远低于该上限。补充暗色模式相关设置,并选择能经受暗色模式反转的颜色(避免纯 #000/#fff 背景,在中性底色上测试文字)。
送达率与无障碍:在 的首个元素放置隐藏的预标题 span(约 85 字符),用于在主题行旁显示预览;图片附 alt 文本, 设置 lang,使用真实链接(不用无效的 # 锚点),并在任何营销类邮件中加入含合理退订语句和邮寄地址的页脚。
使用方式:按上述规则设计并生成一个自包含 HTML 文件,以 600px 宽度展示设计,并在回复中说明该文件是可直接发送的 HTML,用户可放入其邮件工具中。
适用场景:需要跨 Gmail、Outlook、Apple Mail 稳定渲染的营销邮件、新闻简报与事务性邮件模板制作。
限制:不适合需要 JavaScript、外部样式表、Web 字体或托管图片的复杂网页式设计;Gmail 对 HTML 体积有限制;图片需用户自行托管并替换占位;具体收费、价格与平台信息暂未提供。