20130426早读课:一例email创新设计案例分享

标签: 交互体验 产品设计 原创翻译 用户研究 | 发表时间:2013-04-25 23:15 | 作者:admin
分享到:
出处:http://reynold.cn

推荐理由:诞生多年的email由于自身的产品特点一直生命力旺盛,现在仍然是电商等互联网新势力仍然在使用EDM作为推广渠道之一。但当我们在推荐算法、情感化营销方面在 email上花尽心思时,是否还有什么被我们忘记了?一起来看看这篇文章吧。

email

 

回想起在Netscape Navigator 4和Internet Explorer 5上使用HTML email工作的日志真的太不平凡了。那渲染引擎的质量完全不一致的,更现代的开发技术都不可用,技术是图像——一个大多数email的基本元素——在大多数客户端上都默认地关闭了。这感觉起来想1998年,但是web开发社区从那时起学到很多东西。像渐进增强的策略和像Litmus的现代工具能够帮助我们构建HTML email适合现今各种各样的桌面客户端,大量的web客户端,tablets,只能手机和更先进的显示设备。

上个月我决定开始发送教育email到新的 Beanstalk客户来帮助他们熟悉我们的新功能。这计划要发送在三个互相之间有一些间隔的email。在设计完这些email之后,我决定解析下我的过程以及过一下我用到的工具和技术。

 

布局工作

我们决定每封教育email会由我们团队里的一个成员编写。Chris,Beanstalk的创始人,写了关于开发的,Ilya,我们的核心开发者之一,介绍客户先进的工具,同时Russ,我们的系统工程学,介绍我们关于安全的方式。

我开始有一个简单的设计,但不是很满意:

EM1

由我们团队成员编写的邮件是面向个人的,但设计没有反应出这个。它开起来就像一封企业的邮件,而不是由个人来写的邮件。所以我们决定把作者放在前面位置的同时仍然保留引用Beanstalk,同时元数据是非常适合的位置来放这些信息:

EM2

现在它就很清晰的表达了email是来自Beanstalk的,我还简化了界面,加入了作者的图片和移除了logo:

EM3

这个外观和感觉就更像写在产品信纸上的私人信件而不是一个公司手册——我更想要的结果。

 

为email增加响应

为了找出哪个email客户端在我们的用户里最流行,我检查了  Campaign Monitor从我们最新的时事通讯里统计的数据。结果非常明显,但对于如Beanstalk的极客产品不算太让人惊讶——30%使用Apple Mail,23%用iPhone,19%用Gmail,6%是Sparrow,5%的iPad,3%的Android以及剩下的14%涵盖了其他各类的客户端。这意味着我们的三分之一收件人使用小屏幕设备同时我们的email可能对于他们来说可读性不强。

在普通外观我们的文本列宽度设置为600像素,这限制了每行字符数大于是85-90个——对于良好可读性的一个上限值。我开始加入@media来程序那些小于780像素的屏幕,用来允许在文本周围的一些空白和绿色边框:

@media only screen and (max-width: 780px) {
    div[class="bs-email"] {
        padding-right: 20px !important;
        padding-left:  20px !important;
    }
    div[class="bs-email"] .bs-wrap {
        width: 100% !important;
    }
    div[class="bs-email"] .bs-content img {
        max-width: 100% !important;
        height: auto !important;
    }
    ...
}

这里我减少了文本周围的空白,让文本列和图片能够占用所有可用的空间,同时把发送者的图片移进列里面:

EM4

下一步是像智能手机一样的小屏幕。我在第一个后面加入了@media查询max-width:380px的,这里我更多地减少空白,移除email周围的绿色边框,同时设置更小的行高度来让屏幕显示更多内容:

EM5

在基于旧式表格布局的email里使用@media 查询对我来说还是不太现实,但是它们确实在  新设备里得到很好的支持并且在旧客户端也能够被忽略。我能够想到的唯一特殊情况是Yahoo! Mail,它本身忽略@media声明而把所有包含的风格应用到你的标准视图。我使用类似div[class="className"]或者h1[id="unique"]的属性选择器来修复这个问题,但也被忽略了。谈到hack,我并不推荐使用  HTML Email Boilerplate作为email编码的起点——它是一个变通方案和在主要客户端的渲染问题修复的大集合。

 

适配高分辨率显示设备

人们在使用IPhones,IPads和Android设备收发email时有什么共同点?很多人会使用类似于苹果电脑的retina显示屏。由于大家往往使用龟速并且昂贵的3G网络,在email中添加高分辨率图片是行不通的,而且没有人愿意花一分钟时间去加载email。

