大涛子客栈

因为电子邮件客户端预览窗口通常只是一小部分屏幕宽度,你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条

一、初见

table

  • <table> 标签定义 HTML 表格
  • 简单的 HTML 表格由 table 元素以及一个或多个 trthtd 元素组成
  • tr(table row) 元素定义表格行,th(table head) 元素定义表头,td(table data) 元素定义表格单元
  • 更复杂的 HTML 表格也可能包括 captioncolcolgrouptheadtfoot 以及 tbody 元素
  • HTML table 标签

table属性

  • border — 规定表格边框的宽度
  • align — 规定表格相对周围元素的对齐方式 (left,center,right)
  • valign — 垂直,默认是valign="middle",但是会修改为valign="top"
  • cellspacing — 规定单元格之间的空间
  • cellpadding — 规定单元边沿与其内容之间的空白
  • width — 规定表格的宽度
  • height — 规定表格的高度
  • background — 背景图像
  • bgcolor — 背景颜色
1
2
3
4
5
6
7
<table border="1" width="600" align="center" bgcolor="#cccccc" cellspacing="10" cellpadding="20">
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
</table>

style

  • width、height
  • font-family
  • font-size
  • font-weight
  • color
  • line-height
  • border
  • background-color
  • background-image
  • vertical-align

标签

行内元素
  • <a href="http://www.eefocus.com" target="_blank">
  • <img src="http://baidu.com/hao123.png" alt="hao123图片">
  • <span>我也可以是一段话,只是没法自主设置宽度而已</span>
块级元素
  • <p>我是一段话...</p>

二、了解

基本格式

Area-1
  • HTML 编码格式:utf-8
  • 页面尽量保持宽(600px~800px)、高(1024px),整体邮件不要太大,比如15k(各个邮箱不同)左右,不然很容易走垃圾邮箱
  • 样式使用行间样式,如:<td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;" >文字</td>其他的方式会被无视
Area-2
  • font-family 属性不能为空
  • 使用<table>布局,居中显示使用align="center
  • 不使用 table 以外的 bodymetahtml之类的标签,部分邮箱系统会把这些过滤掉
  • 不使用 flash、java、javascript、frames、iframe、activeX 以及 dhtml
  • 不要出现onmouseoveronmouseout,即使设定了,也会被过滤掉
Area-3
  • 区域与区域之间的上下、左右之间的空白间隙,使用标准的<td width=15>&nbsp;</td><td height="15">&nbsp;</td>,不要使用padding="15px" — 防止各个邮箱的解析不同

图片

  • 图片的每个属性都要定义完整,如:<img src="http://www.eefocus.com/logo.png" style="vertical-align:top;display:block;" width="210" height="100" alt="logo"/>
  • 定义style="vertical-align:top;" — 防止图片之间会有缝隙、变形等显示异常的情况
  • 定义display:block — 解决Outlook电子邮件客户中图片底部增加空白间距的问题
  • 限制每张图片的大小width="200 height="200"或者style="width:200px;height:200px;"
  • 添加每张图片alt属性,如:alt="我是干啥的" — 防止图片无法加载,也可以知晓这是做什么的
  • 图片格式使用jpg、png,尽量不要使用gif
  • 地址使用绝对路径(以http/https开头的)
  • 尽量不使用背景图片background-image(Outlook不显示,但是可以显示背景色:bgColor="f3f3f3"),直接使用图片<img src="">
  • 为了保持各个邮箱的一致性,尽量使用图片,大图可拆分成几张小图拼接,每张图片不要太大(15K以内)

链接

  • 地址绝对路径:<a href="http://www.eefocus.com">Logo Plus</a>
  • 地址不可过长(超过255个字符),尽量简短
  • 数量尽量不超过10个
  • 地址不要使用特殊符号,避免解析错误
  • 文字中出现链接地址,被屏蔽的风险比较高,一般是文字+链接、图片+链接
  • 不要使用地图功能链接,很容易被划分为垃圾邮箱
  • 为避免用户收到的邮件图片无法浏览,请制作一份和邮件内容一样的web 页面,然后在邮件顶部写一句话:“如果您无法查看邮件内容,请点击这里”, 链接到放有同样内容的web页面

Outlook邮箱规则

  • 内敛元素的padding无效、vertical-align不能被识别,可定义在td
  • 别想着继承的事儿,某一块的样式都单独设置,比如链接样式,文字样式等
  • p标签的width不起作用,可定义在td
  • p标签的字体颜色会被覆盖,可单独使用诸如span等重新设置字体颜色,或者使用style定义在td
  • 当设置 <img align="left" /><img align="right" />时,图片会脱离文档流,在其父元素设置了 marginpadding 的话,都无法使其下移,左移或右移
  • line-height默认为1.6
  • #FFFFFF关于颜色值,使用六位并且大写,使用简写在outlook下被忽略(很神奇)
  • 关于链接,可以单独设置:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
    a:link,
    a:visited {
    color: white;
    text-decoration: none;
    }

    a:hover,
    a:active {
    text-decoration: none;
    color: white;
    }

    a:focus {
    text-decoration: none;
    color: white;
    }
    </style>
Tips
  • 避免使用margin padding等属性,定义宽高的属性放在td,定义样式放在p或者span等标签内
  • 一般而言,指定表格单元格宽度要比指定表格自身宽度要好
  • 使用bgcolor来替找style=”background:”,在电子邮件客户端中HTML属性要比CSS样式更好,但是优先等级依旧是:css样式>html属性
  • 新浪邮箱会忽略掉cellpadding,一般设置为0

    三、悟道

    邮件设计

  • 电子邮件的设计过程是非常纠结的,为了美还得考虑制作过程的煎熬
    保持简单
  • 当设计一个HTML电子邮件时,请记住保持简单,编码的时候考虑坚持两列布局,这样能为您省去很多麻烦的事情
    减少图像的使用甚至避免使用
  • 记住你的设计不能太花哨,因为Outlook不支持背景图像
    窄屏最好
  • 因为电子邮件客户端预览窗口通常只是一小部分屏幕宽度,你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条
    保持一致
  • 记住,我们使用固定的元素属性cellpadding和cellspacing设置单元格的边距和单元格的间距。这样保持元素之间的间距一致性是正确的与谨慎的

    节选自:开始制作HTML Email 之邮件设计

    邮件制作

  • 电子邮件的制作过程是非常煎熬的,一不小心就乱了、乱了。

    邮件测试

  • 电子邮件的测试过程是非常痛苦的,也是最让人奔溃的,因为你很有可能拆了西墙补东墙

最后

我们看一下测试邮件:效果图

 评论