你猜我是图片吗？超酷的色块拼接

你猜我是图片吗？超酷的色块拼接

你猜我是图片吗？超酷的色块拼接

如何应对邮件客户端图片不显示问题

邮件中的图片在一些邮件客户端默认不显示的问题，让许多邮件营销人员束手无策。对于邮件设计的人员来说，我们不得不为此做好充足的准备，以减少客户端图片不显示问题给邮件营销带来的负面影响。

在此之前，我们已经有一篇文章分享过Nike的邮件设计是如何应对图片被屏蔽问题的，今天我们再来分享两个更有针对性的案例。

为你的ALT标签设置样式

在设计邮件的时候，为图片添加Alt标签是我们惯用的方法。Alt标签可以在图片被客户端屏蔽后，引导用户深入阅读邮件。

想不想让Alt标签变得更奇妙一点呢？你可以像设计HTML邮件的文本样式一样，通过设置CSS样式来让Alt标签更加有趣。下面是一个在Yahoo! Mail Beta客户端中显示的Alt标签的例子。

没有为Alt标签添加样式的效果

没有为Alt标签添加样式的效果

我们来让Alt标签变得像标题一样明显，效果会如何？

为Alt标签添加样式后的效果

为Alt标签添加样式后的效果

下面是实现这种样式的代码样例：

<img src=“pizza.jpg” alt=“Try our Bacon Lover’s Pizza” width=“220” height=“200”style=“color: #C30; font-weight: bold; font-size: 16px;”/>

Tips：为图片定义固定的宽和高可以确保Alt标签正常显示。没有定义宽高的图片，被屏蔽后会缩成一团，影响Alt标签的展示效果。

Alt标签的CSS样式与Yahoo! Mail, iPhone，Gmail，Apple Mail客户端都是兼容的。Outlook Express客户端比较特殊，只兼容颜色属性。

用HTML/CSS代替图片

说起如何应对邮件客户端图片默认不能自动下载的问题，Pizza Express的邮件设计颇具创意。他们应用了表格嵌套布局以及细致的图片切割方式，避免了由于图片屏蔽造成的页面空白，取而代之的是丰富的背景颜色与文字，这样的邮件不仅让读者兴味盎然去阅读，相信营销效果也不会因为图片不能自动下载而打折扣！

点击查看大图：


Pizza Express的邮件在客户端的显示效果（左）

Pizza Express的邮件在客户端的显示效果（左）

还有更多的邮件设计技巧来应对客户端图片默认不显示的问题，再给大家看一个案例。这封邮件也许第一眼看起来没有什么特别的地方，但你是否知道这是一封没有图片的邮件？设计师通过细致的像素的拼接和HTML代码设计，邮件不仅美观，而且对于客户端的图片屏蔽也能应对自如！


通过像素拼接的邮件

通过像素拼接的邮件

作为邮件设计师，我们必须认真对待图片被屏蔽的问题。发送完全由图片构成邮件的时代已经过去。对于大多数邮件客户端不能自动下载图片的情况，也意味着邮件在预览的时候也不能正常显示图片，这样的邮件很容易被移到垃圾箱或者直接删除。

值得庆幸的是，我们拥有非常实用的办法来应对这种问题，大部分都是容易实现的。如果您还有更好的方法来确保图片在任何情况下都可以正常显示，我们欢迎您的留言！

您也可以参考我们官网上的文章《哪些邮件客户端默认不显示图片》

关键字：
4 条评论 分类于 邮件制作 | Rachel

独特的视觉设计，提高邮件点击率

视觉引导提高您的邮件营销转化率

独特的视觉设计，提高邮件点击率

好的设计突出的是产品和内容,而非设计本身

邮件营销人员常常会问，我的邮件设计看上去非常漂亮，为什么点击率仍旧这么低？如何才能让我的邮件在拥挤的收件箱中脱颖而出？怎样才能让我的客户喜欢阅读邮件，并且愿意点击链接？

灵动邮件营销顾问在这里给您支一招：通过视觉引导让你的邮件更具魅力！

案例1：

这是视觉营销的一个著名案例，针对一张婴儿纸尿裤的平面广告进行视线热点分析。

