html注册页面样板_向HTML电子邮件样板打个招呼

最新推荐文章于 2024-03-14 11:43:09 发布

daique1908

最新推荐文章于 2024-03-14 11:43:09 发布

阅读量1.3k

点赞数

文章标签： java python html css 人工智能

html注册页面样板

弄清楚html电子邮件将测试任何人的耐心。似乎会出现一个很小的格式问题，您自己想： “我是世界一流的Web开发人员，受过最新，最出色的html5 / css3 /的教育，无论如何，我都可以通过大量按键操作来解决这个问题”。

几个小时/杯咖啡/谷歌搜索，您已经准备好拉出头发，并开始考虑对创建{{在此处填写空白电子邮件客户端}的创建人员）要做什么。这就是为什么出现HTML Email Boilerplate的原因。

HTML Email Boilerplate是设计或布局不存在的各种模板，可帮助您避免一些最常见的电子邮件客户端（Gmail，Outlook，Yahoo等）出现的一些主要渲染问题。- HTML Email Boilerplate

这里的样板为您提供了一些示例和有用的技巧，以使您的电子邮件设计呈现尽可能真实。您可以使用样板作为构建电子邮件的起点。或者，您更高级的用户可能希望根据您的需求选择特定的片段。

在本文中，我们将细分样板的一些关键方面，并讨论如何实现它。

但是在开始之前，让我们回顾一下html电子邮件的一些基本租户：

您唯一可以在外部引用的是图像。没有外部样式表，字体，视频（尽管html5开始对此进行更改）等。
跨电子邮件客户端（电子邮件客户端= Outlook，Gmail，Hotmail，Yahoo等）CSS元素支持有限。您可以在此处查看有用的电子表格，以了解哪些客户端支持哪些功能。
表格最常用于布置HTML电子邮件。
而且几乎是恶作剧的，您需要在电子邮件客户端，浏览器和操作系统之间进行测试。

1：设置DOCTYPE

尽管许多电子邮件客户端删除了doctype或根本不允许使用该文档类型，但这并不意味着我们不想为自己的测试目的设置一个。在这种情况下，使用XHTML 1.0 Strict文档类型主要是因为两个删除了您的文档类型的流行客户端Gmail和Hotmail将其用作默认文档。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2：处理图像

使用HTML电子邮件中的图像时，需要注意一些问题：

将图像链接到另一个页面可能很棘手。不同的客户端会在可点击的图像周围设置不必要的（丑陋的）边框。
一些电子邮件客户端在图像底部添加额外的空间。
由于许多电子邮件客户端默认情况下会关闭图像，因此邮件的格式/框架可能会失真。

为了解决这些问题，样板在文档的开头设置了一些合理的默认值。它将链接图像周围的边框重置为零。它设置了一个类（image_fix），以在您不希望在图像下方占用空间时使用。该样板还为您提供了一个如何设置图像的示例，始终设置宽度，高度，高度和标题。这有助于保持格式的完整性和一致性。

/* Some sensible defaults for images
		Bring inline: Yes. */
		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
		a img {border:none;} 
		.image_fix {display:block;}

该样板有助于管理在html电子邮件中使用图像时可能遇到的一些问题。内联这些声明，以确保您的电子邮件能够按预期呈现。

3：表格，表格和更多表格

假设您之前曾使用过表可能是安全的。我的意思是，自（互联网）时代来临以来，桌子就出现了。尽管不是最新的或最酷的方法，但是表格是HTML电子邮件最常见的框架工具，并且是一种有效的有效间隔方法。除此之外，嵌套表是一种将内容分组和分离以征服最复杂设计的好方法。

样板为您设置了一些处理表格的起点。第一个是最外面的表（ #backgroundTable ），它充当各种容器—扩展到电子邮件客户端中可见空间的宽度。这是必需的，因为某些客户端会随意限制要渲染的区域-可能会导致内容对齐异常。

#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
	<tr>
		<td valign="top"> 
		...

#backgroundTable类可在设置画布供您使用时帮助重置某些电子邮件客户端特定的格式。

第二个（内部）表居中并设置为像素宽度（600px），这是一个很好的宽度，可用于防止电子邮件扩展到比电子邮件客户端可见的空间更大的范围（请考虑预览窗格）。

此外，如对图像所做的那样，样板为表设置了一些默认值，以帮助避免格式问题。边框，单元格填充，单元格间隔设置为零，内容垂直于单元格顶部对齐。

注意：由于电子邮件客户端中对div的支持有限，因此Tables是最好的，有时是格式化和定位内容的唯一机会。

4：客户端特定的修复

这个样板以及其他类似样板存在的大部分原因，是为了阻止似乎被雅虎，谷歌，微软等人破坏的随机破坏行为。雅虎将您的段落页边距设置为零，从而将文本合并成一个大块。 Gmail无视（实际上是消除了）文档头部的任何样式，并随意拧紧图像。 Hotmail讨厌标题，而Outlook一直是任何HTML电子邮件发送程序存在的祸根。

因此，样板试图在可能的情况下消除其中一些细微差别，并减轻其余影响。

具体来说，对于Yahoo，样板将文件标题中的段落边距设置为1em，并指示将其内联。（更多内容稍后会进行“内联”）

p {margin: 1em 0;}

变化：

对此：

对于Hotmail，样板将覆盖Hotmail的绿色标题样式，规范行高，并设置默认宽度。

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

h1, h2, h3, h4, h5, h6 {color: black !important;} /* or whatever color you want it to be */

对于Outlook，样板设置为“边界折叠：折叠”以摆脱某些默认填充。

提示：通过在文档的头部设置#outlook a {padding:0;} ，可以强制Outlook提供“在浏览器中查看”选项。一个有趣的功能，如果其他客户提供了，那就太棒了。（H / T Fabio Carneiro和MailChimp提供了这个出色的摘要。）

5：手机

移动是构建HTML电子邮件的更令人兴奋的领域之一。从标记的角度来看，我们大部分时间都停留在20世纪，但新的智能手机让我们对生活有了什么样的了解。最后，我们有机会使用“较新的”网络技术。我们可以在响应式设计领域嬉戏，可以查询我们的内心世界，并且可以肯定地针对不同的平台。好的，所以也许我有点生气，但是鉴于电子邮件的状态，移动每天都在改善。

考虑到移动渲染，样板为移动定位提供了一个很好的起点。它有助于调整字体大小（或停止字体大小）。通过将视口设置为设备的宽度，有助于优化移动电子邮件。它还为您提供了针对iPhone（3 + 4），平板电脑（通过分辨率），Android手机和Windows Mobile的条件语句所需的@media查询。

提醒：您不应将@media查询中声明的任何样式内联。

6：使用EBP：何时以及如何将样式内联

Dialect的Premailer之类的工具使内联变得轻而易举。任何html电子邮件发送者都可以使用的好工具，可以将其放在胸，皮带或口袋中。

如前所述，有些客户端会在标头中剥离您的嵌入式样式。我们只需要在标头中嵌入样式并将它们嵌入就可以采取另一步骤。您既可以手动执行此操作，也可以使用内置的电子邮件客户端工具（例如内置了Campaign Monitor和Mailchimp的流行工具），也可以使用独立的工具（例如Premailer）。无论哪种方式，请按照样板中的说明确定要内联的内容。

为了让您了解我们在说什么，请看一下文章中提到的Yahoo段落修复。必须内联才能工作。如果没有，您的边距声明将被忽略，您的段落将聚在一起。另一方面，样板中的另一个修复程序不需要将针对table td {border-collapse: collapse;}标记作为内联对象，该标记针对Outlook中的填充问题。 Outlook将尊重您的嵌入式样式（嗯，在大多数情况下是：）。

举个例子，您可以从这里开始：

p {margin: 1em 0;}

<p>Pellentesque habitant morbi tristique senectus ...</p>

对此：

p {margin: 1em 0;}

<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">Pellentesque habitant morbi tristique senectus ...</p>

请记住，@ media查询之后的任何样式都不应内联。我建议删除查询的样式，直到您对您的电子邮件满意为止，然后在内联其他样式后再使用它们。

7：一些光荣的提及

有几个主题值得一提，但由于某种原因而没有成为样板。

HTML5视频：尽管确实非常接近，但Hotmail中存在一些主要的支持缺陷，使其难以使用。现在正在测试一些有趣的策略，这些策略可以在许多客户的电子邮件中呈现实际的视频，并且可以优雅地降级为可点击的图像。但是，Hotmail会在整个过程中造成一些麻烦，因为它将显示视频并允许播放，但没有任何视觉控件。右键单击是可行的，但要求读者这样做似乎有些麻烦。您也可以将视频设置为自动播放-但是您真的可以那样做吗？
Facebook的Open Graph：可能是下一个版本的候选人。我仍在权衡在电子邮件中添加邮件的效果，尤其是如果没有提供该电子邮件的浏览器版本-应该存在吗？

8：电子邮件状态

CSS3？让我们先进入CSS2。

许多电子邮件发送者感叹他们必须像1999年那样进行编码。表而不是div是最高的。 CSS3？让我们先进入CSS2。电子邮件客户端随机支持标签，声明和整个规范。但是，随着iOS设备的出现以及客户端空间的一些变化，诸如Webkit之类的渲染引擎正在弹出，使电子邮件发送者的生活变得更加轻松。由于这个因素和其他因素，我们看到了一些最复杂，最精美的设计。对于电子邮件发送者来说，这绝对是一个令人兴奋的时刻。

这种运动与移动设备特别是iOS设备有很多关系。截至今年6月，第二受欢迎的电子邮件客户端是iOS设备。这意味着我们可以使用Webkit浏览器支持的大多数内容来构建电子邮件-CSS3，HTML5之类的东西都可以发挥作用（woohoo）。不过，不要太兴奋，在许多其他台式机/网络电子邮件客户端（不是woohoo）中，您仍然不得不考虑非常有限CSS 3或HTML5不支持。

话虽如此，标准的提高无疑使本来已经很复杂的空间变得更加复杂。例如，虽然某些电子邮件客户端正在转向基于Web的标准，但Mac上的Outlook现在像与Apple Mail相对应地一样使用webkit，但大多数桌面电子邮件和基于Web的客户端正以乌龟般的步伐转向可接受的html / css支持。因此，尽管移动设备向我们展示了隧道尽头的光影，但它还在已经拥挤的测试可能性矩阵中增加了另一列。

就像我之前提到的，对于电子邮件用户来说，这绝对是一个令人兴奋的时刻。这么多伟大的公司和个人竭尽所能，势必会（至少我肯定希望如此）势头将事情推向正确的方向-“事物”是指更好的html / css支持，一点点标准化，减少头痛。

结论

这里的样板展示并强调了为电子邮件和电子邮件客户端开发的一些陷阱。尽管不能完全即插即用，但需要一点弯头润滑脂，它会提供一些有用的示例和摘要，以使您的电子邮件设计呈现的外观尽可能真实。至少，它将为您节省一些搜索时间，更重要的是，您可以节省一些头发。

我希望收到您的回音。如果您希望在样板中看到任何内容，请在这里或@seanpowell 告诉我。

当涉及到它时，HTML Email Boilerplate只是我的办公桌上出现的技巧，摘要和最佳实践的汇总，我不愿提及Ros Hodgekiss，Brian Theis和在Campaign Monitor的团队；并感谢Fabio Carneiro和Mailchimp所做的出色工作（以及样板使用的出色重置）。还使用两个出色的电子邮件测试工具Litmus和Acid on Email来加快进度，如果没有它们，这将是不可能完成的任务。

我经常使用的一些...