打孔卡編碼：交互式電子郵件的秘密

電子郵件比網(wǎng)絡(luò)早10年左右（取決于您與誰交談），在那時，網(wǎng)絡(luò)已經(jīng)發(fā)展成為一個動態(tài)的交互式實體。但是，這些天您可能會在電子郵件中看到的最令人興奮的東西是精美的gif動畫，我們得到了90年代的那些。

現(xiàn)在一切都在變化，這是交互式電子郵件的曙光。如果可以在電子郵件，選項卡式布局或多頁布局中使用圖像庫，該怎么辦？如果您可以玩游戲，閱讀實時Twitter提要，甚至購物，選擇/編輯項目并直接在電子郵件中結(jié)帳，該怎么辦？

電子郵件客戶端是否已經(jīng)開始支持JavaScript？不會。這不是擴展程序，插件下載，甚至不是新應(yīng)用。這就是HTML和CSS！而且主要是CSS2！

打孔卡編碼

那么，如何在不使用JavaScript的情況下檢測用戶交互并創(chuàng)建復雜的功能呢？我創(chuàng)建了一種稱為打孔卡編碼的技術(shù)。這基本上使用了大量的單選按鈕，并根據(jù)這些按鈕的：checked值設(shè)置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。未選中單選按鈕時，它將恢復為默認值。因為這些單選按鈕都在同一陣列中，所以一次只能檢查一個，因此這將阻止一次顯示多個選項卡。

這是一個非常適應(yīng)的概念。將選項卡標簽替換為縮略圖圖像，將內(nèi)容替換為圖像，您將獲得一個簡單的圖庫。或者，將選項卡移動到導航布局以創(chuàng)建偽造的多頁布局。

修復我正在構(gòu)建的電子郵件中的一些錯誤時，我將單選按鈕設(shè)置為顯示，并注意到與舊的IBM打孔單選按鈕/打孔卡圖像類似。一旦理解了這一點，它便使我得以擴展思路：它只是一系列檢查值或默認值。

您可能會認為它是對/錯，或一/零。潛力巨大。

電子郵件中的游戲

我的第一個實驗是制作游戲。從理論上講，玩家必須單擊標簽才能得分。選中后，它還會顯示下一個單選按鈕的標簽，依此類推。

我還為上一個單選按鈕添加了標簽，因此您也可能會丟失積分。然后，為了使其成為游戲，我對標簽進行了動畫處理以使其移動，從而使它們更難打，并將其樣式化為a鼠型游戲。

在此處玩游戲：http : //codepen.io/M_J_Robbins/full/jpCKH/

電子郵件中的購物車

下一個示例稍微復雜一些。該控件使用117個單選按鈕和2個復選框來控制它。其中一些功能包括圖像畫廊，多頁面布局，添加/刪除項目，表單驗證，在線總價，小計稅，折扣和總價的動態(tài)價格計算。所有這些都僅以HTML和CSS構(gòu)建。

這里的概念是當您單擊“立即購買”時，它用作表單提交，并包含所有選中的單選按鈕的詳細信息。然后，將在不訪問網(wǎng)站的情況下對選定的卡進行收費，并將選定的產(chǎn)品發(fā)送到選定的地址。

支持與限制

就像您在電子郵件中所期望的那樣，對此有一些限制。首先，文件大小受到限制。如果電子郵件超過102kb，則會在Gmail，Yahoo和Outlook.com中進行裁剪。而且，它被標記為垃圾郵件的風險要高得多。

我應(yīng)該注意，限制僅適用于您發(fā)送的HTML和CSS。下載的資源（例如圖像和字體）不包括在其中。為了解決這個問題，我們將代碼縮小并縮小；但這又會導致一些錯誤，因此請小心。

然后，在不同的電子郵件客戶端，不同的設(shè)備，不同的操作系統(tǒng)和不同的瀏覽器上，存在著各種各樣的呈現(xiàn)問題。為了簡化所有這些操作，我們希望將所有電子郵件客戶端分為靜態(tài)，受限和交互式3個組。

靜態(tài)客戶端：Outlook（Windows），Outlook.com，Gmail應(yīng)用

這些客戶端剝離了功能CSS，因此電子郵件將僅退回到簡單的靜態(tài)布局。最終用戶應(yīng)該不會注意到這些交互式電子郵件與他們每天收到的普通電子郵件之間的任何區(qū)別。

受限客戶： Gmail（網(wǎng)絡(luò)郵件），Yahoo，AOL

這些客戶端在CSS上有不同的限制。電子郵件客戶端預處理程序會剝離或編輯一些更高級的內(nèi)容。但它們?nèi)匀恢С帜承┗印?/span>

交互式客戶端： Applemail，iOS，Android，郵箱

這些都有完整的鈴鐺和口哨聲。他們支持上面的所有內(nèi)容，以及我正在研究的一些非?？岬男孪敕ā?/span>好消息是，根據(jù)emailclientmarketshare.com的統(tǒng)計數(shù)據(jù)，在8月份打開的10.5億封電子郵件中，有57％的電子郵件是在交互式客戶端中打開的，還有20％在有限的客戶端中打開了。

因此，有77％的用戶能夠看到一定程度的交互式電子郵件。

那么未來會怎樣呢？

如您所見，電子郵件比靜態(tài)文本和圖像具有更多的潛力。我們已經(jīng)看到如Nest和B＆Q這樣的公司在其電子郵件中使用圖庫，而Litmus進行了大量的實驗（例如視頻背景，實時Twitter提要和“發(fā)現(xiàn)金票”贈品的實驗）。

杭州網(wǎng)站建設(shè)一封非常激動人心的電子郵件時間，我們僅受想象力和Outlook深度的限制。展望仍然是一件痛苦的事情……需要時間。您可以想象，與常規(guī)電子郵件相比，這些郵件的構(gòu)建時間要長得多。

我們僅受限于我們的想象力，較舊的電子郵件客戶端的租用以及構(gòu)建電子郵件所花費的時間。