电子邮件营销与自动化手机和平板电脑营销
最大化收件箱放置和参与度的 16 个移动友好 HTML 电子邮件最佳实践
到 2023 年,移动设备很可能会超过台式机成为打开电子邮件的主要设备。 事实上,HubSpot 发现 46 percent 的所有电子邮件打开现在发生在移动设备上。 如果您不是为移动设备设计电子邮件,那么您就会失去很多参与度和金钱。
- 电子邮件认证: 确保您的 电子邮件已通过身份验证 到发送域和 IP 地址对于进入收件箱而不是路由到垃圾邮件文件夹至关重要。 当然,您还必须提供一种使用包含取消订阅链接的平台来选择退出电子邮件的方法。
- 响应式设计: HTML 电子邮件应该是 旨在响应,这意味着它可以根据正在查看的设备的屏幕尺寸进行调整。 这可确保电子邮件在桌面和移动设备上看起来都不错。
- 清晰简洁的主题行: 清晰简洁的主题行对移动用户很重要,因为他们可能只会在电子邮件预览窗格中看到主题行的前几个词。 它应该简短并准确地反映电子邮件的内容。 电子邮件主题行的最佳字符长度可能因多种因素而异,例如电子邮件内容、受众和所使用的电子邮件客户端。 然而,大多数专家建议保持电子邮件主题行简短而切题,通常在 41-50 个字符或 6-8 个单词之间。 在移动设备上,超过 50 个字符的主题行可能会被截断,在某些情况下,可能只会显示主题行的前几个词。 这会使收件人难以理解电子邮件的主要信息,并可能降低电子邮件被打开的可能性。
- 预报头: 电子邮件标题是电子邮件内容的简短摘要,显示在电子邮件客户端收件箱中主题行的旁边或下方。 这是一个重要的元素,在优化时会影响电子邮件的打开率。 大多数客户端都包含 HTML 和 CSS 以确保正确设置预报头文本。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- 单列布局: 采用单列布局设计的电子邮件在移动设备上更易于阅读。 内容应按逻辑顺序组织,并以简单易读的格式呈现。 如果你有多列,利用 CSS 可以优雅地组织单列布局中的列。
这里有一个 HTML 电子邮件布局 在桌面上是 2 列,在移动屏幕上折叠成单列:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
这里有一个 HTML 电子邮件布局 在桌面上是 3 列,在移动屏幕上折叠成单列:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- 明暗模式: 桥梁 电子邮件客户端支持浅色和深色模式 的CSS
prefers-color-scheme
以适应用户的喜好。 请务必使用具有透明背景的图像类型。 这是一个代码示例。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- 大而清晰的字体: 字体大小和样式的选择应使文本在小屏幕上易于阅读。 使用至少 14pt 的字体大小,避免使用在小屏幕上难以阅读的字体。 常用字体很可能在不同的电子邮件客户端中呈现一致,因此使用 Arial、Helvetica、Times New Roman、Georgia、Verdana、Tahoma 和 Trebuchet MS 通常是安全字体。 如果您确实使用自定义字体,请确保在您的 CSS 中标识了后备字体:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- 图像的最佳使用: 图像会减慢加载时间,并且可能无法在所有移动设备上正确显示。 谨慎使用图像,并确保它们的大小和 压缩 用于移动观看。 如果电子邮件客户端阻止了图像,请务必填写图像的替代文本。 所有图像都应从安全网站存储和引用(SSL). 下面是 HTML 电子邮件中响应图像的示例代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- 清晰的号召性用语 (CTA): 清晰突出的 CTA 在任何电子邮件中都很重要,但在适合移动设备的电子邮件中尤其重要。 确保 CTA 很容易找到,并且足够大,可以在移动设备上点击。 如果你合并按钮,你可以确保你也用内联样式标签用 CSS 编写它们:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- 短小精悍的内容: 保持电子邮件的内容简短而切题。 HTML 电子邮件的字符限制可能因所使用的电子邮件客户端而异。 但是,大多数电子邮件客户端对电子邮件施加最大大小限制,通常在 1024-2048 千字节之间(KB),其中包括 HTML 代码和任何图像或附件。 使用副标题、要点和其他格式化技术,使内容在小屏幕上滚动和阅读时易于浏览。
- 互动元素: 结合 互动元素 吸引订阅者注意力的邮件将提高电子邮件的参与度、理解力和转化率。 动画GIF、倒数计时器、视频和其他元素受到大多数智能手机电子邮件客户端的支持。
- 个性化: 为特定订户个性化称呼和内容可以显着提高参与度,只要确保你做对了! 例如。 如果名字字段中没有数据,则进行回退很重要。
- 动态内容: 内容的细分和定制可以降低您的退订率并保持订阅者的参与度。
- 活动整合: 大多数现代电子邮件服务提供商都能够自动附加 UTM 活动查询字符串 对于每个链接,以便您可以将电子邮件视为分析中的一个渠道。
- 偏好中心: 对于电子邮件的选择加入或选择退出方法而言,电子邮件营销太重要了。 合并一个偏好中心,您的订阅者可以在其中更改他们接收电子邮件的频率以及对他们来说重要的内容,这是与订阅者保持强大的电子邮件程序的绝佳方式!
- 测试,测试,测试: 确保在多个设备上测试您的电子邮件或使用应用程序来 跨电子邮件客户端预览您的电子邮件 在您发送之前,确保它在不同的屏幕尺寸和操作系统上看起来不错并且功能正常。 石蕊 报告显示,最受欢迎的移动开放环境前 3 名仍然相同:Apple iPhone (iOS Mail)、Google Android、Apple iPad (iPadOS Mail)。 此外,合并主题行和内容的测试变体以提高打开率和点击率。 许多电子邮件平台现在都包含自动测试,可以对列表进行抽样,确定获胜的变体,并将最好的电子邮件发送给剩余的订阅者。
如果您的公司正在努力设计、测试和实施移动响应电子邮件来推动参与,请不要犹豫与我的公司联系。 DK New Media 在几乎每个电子邮件服务提供商的实施方面都有经验(ESP).