HTML电子邮件营销响应式设计建议

[ 博客 ]

虽然现在社交媒体承担了许多在线交流的任务,但电子邮件仍然是一种非常重要的营销手段。说到营销类邮件,大多人想到的可能是HTML格式而不是纯文本格式的邮件。

设计电子邮件与设计功能简单的网页颇为类似,但两者也有一些非常不同的地方需要考虑。另外,设计师还要记住,基本上电子邮件是一种输出型而不是输入型的沟通手段。

email-design

人们极为频繁地收到电子邮件,但并不会每一封邮件都打开查看。这意味着在用户转向其他邮件之前,设计师必须在几分之一秒的时间内吸引阅读者的注意力(这一点有别于网站,因为用户常留出固定的时间访问某个网站)。

记住这一点---你必须在极短的时间内吸引阅读者---你在设计电子邮件时就会更为顺利和高效。

 

响应式设计

如果用户在智能手机上打不开你的邮件,他们大概也不会费力用电脑去看一遍。我甚至敢说,大多数用户很可能会删掉这封邮件,或更坏---从此取消订阅你的邮件。

为移动设备设计电子邮件一般有两种方案。一是设计适合用户所使用的移动设备屏幕大小的邮件,结构简单的电子邮件用这种方法可以取得完美的显示效果。二是设计适合不同尺寸屏幕的响应式邮件。

这种方案各有优劣。前一种邮件的代码很简单,基本上可用于所有移动设备。但只有设计非常简单的邮件才能收到最好的效果,而且还得在比电脑屏幕小得多的屏幕上查看才行。

而采用响应式设计的邮件代码比较复杂,有时候还会遇到不支持的浏览器(但在未来与浏览器的兼容性必将日渐完善)。

与简单的根据用户设备屏幕大小设计的邮件相比,HTML格式的邮件更适合使用响应式设计。因为在微小型的屏幕上,仅靠“缩小”邮件会让邮件很难读。

我们前面已经讨论过为什么“移动友好”的邮件设计非常重要,下面我们要具体谈谈实际设计此类邮件时需要注意的一些问题。除了要能在移动设备上正确显示之外,这类邮件也应该能适应大屏幕显示的需要。

1.邮件的整体布局应该偏小一些,500-600像素是标准的大小。这样的大小可以使邮件无论是在桌面还是在移动设备上都能正常显示,而不至于在用户转换设备时因邮件大小调整不好而出现显示失常。

2.而字体一定要足够大。设计时也要考虑各种设备所允许显示的最小字体,以免导致字体不兼容的情况(这会直接影响邮件的布局)。例如,iOS允许使用的最小字体为13像素。

3. 可供点击的区域同样也需要做到“触控友好”。这意味着这些区域的图标要够大,并要同其他链接明显地区别开来,以便于用户可以即刻使用(因为你留住用户的时间只有几分之一秒)。

4.大胆使用“关闭全部显示(display:none )”的命令来隐藏一切不必要的元素。因为在桌面电脑甚至是平板上显示还不错的邮件,在智能手机上可能就会崩溃。对于小尺寸的屏幕来说,“少即是多”的道理再适用不过了。

在真正开始编写代码之前,花一些时间琢磨一下你要设计的电邮在桌面和移动设备上的基本设置是值得的。在这一步要尤其要明确该如何在移动版的邮件中安排促销类内容(如“立刻行动”之类)及其它关键信息。

 

慎重选择字体

在HTML格式邮件的设计中,许多设计师都知道要留意图片内容,却忘了邮件中的字体甚至比在许多网站中还要重要。毕竟,考虑到如此多的电子邮件终端服务商都不允许直接显示图像,字体往往是邮件收件人看到的第一种元素。

不管针对哪种尺寸的屏幕,都应该选择稍大一些的字体。但要考虑在不同设备的屏幕上显示时最佳的句子长度。句子过长的话,会令阅读者的眼睛感到不适应,过短的话,用户就得不停地向下拖拽页面。

务必要恰当地使用标题和其他排版手段来使邮件内容更易读,尤其是邮件中段落比较多的时候。

总之,除开我们前面说的,字体很可能是被用户所注意的第一样东西之外,邮件中的字体设计与网页中的字体设计在思路上是大体相同的。

 

电子邮件最佳设计之道

虽然电子邮件设计与网页设计有很多相似之处,但在设计时还是要时刻留意两者之间的区别。下面列举的这些电子邮件设计的原则虽然貌似简单,但如果能真正领会的话,定会为你设计的邮件增色不少。

1. 内容第一

不管做哪种类型的设计,内容都是最重要的。但在设计邮件尤其是针对移动设备的邮件时,精炼清晰的内容可以说是决定成败的关键。因为你只有几秒钟的时间来抓住用户的注意力,如果在这珍贵的几秒之内,你呈现给用户的是无用的废话,那你就会失去用户。

所以邮件内容一定要尽可能的简洁明了。如果你的邮件不能让阅读者在最短的时间里明白你的意图时,你就是在浪费时间。

2. 目的明确

鼓励用户立刻行动的内容也许在任何邮件中都是最重要的部分。毫无疑问,你设计的邮件一定有其特定的目的,可能是为了让用户去注册某个网站,去阅读或购买什么东西。这部分内容应该毫不含糊地告诉用户你可以给他们什么东西,以及他们如何可以得到这些东西。

如今,鼓励用户采取行动的具体形式是通过按钮来实现的。这些按钮应该一眼就能被辨认出,而且在电子邮件中的位置不要太靠后(因为阅读者留给设计师的时间极短,把这些按钮置于最能被发现和使用的地方无疑会大大提升按钮被使用的几率)。

设计师也一定要确保这些按钮是“触控友好”的。这意味着这些按钮要设计的大一些,以便能在移动设备上使用,还要与其它链接区分开来,以免用户容易误操作点中别的链接。

3. 测试从早从多

一定要从从客户的角度出发,针对各种设备对你设计的邮件进行全面的测试。你可能会在一开始就测试邮件的尺寸,基本设置等等,但这还不够,测试的过程应该贯彻整个设计的始终,以最大程度地减少漏洞。

测试的频率越密集,就越能发现存在的漏洞,因为这时你很容易就能想起设计中做过的改动。

要始终对客户的需要和设备的特点有清晰的认识,对于容易出现问题的地方,或者及时制定相应的解决方案,或者调增自己的设计。

4. 善用“前标题文字”

在许多邮件的收件箱中,标题前的导入性文本通常被视作整个邮件的内容预览。因此这部分文字几乎与邮件的主题一样重要。设计师应该考虑一下如何利用这些文字来勾起阅读者的兴趣。尤其是当收件箱限制了邮件主题的字数时,“前标题文字”就更值得重视了。

5. 添加网页版链接

别忘了为你设计的电子邮件添加一个网页版的链接,这样万一用户使用移动设备或因浏览器问题无法正常打开邮件,而又恰好对邮件的内容真的有兴趣时,还可以使用网页版继续浏览。

6. 保持简洁

你尽可以在邮件设计中使用复杂的布局,大量的图形和华丽的元素,但这么做面临的风险是,这些内容很可能永远无法被用户看到。

而结构和风格都相对简单的邮件至少能保证被更多的人看到,因为它更容易在不同的设备上显示。设计复杂的电子邮件从美学意义上来说也许看起来更赏心悦目,但它带来的实际效果却十分有限,完全不值得设计师去花费那么大力气。

 

本文内容摘自视觉中国:SUPER带种子!电子邮件设计终极指南(详细了解请查阅原文,版权归原作者所有)

发表评论

电子邮件地址不会被公开。

随机