图1：靠左是一张正面的婴儿照片，靠右则是一些产品的卖点文字描述。但通过对人们的视线轨迹研究发现，人们往往更加关注婴儿的面部（红色区域为重点关注区域），而把产品卖点（大标题）放在最后浏览。也就是说这个广告的卖点并没有受到关注。

图2：经过简单的修改，将婴儿转身，让他看着大标题。这时，人们会顺着婴儿的视线，将目光转移到右边的标题上，广告卖点受到关注了！

婴儿纸尿裤的平面广告视线热点分析

婴儿纸尿裤的平面广告视线热点分析

通过这个案例你想到了什么？对，没错，改善你的邮件设计，对联系人进行视线引导和心理把控，可以让你的邮件更受欢迎，从而大大提高阅读率和转化率。

案例2：

眼神可以引导用户的关注点！同样一个女孩，只是在眼睛注意的方向上稍作调整，大家看到这张图的视觉焦点就有了很大改变。显然，女孩直视前方时，人们的关注点更多停留在她的脸部及标题文字上；当眼睛注意方向调整为注视产品时，人们也跟随她的视线，去关注产品了。

显然，当女孩的眼睛注视着产品的时候，产品获得了更多的关注焦点，也能更好的达到广告的目的。

眼神可以引导用户的关注点

眼神可以引导用户的关注点

案例3：

几个娃娃为什么越来越小了呢？再看看娃娃手中的标签：周四：20%；周五：15%；周六：10%；周日：没了……Oh my god！别做白日梦了，赶紧抓住这个20%折扣加免运费和免费退货的机会，马上行动吧！过了这个村儿就没这个店儿了！

当你看到逐渐变小的娃娃，内心是不是有种莫名奇妙的急迫感呢？那就对了，人家这么设计邮件，就是让你迅速行动的！

视觉引导让你迅速行动

视觉引导的急迫感让你迅速行动

案例4：

向下的车头暗示你浏览完整封邮件

此案例详细分析请点击查看灵动博客：
http://blog.unimarketing.cn/2011/08/17/2231.html

向下的车头引导你浏览完整封邮件

向下的车头引导你浏览完整封邮件

好的设计突出的是产品和内容，而非设计本身。邮件设计的视觉引导可以让你的客户更多的关注产品，从而提高邮件营销的转化率。

好的设计突出的是产品和内容，而非设计本身

掌控邮件设计，就是掌控转化率，你准备好了吗？

关键字： , ,
已有一条评论 分类于 制定邮件营销目标, 邮件制作 | Cherry

各ISPs及邮件客户端的Html邮件解析规则系列教程（三）

Outlook 2007 邮件客户端的Html邮件解析规则

各ISPs及邮件客户端Html邮件解析规则系列教程（三）

Outlook2007 中的Html邮件解析规则指南—不支持的背景属性

 

今天，我们将为大家介绍Outlook2007不支持的‘背景属性’及解决技巧：

 

背景属性

 

背景图像，是通过Html编码中的背景属性来实现的一种功能。但是，Outlook 2007 中仅在<body>标签内支持Background属性，在<table><tr><td>标签中都不支持此属性。另外，<body>元素虽支持Background属性，但默认情况下会被拦截，用户必须手动下载背景图像。

 

那我们该如何解决邮件中有关“背景图像”的显示问题呢？

 

下面我们通过三种图片显示情形，分别为大家介绍邮件中“背景图像”的显示技巧：

 

1. 基于Web绝对路径的背景图像

 

图像的路径，必须是存放在服务器上的一个完整的Web绝对地址。

 

例如：http://www.unimarketing.cn/images/logo.jpg 您可以通过在IE浏览器中输入此地址，即可访问并显示此图像的路径。

 

举例说明：应用在Body元素中的背景属性，并且背景图像在页面上进行平铺。

 

  Html代码
  <body background="http://www.inxmail.com/background.gif"></body>  
上述代码在邮件中显示如下：
Outlook 2007 背景图片默认情况下会自动被拦截，导致图片无法正常显示，如下图所示：
灵动创新 Outlook 2007 背景图片默认情况下会自动被拦截时无法显示图片
Outlook 2007 背景图片，当用户手动单击下载图片时，才会显示图片，如下图所示
灵动创新 Outlook 2007 背景图片，当用户手动单击下载图片时，显示图片效果效果
备注：Outlook 2007 背景图像支持情况
灵动创新 Outlook 2007 背景图像支持情况

