Phined卡编码:互动电子邮件的秘密

马克罗宾斯 经过 马克罗宾斯  |  2015年10月19日

ee在一封电子邮件中,这些天是一个很好的动画gif,我们得到了90年代的那些。

现在一切都在变化,这是互动电子邮件的黎明。如果您可以在电子邮件,选项卡式布局或多页面布局中使用图像画廊或多页面布局怎么办?如果您可以播放游戏,请阅读直播Twitter Feed,甚至在电子邮件中直接选择/编辑项目和结账?

有电子邮件客户开始支持JavaScript?不,这不是一个扩展,插件下载,甚至是新应用。这是所有HTML和CSS!而且大多是css2!

 

穿孔卡编码

那么你如何进行检测用户交互并创建没有JavaScript的复杂功能?我创造了一个我正在呼叫的技术 穿孔卡编码。 这基本上使用了大量的单选按钮并根据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 1</label> 
<label for="tab2">Tab 2</label> 
<label for="tab3">Tab 3</label> 
<label for="tab4">Tab 4</label> 
<div class="tab tab1">Content for tab 1</div>
<div class="tab tab2">Content for tab 2</div> 
<div class="tab tab3">Content for tab 3</div> 
<div class="tab tab4">Content for tab 4</div> 

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打击卡式单音按钮/打孔卡图像相似。一旦我理解这一点,它就允许我扩展我的思考:它只是一系列检查或默认值。

您可以将其视为真/假或一个/零。潜力是巨大的。

 

电子邮件中的游戏

我的第一个实验正在建造一场比赛。理论是,玩家必须点击标签以获得一个点。检查时,此后还显示下一个单选按钮的标签等。

我还为上一个单选按钮添加了一个标签,因此您也可能会丢失点。然后,将它变成一个游戏,我动画标签移动,使它们更加困难地击中并调整它进入WACK-A-MOLE类型的游戏。

在这里玩游戏: http://codepen.io/M_J_Robbins/full/jpCKH/

 

购物车在电子邮件中

下一个例子有点复杂。这一个使用117个单选按钮和2个复选框来控制它。部分功能包括图像寄友,多页面布局,添加/删除项目,表单验证,线路总额,小计税,折扣和总价格。所有内容都是内置于HTML和CSS。

Rebelmailshoppingcart.

此概念在这里,当您单击“立即购买”时,它将其作为表单提交,并携带所有选中的单选按钮的详细信息。然后将收取所选卡,并将选定的产品发送到所选地址,而无需访问该网站即可。

 

支持和限制

这有一些限制,正如您在电子邮件中的期望。首先,文件大小有一个限制。如果电子邮件超过102KB,它将在Gmail,yahoo和Outlook.com中剪裁。此外,它的风险更高,因为被标记为垃圾邮件。

我应该注意,限制只是你发送的HTML和CSS。下载资产,如图像和字体不包含在此中。为了帮助解决问题,我们ulify并缩小我们的代码;但反过来可能导致一些错误,所以要小心。

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

静态客户:Outlook(Windows),Outlook.com,Gmail应用程序

这些客户端剥离了功能性CSS,因此电子邮件将返回到简单,静态的布局。最终用户不应注意到这些交互式电子邮件与每天收到的正常电子邮件之间的任何区别。

有限的客户: Gmail(Webmail),雅虎,AOL

这些客户端对CSS具有不同的限制。电子邮件客户端预处理器剥离或编辑了一些更先进的事情;但他们仍然支持一些互动。

互动客户: Applemail,iOS,Android,邮箱

这些拥有完整的铃声和口哨。他们支持上面的一切,以及我也在努力的一些非常酷的新想法。基于统计数据的好消息是 maincleclientmarketshare.com.在8月份开业的120.5亿封电子邮件中,57%的电子邮件在互动客户开放,并在有限的客户上进一步20%。

因此,77%的用户有能力看到某种级别的交互式电子邮件。

 

那么未来持有什么?

正如您所看到的,电子邮件有可能是超出静态文本和图像的可能性。我们已经看到了像巢和B这样的公司&q在电子邮件中使用画廊,Litmus已经完成了大量实验(像视频背景,实时Twitter Feed等实验,并“找到金票”赠品)。

这是一个非常激动人心的时刻,我们只是受想象的深度的限制......和前景;展望仍然是处理......和时间的痛苦;正如您可以想象的那样,这些花费的时间更长,而不是常规电子邮件。

我们只有受想象的深度的限制,旧的电子邮件客户的洪水以及建立电子邮件所需的时间。

 

特色图像使用 电子邮件映像 via Shutterstock.