html电子邮件签名_有关HTML电子邮件的知识

html电子邮件签名

电子邮件是一种很棒的媒介。它直接进入收件箱，据报道，它的投资回报率高达4000％。它也永远被误解，并且常常做得不好。随着最近智能手机的爆炸式增长，我们越来越经常在iPhone或Galaxy上阅读邮件，但不幸的是，许多电子邮件营销未能跟上发展的步伐。我认为这是一个巨大的错失良机，因为打开并执行得非常好的电子邮件很有趣，而且非常成功。

编码HTML电子邮件可能是一个挑战

如果您已经尝试过HTML电子邮件的设计和开发，那么您可能已经确定这很困难。而且您没有想象到-这很难。原因如下：

电子邮件标准不存在

[我们将]继续使用Word创建电子邮件，因为我们认为这是最好的电子邮件编写体验。

展望团队

当您为网络编写代码时，您至少可以指望所有主流浏览器（Chrome，Firefox，Internet Explorer，Safari和Opera）都试图遵守Web标准以呈现HTML和CSS。

对于电子邮件客户端，您正在测试大量的新旧程序。从运行在Android和iOS上的新手机到IBM的Lotus Notes或Microsoft Office 2007（使用Word HTML渲染引擎臭名昭著地渲染您精心创建HTML），Outlook的早期版本都使用浏览器来渲染HTML（实际上是他们说，为什么要切换到文字处理器来呈现您要求HTML？嗯，出于“ 安全原因 ”。这些程序都不必遵守任何标准。他们基本上都只是弥补。您可以在“ 电子邮件标准项目”中查看一些最受欢迎的电子邮件客户端的标准支持情况。

如果这还不够糟糕，请将其与下一个事实结合起来：电子邮件可以在台式机和移动设备上呈现的方式大约有百万种不同的组合。

以下是一些最常见的电子邮件客户端的列表：

行动客户：

Android 2.3和4.0
iPhone 5 iOS 6
iPhone 4S iOS 6
iPhone 3GS iOS 5
iPad 2 iOS 6
BlackBerry OS 4和5
塞班S60
Windows Phone 7.5

桌面客户端：

苹果邮件4，5，6
Lotus Notes 8.5
莲花笔记8
雷鸟
Windows Live Mail
展望2013
Mac版Outlook 2011
展望2010
Outlook 2007
Outlook 2003
Outlook 2002 / XP
展望2000

网络邮件客户端：

AOL Mail（在任何浏览器上）
Gmail（在任何浏览器上）
Outlook.com（在任何浏览器上）
雅虎！（在任何浏览器上）

有很多设备！

如果您已经熟悉Web开发，请忘记所有有关它的知识。

要使所有这些复杂化，条件样式也不是一种选择。您可以对条件注释执行某些操作，但仅限于定位某些特定版本的Outlook或除某些特定版本的Outlook 以外的所有内容。

如果您已经熟悉Web开发，请忘记所有有关它的知识。您面临的最大障碍是期望事情像“正常”的Web开发一样工作。这会让您感到沮丧，并使您退缩。您能做的最坏的事情就是生气，因为您无法使用DIV，或者没有完全支持margin 。因此，请忘记您对语义HTML和最新CSS规范的了解。相信我，它将有所帮助。

如何进行工作

让我们看一些构建电子邮件的工作流程建议。

首先进行结构性工作

首先构建电子邮件的结构可以帮助您避免以后出现许多错误和问题。永远不要构建整个事物然后进行测试-您可能最终会遇到太多错误要处理，并且它们可能相互影响。

经常测试

进行工作，直到达到次要的开发里程碑（例如，完成基本结构时），然后运行测试。最好的测试方法是在石酸上使用石蕊或电子邮件。我建议与这两家公司中的任何一个制定无限计划，因为能够经常进行测试非常重要。

我也非常喜欢保留所有表格边框，以便可以看到自己正在创建的内容，然后最后将它们全部关闭。您也可以为某些单元格的背景着色，以帮助查看哪些部分在哪里。我理想的工作流程是创建骨架，进行测试，然后添加我的内容，进行测试，设置颜色和字体的样式，再次进行测试，最后删除边框并再次进行测试，然后再发送。

经常验证

尽可能多地使用W3C验证程序对其进行验证。这将帮助您消除一些小细节，并弥补诸如丢失或打开标签之类的错误。

发送您的电子邮件

在发送电子邮件时，有很多选择。我最常使用的两个服务是MailChimp和Campaign Monitor 。它们提供具有竞争力的价格，并且非常易于使用。也有大量的商业平台-这一切都取决于您的需求。使用这两个帐户注册一个免费帐户，然后在其系统中进行修补，以查看您喜欢哪个帐户。确保您利用两种服务收集的有关电子邮件的有用数据，例如开放时间和电子邮件客户端使用情况。这确实可以帮助您下次发送邮件时将精力集中在正确的区域。

内容，开发和垃圾邮件得分

关于垃圾邮件；内容，设计和开发齐头并进。避免使用典型的垃圾邮件策略，例如在主题行中使用大写字母和大量感叹号，这一点很重要。有些词也可能会触发垃圾邮件过滤器（例如“免费”和“投资”）。代码越干净，电子邮件被标记为垃圾邮件的可能性就越小，并且图像与文本的比例也会产生影响。没有文本的依赖图像的电子邮件更有可能被标记为垃圾邮件，具有非常长的图像文件名的电子邮件也被标记为垃圾邮件。