2. 嵌入式背景图像

 

为了确保邮件中非互联网上的图像可以浏览，那么我们必须将图像以附件的形式嵌入在邮件中。目前，市场上已有一些专业的ESP支持图像以附件的形式嵌入在邮件中。

举例说明：邮件嵌入式背景图像

 

  Html代码
  <body background=”[%embedded-image;background.gif]”></body>  
上述代码在邮件中显示如下：
Outlook 2007 背景图片默认情况下会自动被拦截时无法显示图片，如下图所示：
灵动创新 Outlook 2007 邮件中嵌入式背景图像
 
备注：Outlook 2007 嵌入式背景图像支持情况
灵动创新 Outlook 2007 嵌入式背景图像支持情况

3. 图像替代文本

<img>标签的Alt属性可以定义替代文本，即应用于图像无法显示或者用户禁用图像显示时，来代替图像显示在浏览器中的内容。

 

Alt 文本的使用原则：

    • 如果图像包含信息 – 使用 alt 描述图像
    • 如果图像在 a 元素中 – 使用 alt 描述目标链接
    • 如果图像仅供装饰 – 使用 alt=""

 

我们强烈推荐您在邮件中的每个重要图像中都使用这个属性，如邮件中的重要图片如LOGO、促销活动图片、点击注册按钮等，如果用户在邮件接收过程中，Alt属性就可以发挥它的作用。关于它的作用，请阅读我们的另一篇文章《您是否为邮件中图片Img标签赋予了Alt属性?》 ，这篇文章，我们详细介绍了有关Alt属性所发挥的作用。

 

注意事项：
关于尺寸较小的图像，添加Alt属性时，可能会有部分文本会被隐藏。
另外，建议Alt属性值不要过分冗长，如果过长意味着它很可能被忽略，反而变得毫无用处。

希望上面的经验技巧对大家有所帮助，接下来我们也将持续为大家介绍“Outlook07不支持的其他元素及解决技巧”，欢迎您持续关注《各ISPs及邮件客户端的Html邮件解析规则系列教程》的博客更新！
关键字：
无评论 » 分类于 邮件制作 | Amelie

各ISPs及邮件客户端的Html邮件解析规则系列教程（二）

Outlook 2007 邮件客户端的Html邮件解析规则

各ISPs及邮件客户端的Html邮件解析规则系列教程（二）

Outlook2007 中的Html邮件解析规则指南—不支持的表单元素

通过《各ISPs及邮件客户端的Html邮件解析规则系列教程（一）》中所讲述了“Microsoft Outlook2007的重要变化”，从本期开始，我们将陆续为大家介绍Outlook2007的变化及它不支持的6个主要元素，同时，介绍一些解决这些问题的技巧。

 

今天给大家介绍是：“不支持的‘表单’元素”：

 

表单

表单元素是允许用户在浏览器中（比如：文本域、下拉菜单、单选框、复选框等）输入信息的元素。用户可以在问卷调查中插入表单收集客户的信息，实现与客户的互动。

 

以下是Outlook 2003和2007对比截图

 

举例说明：用户满意度问卷调查,代码如下

 

  Html代码
  <form>
  姓名<font color="#FF0000">&nbsp;*&nbsp;</font>：
  <input name="姓名" type="text" size="12" />
  <select name="称呼">
  <option value="先生" selected="selected">先生</option>
  <option value="女士">女士</option>
  </select>
  地址<font color="#FF0000">&nbsp;*&nbsp;</font>：
  <input name="地址" type="text" size="20" />
  邮编<font color="#FF0000">&nbsp;*&nbsp;</font>：
  <input name="邮编" type="text" size="7" />
  Email<font color="#FF0000">&nbsp;*&nbsp;</font>：
  <input name="E-MAIL" type="text" size="20" />
</form>		  
上述代码在邮件中显示效果：
Outlook 2003 中可以正常显示的表单效果：
Outlook 2003 中可以正常显示的表单效果
而在Outlook 2007 中，则不能正常显示：
Outlook 2007 中不可以正常显示的表单效果

