掌握电子邮件中的HTML排版

在Microsoft Outlook中打开一封HTML电子邮件,您会发现这些图片因缺席而显眼。相反,他们被一个冗长而模糊的安全信息所取代。

此图像阻止怪癖不是Outlook独有的。还有许多其他电子邮件和Webmail客户端,例如Lotus Notes 8.5和Yahoo Mail,在订户手动“请求”它们之前无法显示电子邮件的图像。即便是那些,例如OS X上的Apple Mail和iOS上的Mail,依赖于Wi-Fi或足够强大的数据连接来随时显示图像。

Microsoft Outlook fails to display images by default. Instead, it presents the subscriber with a security message

默认情况下,Microsoft Outlook无法显示图像。相反,它向订户呈现安全消息

因此,不能依赖图像来传达电子邮件的消息。因此,我认为电子邮件依赖于HTML排版。本教程中的提示 - 取自我的书“电子邮件类型” - 将帮助您在电子邮件中实现强大的HTML排版,并克服电子邮件和Webmail客户端的一些怪癖和特性。

01.使用 , 和

使用。构造HTML电子邮件

, 和

在较大的文本大小上,确保按字体大小的比例应用足够的行高,或者可以在Microsoft Outlook中裁剪它们。

再一次,语义标签

可用于段落,但您需要在开头内部的每个段落中应用CSS

标签。因此,替代方法有一个明显的优势:在表格单元格中保留段落“松散”,并在开口内应用段落文本样式

任何造型适用于

元素。这些是HTML电子邮件的构建块,在使用排版时会帮助您 - 表格单元格( ), 特别是。

02.使用像素来设置字体大小

像素单元在电子邮件和网络邮件客户端上对字体大小和行高都有很好的支持:

字体大小:14px的;行高:21px;

03.应用CSS内联

应用CSS内联以确保所有必要的样式呈现,即使CSS中的被删除 - 就像在Gmail中一样。

标题和段落

语义标签(

)可用于电子邮件中的标题。我建议你使用一个如果他们在一条线上,或者一个

在他们自己的表中,如果他们在多行上,在开始标记内应用标题样式。这将帮助您在电子邮件和Webmail客户端上实现无故障呈现。

在此示例中,CSS mso-line-height-rule:也已应用,以维护Microsoft Outlook上的行高。

多行标题标签。

文字段落。 成为其内容的默认值。您可以在表格单元格中添加任意数量的文本段落,并且只需要将它们设置为一次。

使用这种方法,您可以牺牲使用时自动添加的段落间距

标签。这可以通过插入两个来修复
每段文字后面的标签。但是,这不是最优雅的解决方案 - 特别是当您需要更多地控制标题,副标题和段落之间的间距时。幸运的是,有一个黑客可以帮助解决这个问题:

 

在这里,我们有一个不间断的空间包裹在一对

标签,以高度,字体大小和行高为一致的值设置,与所需的空间量(以像素为单位)相关 - 在本例中为10px。要创建更大或更小的段落空间,只需相应地更改值。

文字链接

在文本链接上,颜色和文本修饰通常需要在开始标记内设置样式

文字链接

04.应用背景颜色

A <table> with a background applied, and a styled alt tag in a contrasting colour

一个应用了背景,以及对比色的样式alt标签

当在不自动显示图像的客户端中打开电子邮件时,应用于每个图像的背景颜色

包含图像的,可以帮助订阅者理解电子邮件的结构,并鼓励他们“请求”图像。 HTML属性bgcolor是将颜色应用于a的最可靠方法
。这里,颜色是使用六位十六进制而不是速记指定的。

// 图片 //

应用背景颜色后,将图像替换为较大尺寸和对比色的样式,以便于阅读。

图片描述

iOS Mail的一个奇怪之处在于它将某些内容呈现为“蓝色链接”并将其应用于它们所假定的对订阅者有帮助的功能。这些可能是电话号码(允许用户拨打该号码或将其添加到他们的联系人),日期(允许用户将其添加到他们的日历中)或地址(允许用户在地图中找到该地址)。尽管有最好的意图,iOS Mail有时会出错,导致蓝色链接被应用于不适当的内容。例如,它可能会误认为电话号码的订单号,并允许订户拨打它(或至少尝试)!

值得注意的是,这种行为不会在浏览器中出现,而只是在原位;例如,在iPhone或iPad上的iOS中。因此,有必要将您的电子邮件测试发送到这两个设备,以识别任何蓝色链接。

重新设置链接

幸运的是,iOS Mail能够以传统方式处理HTML和CSS,从内部样式表中应用CSS HTML电子邮件文档到标记有相应类的元素 。您可以使用这些传统的Web开发技术来修复蓝色链接。

首先为链接创建一个新样式 - 一个与电子邮件的调色板保持一致的样式 - 并为其指定一个类名。要“隐藏”链接,请使用应用于其周围文本段落的相同颜色来设置样式,以及text-decoration:none。

确保应用!important声明来覆盖现有样式。

创建样式并为其指定类名后,将其应用于受影响的文本,将其包装在一对标记中,并在开头内插入您创建的类名。确保包含关联的单词,例如“from”和“until” ,因为蓝色链接也可以应用于这些单词

从1月1日起

禁用链接的功能

虽然链接已经重新设置,但它可以保持活动状态,从而使订户可能意外地激活链接。您需要禁用其功能以防止这种情况。

这是通过在您创建的类中添加一些额外的样式来实现的 。

.appleBlackLink a {color:#666666!important; text-decoration:none!important; pointer-events:none!important;}

CSS指针 - 事件:无!重要;禁用流氓蓝色链接。

加起来

所以你有它;五个提示,帮助您在电子邮件中实现HTML排版。最后,要了解电子邮件和Webmail客户端如何呈现排版,请确保使用自己的桌面和移动电子邮件客户端以及工具(如石蕊

本文最初发表于275期网络杂志

相关文章:



翻译字数超限