好看的html邮件模板-HTML如何做一个发送邮件的界面？

原创：找图网 2023-06-22 19:05:32

如何设计一个响应式的HTML电子邮件

HTML电子邮件制作严重缺乏一个标准,对于外行来说,接下来将带你回到一个早期的Web开发时代。由于HTML电子邮件客户端渲染引擎所制,布局必须使用表格和CSS样式必须使用行内样式。几个电子邮件客户将完全无视<head>内的<style>样式。

有一些电子邮件模板可以使用,我建议使用Sean Powell的HTML Email Boilerplate作为起点,但为了演示,我们从头开始。

有关于HTML Email Boilerplate的中文介绍,可以点击HTML Email Boilerplate源码阅读和HTML Email Boilerplate——大漠

如果你喜欢跟随着代码学习,你可以多这里下载本文的模板。

demodownload

文档类型(Doctype)

Hotmail和Gmail会自动插入XHTML 1.0 Strict 文档类型。虽然不是一个坏主意,但重要的是用它可以彻底地测试您的电子邮件和没有文档类型的电子邮件客户端可以自动生成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Email Acid对电子邮件的文档类型进行了广泛的研究,感兴趣可以点击这里。

媒体查询(Media queries)

我们现在可以插入一个视窗的meta标签,以确保我们的电子邮件在移动设备上可以正确的显示。指定内容类型和一个标题标签也是一个好主意。如果你打算在电子邮件中提供一个“浏览器查看”的一个链接,这是一个好主意,但忽略了一点,在很多电子邮件客户端会忽略这一点。

因为在电子邮件中有可能会忽略“content-type”,明智的做法是在你的电子邮件中所有特殊字符都最好使用HTML实体符进行编码。

还有几个确保我们电子邮件能跨平台,我们还需设置几个他管理费样式。

<head>

<title>Email subject or title</title>

.ExternalClass {width:100%;}

img {display: block;}

</style>

</head>

注意:视窗meta标记对黑莓有负面影响。

现在,我们可以插入媒体查询,有多少取决于你希望每个设备特性所需要。在这个示例中,我们将使用的媒体查询只有一个——大多数设备屏幕大小不大于600px是现代手机和触摸屏做出有利于移动设备优化样式。此外,我们我假设遵循通用移动最佳实践技术,早前也说过,手机用户浏览更大的布局会运到重大的可用性问题。

我们以机样的方式使用媒体查询构建一个网站时,如果视窗大小符合媒体查询条件时,将应用媒体查询里的样式。

@media only screen and (max-width: 600px) {

table[class="hide"], img[class="hide"], td[class="hide"] {

display:none!important;

}

在上面的例子中,屏幕小于600px时,通过给带有类名hidden的元素设置display:none来隐藏元素。!important可以确保覆盖任何内联样式。这是响应式电子邮件设计的基本原理:在<head>头部样式中通过!important来覆盖HTML文档中的内联样式,并且根据媒体查询特定的屏幕尺寸来覆盖这些样式。有一个明显的例个是Gmail应用程序将会忽略<head>内部的任何样式。然而,内容的居左会确保Gmail用户有一个更好的用户体验。显然这并不是一个理想的解决文案,目前,响应式电子邮件设计尽可能多的想法是对前沿技术的妥协。

值得注意的是,我们针对HTML元素的CSS属性选择器来克服Yahoo邮件的渲染问题。

所以我们可以看到,媒体查询选择性的显示内容是一个有用的工具,但我们也可以使用它们来让我空调其他功能的布局。或许最重要的是,我们可以约束我们电子邮件的列宽——移动体验最大的关键。

@media only screen and (max-width: 600px) {

table[class="content_block"] {

width: 92%!important;

}

我们已经在我们的媒体查询中设置了,当屏幕宽度小于600px,所有类名content_block元素宽度调整为92%。现在我们要做的就是把内联属性指定宽度(600px)和定义类content_block任何表格,我们有一个固定宽度的容器,然后在移动设备下指定一宽度的比例。

给这个容器的子元素的宽度属性都指定为百分比,这是一个基本响应式电子邮件模板。

作为一个经验法则,为了照顾Webkit自动调整<body>标签文本大小,尽量保持字体大小最低在12px以上。

按钮

调用操作(CAT)通常是营销邮件最重要的部分。他们应该是引人注目的,良好的,最重要的是使用。一个强大的CAT标准是根据不同的动作有不同的光标或手指。响应式电子邮件强大功能是在小触屏设备上提供一个手指可操作的按钮,让手指操作不受图像阻碍。

不幸的是,这种按钮不能普遍显示,因为他们依赖于padding属性,但在一些桌面电子邮件客户端并不支持。

@media only screen and (max-width:600) {

a[class="button"]{

display: block;

padding: 7px 8px 6px 8px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

color: #fff!important;

background: #f46f62;

text-align: center;

text-decoration: none!important;

}

上面的样式声明将改变带有类名button的标签,只要屏幕宽度不大于600px,按钮变大,好看,彩色的,而且跨越内容区域的宽度。CSS3支持不应该是一个问题,我们可以撰写我们的目标是合理的现代的移动技术。

<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

内联样式满足鼠标的用户可以点击和更大精度但覆盖这些样式链接,可以让触屏用户减少交互的错误。重要的是,这种方法不依赖于图像,因此避免了图像加载阻滞存在的可用性问题。

结论

响应电子邮件设计仍然是一个妥协方案。令人困惑的是一系列不同的设备,电子邮件客户端的渲染引擎给设计人员和开发人员带来一个艰巨的任务。但随着科技的进步变得更容易为用户提供适当的布局,他们可以毫不费力提供有效的交互。越来载多的电子邮件客户端支持媒体查询改变了移动电子邮件的外观和优化,并且为我们提供了一个平台,大大提高更多的用户体验。现在对我们来说,设计人员和开发人员,尝试有创意的方法来让更多的移动用户有更好的体验。