Outlook2007表单元素以”[ ]”效果显示，导致用户无法在邮件中完成表单的填写，“用户满意度”的问卷信息也无法收集。随着Outlook2007的普及，所以作为邮件设计者，我们需要考虑到Outlook2007用户能够无障碍的提交表单，达到收集市场信息的目的。
Outlook 2007 中不可以正常显示的表单效果 那么，我们该如何解决Outlook2007不支持表单元素的问题呢？

 

建议在邮件中通过插入链接的方式完成表单提交。

如：在邮件中添加“填写问卷调查”的按钮（或图片/ 文字）链接，引导用户在网页浏览器中完成表单填写，请参考我们网站的RADVISION案例—在邮件中插入会议注册链接，利用Unimail系统的问卷调查的功能回收参会者信息。
http://www.unimarketing.cn/case/case_radvision.html

希望上面的经验技巧对大家有所帮助，我们将持续为大家介绍“Outlook2007不支持的其他元素及解决技巧”，欢迎您持续关注《各ISPs及邮件客户端的Html邮件解析规则系列教程》的博客更新！

关键字： ,
无评论 » 分类于 邮件制作 | Amelie

各ISPs及邮件客户端的Html邮件解析规则系列教程（一）

Outlook 2007 邮件客户端的Html邮件解析规则

各ISPs及邮件客户端的Html邮件解析规则系列教程（一）

Outlook2007 邮件客户端的Html邮件解析规则指南

微软的新版本Outlook 07的发布由于使用了Word的Html渲染代替了以往基于IE浏览器的Html页面渲染，给邮件设计者带来了很大影响！

 

但Word 2007目前并不支持很多Html语言及CSS样式，也就意味着Outlook 07中邮件背景图片无法显示、不支持CSS的Float或Position属性、不支持DIV+CSS盒子模式等等。 因此，这个变化在很大程度上影响到Html邮件在Outlook 07显示，如很多在网页中显示正常的Html邮件但在邮箱中显示异常。

 

(一) Microsoft Outlook2007 变化的原因
  为什么Microsoft Outlook07决定更换渲染引擎为微软Word的Html渲染引擎?
 
  1. 安全性
    采用Microsoft Office Word引擎渲染，以提高邮件安全性、增强渲染统一性。
    微软在互联网推广最新版本时，声称：“为了改进邮件的安全功能，Outlook07向前迈出了重要的一步”。
  2. 标准化显示
    截止目前为止，Outlook已使用了两种渲染引擎。首先， 收件箱中Html邮件显示采用IE渲染引擎，而回复或转发的Html邮件则使用了Word的Html渲染引擎。于是，Outlook用户在创建和接收邮件过程中， 就会面临很多不统一的情形。因此，微软Outlook07新版本，决定了采用统一标准的渲染引擎，显示Html邮件。

尽管Outlook2007存在很多对Html 邮件的渲染弊端，但是发布以后，仍很快地在市场上拥有了较大的占有率。因此，对于邮件设计师来说，如何布局Html邮件，也是一项不容忽视的挑战。

 
(二) Microsoft Outlook2007不支持的属性
 

因此，微软基于互联网浏览器支持的网页标准，总结了Word 2007功能有关的Html语言及CSS标准问题。 Microsoft Outlook2007目前所不支持的属性主要有：

  • 不支持表单
  • 不支持背景图像（CSS）
  • 不支持定位（CSS）
  • 不支持文本的Warp属性（CSS）
  • 不支持GIF动画
  • 不支持Flash及其他插件

其他邮件客户端的CSS属性支持情况:

 
 

当今邮件阅读客户端有很多种，不同的用户可能所使用的操作系统、客户端软件(如传统的Outlook，Gmail，Hotmail等)、浏览器版本等对免费邮件渲染处理也不同。而且大多数邮件客户端都有自己的HTML头部信息的定义，为了避免与免费邮件的头部标签样式起冲突，会屏蔽掉邮件中的<html><head><body>标签命令。

 

若希望所有不同客户端的用户看到的邮件相同，建议采用最原始的排版方式：表格布局+CSS，根据目前我们对Html邮件的测试，其兼容性更好。

 

