营销邮件中Call to Action设计技巧

灵动创新 营销邮件中Call to Action设计技巧

营销邮件中Call to Action设计技巧

什么是Call To Action？

 

Call to Action：中文可以释义为“行动号召 / 呼吁采取行动”。是唤起收件人注意并鼓励他行动起来的口号。 可以理解为在某一次邮件营销活动中，激励并呼吁您的收件人行动起来，完成某个动作，实现有效转化的口号性的按钮或链接—如：线上购买、立即注册等。

 

无论是哪种类型的邮件（如： 促销活动、新品推荐、eNewsletter、会议邀请等）， 一定要注意加入明确清晰的Call to Action。因为，只有实现转化，才能体现邮件营销的价值。

 

目前国内很多企业，已具备很不错的营销活动策划与邮件设计的能力，但由于邮件中缺少明确清晰的“Call To Action”，会员在邮件阅读过程中无法产生应有的互动与转化，从而失去很多转化的机会，使邮件营销的效果大打折扣。

 

我们如何设计一个有效的“Call to Action”，激励我们的会员采取行动呢？

 

首先，需要注意以下几点：

 

● 步骤清晰：通过清晰的步骤，告诉收件人下一步需要做什么

● 主题明确：避免产生猜测的时间，让用户数秒内就明确您的邮件主题

● 激励口号：采用“呼吁行动”感比较强烈或迫切的关键词，激励您的收件人行动起来

● 位置显著：建议放在比较明显的位置，如邮件预览窗口的中上位置

 

 

下面，我们将结合邮件营销实例与大家分享我们的“Call To Action”设计技巧：

 

技巧（一）：颜色技巧 – 采用积极明亮颜色的按钮

 

在邮件中，采用积极明亮的颜色，与其他部分形成强烈的对比，让用户对您邮件的目标一目了然并迅速采取行动。如下图，如何选择合适颜色的Call-to-action：

点击查看大图>>

邮件知识案例分享-Call to action 邮件营销中颜色应用技巧

邮件营销知识分享-Call to action 邮件营销中颜色应用技巧

 

下面，让我们来看看邮件中的应用实例：

在邮件突出位置，采用柔和的绿色大按钮，呼吁会员参与设计投票。

邮件营销知识分享-Call to action 邮件营销中颜色应用技巧

邮件营销案例分享-Call to action 邮件营销中颜色应用技巧

 

技巧（二）：关键词技巧 – 采用号召感较强烈或具迫切感的关键词，如：

立即购买；免费注册；马上投票；%折扣活动仅限*月*日；活动截止至*月*日；……

 

如下面应用实例：

1.营造时间的紧迫感： 7月14日最后12个小时

2.诱人的会员超低折扣： 商场内所有珠宝及手袋均享受额外的35%折扣活动

3.按钮链接上采用紧迫感强烈的关键词:"TIME’S ALOMST UP"-活动马上就要结束了！

 

邮件营销知识分享-关键词技巧 – 采用号召感较强烈或具迫切感的关键词

邮件营销知识分享-关键词技巧 – 采用号召感较强烈或具迫切感的关键词

 

技巧（三）：Call-to-action位置技巧 – 尽量让邮件中“行动号召”放在邮件的中上位置，即预览窗口

邮件的预览窗口区域，如下图，是邮件最重要的位置。因为用户往往习惯于先停留在预览窗口中预览邮件部分信息及邮件主题，再决定是否打开邮件继续阅读。

 

邮件营销知识分享 - 邮件预览窗口

邮件营销知识分享 - 邮件预览窗口

 

所以，在预览窗口，通过有效的Call-to-action展示，不仅可以提醒您的用户去阅读更多，并号召他们迅速做出反应，从而提高您的邮件点击率，实现有效的转化。

 

技巧（四）：Call-to-action适当的留白技巧 – Action周围的留白若控制得当，可以减少邮件中其他信息元素的干扰，吸引用户的注意力集中，如下面应用实例:

 

邮件营销知识分享 – Call-to-action适当的留白技巧

邮件营销知识分享 – Call-to-action适当的留白技巧

 

2 条评论 分类于 邮件制作 | Amelie

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

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

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

Outlook2007 中的Html邮件解析规则指南—块元素的相对定位

 

今天，我们将为大家介绍Outlook2007不支持的‘定位 Position’及解决技巧：

 

Position 定位

 

CSS属性：Position，它用来规定元素的定位类型。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

 

此属性所包含的参数。如下表：

 

  Position 定位
  CSS属性   参数   描述
  Position   Absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
  static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 戒者 z-index 声明）。
  fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  fixed 规定应该仍父元素继承 float 属性的值。
举例说明：定义一个块元素且其被相对定位与另一个块元素。这两块元素具有固定的宽度和高度，及不同的背景颜色差异。
 
  Html代码
  <div style=”position:relative; height:150px; width:300px;
background-color:#ffcc00; top:20px; left: 20px;”>块元素A
<div style=”position:relative; height:100px; width:150px;
background-color:#99cc00; top:20px; left:75px;”>块元素B</div>
</div>		  
块元素的相对定位，Outlook 2003 显示效果如下：
灵动创新 Outlook 2007 背景图片，当用户手动单击下载图片时，显示图片效果效果
块元素的相对定位，Outlook 2007 显示效果如下：
灵动创新 Outlook 2007 背景图像支持情况

结果得知：

在Outlook2007中块元素的相对定位以默认值Static无定位的形式显示。块元素按顺序形式显示。Outlook2007并不支持CSS的Position属性，如果一定想对块元素进行定位，我们可以使用Table布局的方式来代替。

 
关键字：
2 条评论 分类于 邮件制作 | Amelie

各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. | 公司网站 | 灵动邮件营销博客 | 隐私声明 | 系统登录