打孔卡编码:交互式电子邮件的秘密-利来国际登录

电子邮件比网络早10年左右(取决于您与谁交谈),在那时,网络已经发展成为一个动态的交互式实体。但是,这些天您可能会在电子邮件中看到的最令人兴奋的东西是精美的gif动画,我们得到了90年代的那些。

现在一切都在变化,这是交互式电子邮件的曙光。如果可以在电子邮件,选项卡式布局或多页布局中使用图像库,该怎么办?如果您可以玩游戏,阅读实时twitter提要,甚至购物,选择/编辑项目并直接在电子邮件中结帐,该怎么办?

电子邮件客户端是否已经开始支持javascript?不会。这不是扩展程序,插件下载,甚至不是新应用。这就是html和css!而且主要是css2!

 

打孔卡编码

那么,如何在不使用javascript的情况下检测用户交互并创建复杂的功能呢?我创建了一种称为打孔卡编码的技术。这基本上使用了大量的单选按钮,并根据这些按钮:checked设置css样式一个简单的示例是选项卡式布局:

的html

<input type="radio" name="tabs" id="tab1" checked> <input type="radio" name="tabs" id="tab2"> <input type="radio" name="tabs" id="tab3"><input type="radio" name="tabs" id="tab4"> <label for="tab1">tab 1label> <label for="tab2">tab 2label> <label for="tab3">tab 3label> <label for="tab4">tab 4label> <div class="tab tab1">content for tab 1div><div class="tab tab2">content for tab 2div> <div class="tab tab3">content for tab 3div> <div class="tab tab4">content for tab 4div> 

的css

input { display:none; } label {  display:block;  float:left;  width:148px;  border:1px solid #ccc;  text-align:center;  padding:1em 0; } .tab{  width:598px;  height:1em;  padding:2em 0;  border:1px solid #ccc;  text-align:center;  display:none;  clear:both; } #tab1:checked ~ .tab1, #tab2:checked ~ .tab2, #tab3:checked ~ .tab3, #tab4:checked ~ .tab4 { display:block; }

参见工作示例:http : //codepen.io/anon/pen/wqwagl

选中#tab1的单选按钮后,将显示.tab1未选中单选按钮时,它将恢复为默认值。因为这些单选按钮都在同一阵列中,所以一次只能检查一个,因此这将阻止一次显示多个选项卡。

这是一个非常适应的概念。将选项卡标签替换为缩略图图像,将内容替换为图像,您将获得一个简单的图库。或者,将选项卡移动到导航布局以创建伪造的多页布局。

修复我正在构建的电子邮件中的一些错误时,我将单选按钮设置为显示,并注意到与旧的ibm打孔单选按钮/打孔卡图像类似。一旦理解了这一点,它便使我得以扩展思路:它只是一系列检查值或默认值。

您可能会认为它是对/错,或一/零。潜力巨大。

 

电子邮件中的游戏

我的第一个实验是制作游戏。从理论上讲,玩家必须单击标签才能得分。选中后,它还会显示下一个单选按钮的标签,依此类推。

我还为上一个单选按钮添加了标签,因此您也可能会丢失积分。然后,为了使其成为游戏,我对标签进行了动画处理以使其移动,从而使它们更难打,并将其样式化为a鼠型游戏。

在此处玩游戏:http : //codepen.io/m_j_robbins/full/jpckh/

 

电子邮件中的购物车

下一个示例稍微复杂一些。该控件使用117个单选按钮和2个复选框来控制它。其中一些功能包括图像画廊,多页面布局,添加/删除项目,表单验证,在线总价,小计税,折扣和总价的动态价格计算。所有这些都仅以html和css构建。


这里的概念是当您单击“立即购买”时,它用作表单提交,并包含所有选中的单选按钮的详细信息。然后,将在不访问网站的情况下对选定的卡进行收费,并将选定的产品发送到选定的地址。

 

支持与限制

就像您在电子邮件中所期望的那样,对此有一些限制。首先,文件大小受到限制。如果电子邮件超过102kb,则会在gmail,yahoo和outlook.com中进行裁剪。而且,它被标记为垃圾邮件的风险要高得多。

我应该注意,限制仅适用于您发送的html和css。下载的资源(例如图像和字体)不包括在其中。为了解决这个问题,我们将代码缩小并缩小;但这又会导致一些错误,因此请小心。

然后,在不同的电子邮件客户端,不同的设备,不同的操作系统和不同的浏览器上,存在着各种各样的呈现问题。为了简化所有这些操作,我们希望将所有电子邮件客户端分为静态,受限和交互式3个组。

静态客户端:outlook(windows),outlook.com,gmail应用

这些客户端剥离了功能css,因此电子邮件将仅退回到简单的静态布局。最终用户应该不会注意到这些交互式电子邮件与他们每天收到的普通电子邮件之间的任何区别。

受限客户: gmail(网络邮件),yahoo,aol

这些客户端在css上有不同的限制。电子邮件客户端预处理程序会剥离或编辑一些更高级的内容。但它们仍然支持某些互动。

交互式客户端: applemail,ios,android,邮箱

这些都有完整的铃铛和口哨声。他们支持上面的所有内容,以及我正在研究的一些非常酷的新想法。好消息是,根据emailclientmarketshare.com的统计数据,在8月份打开的10.5亿封电子邮件中,有57%的电子邮件是在交互式客户端中打开的,还有20%在有限的客户端中打开了。

因此,有77%的用户能够看到一定程度的交互式电子邮件。

 

那么未来会怎样呢?

如您所见,电子邮件比静态文本和图像具有更多的潜力。我们已经看到如nest和b&q这样的公司在其电子邮件中使用图库,而litmus进行了大量的实验(例如视频背景,实时twitter提要和“发现金票”赠品的实验)。

杭州网站建设一封非常激动人心的电子邮件时间,我们仅受想象力和outlook深度的限制。展望仍然是一件痛苦的事情……需要时间。您可以想象,与常规电子邮件相比,这些邮件的构建时间要长得多。

我们仅受限于我们的想象力,较旧的电子邮件客户端的租用以及构建电子邮件所花费的时间。

返回观点列表
本文标签:

相关专题

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 0571-85815193 期待您的来电!

[ 网站建设×品牌利来手机网址官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

了解最新项目报价

派迪产品经理钉钉号

免费获取项目方案

我们正使用 cookie 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookie 。

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookie

始终允许

这些 cookie 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookie 的信息,但网站的某些部分将无法运行。这些 cookie 不存储任何个人身份信息。

性能 cookie

始终允许
这些 cookie 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面最受欢迎和最不受欢迎,并了解访问者如何在网站上移动。这些 cookie 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookie,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookie

这些 cookie 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 cookie

这些 cookie 可能由我们的广告利来国际登录的合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookie 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookie 。

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》