要做好一个HTML邮件，说简单，还真不怎么复杂，说它复杂，其实也不难。-_-!!

以前写过类似的[ 关于HTML邮件的总结 ]，最近又犯愁，就再唠叨几句。

简单的是：技术实现要求不是太高，只要做好xhtml页面就能使用邮件发送服务来发送。

难的是：如要做到兼容国内几乎所有邮箱，兼容Gmail，Yahoo mail，outlook等，却也有点难度。因为各大邮箱对css，HTML标签的支持程度各不相同，有的会在邮件主体的外层使用一些干扰的样式，有的对图片的支持也不清不楚，邮件客户端就更是千奇百怪。

要想做好最大的兼容性，建议：

1.用table进行布局，想要布局不乱，尽量用他，很多时候web标准在这里行不通，想用float？到了人家的邮箱里，就不一定浮的起来了。。

2.少用图片作为背景，因为outlook 2007和某些web 邮箱是不支持背景图片的。

3.图片给出alt属性，防止图片无法显示时，出现红叉叉。

其他的，请参考上面给出的总结，业界也有不少关于这个话题的好帖子，可以搜索一下。

现在，再谈谈如何在HTML邮件上做一点点用研，提高它的回报率。

首先，有一条是必须的：你所发出的邮件对用户来说，是确实有意义的，而不是在糟蹋广大劳动人民的智慧。

1. 它面向的用户群体主要是某站点的会员，包括购买了产品的用户和没有购买产品的用户，没有购买产品的用户又包含活跃会员与普通用户，往下还可以细分。与用户的沟通，或者说互动，有很多的途径，HTML邮件就是其中之一，[ 虽然我极不推荐用这个古老而收效甚微的方法，其他的方式，往后再聊聊] ，它以精准而著称，如果接受者不是我们的有效目标受众，不但浪费了资源，更违背了HTML邮件或者叫EDM的宗旨及意义。这一点是首先要明确的。

2. 我们来看看这个小用研的重点在哪？先模拟一下用户打开邮件的整个过程：

A、B、C三个点可以说都是关键点，因为这三个点是一个用户真正做决定的点，但是，其中的A是一个EDM能否产生真正应用价值的，是否有存活在这个世界上的时间点。这个地方需要考虑的是标题的创新包装，所以A是这三个点中，最重要的。
B点是视觉风格–>内容的天地，也是用户是否会深入了解该邮件的过程。
C点是真正对用户产生价值的地方，是能否给用户带来效益的地方，也是站点与用户能否双赢的时间段。这一次的用户调研，将主要在这三个点设计调研点。

剩下的，就是控制好样本量和选取合适的调研方法，可以是问卷，访谈，Focus group，可用性实验室等，最简单的，就是问卷和访谈。访谈，可以是真实的面对面的，也可以是通过语音。我们此次的调研主要采用的就是上面提到的前两种，效果还算理想。

]]> http://www.kdued.com/2009/04/html-mail-2/feed/ 3 http://www.kdued.com/2009/04/833/ http://www.kdued.com/2009/04/833/#comments Tue, 07 Apr 2009 13:48:24 +0000 martilo http://www.kdued.com/?p=833

文字一出各路诸侯杀出，一个措手不及待吾友商发布！

前不久视觉组同事们讨论了一个老话题 — 网站图片格式问题和对性能产生的影响

其实大家每天都与图片色彩文字打交道，经验给大家带来了熟练的技巧！但是对图片格式对站点性能产生的影响大家都发表了自己的看法，分享了自己的经验。

目标:提高浏览器访问页面速度

我们设计和制作中能做的： 
1、尽量少图片；尽量好交互
      浏览器页面尽量少用图片或精细化图片
2、图片尽量用色彩和像素点代替
      解决好 美观和下载速度这把双刃剑
3、做切割对比测试
      制作人员掌握图片切割规律

第一感觉是不是内容很多，很复杂。那我们把它分解一下，再看看图2：(为了博客的效果，我把图缩小了,不好意思,请点击放大)

是不是清晰很多，它是由这些红色的块组成。下面我再取一部分出来：

 
看看这部分代码：
<div class=”list”>
<ul>
<li><a href=”http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/“>报道假币记者怒斥央行</a></li>
<li><a href=”http://adong360.blog.163.com/blog/static/21725364200926103415811/“>中国女性是出版业救星?</a></li>
<li><a href=”http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/“>如何成为女明星男朋友</a></li>
<li><a href=”http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/“>怎样读书才能改变命运</a></li>
<li><a href=”http://d.p.hill.blog.163.com/blog/static/89123982009247426250/“>广州最简陋的法院(图)</a></li>
<li><a href=”http://adong360.blog.163.com/blog/static/21725364200926103757559/“>两会会场外的各国记者</a></li>
<li><a href=”http://weimin17104.blog.163.com/blog/static/960595002009230258210/“>”无人”报亭背后的故事</a></li>
</ul>
</div>
我再用程序来解释他，
<div class=”list”>
<ul>
<?php
foreach ($list as $value) {
?>
<li><a href=”<?php echo $url?>”> <?php echo $title?></a></li>
<?php
}
?>
</ul>
</div>
很亲切吧！那我们倒推回去，实际一个页面的组成是这样的：