有人会想到，为什么不用时下Web标准中最流行的布局方式Div+CSS呢？而且它比表格具有更多的优点：如结构与表现可以相分离，代码更简洁。很可惜，它适用于网页设计，而不适合于Html邮件设计。您若若采用DIV+CSS布局，大部分邮件客户端机ISP会对某些标签添加自己默认的样式，或不识别CSS属性，而导致邮件无法正常预览。

 

下图是主流ISP及邮件客户端对HTML的CSS属性支持情况：

 

  邮件客户端名称   CSS属性支持情况
  Yahoo！Mail   CSS
  Hotmail   CSS
  Gmail   Tables+ 内联CSS
  Outlook2003 and Outlook Express   CSS
  Outlook2007   Tables + 内联CSS
  Lotus Notes   Tables + 内联CSS
  AOL 9   CSS
  Mac Mail   CSS
有关邮件中如何正确引用CSS，请点击阅读

 

目前，Outlook邮件客户端大约已占据B2B市场的75%份额。而新版本的Outlook2007，毫无疑问地仍占据一部分市场份额。因此，创建Html布局邮件，优化将是邮件设计师优先考虑的工作。同时，也意味着我们不得不再次使用原始的Table+CSS布局来代替DIV+CSS布局Html邮件，以确保邮件可以兼容Outlook邮件客户端。

 

Outlook 2007 ，对邮件中的Html元素及CSS属性支持相当有限，更详细说明请阅读微软官方文档：
http://msdn.microsoft.com/en-us/library/aa338201.aspx

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

 

我们在今后的《灵动邮件营销—邮件设计教程》的章节中，将会继续为大家介绍“针对Outlook 2007所不支持的属性的邮件设计与制作技巧”，欢迎您与我们一起探讨并关注我们。
关键字： ,
已有一条评论 分类于 邮件制作 | Amelie

您是否为邮件中图片Img标签赋予了Alt属性?

您是否为邮件中图片Img标签赋予了Alt属性?

您是否为邮件中图片Img标签赋予了Alt属性?

ALT属性标签在邮件制作过程中，往往容易被忽视，其实正确地使用Alt标签，是邮件设计制作中不可缺少的重要步骤。下面我将为大家讲述它的作用：

 

ALT属性：是指为图片添加的一个属性，它可以在图片无法显示时的替代文本。如：

邮件中图片代码：

 <img src=” http://www.unimarketing.cn/images/logo.jpg” alt=“灵动邮件营销”>

 

邮件中显示效果：

当邮箱中邮件图片未下载时，相应显示效果：

当用户把鼠标放在图像上方时，如下图效果：

 

如果用户在邮件接收过程中，碰到以下情况，Alt属性就可以发挥它的作用：

  • 某些邮件客户端在默认情况下，禁止图片自动下载
  • 网速太慢，导致无法下载或下载过慢
  • 图片的Src属性中路径链接错误，无法下载
  • 浏览器禁用图像

因此，邮件中的重要图片如LOGO、促销活动图片、点击注册按钮等，我们强烈建议您添加Alt属性。这样即使图像无法显示时，替代文本也可以在邮件客户端或浏览器的网页版本中显示内容，更易阅读。

 

添加Alt属性与未添加Alt属性的区别：

 

实例：当图片被拦截时，第一张未添加ALT属性，第二张添加ALT属性

 

图片添加ALT 属性

 
关键字：
无评论 » 分类于 邮件制作 | Amelie

如何有步骤地引导用户通过邮件营销到达LandingPage？

LandingPage

如何有步骤地引导用户通过邮件营销到达LandingPage

我们本期将结合邮件营销介绍LandingPage的概念，及如何利用邮件营销，有步骤地引导用户到达LandingPage。

(一) 中文如何解释LandingPage？

Landing Page ：在网络营销中，解释为“着陆页”，一个访问者通过链接到达一个网站的某个页面，这个页面就是LandingPage（着陆页），它可以是首页，也可以是网站注册页面或活动页面等。

与普通网页不同的是, Landing Page需要把访问者从邮件、广告或其他媒介引导至站点相关信息处，促成访问者完成“call to action” 即“最终目标”或“呼吁行动”。

更详细的解释，大家可以参考维基百科的LandingPage解释 。

