许多人希望创建最佳的电子邮件活动，并且可以通过遵循电子邮件设计和编码的最佳做法以及正确实施高级技术来实现此目标。这份针对新手和专业人士的综合指南，将深入研究电子邮件营销的精髓。
这是您将学到的东西：
- 电子邮件设计的最佳做法，从创建主题到设计页脚；
- 如何在电子邮件中添加图像并将富媒体（GIF，电影胶片，视频）合并；
- 如何设计响应式电子邮件以获得更好的用户体验；
- 电子邮件客户端支持响应式移动电子邮件；
- 最后，电子邮件设计中的高级技术。
介绍
电子邮件已经从基于普通文本的个人交流工具转变为面向未来的营销渠道。我们已经进入了一个视觉吸引人的HTML电子邮件世界，这些电子邮件在收件箱中具有微型站点的感觉。
因此，如果您想避免破坏用户体验而提高用户参与度，则必须熟悉电子邮件编码的最佳实践。此外，随着数字世界变得更加移动，创建响应式电子邮件已成为一个小时的需求。
在本文中，我们将更深入地研究适用于所有电子邮件客户端的最佳实践，以及可用于支持交互式元素的电子邮件客户端的高级技术。
让我们从电子邮件的基本结构开始。
基本电子邮件结构
正如莱昂纳多·达·芬奇（Leonardo da Vinci）所说，“简单是最终的复杂性。”因此，请保持电子邮件的设计简单。
查看以下慈善机构提供的电子邮件设计：水。简单但引人入胜。
开发人员已经使用<table>布局对电子邮件进行编码已有很长时间了。因此，建议您将电子邮件元素放置在基于网格的布局中，而不是随意放置。而且，任何可能重叠的元素都需要添加到不同的层。
上面由“慈善机构：水”显示的电子邮件在导出为表格布局时如下所示：
电子邮件设计由不同的子元素组成。让我们现在探索它们。
1.电子邮件主题
徽标不是反映您品牌个性的唯一元素。电子邮件的整体主题，包括字体，配色方案和图像，应与品牌准则保持同步。
2.电子邮件模板的宽度和高度
由于您的订阅者使用各种电子邮件客户端和设备，因此您的电子邮件应在所有电子邮件客户端的预览窗格中适当显示。请记住，电子邮件将根据电子邮件服务提供商或客户端的显示窗格显示。仅某些电子邮件客户端（例如Thunderbird，Apple Mail和本机移动电子邮件客户端）将以全角显示电子邮件。
对于其他电子邮件客户端，显示框的大小可变。许多服务提供商（例如MailChimp）都通过建议使用600至800像素的宽度来遍历HTML电子邮件的基础知识，以便显示完整的电子邮件。请记住，大多数订阅者从不使用电子邮件中的水平滚动条。
电子邮件模板的高度通常应该足够长，以在两个滚动长度内容纳您的副本。如果您必须传达大量信息，则当然可以有更长的电子邮件模板。但是，如果您的电子邮件模板过长，可能会使订阅者感到无聊，订阅者不太可能滚动到最后查看包含的所有优惠和促销信息。
大多数电子邮件客户端的预览窗格的高度（包含通常称为“首屏”的内容）通常在300到500像素之间。充分利用此空间，以便折叠上方的内容诱使订户向下滚动。
每个电子邮件开发人员都知道，如果电子邮件的文件大小超过102 KB，Gmail的应用程序将裁剪电子邮件，并且他们将无法跟踪指标。
请查看下面的屏幕截图，查看裁剪后的电子邮件在Gmail中的外观：
为了避免Gmail的剪辑，请确保您的电子邮件中没有不必要的代码且格式没有过多。尽量简化电子邮件设计，不要缩短网址。请注意，图像不会嵌入到电子邮件中，因此不会增加文件的大小。话虽如此，删除不必要的图像将有助于减小电子邮件的大小。
对于使用预先设计的模板的营销人员，高度和宽度已经得到了照顾。如果要使用自己的设计，请考虑电子邮件模板的理想宽度和高度。
3.电子邮件正文
电子邮件通常从顶部的英雄图片开始，然后是主要副本，号召性用语，然后是页脚。
由于大多数人在距离大约2到3英尺的屏幕上阅读，因此h1标题的大小应为16像素左右；如果标题很短，则甚至可能高达20像素。一个好主意是将h1标题与有吸引力的英雄图像一起显示为文本。
描述性文字不得小于12个像素。在所有电子邮件客户端和设备上应易于阅读。此外，段落的对齐和段落大小也起着重要的作用。
4.号召性用语
电子邮件营销的主要目标是说服客户采取行动。为此，您的号召性用语（CTA）应该具有引人入胜且可操作的动词。请使用令人信服且可行的文字，例如“开始免费试用”，而不要使用单调的短语，例如“单击此处”。
ContentVerve进行的一项有趣的研究“ 从真实按钮测试中获取的10个号召性用语案例研究 ”显示，无论产品如何，在CTA中使用第一人称视角都会使点击次数增加90％。例如，“获取我的免费副本”的转换效果比“获取我的免费副本”的转换效果更好。
通过添加“现在”一词，在CTA中产生紧迫感，并获得更高的点击率。
Campaign Monitor在其指南之一“ 优化号召性用语的十个技巧 ”中强调，CTA按钮应始终与背景色形成强烈对比，以使其不会融合在一起并引起订户的注意。根据您的目标受众，您的行业和要传达的消息（包括定期发送的CTA）可以提高电子邮件的转化率和所需的订阅者操作。它的高度至少应为30像素，并且应该可以用拇指在移动设备上轻松轻按。
查看来自Asana的以下电子邮件。它从战略上将CTA放在第一折之上，并且遵循上述CTA最佳做法。
5.图像和互动元素
如果您要在电子邮件中放置图像或富媒体，请添加相关的替代（alt）文本，以便即使电子邮件客户端阻止了视觉效果，也可以保留电子邮件的用途。这也对可访问性很有帮助，因为屏幕阅读器将能够阅读替代文本并传达您的消息。
大多数电子邮件营销人员倾向于发送包含单个图像的电子邮件，这是MailChimp编译的许多常见HTML错误之一。建议将文字与图片的比例设置为80到20，以确保电子邮件不会被垃圾邮件过滤器困住。根据MailChimp的最新研究，每个图像200个单词产生了良好的点击率。
在电子邮件中使用链接的图像可确保最佳文件大小。使用<img>标签从外部服务器加载图像。
该技术的主要优点是，即使在发送电子邮件之后，您也可以更改图像。它使电子邮件点亮，并减少了发送电子邮件所需的时间。缺点是订户必须从外部服务器下载图像，这将导致按计量连接的用户需要下载图像，并且图像也可能会被某些电子邮件服务阻止。
如今，诸如GIF，电影和视频之类的富媒体元素在电子邮件中正变得越来越流行。
您只需将文件上传到存储图像的服务器，即可在电子邮件中添加GIF或电影胶片。然后，复制URL并使用以下HTML：
测试电子邮件，以确保GIF正常运行。
嵌入视频是一种非常适合Web开发的技术，但是不幸的是，电子邮件不支持嵌入视频。因此，选择HTML5视频。
要在电子邮件中添加视频，请使用以下代码：
HTML5主要支持MP4，OGG和WebM视频格式。
专家提示： Apple在其电子邮件客户端和浏览器中支持MP4视频格式。
需要记住的几点：
确保您使用的服务器配置可以输出正确的MIME类型，以便电子邮件客户端在检索视频时标识正确的视频格式。
如果您使用的是Apache Web服务器，请将此条目添加到
.htaccess文件：中Add Type video/mp4.mp4 m4v。
6.电子邮件折数
如前所述，您的电子邮件应该只有两折。第一折应该抓住您的品牌，并在h1标题中加上相关的CTA。如果您的电子邮件模板超过两个滚动条，则第三个滚动条应交叉销售您的产品。这个想法是通过提供有趣的信息来改变内容并吸引订户。
7.页脚
页脚是所有电子邮件中最被忽略的部分。但是，它可能具有订户正在寻找的信息，例如公司地址，社交共享按钮和联系方式。为了使您的电子邮件兼容CAN-SPAM，页脚应包含一些其他元素。
“退订”链接应允许订阅者轻松选择退出您的邮件列表，并减少垃圾邮件的投诉。
您的联系方式应链接回公司网站，并应包括您的邮政和电子邮件地址。
此外，您可以使用辅助链接，例如“转发给朋友”和“在浏览器中查看”。
如Bee的“ 页脚设计最佳实践 ”所述，电子邮件的精美印刷应包含以下部分：
- 收件人为何收到此电子邮件的说明
您的订阅者可能已订阅了许多邮件列表。巧妙地提醒收件人接收电子邮件的原因，以保持您作为电子邮件发件人的声誉并最大程度地减少垃圾邮件投诉。 - 版权
包括版权标记，以及当年和您的公司名称。 - 隐私权政策
链接到您的隐私权政策，因为订户应该知道该信息的存储位置。这对于电子商务零售商至关重要。 - 使用条款
如果要发送强调折扣优惠的促销电子邮件，请共享管理交易的使用条款。
设计页脚
将信息塞入页脚听起来很诱人，但您应该确定最重要的业务信息并将页脚限制在最小范围内。用太多的信息填充它可能导致读者完全忽略它，因为他们将无法确定要单击的链接。
在“身体上的棉花”下面查看页脚。尽管它组织得很好，但对于正在扫描电子邮件的订户来说可能是不堪重负的。
移动响应电子邮件
大多数用户会在手机上查看电子邮件。由于这种趋势，您的电子邮件应该及时响应。响应式设计包括多个元素，例如媒体查询，流畅的网格和流畅的图像，因此，无论屏幕大小或设备如何，用户都可以按预期方式查看电子邮件。响应式电子邮件设计的基础包括table元素，易于堆叠的部分和全角CTA。
如果您的订户列表由许多移动用户组成，请避免布局重叠。隐藏非主要部分，例如导航和电子邮件广告，以迎合移动用户。也可以使用特定于移动设备的电子邮件元素，例如导航菜单和图像滑块。
这些电子邮件客户端支持响应式电子邮件设计：
- iOS Mail应用
- Windows Phone 7.5
- Android 4.x电子邮件（OEM）应用
- 黑莓Z10
- 黑莓OS7
- iPhone Gmail应用程序
以下电子邮件客户端不支持响应电子邮件：
- Android Yahoo Mail应用程序
- iPhone Yahoo Mail应用程序
- 黑莓OS 5
- Windows Phone 7
- iPhone邮箱应用
- Windows Phone 8
- Android Gmail应用
- Windows Mobile 6.1
响应式设计使您可以执行以下操作：
- 改变等级
- 修改导航，
- 放大字体，
- 更改布局，
- 缩放图像
- 添加填充，
- 更改或隐藏内容。
设计响应式电子邮件
为了使电子邮件具有响应性，开发人员使用媒体查询，该查询通常称为@media。它是一组特殊的CSS样式，包含在标头中，可以用作条件语句或动态规则。
媒体查询的重点是识别正在使用的设备的屏幕尺寸，并根据该屏幕尺寸执行各种规则。面临的挑战是，与其他设计技术相比，媒体查询无法在所有电子邮件客户端中使用，并且可能需要详细的计划和测试。
看看下面的媒体查询：
当在屏幕宽度介于479到701像素之间的设备上访问此电子邮件时，根据width: 100% !important;属性，电子邮件的宽度将为100％。该!important功能会在电子邮件客户端（例如Gmail）中强制使用此属性，而该属性可能会被忽略。
CSS规则块中的样式应指定样式将指示的容器或元素类型。如果您希望它们起作用，请在HTML中分配这些规则。
这是CSS：
这是HTML：
在CSS和HTML中添加的元素（td）和类（body-header）必须彼此匹配，这一点很重要。
先进技术
随着基于Webkit的Apple Mail等高级电子邮件客户端的出现，电子邮件开发人员甚至可以玩关键帧动画，诸如轮播的交互式元素和实时供稿。
针对不同的电子邮件客户端（例如Outlook以及三星和Apple设备）的条件编码也已成为可能。
如果您遵循这些简单的技巧，则无论您是电子邮件编程的新手还是专业人士，您都一定能够创建出色的电子邮件营销活动来进行转换。最后，旨在创造良好的用户体验并使订户期待您的电子邮件。祝您发送电子邮件愉快！
