HTML邮件多平台适配

小子王
3,799 阅读4分钟

什么是HTML邮件

维基百科这样解释HTML email，说白了HTML邮件就是通过html超文本对邮件进行排版，如写入背景色、按钮、超链接，图片等，使得比普通邮件拥有更“花里胡哨”的内容。 然而写HTML邮件要注意的事情可多了，HTML邮件主要是为了排版，使得邮件更加多姿多彩，而因为安全原因，HTML的电子邮件客户端都会对邮件内容进行一定程度上的处理，会把很多标签给改掉，css样式不兼容甚至直接删除掉部分标签，最终使得你的排版在不同的邮件客户端表现不一。

存在问题

有一些HTML的电子邮件客户端没有按照W3C规范一致地呈现网页，从而导致渲染出来与所要效果不一致问题，如

标签被删除

邮件客户端对<head>中写<style>样式支持度不高，需要写成内联样式才不至于被丢弃。因为有些客户端直接把你head标签给删除了。

存在css兼容性问题 ：

写成内联样式，但是css不兼容，比如outLook邮件就不能使用flex去布局。常用邮箱css兼用性文档

js无法使用

JavaScript 是一种允许创建交互式内容的编程语言。 尽管它在网络上广泛传播，但几乎几乎所有电子邮件客户端会自动屏蔽包含这项技术的邮件，因为这类邮件可能有害。

Iframes

内联框架是一种 HTML 元素，它可以将一个网站的内容嵌入到另一个网站。IFrame 一般用于在其他网站中插入广告、视频、音频或表格。它通常包含一段 JavaScript 代码，因此会被大多数邮件客户端禁用。

嵌入式媒体

通常情况下，大多数邮件客户端默认不支持视频和音频。目前只有 Apple Mail 等少数客户端支持嵌入式媒体的 HTML5 和标签。除非您的大多数受众都在使用 Apple Mail，否则在邮件自动化营销中使用嵌入式媒体的效果并不理想。

注意事项

  • 使用table布局
  • 控制宽度
  • 使用css内联样式
  • 不支持 GIF 动画
  • 不支持网页字体
  • .........

要注意的问题太多太多了，有什么办法能尽可能的兼容所有邮件渲染问题呢？本人搜罗了一下解决方案：

以上大家可以都去体验体验，最终本人选择了简单易用，基本可满足需求的foundation-email。下面重点介绍 Foundation Emails。

Foundation for Emails

Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook. Our HTML/CSS components have been tested across every major email client to ensure consistency. And with the Inky templating language, writing HTML emails is now even easier.

是一个写响应式邮件的基础框架：

  • 集成了inky组件，通过这些组件可快速地区做页面布局，
  • 集成handlebarsjs模板语法，可以使用if条件，each循环语句，可提模板可重用性以及简洁度；
  • 支持scss变量，全局修改css
  • gulp支持了项目的开发调试，热更新，邮件测试，打包。

安装并使用

建议下载原项目的代码：github.com/foundation/… 我这份已经被我魔改了~github.com/AutumnWhj/f… node npm安装

brew install node
// 检测是否安装成功 node版本最好是v14.17.0 否则sass的关联依赖会装不上~
node -v 
// 转成taobao镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 安装依赖
cnpm install

调试开发

  • step1：在page下新建html文件resume.html
  • step2：执行npm run build，会自动打开3000端口服务。

若你的html文件命名为resume.html则修改访问地址为http://localhost:3000/resume.html，其他同理。

执行 npm run build后 dist目录下会生成同名的.html文件，这份文件为最终的适配文件。 ​

​

​

avatar
文章
阅读
粉丝