SPAM评分是一个棘手的问题，在发送电子邮件之前，请通过您的带有Litmus或Acid上的Email的测试帐户运行SPAM测试，这一点很重要，以确保您的所有辛苦工作不会直接进入垃圾文件夹。

潜入发展

现在，关于电子邮件开发的精髓。

贸易工具

您需要一个喜欢的文本编辑器（我使用Sublime Text ）和一个Litmus或Acid上的Email的测试帐户。我强烈建议您在这两家公司中拥有无限的测试帐户，因为这将使您的生活变得更加轻松。如果您不按月支付费用，则每次测试的最终费用在3美元到5美元之间，这可能会很快加起来。

从良好的基础开始

我认为从空白开始就很好。 HTML Email Boilerplate之类的框架充满了许多绝妙的技巧和片段，您可以逐个实现这些片段。但是，如果您只是入门，则不建议您将其用作起点，因为它包含许多您不需要的元素。如果文件中有许多未使用的代码，那么样板常常使解决任何问题变得更加困难。

注意：因为使用任何类型的编辑器都可能非常不稳定（尤其是在进行故障排除时），所以您永远不要使用WYSIWYG编辑器，或任何承诺采用格式化设计并将其神奇地转换为有效HTML的编辑器用于发送电子邮件。这些东西永远都行不通。

！DOCTYPE

开始时似乎是技术细节，但是您需要一个空白模板才能开始使用，并且该模板需要Doctype。 doctype本质上是一行代码，它告知程序正在读取它的程序期望哪些HTML标签以及HTML和CSS遵循哪些规则集。相当多的客户端将您的Doctype剔除掉，有些甚至应用了自己的。许多客户都尊重您的doctype，如果您可以不断根据doctype进行验证，则可以使事情变得容易得多。

使用XHTML文档类型通常具有最少的怪癖和文档之间的不一致之处。我使用XHTML 1.0 Transitional，是因为它已证明是我经验中最可靠的文档类型。在下面的教程中，我们将构建一个完整HTML电子邮件模板，我们将使用以下代码开始我们的文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

Content-Type元标记用于告诉目标呈现引擎如何处理文本和特殊字符。实际上，为了安全起见，您仍然需要对所有特殊字符进行编码（例如，＆变成＆amp;用于＆符），但是仍然值得在此保留该行。

视口元标记告诉设备将可见区域设置为设备屏幕的宽度。还将初始比例设置为“正常”，既不放大也不缩小。如果您未指定此选项，则许多智能手机可能会将您的内容按比例缩小，以使内容适合可见区域，但不包含任何填充或边距。这会导致文本和图像紧靠屏幕边缘。

最后，请始终输入有意义的标题，因为这是人们在浏览器中查看电子邮件或与朋友共享电子邮件时会看到的标题。

电子邮件就是有关嵌套表的全部内容

由于电子邮件中缺乏标准支持，因此无法使用div，节或文章-而是必须使用表格。而且，您需要使用很多嵌套表，因为colspan和rowspan属性均不受支持。

段落或单元格？

同样，由于缺乏标准支持，因此使用诸如h1 ， h2 ， h3或p类的标准标记并不是一个好主意。我发现这些内容在电子邮件客户端之间的呈现确实不一致，并且可能会造成一些麻烦。

最好的选择是将每个文本块放入其自己的单元格中，然后对该单元格应用内联样式，例如：

<tr>
<td style=“font-size: 12px; font-family: Arial, sans-serif; color: #666666;”>
Text
</td>
</tr>

内联样式或样式表？

这更多是个人选择。我更喜欢将所有样式都保持内联（即，在HTML标记本身内），因为我想确切地知道所有内容在哪里以及什么会影响什么。您可以使用样式进行编码，然后将所有样式最终内联（Campaign Monitor和MailChimp可以自动为您完成此操作，您也可以使用Premailer或类似的工具），但是我不喜欢这样做的原因是因为您了解您的代码，通过内联代码运行它，然后您的代码可能会变得有些难以识别。我发现这使故障排除更加困难。这样说，如果这是您想要的工作方式，那就很好了；没有技术原因，您不应该这样做。

不要忘记：您不能将多个类应用于HTML电子邮件中的内容，因为它不受支持。每个元素最多可以具有一个类。

也不要忘记：您不能使用速记来表示字体大小（例如style =“ font：8px / 14px Arial，sans-serif;”），因为它不受支持。

图像名称和垃圾邮件得分

保存图像时，请记住，为图像命名简短而有意义，因为这将提高垃圾邮件得分。像“ campaign_054_design_0x0_v6_email-link.gif”之类的名称比“ email.gif”具有更高的垃圾邮件得分。

图片大小

尝试使您的整个电子邮件尽可能地小，这也是一个非常不错的主意：低于100kb是理想的选择，但并非总是可能的；低于250kb是相当标准的。发送前，请使用JPEGmini或tinyPNG之类的压缩应用程序将所有图像尽可能地缩小。如果文件总大小太大，加载时间较慢（尤其是在移动设备上）可能会破坏您的电子邮件。

其他陷阱

不要将任何东西留给电子邮件客户端。指定所有宽度，否则可能会导致意外结果。对于主容器元素，请始终以像素为单位设置大小。然后，您可以根据需要在包含元素中使用百分比。

结论

在设计和开发HTML电子邮件时，要考虑很多因素，其中大多数涉及“非学习”标准，多年来一直鼓励您实践这些标准以进行Web设计。但是，本教程应该为您提供了扎实的基础，并且现在您可以跳入实际的构建过程。向前！

我在本教程中引用了一些内容，因此在这里它们又一次都集中在一个地方。

翻译自: https://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908

html电子邮件签名