制作简单的响应式HTML邮件

2023-08-02 10:06:26

在这次教程中，我将为你展示怎么制作简单的响应式HTML邮件，并且能适应各种邮件客户端，包括所有新的智能手机邮件客户端和邮件应用程序。我们将使用到尽可能少的media queries和流动式设计来取得最大的兼容性。

Media Queries：只能解决一半的问题

曾经有一段时间media queries足够解决iOS和Android的邮件应用中响应式分布的问题，因为这两者都支持media queries。

然后iOS和Android平台上新的邮件应用开始泛滥起来，每个应用对响应式邮件的支持各不相同。

最值得关注的时Android平台最近更新的Gmail应用，使用频率是原生系统邮件应用的两倍之多，（目前贡献11%的邮件点击率）。这个应用以前不支持media queries，现在也还不支持，但现在会通过压缩外部table来缩放邮件，使邮件缩小适应屏幕大小。当你的整个邮件的布局在手机中都依靠media queries时，情况就变得十分难控制，产生不理想的效果。

为什么流动式设计是新的潮流

庆幸的是你可以设计和制作适应各种邮件应用的布局，包括那些不支持media queries的。你可以使用流动式设计。

然而，在某些设计上你需要作出妥协。那些把多栏等分放在一栏的布局不适用于这种方法。如果你能尝试着不使用这种方式，有些其他的设计能够派上用场。

这就是我们今天要制作的邮件：

Final-Product-Both

开始准备

首先准备空白的文档。


<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>A Simple Responsive HTML Emailtitle><style type="text/css">body {margin: 0; padding: 0; min-width: 100%!important;}.content {width: 100%; max-width: 600px;}  style>head><body yahoo bgcolor="#f6f8f1"><table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0"><tr><td><table class="content" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>Hello!td>tr>table>td>tr>table>body>
html>

我们现在要制作的页面包含header，doctype和作为容器有背景颜色的table（由于body标签样式没有兼容支持，这里使用body和table作为外层封装）。想了解更多关于这一步的信息，看这里从零开始制作HTML邮件模版。

我还加入了放主要内容的table标签，设置居中对齐，class为’content’。

注意

注意：你会发现在本教程中我将把CSS放在文档的head标签里面。通常我把样式放在head里是因为我将会重用样式，只用一次的样式放在行里。

重要： 任何时候你把CSS放在head标签的时候，在差不多完成的时候你必须使用工具把所有样式放在一行。如果你使用MailChimp或者Campaign Monitor，当你导入你的设计时系统会自动帮你把样式改成一行。你必须进行这一步因为有些客户端，比如Gmail，会忽略或者去掉你的