整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
件制作不同于其他的页面制作，所以有些规范您还是得考虑的。
1.模板编码语言选择
模板编码设定与使用的发送软件有关，一般来说，utf-8为较常用的选择，错误 的编码会造成用户浏览的时候出现乱码。
2.对于HTML格式邮件的要求
包括空格在内，邮件标题的字符最好控制在35个字符。 文件大小(HTML和图片)最好控制在500KB以下。 电子邮件推荐宽度为850像素以内。鉴于现的浏览器普遍偏大,可根据设计的显 示效果自定义宽度,建议不要超过750像素。 不推荐使用最新的HTML版本,因为目前常用的浏览器有些是不支持最新的HTML 标签的,为了给用户更好的浏览效果,采用“老版本”HTML3.2、HTML4.0即可。
1.不要使用div,使用table定位
Div+css是近几年新兴的web2.0定位方式，这种 方式不适合在邮件模板切割中使用,不同邮件客 户端或在线浏览器对css模型解释不尽相同，甚 至部分ISP会直接屏蔽部分css样式，造成错位或 布局混乱等问题。
2.使用table布局时,不可重复多次colspan
不要使用单一table重复多次colspan，可能会被 邮件客户端判断为结构过于复杂，归类为垃圾邮 件;同时也容易被打乱布局而影响用户浏览。
<table> <tr>
<td><table> <tr>
<td> </td>
<td> </td> </tr>
</table></td> </tr>
<tr>
<td><table> <tr>
<td> </td> <td> </td> <td> </td>
</tr> </table></td>
</tr> <tr>
<td><table> <tr>
<td> </td>
<td> </td> </tr>
</table></td> </tr>
</table>
1.模板尽量不要使用背景图片
背景图片在某些邮件客户端或web界面(如 Gmail、OutLook) 中默认不显示，所以模板最好不要使用背景图片，建议使用 背景颜色。但邮件中是可以使用背景颜色的，大部分的邮件 客户端都是支持的。
2.每张图都要指定width宽度
每张图都要指定width宽度、height高度,在图片被拦截的时 候,不会因图片大小无法读 取而被打乱布局。
3.每张图都要指定alt属性
每张图都要指定alt属性，可以在图片被拦截的时候显示图片 的内容;这样客户打开邮件在没有点击下载图片的时候先是 可以看到文字的表述，知道此封邮件大概的内容，而提升用 户对此封邮件的体验，从而提高邮件的点击率并非像上图中 ，显示为空白，给用户带来不必要的困扰。
1. 图片链接不要使用<map>标签，因为部分邮件运营商 会屏蔽<map>标签，而导致图片无法点击。
2. 请使用英文字符对图片名称命名，不要使用中文、非法 字符来命名图片，否则会导致图片无法显示。
3. 在切割模板的时候,要注意限制图片的大小和数量,不要为 了效果使图片过大,会使邮件接收者打开过于缓慢,甚至直 接关闭邮件。
4.纯图片邮件图片于图片之前出现断行 ，目前很多公司的邮件都是使用大图片切图这种不规则的 ，经常出现下面的问题
解决方法:
<img src=http: // blog.54575.com/logo.gif” width=297′′ height=160′′ alt=”情人节特供” style="display:block;" />。
在每张图片后添加 style="display:block;" 此CSS即可。
1.不要使用外部样式表引用,将样式表 写入模板内部，因为大部分的ISP会 屏蔽css样式表 如:
2.padding和margin标签
table中,某些邮件客户端或web界面 (如Gmail), 对浮动的标签(padding 、margin等)支持很差,所以尽量不 要使用。
3.尽量不要使用<h2>、<ul>、<li>、 <p>、<ol>等有默认样式的标签。 防止style不被ISP正确解析时页面布 局混乱。
1. 可以使用简单的gif动画来表达某些需要明显突出的要素,但要控制gif文件的大 小,不要影响整封邮件的下载浏览速度; 但gif动画在OutLook 里是失效的。
2. 不要使用Flash、Java、Javascript、Frames,I-Frames、ActiveX、dynamic HTML等,前些年邮件病毒泛滥,大部分邮件运营商都已经屏蔽了这些元素
前端开发的程序员应该都知道Webix这个免费框架，本文会给出用其创建一个电子邮件客户端用户界面的步骤。Webix是一个JavaScript UI库，可用其构建一些HTML5程序，熟悉它的程序员都知道，Webix快速、轻便且易于学习，与AngularJS、Vue.js和jQuery的集成都很方便，所以我最终选择了Webix。（阅读本文大概需要5分钟，图片较多，建议在有Wifi的情况下阅读。）
先来看看如何开始使用Webix（如果用过，请自动忽略这一部分），下载完成后，程序员应该在页面上添加所需的JavaScript和CSS文件，这些都可以在代码库文件夹中找到：
在应用程序中不需要使用webix.ready，但它有助于确保在页面完全加载后执行代码（作为theonDocumentReady事件和onlload（）的替代方法）。
要在页面上添加小部件，程序员可以使用view属性，它的值定义将决定使用哪个小部件。在这个过程中，还可以使用其他属性定义窗口小部件的外观和工作原理。例如，创建一个图表：
要在页面上添加多个小部件，就必须创建一个布局（这将在下文中详述）。
进入正题，先来看一下电子邮件客户端的外观：
因为Webix是一个完全可以与任何后端集成的客户端框架，所以程序员只需要集中在用户界面上就可以了。
步骤1：创建布局
在向应用程序中添加组件之前必须先定义其布局。TheLayout组件允许将页面分成行和列，程序员可以创建嵌套行和列，设置其相对或绝对大小或者为用户提供手动更改创建单元格大小的可能性。
布局组件最好的一点是，创建的页面布局是一堆DIV容器，以便程序员可以在Webix小部件旁边使用任何第三方组件。
让我们来看看一切如何运作。如果要创建由三行组成的应用程序，可以使用以下代码：
要创建三列布局，可以使用几乎相同的代码，把行换成列就可以了：
看起来很容易吗？ 我们来看一个更复杂的例子：嵌套单元格：
结果如下：
使用嵌套行和列的不同组合，程序员可以创建项目需要的复杂布局。使用Resizer可以使单元格边框可拖动，用户将能够手动调整其大小。
完成布局创建之后，程序员将使用模板组件为每个单元格添加标签，包括一些要放置的组件，该模板允许呈现纯文本或单个数据记录。
以下是代码：
目前，我们已经使用height和width属性来定义所需的大小了。涉及的新属性是type，它定义了布局边框。
如果使用clean将获得无边框的单元格，使用wide将获得有边框的、有更大空间的单元格。
我们来检查结果：
好，接下来的任务是用实际组件替换模板。
步骤2：添加工具栏
我们从工具栏组件开始，它可以包含各种元素，如按钮或下拉菜单。
记住，要使用Webix创建组件，必须使用view:“component_name”代码行，元素属性允许选择工具栏的内容。
接下来是添加标签，以便用户了解正在处理什么：
现在必须将此代码添加到应用程序中，以替换以前创建的模板。
之前：
之后：
我们来检查结果：
步骤3：添加文件夹树
程序员可使用Tree widget进行此任务，data属性定义了文件夹树的结构。以下是代码：
每个树节点都有唯一的ID和一个将显示在屏幕上的值。“Contact Groups”节点具有两个子节点。
open:true属性将打开此分支。除了描述的属性，注意这个代码行：select：true。它允许选择树项目。现在，您可以用代码 "Tree"替换模板。
我们来检查结果：
步骤4：添加日历
现在，您可以在时间选择器中添加一个日历到应用程序。这个方便的互动小部件提供了必要的时间和日期，当你想填写一个表单或创建一个新的事件。该小部件用于创建GanttPRO应用程序，允许用户使用在线甘特图：
这不是一件艰巨的任务：
在您使用代码"Calendar" 替换模板之后，您将得到以下结果：
步骤5：使用DataTable组件显示电子邮件列表
目前，应用程序中已经有了一些相当简单的组件，因此可以继续处理更复杂的内容。
程序员可使用DataTable组件来显示电子邮件列表。它是一个高级的数据组件，支持许多功能，如过滤，排序，分页等。它支持不同的格式，如XML，JSON和CSV。至于其如何在真实的Web应用程序中运行的示例，请查看XL报告：
对于此示例，你需要使用JSON对象作为数据源：
如您所见，电子邮件列表将包含名称，电子邮件地址，主题和日期等信息。
请注意，你还使用了文件夹属性，其值确定存储特定电子邮件的文件夹。在您的实例folder：1表示邮件存储在收件箱文件夹中。The folder：2表示Webix在“发送”文件夹中存储一个电子邮件。
现在可以创建一个新的DataTable组件：
scrollX：false代码行禁用水平滚动条。columns属性定义表将具有哪些列。第一列仅包含复选框。header:{ content:"masterCheckbox" }定义具有主复选框的标题，可用于选择所有可用的电子邮件。使用“{common.checkbox（）}”，您可以在此列的每个单元格中添加一个复选框。
其他列只显示数据源中的信息，id属性的值定义在列（名称，主题和日期）中显示哪些数据。标题属性将一个文本添加到标题。注意填充空间：fillspace:true。您已经使用它来强制列扩展以填充未使用的空间。
现在，用上面的代码替换模板：“Email list”，你会得到这样的东西：
步骤6：使用数据绑定
现在你必须编写一些可以帮助Tree和DataTable协同工作的代码。
记住，您在DataTable创建过程中使用的数据数组包含来自两个不同文件夹的邮件：Inbox和Sent。您的任务是使DataTable组件根据所选文件夹显示正确的电子邮件。要做到这一点，可以使用称为数据绑定的机制。
使用bind（）函数实现数据绑定。应该从从属组件调用，并将主组件作为参数。由于您希望DataTable根据所选节点树更改其内容，因此第一个组件将是从属组件，第二个组件将作为主节点。
除了绑定数据，你必须告诉你的应用程序，应该在应用程序加载之后选择树的第一个节点。 要实现该目标，您应该将相应的代码放在ready方法中，如下所示：
现在，电子邮件列表的内容将根据所选文件夹进行更改：
步骤7：添加按钮
这不是一件艰巨的任务，因为您已经学习了创建组件所需的属性。您必须创建三个按钮：Reply, Create和Delete。
这是您应该使用的代码：
用实际的代码替换模板后，你会得到这样的：
用户可能难以找到其他按钮。为了简化此任务，您可以给按钮添加图标。
Webix使用Font Awesome集合中的图标。这些图标是根据麻省理工学院许可证获得许可的，有很多选择。
要将常规按钮转换成带有图标的按钮，您必须添加两个属性：
Type将定义您将使用哪种按钮
Icon允许从收藏中选择正确的按钮
例如，如果要向“create”按钮添加信封图标，可以使用以下属性组合：
使用相同的方法，您可以向所有按钮添加图标：
步骤8：显示电子邮件内容
由于电子邮件的正文由HTML代码呈现，您可以使用模板组件进行显示。替换模板：“消息”代码如下：
如果没有选择的电子邮件，用户将看到以下消息：No message selected。您可以使用其id属性的值来操作此组件。例如，您有一个包含消息的变量：
要在屏幕上显示此消息，可以使用以下代码：
步骤9.使用Windows
最后一步是提供创建新消息的可能，您已经拥有“create”按钮，但它什么都不做。我们来改变一下：
接下来，用户点击此按钮后，Webix将显示一个窗口，该窗口的ID为“my_win”。此窗口将包含用于发送新电子邮件的表单，在显示之前，您必须先删除之前插入的数据。这就是为什么使用clear（）方法。
现在，您将定义此窗口的外观。对于这个任务，你必须使用一个新的webix.ui（）构造函数：
移动属性允许移动窗口，使用head属性，可以定义窗口的标题。The position：“center”代码行告诉Webix，新窗口应该出现在页面的中心。body部分可能包含任何视图。
步骤10：将窗体添加到窗口
Form widget可以以最小的努力创建Web窗体。
我们来看下面的例子：
无边界属性允许隐藏窗体的边框。表单中最重要的是elements属性，它定义了一组垂直排列的控件和控件组。
在您的情况下，表单将包含两个文本字段，一个文本区域和两个按钮：发送和关闭。请注意，关闭按钮使用hide（）方法关闭窗口。发送按钮不执行任何操作，因为您的示例没有后端。在使用click属性的实际应用程序中，可以添加发送消息的代码。
将创建表单的代码添加到窗口代码后，可以测试结果。单击创建按钮，屏幕上将出现一个新窗口：
Wrapping up
使用Webix，程序员可以尽可能少地为Web应用程序创建用户界面。使用Layout组件，您可以快速构建复杂的布局。易用性允许程序员尝试创建不同变体的模型，以确定哪些组件将保证更好的用户体验。
前端开发程序员需要做的就是在页面上添加可用的数据组件，定义要使用的数据组件，并为其设置数据源。之后，程序员可以继续进行配置过程，直到达到理想的结果。
论是我们在发邮件给2C客户，还是给B2B客户以及给Youtube或者Instagram网红发开发信,都知道邮件标题是非常非常重要的。如果邮件标题没有吸引到用户,邮件内容写的再精彩也是没什么太大的作用, 因为用户压根就没有看到。
上文主要写了如何做好邮件内容-图文并茂的HTML邮件,今天主要讲讲如何设置邮件标题的表情包,从而吸引到用户点击邮件,因为其他的邮件标题都是纯文字的,用户每天都收到很多的邮件,很难抓取到他们的注意,如果在标题中加入一些特殊符号,那就非常醒目啦,在几十封的邮件标题中,一下子就抓住了用户的注意。
就以自己的Gmail邮箱为例,每天收到很多的推销邮件,都懒得点击去看,但是当你收到带特殊符号的邮件时,一下子就吸引到了我的注意,比如上图中红色方框里面的邮件标题。
邮件标题里面有树的形状图,不论邮件的内容怎么样,最起码从邮件标题从几十封邮件一下子就抓住了注意力,很想点击进去看看里面的内容。
接下来就告诉大家如何制作邮件标题的特殊符号,从而吸引用户的注意力,增加打开邮件的概率,至少比纯文本的标题EDM营销更加有效果。
这个工具就是Unicode-table(https://unicode-table.com),操作也是非常简单,可以在搜索框输入我们想要的符号,比如星星,树,月亮,太阳等常见的符号,都是可以搜到的,也很有很多可以可供选择的。
比如我们以太阳为例,在搜索框里输入太阳,有207个关于太阳的表情符号,比如我们选择Sun with face这个符号，直接点击"Copy按钮",然后复制到邮件标题就可以啦，操作也是非常方便的。
然后客户收到的邮件标题就是带着太阳笑脸的符号,一下子就会吸引用户去点击,我第一次收到这样的邮件时，还挺好奇是怎么做到的。
建议大家去尝试下不同的素材符号组合在一起,然后发给红人或者开发客户,看看是不是点开率,回复率提高啦呢。
另外告诉大家如何在线制作邮箱签名,有时收到邮件看到有的客户邮箱签名非常漂亮,有头像,职位,社交媒体账号等信息，如下图所示：
接下来就告诉大家借助一款工具我们也可以做出如此炫酷的邮箱签名,从而让用户觉得你们是非常专业。
这个工具就是Hubspot(https://www.hubspot.com),一款专门制作在线邮箱签名的工具。
只需要按照这个模板输入对应的信息就可以,以及上传头像,放上自己社交账号的链接，需要注意的是上传头像的时候需要输入链接,先把头像保存在Google drive,然后复制链接，而不是直接上传头像。
网上随便找了头像跟Logo,以及虚拟了一些姓名,地址等信息,填写完成之后就是下面的这种格式, Hubspot上有很多的签名模板排版可以供选择,大家可以根据自己的喜爱去选择喜欢的排版。
填写完毕之后,下面有个"create signature按钮",就生成了邮件签名的模板,就可以复制添加到自己邮箱签名那里,这样邮件发出去就比之前显得专业很多。
这篇文章主要讲了在邮件标题中插入特殊符号,吸引用户的注意，从而提高点击邮件以及查看邮件内容的机会,还有就是设置邮件签名的模板,再加上上文提到的如何制作图文并茂的HTML邮件,做好EDM营销，请参考如何制作图文并茂的HTML邮件,做好EDM营销
这3个工具可以结合起来用，相信只要有好的邮件营销内容加上点晴的标题,相信做好EDM营销,无论是开发2B，还是2C客户,或者发邮件给Youtube,Instagram或科技媒体编辑,总会有很大的帮助。（来源： 下班后8小时）
以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。
*请认真填写需求信息，我们会在24小时内与您取得联系。