我最初是使用div代替img元素,并且使用默认图片作为背景图。只有在真正需要的时候才会使用@media提供高分辨率的版本。不论从哪个角度来说,这都是不科学的。当图片不能显示的时候,它不会提供文本替换。并且一些比较旧的客户端不显示背景图,更糟糕的是Gmail和一些不支持@media的客户端会在高清设备上显示默认背景图,比如使用retina屏的MacBook Pro。

我最后决定使用的最简单的方法就是把所有的图片最大化处理两次,然后使用img元素的width和height属性对图片进行裁剪。我经常使用  ImageOptim and  ImageAlpha将图片和截图进行最大化压缩,有时也会用 overcompressed JPEG代替PNG格式,一封含有3-5张大图的邮件大小会在100-150K左右,虽然有点大,但是还不是太糟糕。特别是我们在设计过程中没有使用图片资源(除了地步的LOGO),图片也只会在几段文字之后才会显示出来。

 

测试电子邮件

所有的测试都是从发送HTML格式的邮件开始,但是它不像听起来那么简单。首先,你要把所有的图片和资源存储起来以便从HTML中调用,其次,你要把你的HTML文件转化为email来发送。一种方法是在Campaign Monitor 或者 MailChimp创建一个免费的账户,然后将你的邮件预览发送到你的邮箱地址——这个方法可行,但是在处理的会后会有一点慢。我新的选择是最近发现的一个Mac上的软件—  Direct Mail ,它的免费版每月可以支持多达50封邮件,它设计精美并且运行完美。

Litmus是我的另一个喜欢的软件。我之前调查过,但是把它用作测试和基于屏幕截图的调试时不行的,所以我经常维护我自己的邮件客户端和账户库,当他们发行 Interactive Testing的时候是事情发生了改变,它允许你进行测试、调试、和实时预览。并不是他们库中所有的客户端都有这个工具,但是即使这有限的选择也为我节省了大量的时间。

 

收集数据

我所冒的风险就像一个Litmus的推进者,但是在我们的电子邮件事务中我们第一次使用的特色功能和最爱是 Litmus Analytics,我们为我们发送的每种类型的邮件都添加了唯一的追踪码,所以现在我们有我们的所发送邮件的接受者反馈的可靠数据,收集这些数据的方式是一种魔法,但是我们看到了约定的报告,电子邮件客户端的统计数字,甚至转发的数量都是真的被准许的!使用我们手上的真实数据,我们可以看到哪个邮件是我们用户最喜欢的,这个因此改变了我们的交流方式。

EM6

Via: 原文出处     翻译: oschina

延伸阅读: 20130210早读课:情感交互,移动应用产品交互趋势

如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”QQ群,一同交流每天文章的心得并结识同行。官方2群:74447564,加群密码“职业信息+城市+姓名”,否则不予通过,入群后请修改群名片。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。

我们猜您可能也喜欢:

20121204早读课:我待用户如初恋---22个产品设计创新案例分享

20130311早读课:从错误里汲取经验,一款产品设计案例分享

20121211早读课:那些产品设计时犯过的错误---一个iPhone应用设计案例分享

20121117早读课:应用设计的创新,“下拉刷新”的彩蛋

20121123早读课:交互的创新,对手势设计的思考
无觅

相关 [email 创新 设计] 推荐:

20130426早读课:一例email创新设计案例分享

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:诞生多年的email由于自身的产品特点一直生命力旺盛,现在仍然是电商等互联网新势力仍然在使用EDM作为推广渠道之一. 但当我们在推荐算法、情感化营销方面在 email上花尽心思时,是否还有什么被我们忘记了. 回想起在Netscape Navigator 4和Internet Explorer 5上使用HTML email工作的日志真的太不平凡了.

HTML Email 编写指南

- - 阮一峰的网络日志
今天,我想写一个"低技术"问题. 话说我订阅了不少了新闻邮件(Newsletter),比如 JavaScript Weekly. 每周收到一封邮件,了解本周的大事. 有一天,我就在想,是不是我也能做一个这样的邮件. 然后,就发现这事不那么容易. 抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思.

把Email转成邮政信件