一个页面实际上是由一些有规则代码的块组成，那么这些块可以由程序的循环来解释。这一点的理解是构建一个大型CMS的基础。那么下面将一下CMS系统的基本结构，请看图，我喜欢用图来解释，这样比文字更直观。

简单说一下模块的设计，那么模块就是提取指定频道（可以是任一频道不一定是本频道的）的资讯，包括提取的条数，是否显示图片，是否显示描述文字，标题的字数，描述文字的字数等，这样再生成一段代码，去替换频道页面相应的模块名。就拿上面那段代码来做实例吧，
频道页面模板的显示代码：
<div class=”list”>
<ul>
{template_list}
</ul>
</div>
模块生成的代码：
<li><a href=”http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/“>报道假币记者怒斥央行</a></li>
<li><a href=”http://adong360.blog.163.com/blog/static/21725364200926103415811/“>中国女性是出版业救星?</a></li>
<li><a href=”http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/“>如何成为女明星男朋友</a></li>
<li><a href=”http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/“>怎样读书才能改变命运</a></li>
<li><a href=”http://d.p.hill.blog.163.com/blog/static/89123982009247426250/“>广州最简陋的法院(图)</a></li>
<li><a href=”http://adong360.blog.163.com/blog/static/21725364200926103757559/“>两会会场外的各国记者</a></li>
<li><a href=”http://weimin17104.blog.163.com/blog/static/960595002009230258210/“>”无人”报亭背后的故事</a></li>
那么在生成页面的时候用此代码替换。

这里讲的并不详细，只是提供给大家一个思路。如果想了解更多或者有好的想法讨论，可以在此发表评论或者发邮件elgin_chen’at’163.com，加我的QQ：31524932

1.IE8只是换花衣裳?
2.Just Test
3.Solution
4.一点有趣的东西

1.邮件兼容性问题

1.1 table布局比较靠谱

div布局在部分变态邮箱里没法看，因为这部分邮箱会默认对某些标签添加自有的样式,如sina.com的邮箱和hotmail.com的邮箱。甚至这些邮箱有BUG的话，会出现一些莫名奇妙的问题，如：QQ邮箱会在某些情况下（至今未知）自动给图片的格式后缀再多加一个“点”，a.jpg会变成a..jpg,-_-!!

而table布局在这个时候就很强势，很兼容，很可靠，很强大了，根据多次测试，table布局的可靠率达到90%以上，像QQ邮箱，网易邮箱，都是将邮件的主体内容放在一个iframe中，QQ邮箱就在iframe中设定了默认图片display:inline;的样式，这些样式如果你不注意，等你百思不得其解为何你的邮件中图片乱七八糟的时候，就应该看看这个了。

1.2 尽量少用图片

很多邮箱默认下，是不会下载图片的，例如live mail,也就是hotmail,gmail默认状态下也是不会下载背景图片和img的，只会提示你是否要显示，是否以后都信任这个地址的邮件，这个主要是处于安全性上的考虑。而不用图片了，如果又需要有视觉上的变化那怎么办呢，可以用色块（background-color），如果要用圆角，可以用很多的标签去拼凑(-_-!，是很变态)，图片方面，一般来说大家有过seo习惯的话都会加上alt属性，这里也最好给图片加上，避免图片无法显示的时候，可以显示alt内容。

1.3 编码要注意

尽量用utf-8的编码，可以避免某些（注意，是某些）邮箱出现乱码情况。

1.4 细节多考虑

很多事情都是细节上决定结果。在做HTML邮件时，根据友商网的情况，一般是要先将这个页面和引用的资源上线到服务器，页面中的

静态资源，例如图片，切记要写绝对URL，如果写了相对路径，当打开的这个邮件时，图片是无法显示的。

控制好图片的大小，过度追求图片质量换来的就是打开邮件时打开过于缓慢，接着就是会员无法容忍，直接跳出邮件。

直接在标签上写它的内联样式，否则很可能会跟邮箱系统的样式冲突。

1.5 最好要有专用的邮件发送系统，并且要做好与各大邮箱服务提供商的协调工作，否则，你会发现你发送的邮件都成了spam。

