做一个 pad 的登录浮层用到的东东

虽说是一个很小的东西,但是使用到的东西还真不少。
1. 首先你要在你的静态页面中指定 viewport 的东西,要不然,他是自己缩放的,你根本不知道它的大小。

<meta name="viewport" content="width=device-width,initial-scale=1" />

2. 占位文字(placeholder)的 css 定义

.sos-pad-login ::-webkit-input-placeholder { color:#d2d2d2;font-size:20px;}

3. 输入框 focus 的时候,黄色框的问题

.sos-pad-login .ipt:focus{color:#333;border:1px solid #b5b5b5; outline:none;}

4. 去掉 ios 设备上,输入框的圆角效果

.sos-pad-login input{border:1px solid #d2d2d2;width:391px;height:42px;padding-left:14px; line-height:42px;font-size:20px;-webkit-appearance:none; border-radius:0;}

5. 当然如果用到了图片的背景图片的话,那就考虑一下双倍图的问题吧

@media screen and (-webkit-device-pixel-ratio: 2){
	.sos-pad-login .btn-cls,
	.sos-pad-login .btn-rfsh{ background-image:url(../images/sos_login_icon_tw.png);background-size:34px 80px;}
	}

6. 对input type=”text” 定义行高,会导致 placeholder 无法垂直居中,所以就不要定高度了

input {line-height:auto}

阿里云服务器配置 SVN 服务器与生产站点同步

作为linux的门外汉,一直觊觎svn的方便性,在有台aliyun的情况下,一起来搞搞。

1.环境

阿里云 centos5.5

2.安装svn

yum -y install subversion

3.配置

建立版本库目录

mkdir /alidata/www/svndata
svnserve -d -r /alidata/www/svndata

4.建立版本库

创建一个新的Subversion项目

svnadmin create /alidata/www/svndata/myproject

配置允许用户rsync访问

cd /alidata/www/svndata/myproject/conf
vi svnserve.conf
anon-access=none
auth-access=write
password-db=passwd

注:修改的文件前面不能有空格,否则启动svn server出错

vi passwd
[users]
#<用户1> = <密码1>
#<用户2> = <密码2>
myname=myaname

5.客户端连接

svn co svn://ip/alidata/www/svndata/myproject

用户名密码:myname

6.实现SVN与WEB同步,可以CO一个出来,也可以直接配在仓库中

1)设置WEB服务器根目录为/alidata/www/webroot

2)checkout一份SVN

svn co svn://localhost/alidata/www/svndata/myproject /alidata/www/webroot

修改权限为WEB用户

chown -R www:www /alidata/www/webroot/myproject

3)建立同步脚本

cd /alidata/www/svndata/oplinux/hooks/
cp post-commit.tmpl post-commit

编辑post-commit,在文件最后添加以下内容

export LANG=en_US.UTF-8
SVN=/usr/bin/svn
WEB=/alidata/www/webroot/
$SVN update $WEB –username myname –password myname
chown -R www:www $WEB

增加脚本执行权限

chmod +x post-commit

这样,我们上传svn后,生产站点就能立马显示出来了,自动化程度高了很多。

关于网站图标的那几段代码

下面这段代码是从 Foundation 网站上取下来了,留作备用。

    <link rel="icon" href="assets/img/icons/favicon.ico" type="image/x-icon">
	<!--针对拥有高分辨率视网膜屏第三代 iPad : -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/icons/apple-touch-icon-144x144-precomposed.png">
	<!--针对拥有高分辨率视网膜屏 iPhone : -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/icons/apple-touch-icon-114x114-precomposed.png">
	<!-- 针对 一代 二代 iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/icons/apple-touch-icon-72x72-precomposed.png">
	<!-- 针对非视网膜屏的 iPhone, iPod Touch, 和安卓 2.1 以上设备: -->
    <link rel="apple-touch-icon-precomposed" href="assets/img/icons/apple-touch-icon-precomposed.png">

从上面我们可以看到三种尺寸,那就是视网膜屏的 114×114像素,针对非视网膜屏 ipad 一代和二代的 74×74像素,剩下的就是 57×57像素.

这里面好像还没有针对windows Phone的字眼,再找找,它就在这里:
自定义站点图标

响应式设计-谈谈伪类和伪元素

啥是伪类?啥是伪元素,我想还是从我们熟悉的东西开始吧!可能我们最初接触伪类和伪元素应该是从 a (链接标签)开始的,我们通过 :link,:visited,:hover,:active,通过这些伪类,我们就改变了那些链接的文字颜色,也就是说我们改变了被选择元素的某些状态。

关于伪类的定义,我从 MDN 看到的描述是这样的:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

如果我去断章取义加谷歌翻译的理解的结果是:
伪类是一组关键字,可以定义被选择元素的特殊状态。比如 :hover 将会定义当用户的鼠标悬浮到被定义选择器的样式。
伪类和伪元素,让我们不仅可以定义文档树中的元素,也能让我们扩展到这些方面之外的东西,比如我们的访问记录(如 :visted),内容的状态(如某些表单元素的 :checked),或者鼠标的位置(如 :hover 让我们知道我们的鼠标是否在某个元素上面)。

下面是琳琅满目的伪类选择器,有些我们很熟悉,有些似曾相识,但是更多的可能是路人甲,附上链接地址给各位看官,方便大家了解。

从上面,我们可以说伪类就是给我们标示状态的,我们为什么称其为伪类呢?波塞冬(pseudo)的字面意思是冒充的、假的,也就是这些东西并不是真正的类,我们定义是他的状态。

但是我们的伪类还有:after,:before我们一直使用的,这些东西虽然没有给文档树增加节点,但是他们确实增加了内容,这样咱们做到的不仅仅是标示了状态,我们还增加了内容,所以我们有提出了伪元素的概念。下面给大家看看 MDN 的描述吧!

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

都有哪些伪元素选择器呢?

我们看到在语法上面,伪元素和伪类最明显的区别是多了一个冒号,但是我们用 : :: 获得的结果是一样的,为毛?

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

::selection always starts with double colons (::).

我们可以看到,两个冒号是在css3中为了让我们区分开来伪类和伪元素。That’s all,吓我们一跳。

故事到这个地方还没有完,既然伪元素是 css3 中的东西,那它的兼容性咋样呢?答案如下:

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

就是这样,如果你现在也在忙于响应式,那么你就要关注了,因为你要为IE8及以下的用户负责,要不然你的产出物可能要闯祸,你要负责,因为这些东西上流淌着你的血液。所以我们如果能用伪类的话,就先别用伪类选择器了,这可能是最直接的解决方案了。

但是两个冒号 :: 带来的麻烦不仅仅是在 IE8 及以下的浏览器上不解析,如果你像下面这么写 css 样式,那你要注意了,因为你的 css 在 IE8 上没有被解析。


