首先，我们先说一下如何制作图文HTML邮件。
有两种方法或途径可以制作图文HTML邮件。
一、自己写代码
自己写代码是终极的方法，但如果不是专业人员，自己写制作图文邮件的代码，那就太难了，反正有很多坑，不再细说。
非专业人员，建议不要尝试这种方法，不但时间和成本都很高，而且经常乱码和错位，造成邮件无法使用。
二、使用现成的平台
最有效的方法是：使用别人做好的现成的平台来写HTML邮件，这种方法做邮件就很简单了，可以说人人都会。这种方法使用现成的模板，只需要将文字或图片修改为自己的，生成代码后就制作好了邮件，更重要的是还可以在原来的基础上再次重新设计和布局，从而制作自己的独具特色和结构布局的专业邮件。
这种方法不但跳过了写代码这一步，而且其模板都是经过复制测试，兼容性很高，不会出现乱码和错位的情况。具体怎么做，请自行百度搜索“图文并茂+邮件”，很快就能找到的制作方法了。
其次，我们来说一下如何发送HTML邮件。
发送图文HTML邮件也很简单，发送方法如下：
首先，复制邮件代码，然后打开自己的邮箱，将内容区转换为代码输入方式，粘贴代码，就可以发送邮件了。详见下图（图1为QQ邮箱，图2为163邮箱）。
1，使用桌面邮件程序如outlook，foxmail可以选择html模板，发送的邮件均会是html格式的。2，使用gmail，126等邮箱其本生提供文本格式化，而格式化即使为文字添加代码只是这些代码你看不到而已，你所看到的是代码执行以后的结果，因此我估计如果你直接自行编写代码在里面也是可以格式化的，如果是这样你可以用网页编辑工具实现设计好你的简历页面然后粘贴进去即可。
3，2方法没有试过，如果不行可以采用以下方法，将简历网页做好，然后申请一个免费空间放上去，然后在给公司的邮件中写上这个网页的连接地址。
制作HTML网页可以用dreamweaver软件开发工具，对于新手来说是在适合不过，因为有很多标签和属性给与提示。只要你学会了html、DIV+CSS这两大块，完成一个静态的网站可以说搓搓有余了。如果你还想要将网站做的更加的华丽，你要需学习JS等知识。
开始如前所述，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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Email Acid对电子邮件的文档类型进行了广泛的研究，感兴趣可以点击这里。
媒体查询(Media queries)
我们现在可以插入一个视窗的meta标签，以确保我们的电子邮件在移动设备上可以正确的显示。指定内容类型和一个标题标签也是一个好主意。如果你打算在电子邮件中提供一个“浏览器查看”的一个链接，这是一个好主意，但忽略了一点，在很多电子邮件客户端会忽略这一点。
因为在电子邮件中有可能会忽略“content-type”，明智的做法是在你的电子邮件中所有特殊字符都最好使用HTML实体符进行编码。
还有几个确保我们电子邮件能跨平台，我们还需设置几个他管理费样式。
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/htmlcharset=iso-8859-1">
<title>Email subject or title</title>
<style type="text/css">
.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:#f46f62font-weight: boldtext-decoration: underline">Click me!</a>
内联样式满足鼠标的用户可以点击和更大精度但覆盖这些样式链接，可以让触屏用户减少交互的错误。重要的是，这种方法不依赖于图像，因此避免了图像加载阻滞存在的可用性问题。
结论
响应电子邮件设计仍然是一个妥协方案。令人困惑的是一系列不同的设备，电子邮件客户端的渲染引擎给设计人员和开发人员带来一个艰巨的任务。但随着科技的进步变得更容易为用户提供适当的布局，他们可以毫不费力提供有效的交互。越来载多的电子邮件客户端支持媒体查询改变了移动电子邮件的外观和优化，并且为我们提供了一个平台，大大提高更多的用户体验。现在对我们来说，设计人员和开发人员，尝试有创意的方法来让更多的移动用户有更好的体验。
你设计过电子邮件吗？你使用响应式方法吗？请在评论中让我们知道。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）