2.邮件效益问题

发送HTML邮件给会员一般有几类目的：

2.1 通知他们某些信息，如交易信息，账单，让他们得知，这类邮件需要简单扼要，不要带有过多的干扰信息。一句话提示，一个表

格，一个按钮，就基本满足了需求。

2.2 对会员来说，附加的，希望他们参与的，例如：优惠活动，赠送业务。这类，首先应该在视觉上多做文章，但也不能做的过于花

里胡哨，主题要更突出，避免过多干扰色彩和信息，毕竟很多人看邮件的时间比看页面的时间来的更短，垃圾邮件实在太多，太多人的心里有了阴影。

另外，【标题】和【发件人】也是要注意的，吸引人的标题能第一时间抓住人的好奇心理，“祝您新年快乐”这个标题就没有“携冯

氏幽默给您拜年”吸引人。所以说，标题党在这里同样适用。

别忘了，发件人要写的正式，如果面向的会员绝大部分是中国人，那最好是中文（毕竟这里是中国），如果是英文字母，不知有多少

人的第一反应就是：垃圾邮件，接着就是delete。这个需要用研和文案多考虑考虑。

2.3  表达一些喜庆信息，例如元宵节。这类邮件需要传递一种喜悦，需要能跟会员互动，那就最好在站点上还有相关的专题，应用或

者创意的东西去支撑它，邮件只作为一个入口。

想要发好一个邮件，真的不容易，想要有效果，那就要多方合作，更多的研究用户群体，才能做出好的邮件来。

————————————————–update 20090224———————————————-

在outlook 2007 中对HTML邮件的支持相当有限，所以如果客户端使用的是outlook 2007，那么请你抑郁吧。

它只支持CSS 1.0，HTML 4.01，对background-image，style属性等不支持。具体请看微软官方文档：

http://msdn.microsoft.com/en-us/library/aa338201.aspx
http://msdn.microsoft.com/en-us/library/aa338200.aspx

]]> http://www.kdued.com/2009/01/html-mail/feed/ 9 http://www.kdued.com/2008/08/margi/ http://www.kdued.com/2008/08/margi/#comments Fri, 29 Aug 2008 04:30:05 +0000 admin http://www.kdued.com/?p=261 最近在写个前端与设计的交流PPT，其中有个地方测试了一下多种情况下盒模型的表现，其中有个小地方，关于margin叠加的一种情况，我是第一次发现，估计相对于其他前辈而言，不值一提，自己记录一下吧。

场景是这样的：外层div给他固定了高度和宽度（500px*500px），内层div（300px*300px）也一样但是高度和宽度比外层的 小，为的是减少其他因素的影响，然后对内层div进行margin:10px。问题就在这里了，一直以来都晓得垂直空白边会叠加，但没想到这样也能叠加， 并且ie系列（6，7）和firefox,opera等标准浏览器的表现不一样。

code:

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title>margin</title>
< style type=”text/css”>
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td{margin:0;padding:0;}
#wrapper{width:500px;height:500px;background:#DADADA;}
#inner{width:300px;height:300px;background:#050505;margin:10px;}
</style>
</head>
< body>
< div id=”wrapper”>
< div id=”inner”>< /div>
< /div>
< /body>
< /html>

DEMO Here!!

看了demo后 你会发现，#wrapper在firefox,opera等标准浏览器中上方出现空白填充，而#inner顶部是直接到了外层元素的边缘， 与#wrapper的边缘重合了。而在Iie系列（6，7）下则是另一种情况，空白填充没有叠加，#wrapper是没有margin的。

也就是说，内外的元素即使任意一个垂直方向margin为零，另一个有垂直方向margin，依然会出现叠加。

除了它本身的作为超链接的源的应用外，还有什么扩展应用呢。

1.最简单的，<a href=”xx.xx”><img src=”xxx.jpg”/></a>，这种是最初的扩展，利用图像作为a的内容，而不仅仅是文字，这样就能使得链接看起来更直观，更醒目。

2.javascript ，有时候，为了在点击a标签时能够触发某些事件，你可以在<a >内写javascirpit，例如：< a href=”#” onclick=”alert(”fafsfs”);”>xxx</a>。

3.还有一种，能够给浏览者更进一步的良好体验，就是让鼠标hover时，< a>能够变换视觉效果。

mail.163.com的做法：

利用了onmouseover和onmouseout事件将这个INPUT上的class进行切换，使得背景变换。

优点：对很多元素都可以使用这个方法。

缺点：要添加额外的脚本，如果浏览者禁用脚本，就不会起作用。

CSS:

HTML：