- 山 - 素食者说 Liumiao.com
越来越快的信息时代,总有人想“慢”一点,比如,用明信片发推特,或是把电子邮件转成传统邮政信件. 只要给snailmailmyemail@gmail.com发封邮件,写上不超过一百个词的内容,附上收件人的地址,就会有人把你的电子邮件抄下来,寄给收件人. 这是一个名叫Snail Mail My Email的活动,进行时间为7月15日到8月15日之间,每个人可以寄一封信,完全免费,他们的网站是:http://snailmailmyemail.org/.

[英文] 好用email英文句型

- dayu - 貝兒の生活。旅行。愛。:: 痞客邦 PIXNET ::
我曾在外商公司工作超過8年, 這些英文句型絕對是用的到的機會,就我個人的經驗而言;. 當我意外中發現這樣的網路資訊,感到非常開心,每天在網路世界遊覽,總是希望能獲得. 寶貴的經驗分享或資訊, 它真的讓我"驚艷". 希望透過經理人月刊的文章內容, 分享大家這麼好的學習資訊. 訂閱經理人月刊, 有很多在職場上值得分享的資訊,也許妳/你不是經理,也許不是主管,.

[Python] 发送email的几种方式

- - CSDN博客推荐文章
python发送email还是比较简单的,可以通过登录邮件服务来发送,linux下也可以使用调用sendmail命令来发送,还可以使用本地或者是远程的smtp服务来发送邮件,不管是单个,群发,还是抄送都比较容易实现. 先把几个最简单的发送邮件方式记录下,像html邮件,附件等也是支持的,需要时查文档即可.

Email this page:用 Gmail 彙整網頁資料好方便

- Preston U - T客邦
Gmail 幾乎是很多人都在使用的電子郵件服務,只拿來收收信未免可惜,我們可以利用瀏覽器附加程式,把正在閱讀,有收藏價值的網頁連結直接一鍵寄回 Gmail 信箱,之後不管在電腦端、手機、平板都一樣可以開 Gmail 來仔細看. 這裡就以Chrome的擴充功能「Email this page」為例,並簡介如何把收到的信直接標籤起來,好方便日後整理.

借用WordPress插件Email newsletter轻松打造邮件营销

- 尘世客 - Tuixy博客
在谈到邮件营销这个话题时很多人就会立即联想到大量发送垃圾邮件,就如谈到SEO就会有人想到作弊一样,其实不然. 今天给大家分享个借用WordPress插件Email newsletter轻松打造邮件营销的方案,该方案操作起来非常的简单而且能够给你博客带来更多的收入,此外最关键的是这个方法完全免费. 下载插件:Email newsletter.

防止 Email 地址被机器收集的 WordPress 插件:Antispambot ShortCode

- 沈蚊 - 我爱水煮鱼
有时候想在博客中向用户留言告诉他们读者的 email 地址,让用户直接通过 email 地址联系,但是这样简单展示 email 地址被机器收集,然后收到一大堆 spam. 所以我就写个 WordPress 插件:Antispambot ShortCode,让博主使用 WordPress Shortcode 方式在日志内容中输入 email 地址,向用户正确展示邮件地址而无需担心邮件地址被机器收集.

GuerrillaMail 用完就丟的拋棄式 Email 信箱

- daviddu - 重灌狂人
很多人可能常常會有類似的經驗,當我們用 Google 在網路上搜尋一些下載資源時,常常會遇到一些必須要註冊、登入才可瀏覽內容或下載檔案的論壇或網站,除了一些比較大的、資源比較豐富的網站之外,其他一部分的網站大概都是用過一次就很少會再去光顧. 而每次在各種論壇註冊帳號之後,如果遇到比較沒良心的,可能當時註冊用的 Email 信箱會被拿來發送垃圾信,如果你常常有這方面的需求又不希望自己的 Email 帳號曝光的話,可以試試看下面這類拋棄式 Email 信箱.

Email this page 按一下!將網頁寄給朋友看

- Hming - 重灌狂人
很多人時當我們在網路上亂逛時,可能常常會看到一些不錯的文章,譬如說什麼英國研究啦、最新科技啦什麼的,如果想把網頁轉給朋友看,除了貼到 MSN 或 噗浪 Facebook 之外,很多人也會用 Email 轉寄的方式來轉給朋友看. 如果你常常有這方面的需求,也剛好使用 Google Chrome 瀏覽器的話,可以試試看下面這個 Email this page 擴充套件,安裝好之後,它會在網址列右邊多出一個小按鈕,按一下即可開啟一個寄信的視窗(分頁),並將你目前瀏覽中的網頁標題、網址自動填入到標題與內文等欄位中,方便我們快速轉寄給朋友看.