(二)如何有步骤地引导用户通过邮件营销到达LandingPage？

    • 步骤1 – 捕获
      如图，通过邮件链接的形式，引导接收者到达您网站的着陆页，呈现更详细、更富展现力的信息，同时提高网站流量。

LandingPage

关于链接的设计：一定要清晰、醒目！有足够的吸引力。它像是一个桥梁，把您的用户吸引到您已经精心准备的着陆页。

    • 步骤2 – 转化
      精心设计LandingPage，促成产品购买、注册或信息传递等转化行为

请注意，LangdingPage至关重要的一点：着陆页需要和您的邮件及链接所传达的内容相一致。
您可能花费了很长时间精心设计邮件，希望客户产生点击行为，到达LandingPage，而客户点击后却发现LandingPage并不是邮件中的所阐述的的产品、服务或活动信息，客户很可能会立即点击IE“关闭”按钮离开，甚至产生反感，不再关心您的邮件与活动。
 

关于LandingPage设计：让访问者访问页面时，会产生对品牌的信任感，对产品服务等有清晰的认识，增加品牌忠诚度。

LandingPage设计

    • 步骤3 – 跟踪
      分析LandingPage转化率、每个 成功转化的费用（Cost Per Sale）、及网站流量等，更好的制定下一步邮件营销策略，提高投资回报率(ROI)

下面，想跟大家分享几个流量分析工具及参考资料：

Google的免费站点优化工具: Website Optimizer

Google的免费网络分析工具: Google Analytics

上面的每一步都是紧密相连且至关重要的，忽略其中任何一步，都会影响到转换率与投资回报率(ROI)。

一些客户在使用我们的产品（Unimail邮件营销平台）过程中，没有意识到LandingPage的重要性，认为邮件准备完毕就完成了邮件营销活动。这是一个误区。

为了达到更好的邮件营销效果，需要在策划活动之前，除了邮件设计之外，您还需要认真准备好链接到达的LandingPage。然后进行充分的测试再测试，在正式发送之前，以确保邮件内容、邮件链接、链接所到达的LandingPage 无误。

最后，也希望能听到您的想法和意见。

关键字： , ,
已有一条评论 分类于 制定邮件营销目标 | Amelie

邮件内CSS样式正确引用

邮件内CSS样式正确引用
继续我们关于邮件设计技巧的话题，本贴想分享的内容是【关于邮件内CSS正确引用】，还是那句老话，邮件代码与网页代码的写法规则是不一样的，希望引起邮件营销相关人员的注意，这也是保证您的邮件营销的关键环节之一。

那邮件内的CSS是如何正确引用的呢？
将样式写入HTML标签内部，而不要引用外部的css 文件，也不要写在<style></style>内，另外引用于body内也将无法工作

【错误引用】将css样式写在引用于body内<style type=”text/css”>

body,td,th {

font-family: Arial;

font-size: 12px;}

</style>

【错误引用】引用外部的css样式

<link rel=”stylesheet” type=”text/css” media=”all” href=”css/unimarketing.css”/>

【正确引用】写在Html标签内部，代码兼容性，可读性更强

<td style=”font-family:’宋体’; font-weight:bold; “> 活动促销</td>

<font style=”font-family:’宋体’; font-weight:bold; “>活动促销</font>

那为什么要这么引用呢？

Html邮件是嵌入在桌面邮件客户端（如outlook）和WEB邮件客户端（如主流邮箱QQ、网易邮箱、gmail邮箱等）预览窗口的邮件主窗体内，如下图所示。

如Outlook 2007采用微软Word的Html渲染引擎代替了基于IE浏览器的Html页面渲染引擎。而WEB邮件客户端默认页面会有自己的样式表，当邮件客户端的样式与您的邮件外部引用样式表有冲突时，就会读取自己的样式表。

因此，建议您将样式写在Html标签内部，换句话说，写在最接近您想定义的文字或图片的位置，浏览器对其可读性将更强，兼容性也将更强。

希望对读者有帮助，能真正去实践和应用，而达到更好邮件营销效果。

如果大家有什么好的建议和想法，欢迎留言。
关键字：
3 条评论 分类于 邮件制作 | Amelie
« 以前的文章
© Copyright 2022, All Rights Reserved. | 公司网站 | 灵动邮件营销博客 | 隐私声明 | 系统登录