< input type=”submit” onclick=”setCookie
(’ntes_mail_firstpage’,’normal’);saveLoginType();”

onmouseout=”this.className=’btn1′”

onmouseover=”this.className=’btn2′” class=”btn1″ value=””
title=”登录邮箱” name=”登录邮箱”/>

———————-

yahoo.com，youshang.com的做法：

将a（本是行内元素）的display属性设置为block，让它以块元素呈现，这样，就能将图片应用到它的背景上，并且可以通过link,hover来进行变换背景。。这个是比较常用的方法，友商网，mp3.com也大量采用这种方法。

优点：是不用写javascript也能实现背景变换，更轻巧。。

缺点是：如果你将a的背景图分开，那么在IE下会有闪烁的现象，所以建议将这两张图利用CSS SPRITE合成在一起，通过background-position进行定位。

Test url(左侧的免费体验按钮): www.youshang.com

CSS:
#yatcfmenu .yui-nav .capacity-link:hover {
background:transparent url
(http://l.yimg.com/us.yimg.com/i/us/aut/gr/ui07/carfinder_20080114a.png) no-repeat scroll -1055px -35px;
}
#yatcfmenu .yui-nav .capacity-link {
background:transparent url(http://l.yimg.com/us.yimg.com/i/us/aut/gr/ui07/carfinder_20080114a.png) no-repeat scroll -1055px 0px;
width:165px;
}
#yatcfmenu .yui-nav li a {
display:block;
float:left;
height:25px;
margin-top:5px;
overflow:hidden;
text-indent:-9999px;
}
HTML：
<a class=”capacity-link”

href=”http://autos.yahoo.com/carfinder/?

expanded=capacity”>Seating and Capacity</a>

———————

应该不难发现，在目前的各大网站中，大量的采用了圆角去修饰边框，使得页面的呈现更加柔和，干净舒服。所以，友商网在这一次改版中也大量采用了这个样的设计，特别是二级页面的大部分元素框，就采用了时尚的银灰色调配上灰黑的圆角。在将设计稿实现成页面的时候，这个地方开始的确让我头疼，因为这些元素有很多相似的特点，也有一些不一样的地方，相似的是：

title是银灰色渐变x轴横向

底部圆角内凹度一样

而不一样的地方是，整个元素框宽度不一定一样，title高度也有两种，在看到绝大部分的频道设计稿后，我决定将这些元素框做成通用的结构和样式，希望能提高开发效率，省去了一次次重复的调试，也有利于不用的前端开发同事统一风格，整体提高开发速度。

实现的思想是这样的（可以说主要是滑动门的应用）：

1.将title的银灰条进行分离（其实也可以合在一起），作为两个结构元素（分别是h2和span）的背景，进行适应的拉伸

2.将内容载体也由两个标签元素来自适应构成（一个是class为eleOutter的div，另一个是class为eleInner的div）圆角图片分别作为这两个元素的背景

css：

这次换衣裳，还调整了频道，资讯和课堂合并到了社区，增加了代账平台，将原来的在线管理改版成了在线会计，供应和进销存合并为在线供应链，这是业务模式上的调整，希望更能贴合市场，给广大企业和个人带来更贴切的SAAS服务，还有一个亮点就是增加了免费体验的功能，不用注册也能在线体验各种SAAS产品。

这是衣裳，下次再写写“身材”，o(∩_∩)o…哈哈

他能清理浮动是没错，但是不注意的话就会在IE下造成一些不和谐。请大家看如下样式和图例—–

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title >test BR< /title>
< style type=”text/css”>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td{margin:0;padding:0;}
#testBr{ width:950px;height:10px;background:#000; }
< /style >
< /head >
< body >
< div id=”testBr”>< /div>
< /body>
< /html>

下面是#testBr在不同高度值下的表现：

我就想，是不是默认IE下，一个DIV的高度为15px.于是有了下面的结构，样式和图：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head >
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title >test BR< /title >
< style type=”text/css” >
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td{margin:0;padding:0;}
.testBr{width:950px;height:5px;background:#000;}
< /style>
< /head>
< body>
< div class=”testBr”>< /div>
< br/>
< div class=”testBr”>< /div>
< /body>
< /html>

这里的.testBr高度是从5px到23px。这种情况下，可以发现div的高度又变成了20px,同时，BR的高度也在变化，也是20px。-_-!!!，初步判断，IE下默认DIV高度在15到20px之间。。。。

依然是overflow:hidden;可以让IE和标准浏览器表现统一。所以大家在使用这种状态的元素时，记得overflow:hidden;以免带来“意想不到的”效果。特别的在用于清理浮动的元素样式一定要加上这个。。。