商业HTML邮件的制作方法和正常显示的技巧

商业HTML邮件的制作方法和建议2009-12-13 20:09:48 作者： 来源： 商业HTML邮件的制作建议,今天我研究的问题是，如何从技术方面入手，制作一个优秀，且同时兼容用户视觉和邮件客户端的电子邮件。通过基于许可的电子邮件营销，不仅可以大大的降低营销和推广的成本，更能够直接地、准确地把信息传递到客户手中。今天我研究的问题是，如何从技术方面入手，制作一个优秀，且同时兼容用户视觉和邮件客户端的电子邮件。1.选择HTML还是文本(Plain Text)有人喜欢简单的文本，有人喜欢看丰富的HTML，我们怎么选择？对于营销型的邮件，建议使用HTML格式来制作(图)；而对于确认/提醒/告知型邮件，建议使用文本或者简单的HTML来制作(图)。为什么针对这两种不同类型的邮件，采用不同的制作方式，这基于这些原因：营销型邮件的内容丰富性、多样性；确认型邮件的内容单一性，独特性；在营销型邮件中，客户会更注重内容的丰富性和视觉效果的美观性；在确认型邮件中，我们要让客户非常直接的看到确认信息，复杂的内容和视觉效果只会让客户忽略了邮件的主要内容即确认信息；(下文将对营销型邮件的HTML制作做重点讨论)2.基于表格布局+CSS的HTML基本功功夫分两种，一种至阳至刚，另一种则至阴至柔，张三丰之所以登峰造极，因为其武功底子好，少林基本功扎实，才悟出这道即能至阴，又能至阳的太极拳。HTML的邮件也是如此，我们知道，当今邮件阅读客户端有很多种，传统的Outlook，Thunderbird，Lotus Notes，以及在线的Mac Mail，Gmail，Hotmail等，对邮件的解释都会不同，大多数在线邮件系统会屏蔽掉标签之 间的代码。要让所有用不同客户端的用户看到的邮件相同，这就要非常好的掌握好HTML的基本功。有人说DIV+CSS，有人说是SEO标签语义化，不可否认作 为一个网页开发人员，能有这两种时下流行的HTML开发思想会很吃香，但是，这并不适用于邮件制作。我们的目的是让客户在不同邮件客户端下看到相同的信息 内容，这就用到一个最原始的排版方式：表格布局+CSS。让我们看下时下邮件客户端对HTML和CSS的支持(图)：*Hotmail能解析间的，但同样屏蔽间的3.做HTML邮件时，就要着重注意以下几点： 把样式写入HTML标签内部，不要独立在某个外部文件中，也不要写在间(图)； 给每一个有内容标签内部都加上CSS，即使重复和繁琐 不要用CSS来对HTML元素标签定位；用绝对大小(像素)和相对大小(百分比)相结合的表格嵌套方式来定位。 不要在邮件中插入任何的Javascript、Flash以及一些特特殊标签(如:marquee)绝大部分邮件客户端会屏蔽Flash和Javascript，以及一些特殊标签和属性； 不要使用背景图片background-image属性在多数在线邮件客户端会被屏蔽，在Gmail中，你看不到任何的background图片； 给每张图片都指定宽和高以及Alt属性值；图片的src属性一定要用绝对地址：正确：错误： 重要的内容请不要用图片标示展览会的时间，地点，内容等信息是非常总要的，考虑到图片可能无法显示，这些内容不建议放在图片中显示；即使放在图片中，也请在邮件内容中以文字形式表示出来，并给把内容加入图片的Alt属性中。 使用统一的utf-8编码； 4.邮件的宽度，650px?还是600px?我们都知道，时下网页的宽度标准是950/960px，这取决于我们的显示器分辨率；而电子邮件经常是通过两种途径打开，软件客户端和在线客户端，这两种邮件客户端(图)。*Microsoft Outlook 2003*网易163邮箱由图可见，邮件往往并不是全屏显示的，如果延续使用网页的960/950px标准宽度，则势必会造成邮件一部分内容被遮盖住，这样，就产生了横向和纵向的两个滚动条，不方便于客户浏览；而太窄的宽度又会造成空间的浪费(图)那么，对于HTML邮件的宽度，到底定在多少才是最佳的呢？我们首先来参考下几家知名企业HTML邮件制作时所用的宽度：网易有道：600pxQQ会员：650pxDell家庭与办公：650pxCisco Webex：600px可见，这些知名IT企业的营销邮件宽度就两种600px和650px，而据我4年EDM和Web设计经验，我更倾向于选择后者，即650px作为HTML营销邮件的标准宽度。650px的优势：当邮件的内容被分成2栏时候，650px可以分割成X+10+Y，其中X=左栏，Y=右栏，10为间隔空隙，X+Y=640，而640恰好能被20整除，640=22x22x22x10，当邮件的内容被分成3栏时候，650px可以分割成X+10+Y+10+Z，同样的，X+Y+Z=630，630恰好又能被30整除，630=33x710。为什么要这么分解，请查阅网页栅格化研究。这就是我选择650px而不选择600px的原因。当然，这仅仅是我个人定的标准，还未成为全球统一的标准，但我希望有一天这个宽度能被绝大多数的HTML邮件制作者和接受者所认可。制作主流邮箱能正常显示的HTML邮件的技巧来源：互联网 作者：佚名 时间：04-02 20:56:20 【 】 点评：发送html邮件的建议：用style写内联的CSS；少用图片；用table实现左右布局或者更复杂的布局；用background元素设置背景图片等。 几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方-发送html邮件的建议：用style写内联的CSS；少用图片；用table实现左右布局或者更复杂的布局；用background元素设置背景图片等。 几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面，是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的，能正常显示的HTML邮件。 发送html邮件的建议：用style写内联的CSS；少用图片；用table实现左右布局或者更复杂的布局；用background元素设置背景图片等。 首先，我们先来看看邮箱是如何展现HTML邮件的。我本人没有做过邮件系统，况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以，我们只能通过前端展现，来推测哪些是被邮箱接受的写法，而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析，我把邮箱分为两类： 第一类包括gmail、hotmail、sohu，这类邮箱，邮件内容是被布局在整个邮箱页面中的某个div中。 第二类，包括163、sina，这类邮箱，邮件内容被布局在独立的iframe中。 熟悉HTML的朋友都知道，iframe内容是作为独立的document，与父页面的元素和CSS是互不相干的，几乎可以作为一个独立的页面来对待。而如果如果邮件内容是在div中，那么邮件内容是作为整个邮箱页面的一个组成部分。显然，以iframe作为展现方式的邮箱，对邮件内容就会宽容许多，因为它给了你一个足够独立的表现空间。而div就不是那么客气了。试想一下，如果你在你的邮件里写上这么一句CSS，是不是整个邮箱的展现页面上字体都变成20px而因此乱了套： body font-size:20px body font-size:20px 我们需要写兼容各邮箱的统一邮件模板，那么必然就要避开以上这种外联CSS写法，另外类似于float、position等成非正常内容流的style也会被过滤，假如你写了，很可能会影响到外部邮箱的表现。 下面我列出一些编写原则： 1、全局规则之一，不要写标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。 2、全局规则之二，少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。 3、不要在style里面写float、position这些style，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？用table。 4、style内容里面background可以设置color，但是img会被过滤，就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写： td background= td background= 5、div模式的邮箱不支持flash，iframe模式的有待验证。 最后提一句，sohu的邮箱很怪异，会在每个文本段后面加一个空格，导致原本正常的排版一行放不下而换行，从而使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。