.a,
.b::after{color:#f00}

我们可能认为即使IE8不解析伪元素,.a 的样式也能解析,但结果是 .a 在 IE8 及以下也不生效了。因此在群组选择器中是用伪元素要注意了。

转载请注明出处:响应式设计-谈谈伪类和伪元素

响应式设计-颜色透明度篇

在响应式设计中,我们需要面对的一个问题就是颜色在各个浏览器下的不同效果,这个不同不是颜色色值的不同,关键在透明度上面。
我们都知道 css 中的rgba 是一大福音,我们不需要用 png24 模仿那些忧报琵琶半遮面的效果(毛~玻璃),听上去很美。
但是,我们的响应式不仅要支持那些高富帅的浏览器,屌丝们使用的 IE8\IE7\IE6 也必须保证他们的效果。IE8 及以下的浏览器虽然不支持RGBA中的a,但是他们会识别RGB,这样我们通过纯色透明的方式的一些视觉效果就死翘翘了,原始的颜色裸在了沙滩上。
我们如何解决呢?
首先我们想到的是 HACK,这是Builder感觉最爽的,那种让IE浏览器臣服的感觉何止一个爽字,由于俺本身研究的不深入,也就是对 * 和 _ 有了解,但是IE8咋搞?

<div style="width:100px;height:100px;background:rgba(102,204,0,0.6);background:rgb(163,224,102)\0;*background:rgb(163,224,102);">
</div>

从上面的代码我们看到IE8得到了我们想要的颜色,我们使用了 \0 的hack,这样我们就解决了IE8的问题,只是……我们还要继续重置 IE7 及以下。
我们知道颜色的表示有 十六进制的(如:#FFF,#303030),还有三原色的 RGB(rgb(255,255,255));还有吗?确实还有,那就是HSL(Hue,Saturation,Lightness),就是色相、饱和度、亮度。我们可以查看一下浏览器关于对这种颜色表示方式的支持方式,答案是下面的样子:

  • Firefox 3.05+
  • Google Chrome 1.0.154+
  • Opera 9.6 +
  • Safari 3.2.1 +
  • Internet Explorer 8-

是不是有答案了?IE8以上的颜色我们可以使用HSL的表达方式,那么IE8及以下就用rgb或者16进制吧!我想答案是可以的

<div style="width:100px;height:100px;background:rgb(163,224,102);background:hsla(90,100%,40%,0.6);">
</div>

这样我们就解决了IE8下颜色透明的问题。

IE10下链接点击时背景色会变成灰色

IE10下,链接点击时,背景色会变成灰色,
影响到的平台:window
解决方法:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
a{background-color:transparent;}
}
详情请查看:
http://msdn.microsoft.com/library/windows/apps/Hh465764

Window Surface 下 设置的 viewport 属性无效

我们会在页面的 meta viewport 中设置如下属性,禁用页面的缩放:

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1"/>

但是当使用 拥有 IE10 的surface时,这个meta 属性并没有生效,旋转的时候,内容缩放了,没有按照原始大小显示,我们的处理方法是在css 中增加专门针对IE的 viewport 属性

@-ms-viewport { width: device-width; }

详情请点击 http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx

用 rem 单位定义文本大小

使用什么单位定义文字大小依然是一个比较有争议的地方,即使在此时此刻。不幸的是,在众多的提议和方法中,技术层面上并不理想。我们期望的是一个理想的解决方案。

这里有两个主要的技术方案:
1.尺寸使用 px
2.尺寸使用 em

在我们披露第三项技术之前,让我们先来回顾一下过去的两种实现方案

使用 px 定义尺寸

在互联网发展的早期阶段,我们使用像素去定义文本的大小尺寸。这种方法比较可靠,并且表现一致。不幸的是,当用户使用 IE 浏览器的时候(即使使用的是IE9),用户无法通过浏览器自带的功能去增大或者改小文字的大小。这些东西关系到你的网站可访问性,这可是大事。IE最近的版本拥有放大功能,它可以将页面上的所有内容扩大,这个特点在其他主流的浏览器中也有。这个功能使IE的可访问性的问题减少了。

就我个人而言,我曾经是 基于像素布局的拥堵,它能够提供一致的表现,用户有多种工具去调整视图,来提升他们的可访问性。除此之外,我们还能做什么?

使用 em 定义大小

在IE中调整文字的大小功能缺失依然是个缺陷。围绕这个问题,我们可以使用 em 单位。Richard Rutter 的文章 How to size text using ems,是我读到的最早关于此的文章,那是在2004年。

这种技术方案通过在 body 标签上通过百分比的方式改变基础文字尺寸。这种方法让让我们有一个基准,1em等于10像素,来替换掉默认的 1em 等于16像素。为了能让正文的文字大小是 14像素,我们需要将其设置为 1.4em。

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

这种基于 em 的文字计算方式是很繁琐的,我们有没有更好的方法?

使用 rem 定义尺寸

CSS3引入了一些新的单位,包括 rem 单位,它代表的是 “root em”(基础em)。看到这里,你如果依然感兴趣,让我们看看 em 标签是如何工作的。

em 单位是相对其父元素的 font-size,这就导致了其再次计算的问题。rem 标签是相对于其根的 或者 为其 html 标签。这样就意味着我们可以在 html 标签上定义一个单独的百分比尺寸,然后其它的单位都会基于此来计算。

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

我定义了一个基准的文字尺寸 62.5%,让我们的计算更加方便,就像我们使用 px 定义那样。

但是浏览器支持的情况我们是不是要去考虑一下呢?

你可能比较奇怪,浏览器对这个新单位的支持还是很不错的:Safari 5, Chrome, Firefox 3.6+,甚至 IE9都支持这个新单位,更可喜的是IE9通过使用rem单位可以支持重新定义大小。(同时要指出的是 Opera(至少在版本11.10)都没有支持这个属性单位)。

我们对不支持 rem 的浏览器如何做兼容处理呢?我们可以通过使用 px 向后兼容,如果你不介意用户对旧的IE浏览器版本重置文本大小(在 IE7 和 IE8 中依然有缩放整个页面的功能)。为了达到这个目的,我们会先用 rem 定义文字大小,然后使用 px 单位重置前面定义的rem 单位。

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

现在,我们可以在所有的浏览器中保持精确一致的尺寸了,并且可以对文本在目前主要的浏览器中调整文字大小。

关于浮点数的计算方式,狠点”小数点单位的探讨“文章

原文地址:http://snook.ca/archives/html_and_css/font-size-with-rem

译文地址:http://varhi.com/?p=5629

如何制作HTML邮件

作为页面制作工程师,我们经常在工作中涉及到HTML页面的设计和制作,平时我们可能知道用table布局、不能使用浮动属性等一些零散的知识,如何将其系统的整理出来呢。下面 Campaign Monitor 的研究可能会给我们带来启示,从哪些方面来测试邮件,并且通过大量的事实验证其数据的来源。由于本文是翻译的文章,有不明了的地方还请各位看官移步到 http://www.campaignmonitor.com/resources/will-it-work/ ,同时,如果你是邮件客户端的开发人员 Email Standards Project 可能也能帮到你,这里面有各个受欢迎的邮件客户端的开发情况。国内的话, http://www.chinaemail.com.cn/ 上面有一些关于国内邮件行将的新闻。

在挑战不断出现的HTML邮件设计领域,不断出现的新功能、先思想让我们在测试哪些功能支持哪些功能不支持方面面临巨大的工作量的挑战。

  • CSS 支持这是一套完整的不断更新的CSS手册,标注哪些属性在邮件设计中被支持或者不被支持的情况。
  • 邮件设计规范在此我们研究制作一封成功的邮件所需要的技术、设计和信息元素等。
  • 邮件客户端统计和大家分享哪些邮件程序是受欢迎,哪些是不受欢迎的。
  • 视频邮件在邮件中嵌入视频是否可行?如果可行,你会使用吗?
  • 最佳宽度我们会调查一下相关的影响因素,并且根据这些情况探讨一个最佳的宽度方案。
  • 图片被阻止研究哪些客户端会阻止图片和这种情况下我们如何做。
  • 在邮件中使用表单我们拓展了一些在邮件中表单是否功能正常相关知识
  • Alt 属性通常情况下,邮件中的图片默认不会被显示,因此显示哪些替代信息就很重要。
  • 在邮件中使用 Flash我们进行了一些测试来证明 Flash 能否在邮件中工作。(未翻译)
  • 主题行使用符号在标题行增加符号看上去能够获得更多的注意,这在所有的邮件客户端中都正常吗?

CSS支持

终极规范

设计一封在各个邮件终端渲染结果一致的邮件是很费时的事情。即使一些简单的css属性,在不同的客户端也有很大的差异,甚至在同一个客户端的不同版本,这种差异也很大。

我们将所有问题作了整理,这样就能节省你的时间和挫败感。我们的测试覆盖24中不同的邮件客户端,包含受欢迎的桌面端、web端、移动端。

随着邮件客户端数量的不断增长,我们决定把重点放在市场上最流行的10个电子邮件客户端上面,以简化基于web的版本的指南。对于整个桌面、web和移动电子邮件的24中电子邮件客户端的完整报告,我们将提供PDF版本的指南。(由于会实时更新下载地址,请到下面的地址下载 http://www.campaignmonitor.com/css/)

Style Element Outlook 2007/10/13 + Outlook 2000/03 Apple iPhone/iPad Outlook.com Apple Mail 4 Yahoo! Mail Beta Google Gmail Android 2.3 (Gmail) +
<style> in <head> Yes Yes Yes Yes Yes Yes No No
<style> in <body> Yes Yes Yes Yes Yes Yes No No
<link> in <head> Yes Yes Yes No Yes No No No
<link> in <body> Yes Yes Yes No Yes No No No
Selectors
* No Yes Yes No Yes No No No
E Yes Yes Yes Yes Yes Yes No No
E[foo] No No Yes No Yes No No No
E[foo=”bar”] No Yes Yes No Yes No No No
E[foo~=”bar”] No Yes Yes No Yes No No No
E[foo^=”bar”] No Yes Yes No Yes No No No
E[foo$=”bar”] No Yes Yes No Yes No No No
E[foo*=”bar”] No Yes Yes No Yes No No No
E:nth-child(n) No No Yes No Yes No No No
E:nth-last-child(n) No No Yes No Yes No No No
E:nth-of-type(n) No No Yes No Yes No No No
E:nth-last-of-type(n) No No Yes No Yes No No No
E:first-child No Yes Yes No Yes No No No
E:last-child No No Yes No Yes No No No
E:first-of-type No No Yes No Yes No No No
E:last-of-type No No Yes No Yes No No No
E:empty No No Yes No Yes No No No
E:link Yes Yes Yes Yes Yes Info No No
E:visited Yes No Yes Yes No Info No No
E:active No Yes No Yes Yes Yes No No
E:hover No Yes No Yes Yes Yes No No
E:focus No No Yes No Yes No No No
E:target No No No No No No No No
E::first-line No Yes Yes No Yes Yes No No
E::first-letter No Yes Yes No Yes Yes No No
E::before No No Yes No Yes No No No
E::after No No Yes No Yes No No No
E.classname Yes Yes Yes Yes Yes Yes Info No
E#id Yes Yes Yes No Yes Yes Info No
E:not(s) No No Yes No Yes No No No
E F Yes Yes Yes Yes Yes Yes No No
E > F No No Yes No Yes Yes No No
E + F No No Yes No Yes Yes No No
E ~ F No Yes Yes No Yes No No No
Text & Fonts
direction No Yes Yes Yes Yes Yes Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-size Yes Yes Info Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-overflow CSS3 No Yes Yes Info Yes Info Info Yes
text-shadow CSS3 No No Yes Yes Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
white-space Yes No Yes Yes Yes Yes Yes Yes
word-spacing No Yes Yes Yes Yes Yes Yes Yes
word-wrap CSS3 No Info Yes Yes Yes Yes No No
vertical-align No Yes Yes Yes Yes Yes Yes Yes
Color & Background
color Yes Yes Yes Yes Yes Yes Yes Yes
background Info Yes Yes Info Yes Yes Yes Info
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image No Yes Yes Info Yes Yes Yes No
background-position No Yes Yes No Yes Yes No No
background-repeat No Yes Yes No Yes Yes Info No
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes
HSLA Colors CSS3 No No Yes No Yes No No No
Opacity CSS3 No No Yes Yes Yes No No No
RGBA Colors CSS3 No No Yes No Yes No No No
Box Model
border Yes Yes Yes Yes Yes Yes Yes Yes
box-shadow CSS3 No No No Info No No No No
height No Yes Yes Yes Yes Yes Yes Yes
margin Info Yes Yes No Yes Yes Yes Yes
padding Info Yes Yes Yes Yes Yes Yes Yes
width Info Yes Yes Yes Yes Yes Yes Yes
max-width No No Yes No Yes Info Info Yes
min-width No No Yes No Yes Info Info Yes
Lists
list-style-image No Yes Yes No Yes Yes No No
list-style-position No Yes Yes No Yes Yes No No
list-style-type No Yes Yes Yes Yes Yes Yes No
Tables
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes Yes Yes Yes Yes
caption-side No No No Yes No Yes Yes Yes
empty-cells No No Yes Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes

在此页面可以看到更新日志:http://www.campaignmonitor.com/css/

邮件客户端设计规范

在你的职业生涯的某个阶段,你的客户可能会提出让你设计HTML邮件的需求。在你着急给客户解释所使用的炫酷的社会化媒体前,请记住,如果操作得当,邮件依然是提升你和客户的在线营销方式。一项最近的调查显示,你每在邮件营销上花费1美元,你将会产生40美元以上的回报。这远远高于其它的市场渠道,包括一些听着很酷的方式。

一个好的邮件营销策略的成功取决于很多因素。许可、相关性、持续性和引人入胜的内容都非常重要。即使上面的因素都考虑到了,对于设计师来说最大的挑战是如何让邮件在广大受欢迎的客户端上完美的渲染。

幸福的家庭都是相似的,不幸的家庭各有各的不幸.

在我们进入细节之前,这里有些我们在设计HTML邮件必须意识到的因素。制作一封邮件和制作web页面还是有很大不同的。当不同的浏览器都在不断向标准靠近的同时,大多数邮件客户端却止步不前,甚至有一些是在退步的。在2007年,Microsoft 将 Outlook 的渲染引擎从 IE 转换成 Word的渲染方式。确实是这样的,看上去像一个文字处理器。而一些基于web的邮件客户端,像Gmail和Hotmail,则增加了一些怪异的模式,还有Lotus Notes的一些技巧,现在你能意识到在不同的客户端有其自己的“潜规则”。

虽然这些不是挑战,我们会一一搞定他们。根据我的经验来看,我们解决这些问题的关键是要关注下面三件事情。首先,保持简单,你的邮件设计的越复杂,你的邮件在某个受欢迎的、不支持标准的客户端上“抽风”的可能性就越大。其次,你需要将你的编码技巧退步十年,这通常意味着我们使用嵌套的表格,将CSS写成内联的形式,还有一些编码规范我将在下面为大家一一呈现。最后你需要对你的设计进行规律性的测试,也许一个模板在Hotmail在今天考到的是好,一周之后就面目全非了。

设置你的最小公分母

保持理智,当我们制作一封HTML邮件时确认支持哪些客户端是一个很好的决策。下面通用的调查是很有帮助的,你的电子邮件客户端的不同之处可以很方便的分辨出来。如果你有足够的时间,这里有些工具可以让你知道你的邮件订阅者使用的是哪些邮件客户端。相信我,如果你的测试结果显示基本上没有人使用Lotus Notes,这样你就可以忽视那些挫折和迷惑了。

弄清楚了你所针对的邮件客户端,不仅可以是邮件制作的流程变得简单,同时也能大大节省你的测试周期。我写这篇文章的目的,就是想和大家分享针对这些流行的客户端作出最优的结果,包括声名狼藉的Gmail,Lotus Notes 6 和 Outlook 2007.请记住,在不同邮件客户达到像素级的完美无异于痴人说梦。

让我们走起。

使用表格布局

因为诸如Gmail和Outlook 2007 无法支持浮动(float)、外边距(margin)、内填充(padding),你需要使用表格来作为你的邮件的框架。虽然表格嵌套的方法被广泛支持,但是在对单元格的宽度、外边距和内填充的处理方法并不一致。为了达到最优的效果,当制作表格结构时,请记住下面的技巧。

为每个单元格设置宽度,而不是表格

当你把表格宽度、td 宽度、td的填充和CSS的填充写到一封邮件时,你看到的结果可能是每个邮件客户端它们看上去都不一样。最可靠的方法是我们将为表格的每个单元格(th,td)设置宽度,而不是表格(table)本身。

<table cellspacing="0" cellpadding="10" border="0">
	<tr>
		<td width="80"></td>
		<td width="280"></td>
	</tr>
</table>

永远别指望邮件客户端能够计算出你没有指定宽度的单元格的宽度。它绝对不会。同时也要避免使用基于百分比的宽度,像 Outlook 2007 这样的客户端从来不考虑这种宽度方式,特别是这些嵌套的表格。像素级视觉,如果你想对每个单元格做填充,可以使用表单的单元格填属性或者用CSS的内填充,但是不要这两种一起使用。

嵌套迷思

表格的嵌套相对于设置左右浮动和外边距(margin)或者表单单元格填充的方法更加稳固。如果你能使用这种表格嵌套的方法达到相同的效果,这将会给你在那些蹩脚的(buggier)邮件终端上面获得最好的结果。

使用一个容器表单来设置 body 背景色彩

很多邮件客户端会忽略掉在CSS中或者<body>标签中设置的背景色。针对这种情况,将你的整封邮件用一个宽度为100%的表单包起来,并且为其设置背景色。

<table cellspacing="0" cellpadding="0" border="0" width="100%">
	<tr>
		<td bgcolor=”#000000”>
			Your email code goes here.
		</td>
	</tr>
</table>

你可以使用同样的方案在背景图片的设置上,需要记住的是某些邮件客户端是不支持背景图片的,这样你就需要设置一个背景颜色作为备份方案。

在单元格中避免使用多余的空格(whitespace)

尽最大可能,避免<td>标签中出现空格。某些邮件客户端(Yahoo!或者Hotmail)可能会在某些场景下,对单元格的上面或者下面增加额外的填充,把你的设计破坏掉。

CSS 和基本的文字格式

当某些邮件设计师尽他们最大的努力去避免使用CSS时,他们又会去依赖梦魇般的<font>标签,但实际情况是很多的CSS属性是被大部分邮件客户端支持的。请查看下面的跨邮件终端的综合CSS支持列表list of CSS support,从中你也能发现一些安全的属性和一些应该被避免使用的属性。

将css写成内联(inline)的样式

Gmail就是这方面的罪魁祸首。CSS被从<head>和<body>中剥离,我们别无选择的会将样式写成内联的形式。一个好消息是你可以完全自动化的完成转化。像Premailer提供意见点击的方式完成这一过程。我强烈建议你将此步骤作为你构建活动的最后一步,你就能感受到这个CSS的所有益处。

避免使用字体的简写和十六进制计数法

一部分邮箱客户端会放弃对简写的css字体属性的解析。比如,绝对不要将你的字体样式设置成下面的样子。

p { font:bold 1em/1.2em georgia,times,serif; }

相反,我们应该写成下面的形式:

p {
	font-weight: bold;
	font-size: 1em;
	line-height: 1.2em;
	font-family: georgia,times,serif;
}

谈到字体这个话题,我最近也在不同的邮件客户端测试引用字体(@font-face)。结果是凄凉的,这些浏览器安全的字体在邮件中使用还是遥遥无期。

当我们用CSS来声明颜色属性时,有些邮件客户端并不支持简写的16进制的颜色值,比如 color:#f60; 我们需要将其补充完整 color:#ff6600;。为了达到最优的效果,我们需要使用常规写法。

段落

像前面提到的单元格的间距,段落的间距也无法做到所有客户端的一致。我看到过设计师使用两个<br>或者用DIV写上内联(inline)的外边距(margin)样式弥补这个短板,但是我最近的测试显示大多数情况下对段落的支持都还是比充足的(有一段时间 Yahoo! 根本不支持段落标签)。

最好的实践方法是对每个段落通过内联(inline)的方法设置外边距(margin),像下面这样:

p { margin: 0 0 1.6em 0; }

再次提示,在你构建邮件的时候通过在head标签中增加样式,然后通过Premailer将他们转化成每个段落的内联样式。

如果你的设计对高度是很敏感的或者需要像素级别的完美,我强烈建议你不要将所有的段落写到一起,而是将文本的格式化工作放到表单的单元格中来做。你可能会需要使用到表单的嵌套或者单元格填充(cellpadding)/CSS 来达到期望的样子。下面就是一个例子:

<td width="200" style="font-weight:bold; font-size:1em;
line-height:1.2em; font-family:georgia,'times',serif;">
	your height sensitive text
</td>

链接

某些邮件客户端将会用他们的默认样式覆盖你的链接色,你可以通过两部来防止其发生。第一,针对每一个链接设置一个内联的(inline)的颜色:

<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>

接下来,增加一个冗余的 span 标签在 a 标签中。

<a href="http://somesite.com/" style="color:#ff00ff">
	<span style="color:#ff00ff">this is a link</span>
</a>

也许这些方案看上去比较过激,如果这个颜色对你的设计很重要,这个多余的 span 标签是你达到一致表现的最好解决方案。

HTML邮件中的图片

很重要的一件需要牢记在心中的关于图片的事情是你的订阅者可能看不到你的图片。如果你有这方面的准备,你就会保持你的内容简单,并且重要的内容不通过图片的形式来展示。

在这个思想的指导下,在使用HTML邮件的过程中,下面有一些基本的要领需要牢记:

避免占位图片

虽然使用占位图片和嵌套表格的方式在10年前很流行,许多邮件客户端已经将其排除作为一种可靠的技术。很多客户端会使用一个相同尺寸的空占位来替换图片,另外一些会将所有的图片移除。大多数邮件客户端会给图片赋予默认的图片区块,这将导致订阅者的第一感觉很差。坚持将单元格赋予固定的宽度,让其在没有图片的时候版式不会乱掉。

将图片定义尺寸

如果你没有给每个图片设置尺寸,当图片没有被下载时,有些客户端会自己发明一个他们自己的尺寸,你的版式就乱掉了。同时,确保你的所有图片在被用到邮件中前,都被赋予了正确的尺寸。某些客户端会忽略你代码中设置的尺寸,而去使用真实的图片尺寸。

避免使用 PNG 图片

Lotus Notes 6 和 7 并不支持 8位(8-bit)和24位(24-bit)的 PNG 图片,所以需要使用GIF或者JPG格式的图片,即使这会增加而外的图片大小。

为背景图片提供备份的颜色

Outlook 2007 不支持背景图片(aside from
this hack
to get full page background images working)。如果你想在你的设计中使用背景图像,提供一个背景色作为备份支持方案。这样就能同时解决图片被屏蔽和Outlook 2007的问题。

不要忘记标注替代文本(alt text)

缺少标准的支持意味着邮件客户端对语义化和访问性良好的HTML邮件的破坏性是很大的。即使这样,从图片可能被屏蔽角度看,提供替代文本也是很重要的。这样即使图片在默认状态下被限制,大多数邮件客户端也能显示提供的文本来替代。另外还需要技术的是某些客户端,比如 Outlook 2007, Hotmail 和 Apple Mail 在图片被屏蔽的时候,并不提供替代文本(alt text).

针对 Hotmail 使用显示hack

令人费解的是,Windows Live Hotmail 对每个图片增加了几个像素的填充。一个变通的方案就是使用下面的显示属性来解决这个问题。

img {display:block;}

这样就能移除掉Hotmail的填充值,但是你也可能会给其它客户端埋下隐患。

避免使用浮动属性(float)

Outlook 2007 和早期版本的 Notes 并不支持浮动属性(float)。在邮件中我们可以使用对齐属性在针对图像标签做到浮动图片的目的。

<img src="image.jpg" align="right">

如果你在 Yahoo!的邮件中发现图片的怪异表现,增加 align=”top” 可能能够解决你遇到的问题。

关于图片的更多的细节信息,你可以阅读这篇文章

视频邮件

由于缺少 Javascript 或者其他对象标签(object tag)的支持,视频邮件最大的程度就是gif动画(如果你认为那是视频的话)。尽管如此,我最近做的一些关于用html5 videio 标签的测试结果,还是让人感觉不错。

HTML 5的标签目前在一部分邮件终端是无法运行的,包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作为如果视频不被支持的补救方法,你可以提供稳定的备选内容,比如gif 动画或者一个可以点击到浏览器播放视频的图片。

当然,你是否需要将视频添加到你的邮件里面,那就是另外一个议题了,如果你的答案是肯定的,你可以使用这些代码案例

获得更多的视频邮件信息,可以阅读这篇文章

关于移动端邮件的那些事

移动端有机胺的情况近期显得比较杂乱了,随着iPhone,Android的发明和Palm和RIM的改进,认为移动端电子邮件终端不重要的年代一去不复返了。

为了给移动端订阅用户良好的体现,我们在编码的过程中也有几个关键点需要牢记心中。

保持宽度小于600像素

受限于邮件客户端的视窗,这条规则来移动视窗到来之前的年代就很重要。事实上,iphone 的视窗是320像素,Droid是480像素,Blackberry大概360像素。坚持最大600像素宽的设计,能够让你的邮件缩小到上面提到的设备上面依然可读。这个尺寸在桌面端和web端的预览效果也很好。

注意文本尺寸的自动调整

作为一个好的特性,基于webkit邮件客户端(比如 iPhone, Pre 和 Android) 能够自动调整文本的大小来提高阅读性。如果你的测试结果表明这项特点给你带来的好处是破外了你的设计,你可以通过下面的属性禁用:

-webkit-text-size-adjust: none;

不要忘记去测试

虽然近几年邮件客户端对标准的支持并没有取得长足的进步,但是某些邮件客户端的改变却从未停止(有好有坏),基于 web 的客户端,如 Yahoo!、hotmail 和 Gmail 在这方面乏善可陈。我看到过无数次可行的设计方案被停止支持,没有任何解释。

基于这个原因,你也要对你的邮件设计保持规律的测试。我发现每个月进行一些快速的测试的小技巧,特别基于web的客户端。好的消息是经过几次设计和测试,你将会从这些杂乱无章中找到规律。一些潜在的陷阱将变的可以预计,一个对邮箱友好的设计模型也会在你心中成型。

展望未来

对邮件设计新手和标准主义者来说,HTML邮件设计都是难以下咽的黄莲,有其是面对今天变化无常的客户端,随着HTML5变得指日可待,不确定的因素越来越多。邮件客户端的开发工程师会把握这次机会改正过去的错误并将其适应现在的情况吗?为了达到这个目的,一些团体-比如邮件标准项目(Email Standards Project)-提出了类似上面的建议,如忘记<blink>和<marquee>,即使这样,事情的成败与否也需要时间来验证。

虽然是很受争议(或者时尚)的媒介,电子邮件本身已经验证,它将继续成为最成功、最有针对性的推广渠道。作为HTML邮件设计师,这些设计技巧就是你的武器,你不仅可以拓展你的服务,也能获得一种独特的欣赏标准。

原文地址:http://www.campaignmonitor.com/resources/will-it-work/guidelines/

人气邮件客户端

每次当订阅者打开来自 Campaign Monitor 的邮件时,我们都会追踪用户使用的是哪一款客户端。从2009年以来,我们从数以亿计的邮件中统计出大家使用的邮件客户端的受欢迎程度。

移动邮件客户端现在已经领先

在今年早些时候,我的朋友们在 Return Path 预计移动邮件客户端将会2012年7月超过web和桌面客户端,但是我们发现这件事情的发生远远早于预期,在2月份当移动客户端超越web客户端的使用时。在4月,桌面客户端也丧失了他们的最高点,移动客户端的发展确依然没有看到有衰退的迹象。在下面的图片中你能很清楚的看到移动市场份额与2011年5月份更新以来获得了显著的提升,桌面端和web端的市场份额始终在下降。

最受欢迎的邮件客户端

下面是邮件客户端市场份额2012年9月的情况。这些数字并不是排他性的,因为一些人在一个月内会使用多种客户端。

最受欢迎的邮件客户端

Email Client Popularity
iOS Devices 35.60%
iPhone 25.05%
iPad 9.74%
iPod Touch 0.81%
Microsoft Outlook 20.14%
Outlook 2000, 2003, Express 7.68%
Outlook 2007 6.51%
Outlook 2010 5.96%
Hotmail 13.57%
Apple Mail 11%
Apple Mail 5 4.31%
Apple Mail 4 3.75%
Apple Mail 6 1.70%
Apple Mail 3 1.04%
Apple Mail 2 0.20%
Yahoo! Mail 9.85%
Gmail 8.43%
Android 4.74%
Windows Live Desktop 2.34%
Thunderbird 1.03%
AOL 0.91%
AOL Mail 0.79%
AOL Desktop 9.1 0.12%
Sparrow 0.19%
Windows Phone 7 0.14%
Lotus Notes 6 & 7 0.07%
Blackberry 0.05%
Excite 0.02%
Palm WebOS 0.01%
Entourage 2004 0.01%
Unable to detect email client 10.25%

市场份额波动

从市场份额的波动可以看出哪些客户端增长或者下降的更快。这些统计数据来源于2011年和2012年的数据。

客户端波动情况

最适宜的宽度

最近你可能意识到你收到的大多数邮件被设计成了固定宽度的,而不是自适应的布局。

这是因为大多数邮件客户端和基于web的邮件内容提供者并没有使用屏幕的全部宽度来显示你的邮件信息。不管是有广告的Gmail,还是有菜单的Hotmail或者是Outlook,整个屏幕中的一部分早已经被用掉了。

请记住,你的订阅者都是比较忙而且不耐烦的,所以水平滚动条对邮件来说显得没必要。

让你的邮件的尺寸保持在550-600像素是一个好办法,这能满足你绝大多数的情况下,让你的订阅者能够浏览到他想看到的内容。

多少高度合适?

很明显,你发送的邮件的高度取决于每封邮件的内容,它们看起来可能差异很大。同时,你需要记住的是很多收件者会通过预览窗口来决定是否看你通篇的邮件。

预览窗口的平均高度大约300-500像素高,因此请确保你的重要内容点在这些区域。第一印象很重要。一个好的确认方案看你的邮件在不用的读者中的样子的方法是使用我们的工具和垃圾邮件测试工具,能帮助你获得邮件的截屏效果。

图片在HTML邮件中被阻止

不论是客户端的默认行为或者个人喜好,很多人接受在HTML格式的信息中的图片是被屏蔽的情况。更有一部分用户,他们将html格式也会屏蔽掉。通过Merkle在2009年的调查中,只有48%的邮件接收者能够自动看到图片…无论是何种情况,收件人屏蔽掉图片是符合逻辑的,我们必须对这种情景做好准备。

当我们的图片被屏蔽掉下面会怎样?如何去提高可访问性和优化展现效果?哪些默认设置会对这些有帮助?让我们坐下来一起寻找答案。

请小心使用,我们应该认真考虑图片被阻塞的情况和我们能够做些什么。这里有很自然合理的理由用户为什么禁掉他们,但是采取一些合适的措施我们依然能够改善订阅者的体验。

默认邮件客户端设置

每个客户端都会有其默认设置来显示/隐藏图片。虽然大多数邮件客户端有关于显示图片或者隐藏图片的设置,但是有些确实有条件的,这取决于已知的发送者或者其它因素。下面的图表就标识出了广泛使用的桌面端和web端的默认设置。(注意:这些设置是我自己的版本的,不同的版本可能会有差别)

Email Client Images displayed by default Images disp. for trusted senders Renders ALT Text
Desktop clients
Outlook 2007 No Yes Info
Outlook 2003 No Yes Yes
Outlook for Mac 2011 No Yes Yes
Outlook Express Yes No Yes
Windows Live Hotmail No Yes Yes
Apple Mail Yes No No
Thunderbird No Yes Yes
AOL Desktop No Yes No
Lotus Notes Yes Yes Yes
Webmail clients
Hotmail No Yes No
Yahoo! Mail Beta No Info Yes
Gmail No Yes No
AOL Webmail No Yes Yes
Mobile clients
iPhone/iPad Yes Yes Yes
Android default No No Yes
Android Gmail No Info No
Windows Mobile 7 No No No
Blackberry OS6 No No Yes

成功部署的的建议

从一个设计师的角度,如果一封邮件达到下面的目标我们将认为其成功:

  • 在启用图像显示的客户端中,保持视觉完整。
  • 在禁止图片显示的客户端中,保证可读性。
  • 障碍用户可读。
  • 确保收件者使用移动端和拨号上网可访问。
  • 邮件是受到订阅者允许的。
  • 符合CAN-SPAM法案的要求。
  • 合法地通过垃圾邮件过滤器采用常见的测试。

通过上面的列表,我们能够很清楚的看到HTML邮件设计的时候,考虑到图片被阻塞是多么重要的事情。对图片的依赖可能会导致许多不同层面上的故障,准备一种当图片无法显示的的情景,通过这个特点让邮件接收者有更广泛的设置/参考内容。

成为“已知发件人”

在我的测试中,几乎所有的客户端当信息来自于“已知发件人”(包括白名单、联系列表或者地址簿)时都会自动显示图片。因为我们的订阅者曾主动要求获得我们发出的电子邮件,他们自然希望确认他们能收到信息。当订阅者不知道如何设置功能的时候,垃圾邮件过滤会干扰着正常的信息沟通。简单的提示能大大增强我们成功的几率。

让订阅者将邮件列表地址加到他们的通讯录(订阅者形式)并解析为什么要这样。

使用再次确认的订阅流程,发送一封纯文本的要求订阅者将邮件列表地址加入到接收地址中的确认信息。

通知用户的这些简单的流程能够大大增强我们图片被显示的机会,同时也能帮助我们通过垃圾过滤。

为图像不能显示做准备

听上去我们已经做好了一个性能可靠的模板,我们准备将邮件发送给基于许可的用户,同时我们确认我们的邮件地址列表在订阅者的通讯录中。但是这里依然会有一批用户故意阻止图片的加载,因此我们必须为这种情况提供一个可执行的方案。

在这个问题上我曾经写过一篇文章。但是随着雅虎邮箱测试版和 Windows Live Mail的发布,我们又失去了将上述技术整合的能力。不过,瑞恩从雅虎邮箱团队指出,他们正在寻找可能的方案解决这个障碍。

除此之外,这里还哟一些方案能够帮助我们在图片无法显示的时候保持邮件的完整性。

  1. 将邮件从 HTML 文本或者逻辑Alt的文字开始。我们能够决定读者从预览窗口或者较小窗口中看到的信息。如果我们做了准备,就能优化用户浏览信息时的体验。更进一步,某些客户端有能够在邮件全部加载/浏览之前显示几行文本的能力。
  2. 使用 ALT 属性是多么直白的事情,除此之外我们也找不到更好的方发了。
  3. 对上下文信息重要的图片使用标题。在全线使用ALT属性的情况下,我们可以对某些非常重要的邮件内容的图片增加标题。

避免使用基于图片的邮件

避免使用基于图片的邮件是很明显的,但是基于图片因为简单却被广泛使用,因为其能传递良好的设计,在不同邮件的客户端的渲染环境下都一样。当我们明白图片在客户端渲染时将会是一个未知数,这样就可能导致基于图像的邮件无法传递任何信息。更进一步,这并没有去考虑文件针对移动用户/拨号用户的大小问题,对视觉障碍的用户或者垃圾邮件过滤器来说,它的可访问性更差。

总之,我们要认真考虑图像被阻塞的情况,我们可以采取哪些措施。用户屏蔽他们自然有他们自己的合理理由,但是通过合适的方法我们能够改善订阅用户的体验。

视频邮件

支持视频的邮件最近在邮件营销圈内成为炙手可热的话题。很多年前大多数桌面和基于web的邮件客户端实际上是支持视频的。但是随着安全需求的增强和垃圾邮件的泛滥,让对视频的支持成为过去。

避免使用视频。视频目前只被 APPLE MAIL支持。如果你坚决要使用动态的图片,唯一可靠的解决方案就是使用 GIF 动画。但是我们强烈反对使用这种方案。

随着网络上的视频增值业务、视频软件的增强,同时带宽和可使用的内容的增多,在邮件行业再次提出了这个问题:我们是否支持视频邮件?我们决定看看如何实现。

嵌入的方法

就像在网络上显示视频一样,在邮件中有很多不同的方法你可以去显示视频。下面是我针对这个方面做的测试。

Email client Flash Quicktime Windows Media Animated GIF Java Applet Emb MPEG Emb Animated GIF
Desktop
AOL Desktop 10.1 No No No Yes No No Yes
Apple Mail Yes Yes Yes Yes No No Yes
Entourage 2008 No No No Yes No No Yes
Lotus Notes 6.5 No No No Yes Yes No Yes
Lotus Notes 7 No No No Yes Yes No Yes
Lotus Notes 8 No No No Yes No No Yes
Outlook 2003 No No No Yes No Yes Yes
Outlook 2007 No No No Yes No No Yes
Thunderbird No No No Yes No No Yes
Windows Mail No No No Yes No No Yes
Web-based
AOL Web No No No Yes No No Yes
Gmail No No No Yes No No Yes
MobileMe No No No Yes No No No
Windows Live Hotmail No No No Yes No No Yes
Yahoo! Mail No No No Yes No No Yes
Mobile
BlackBerry Bold No No No Yes No No Yes
iPhone 2.2 No No No Yes No No Yes
Windows Mobile 5 No No No No No No No
Windows Mobile 6 No No No Yes No No Yes

在邮件中使用表单合适

在邮件中使用表单合适吗?看上去这并不是一个好主意。但是当你的客户让你你这么做的时候你如何回答呢?你可能告诉他们不行的原因,这些原因可能对他们来说并不直观,或者你可以拿出你以前做的证明。

最直接的原因是邮件客户端认为email中的表单存在安全风险。通常一些邮件客户端是直接提示你潜在的危险,还有一些是直接忽略掉表单。因此如果的你的客户想要发送表单,他们必须知道大多数接收者将无法使用。针对剩下的使用者,他们必须再次思考表单提交数据时的客户端提示。

大多数邮件客户端共享不信任电子邮件的信息,但是他们针对表单入侵的处理方案却有很大的不同。

外域数据提交

在多数邮件客户端提交数据的时候,会有Javascript的提示信息告诉你会提交数据到外域,询问你是否继续。

诈骗警报

Thunderbird 客户端能够使表出表单可能是欺诈的,但是保留其功能。相反,他会提醒你潜在的危险。

怪异的行为

Windows Live Hotmail 显示表单。但是,表单的功能很怪异,在某种程度上是不正确的。如果表单通过“回车”键提交,页面将会被刷新,但是数据没有被提交,流程没有结束。如果通过点击 提交按钮,任何事情都不会发生。 Outlook 2007 也显示了一些特殊的行为,输入的内容被替换成了中括号,提交按钮被替换成按钮的值被括在中括号内。因此表单会变成纯文本的形式,及时HTML的形式是显示出来的。

Email Client Form is displayed Form is functional
.Mac Yes No
Yahoo! Mail Yes Yes
Yahoo! Mail Classic Yes No
AOL Webmail Yes No
Gmail Yes Yes
Windows Live Hotmail Yes No
Apple Mail Yes Yes
Thunderbird Yes Yes
Penelope (Eudora 8) Yes Yes
Outlook 2007 No No
Outlook 2003 Yes No
Outlook Express Yes Yes
Windows Live Mail Yes Yes
Lotus Notes 8 Yes Yes
Entourage Yes Yes

强烈推荐

邮件客户端支持表单是零星的,我们建议你将表单通过链接的形式放到网站上,而不是将其嵌入到邮件中。这是最安全、最可靠的解决方案,这样更多的用户将会看到并使用它们,这样参与的程度就会提升。

ALT属性

很多邮件客户端默认情况下并不支持图片的显示,一次知道显示的替代内容很重要。我们测试了在多数受欢迎的客户端 alt 属性如何显示(或者不显示),在我们开始讨论如何显示之前,让我们先看看为什么需要显示 alt 属性。

为什么显示 ALT 属性

任何网页设计师都能理解 ALT 属性在无障碍访问的好处。这是一个主要的目的,当然,这么多最重要的原因是给视觉障碍的用户通过读屏软件描述图片。读屏软件可以阅读所有页面上的文字,列表、链接、标题和图片的 alt 属性。比如,当我们访问 markwyner.com屏幕阅读器将读取类似于以下:


网页:马克·怀纳设计,网页设计工作室,俄勒冈州波特兰市。
链接1:直接导航到内容。
网页标题,链接2:马克·怀纳设计。
风格设计。可访问设计。交互设计。
全局导航。
首页。
链接3:关于。
链接4:服务。
链接5:案例。
链接:联系我们。

需要注意的是读屏软件如何读取标题和所有链接的,在链接方面他会给每个链接增加一个数字参数。图片上的 ALT 属性也会被读出来,在读出来之前会告诉你是一个图像的替换文本。如下:

<img src="file.jpg" width="528" height="405" alt="[photo: bowler picking up a Greek Church]" />

可能会像下面这样读出:
Image: Bowler picking up a Greek Church

第二个目的即是对那些无法看到图片的人或者选择了不看图像的浏览设备或者邮件客户端显示。不幸的是,后者用起来并不正常,因为许多浏览器/客户端,因为浏览器或者客户端在图片被屏蔽的时候不会去显示 ALT 属性或者提供他们自己的预设变量。在下面的文章中我将为你呈现不同邮件客户端的显示(或者不显示)ALT属性的情况。

结论

在所有的客户端中(web的或者桌面的),他们都有一个相同的功能,那就是在默认情况下加载或者屏蔽图片的功能。在我测试的每一套客户端中,在默认禁用图片的情况下,都能使我直接加载图片的信息。唯一的例外是 Windows Live Mail 邮件载入已知发送者和未知发送者,后者的场景展示了一个链接。当然首选项可以设置的更加灵活,我的测试仅仅是它的基本功能

Email Client Renders ALT Comment
Yahoo! Mail No
Yahoo! Mail Beta Yes Applies CSS font-styling to ALT attributes
Windows Live Mail No
Gmail Contingent upon text length
.Mac Contingent upon text length
Hotmail No
Apple Mail No Replaces ALT text with question-mark icon
Thunderbird Yes Applies CSS font-styling to ALT text
Outlook 2007 Replaces ALT text with security message
Outlook 2003 Yes Applies CSS font-styling to ALT text
Outlook Express Yes Applies CSS font-styling to ALT text
Eudora Replaces ALT text with URL to image

Yahoo Mail

不显示ALT文本

Yahoo Mail Beta

显示ALT文本

Yahoo Mail Beta 有一个有趣的现象,那就是显示的文本为根据上下文的 CSS 属性显示相应的 ALT 文本。因此虽然显示ALT文本,潜在的问题是字号大的文本可能会超出图片的可视区域,无法阅读超出的部分。当然这是全线发生的事情,特别是在较小图片上使用较大的描述时。

Windows Live Mail

不显示ALT文本

Gmail

显示ALT文本 有时不显示

最开始,Gmail只显示部分 ALT 文本,但是我不能找到问题出现的原因。更进一步的测试结论是,文本的长度是决定性的因素。虽然大多数客户端将 ALT 文本显示在边界盒子内,但是 Gmail 的决定是,如果文本超出上述边界将不显示任何内容。

.Mac

显示ALT文本 有时不显示

Mac 和 gmail 在渲染 alt 文本的时候类似,他为文本超长的情况作了特殊处理。

Hotmail

不显示ALT文本

Apple Mail

不显示ALT文本

客户端不显示Alt文本的地方通常会显示一个灰色的盒子。呈现出一个空间并被增加了一个小问号符号。我是一个苹果粉,大概使用了15年苹果的产品。他们的产品总是很实用而且很有美感。但是在这个地方将没有显示的图片用问号替代是不合理的。虽然这不是危险的,但是注意一下也不为过。

Thunderbird

显示ALT文本

与yahoo邮箱测试版类似, Thunderbird 会根据上下文的css显示 ALT文本。产生的结果也类似,需要注意。

Outlook 2007

显示ALT文本 有分类

当看到这种情况的时候,我有咬舌自尽的冲动。Outlook 2007 会将 ALT 文本内容替换成很长的解释文字,告诉你为什么这些文字被忽略掉了:”右键单击此处下载图片。为了帮助保护您的隐私,Outlook禁止自动从互联网上下载的这张照片。”这是一种很特殊的兼容方式,首先这种方式显示一个特点,要无限的点击每一张图片才能显示图片的信息,另外一方面他摧毁了所有的 ALT 文本。

Outlook 2003

显示ALT文本

与Yahoo Mail Beta 、Thunderbird 将上下文的css样式用到 ALT 文本显示不同, Outlook 2003 只将颜色应用于文本。我并不认为这会产生负面的影响,但是这仍然和我的调查结果相关。Outlook 2003 中关于信息安全文本的替换和 Outlook 2007 一样。

Outlook Express

显示ALT文本

Outlook Express 和 Outlook 2003 类似,会考虑 Css 文字属性。

Eudora

显示ALT文本 有条件的

Eudora 将会吧 ALT 文本替换成每个图片的URL地址。我觉得这是为了让读者知道这些图片可以在那里找到,我认为这样会告知在那里可以找到这些图片,如果他们想在浏览器中打开这些图片的话。但是被展示出来的图片地址是残缺的,我并不认为对这套系统有价值。

screenshot of ALT text rendering in Eudora

Lotus Notes

未知

我试图在禁用图片的时候测试 Lotus Notes 的结果,但是没有成功。我试图设置禁用图片,但是设置没有生效,图片依然被显示出来。我甚至像我经常使用的客户端发了封邮件。它依然显示图片。如果大家在这方面有更多的信息,我会更新关于 Lotus Notes 的信息和截图。

在邮件中是用符号

在标题中使用符号或者表情并不是新主意。但是,现在我们有很多支持表情的移动设备,通常我们也会在这些设备上查看邮件,这已经成为在拥挤的收件箱中引起关注的重要战术。要了解这种结束如何实现的,我们测试了大量的符号来看他们在跨邮件客户端显示的可靠情况。

在使用中请注意,在标题中加入符号在 Outlook 2003 和 Lotus Notes 中并不支持。另外并不是所有的符号都是被支持的,因此在做决定之前的测试环节。

复制,粘贴

第一个迷惑点是我们如何将符号放到标题行。我们通常在HTML邮件的内容中使用符号,但是在标题行你需要做的就是从内容中复制符号,粘贴到里面。

符号在受欢迎的邮件客户端的支持情况

复制、粘帖技术的工作方式很奏效。我们测试了各种符号中最流行的电子邮件客户端,发现在大多数客户端的支持都很好。

Email client Symbols display in subject line?
Outlook 2007/10/13 Yes
Outlook 2003 No
Windows Live Hotmail Info
iPhone / iPad (iOS) Info
Apple Mail Yes
Yahoo! Mail Yes
Gmail Yes
Windows Mail Yes
Android Mail Yes

除了 Outlook 2003,基本上全支持。Hotmail 和 IOS 设备,包括一个而外的,有些 ❤ 会被 替换为 ‘emoj’,或者其他小的图片。这里有一些Hotmail的可选内容:

请记住,如果你的字符在邮件客户端不被支持,接收者看到的将是 ☐。

最后我们并没有触发垃圾过滤机制,包括在标题中加入符号(我们在测试中加入了大量的符号)。尽管如此,我们也期待听到你的其他方面的体验。

建议

当然,在邮件标题中加入符号并不适合所有的人。首先,他们不能在 outlook 2003 中 和其它并不专业的文本客户端中显示出来。如果你想发送一封有趣的邮件,并且希望使用这个新式武器获得在收件箱中的关注,这确实是一个可以尝试的办法。我的朋友们在 Litmus 指出,增加符号后,邮件的打开率提高了 10%-15%,听到这样的结果我们感到很好奇,希望你也能得到类似的结果。

原文地址:http://www.campaignmonitor.com/resources/will-it-work/guidelines/
varhi译文地址:http://varhi.com/?p=5561