整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
件制作不同于其他的頁面制作，所以有些規范您還是得考慮的。
1.模板編碼語言選擇
模板編碼設定與使用的發送軟件有關，一般來說，utf-8為較常用的選擇，錯誤 的編碼會造成用戶瀏覽的時候出現亂碼。
2.對于HTML格式郵件的要求
包括空格在內，郵件標題的字符最好控制在35個字符。 文件大小(HTML和圖片)最好控制在500KB以下。 電子郵件推薦寬度為850像素以內。鑒于現的瀏覽器普遍偏大,可根據設計的顯 示效果自定義寬度,建議不要超過750像素。 不推薦使用最新的HTML版本,因為目前常用的瀏覽器有些是不支持最新的HTML 標簽的,為了給用戶更好的瀏覽效果,采用“老版本”HTML3.2、HTML4.0即可。
1.不要使用div,使用table定位
Div+css是近幾年新興的web2.0定位方式，這種 方式不適合在郵件模板切割中使用,不同郵件客 戶端或在線瀏覽器對css模型解釋不盡相同，甚 至部分ISP會直接屏蔽部分css樣式，造成錯位或 布局混亂等問題。
2.使用table布局時,不可重復多次colspan
不要使用單一table重復多次colspan，可能會被 郵件客戶端判斷為結構過于復雜，歸類為垃圾郵 件;同時也容易被打亂布局而影響用戶瀏覽。
<table> <tr>
<td><table> <tr>
<td> </td>
<td> </td> </tr>
</table></td> </tr>
<tr>
<td><table> <tr>
<td> </td> <td> </td> <td> </td>
</tr> </table></td>
</tr> <tr>
<td><table> <tr>
<td> </td>
<td> </td> </tr>
</table></td> </tr>
</table>
1.模板盡量不要使用背景圖片
背景圖片在某些郵件客戶端或web界面(如 Gmail、OutLook) 中默認不顯示，所以模板最好不要使用背景圖片，建議使用 背景顏色。但郵件中是可以使用背景顏色的，大部分的郵件 客戶端都是支持的。
2.每張圖都要指定width寬度
每張圖都要指定width寬度、height高度,在圖片被攔截的時 候,不會因圖片大小無法讀 取而被打亂布局。
3.每張圖都要指定alt屬性
每張圖都要指定alt屬性，可以在圖片被攔截的時候顯示圖片 的內容;這樣客戶打開郵件在沒有點擊下載圖片的時候先是 可以看到文字的表述，知道此封郵件大概的內容，而提升用 戶對此封郵件的體驗，從而提高郵件的點擊率并非像上圖中 ，顯示為空白，給用戶帶來不必要的困擾。
1. 圖片鏈接不要使用<map>標簽，因為部分郵件運營商 會屏蔽<map>標簽，而導致圖片無法點擊。
2. 請使用英文字符對圖片名稱命名，不要使用中文、非法 字符來命名圖片，否則會導致圖片無法顯示。
3. 在切割模板的時候,要注意限制圖片的大小和數量,不要為 了效果使圖片過大,會使郵件接收者打開過于緩慢,甚至直 接關閉郵件。
4.純圖片郵件圖片于圖片之前出現斷行 ，目前很多公司的郵件都是使用大圖片切圖這種不規則的 ，經常出現下面的問題
解決方法:
<img src=http: // blog.54575.com/logo.gif” width=297′′ height=160′′ alt=”情人節特供” style="display:block;" />。
在每張圖片后添加 style="display:block;" 此CSS即可。
1.不要使用外部樣式表引用,將樣式表 寫入模板內部，因為大部分的ISP會 屏蔽css樣式表 如:
2.padding和margin標簽
table中,某些郵件客戶端或web界面 (如Gmail), 對浮動的標簽(padding 、margin等)支持很差,所以盡量不 要使用。
3.盡量不要使用<h2>、<ul>、<li>、 <p>、<ol>等有默認樣式的標簽。 防止style不被ISP正確解析時頁面布 局混亂。
1. 可以使用簡單的gif動畫來表達某些需要明顯突出的要素,但要控制gif文件的大 小,不要影響整封郵件的下載瀏覽速度; 但gif動畫在OutLook 里是失效的。
2. 不要使用Flash、Java、Javascript、Frames,I-Frames、ActiveX、dynamic HTML等,前些年郵件病毒泛濫,大部分郵件運營商都已經屏蔽了這些元素
前端開發的程序員應該都知道Webix這個免費框架，本文會給出用其創建一個電子郵件客戶端用戶界面的步驟。Webix是一個JavaScript UI庫，可用其構建一些HTML5程序，熟悉它的程序員都知道，Webix快速、輕便且易于學習，與AngularJS、Vue.js和jQuery的集成都很方便，所以我最終選擇了Webix。（閱讀本文大概需要5分鐘，圖片較多，建議在有Wifi的情況下閱讀。）
先來看看如何開始使用Webix（如果用過，請自動忽略這一部分），下載完成后，程序員應該在頁面上添加所需的JavaScript和CSS文件，這些都可以在代碼庫文件夾中找到：
在應用程序中不需要使用webix.ready，但它有助于確保在頁面完全加載后執行代碼（作為theonDocumentReady事件和onlload（）的替代方法）。
要在頁面上添加小部件，程序員可以使用view屬性，它的值定義將決定使用哪個小部件。在這個過程中，還可以使用其他屬性定義窗口小部件的外觀和工作原理。例如，創建一個圖表：
要在頁面上添加多個小部件，就必須創建一個布局（這將在下文中詳述）。
進入正題，先來看一下電子郵件客戶端的外觀：
因為Webix是一個完全可以與任何后端集成的客戶端框架，所以程序員只需要集中在用戶界面上就可以了。
步驟1：創建布局
在向應用程序中添加組件之前必須先定義其布局。TheLayout組件允許將頁面分成行和列，程序員可以創建嵌套行和列，設置其相對或絕對大小或者為用戶提供手動更改創建單元格大小的可能性。
布局組件最好的一點是，創建的頁面布局是一堆DIV容器，以便程序員可以在Webix小部件旁邊使用任何第三方組件。
讓我們來看看一切如何運作。如果要創建由三行組成的應用程序，可以使用以下代碼：
要創建三列布局，可以使用幾乎相同的代碼，把行換成列就可以了：
看起來很容易嗎？ 我們來看一個更復雜的例子：嵌套單元格：
結果如下：
使用嵌套行和列的不同組合，程序員可以創建項目需要的復雜布局。使用Resizer可以使單元格邊框可拖動，用戶將能夠手動調整其大小。
完成布局創建之后，程序員將使用模板組件為每個單元格添加標簽，包括一些要放置的組件，該模板允許呈現純文本或單個數據記錄。
以下是代碼：
目前，我們已經使用height和width屬性來定義所需的大小了。涉及的新屬性是type，它定義了布局邊框。
如果使用clean將獲得無邊框的單元格，使用wide將獲得有邊框的、有更大空間的單元格。
我們來檢查結果：
好，接下來的任務是用實際組件替換模板。
步驟2：添加工具欄
我們從工具欄組件開始，它可以包含各種元素，如按鈕或下拉菜單。
記住，要使用Webix創建組件，必須使用view:“component_name”代碼行，元素屬性允許選擇工具欄的內容。
接下來是添加標簽，以便用戶了解正在處理什么：
現在必須將此代碼添加到應用程序中，以替換以前創建的模板。
之前：
之后：
我們來檢查結果：
步驟3：添加文件夾樹
程序員可使用Tree widget進行此任務，data屬性定義了文件夾樹的結構。以下是代碼：
每個樹節點都有唯一的ID和一個將顯示在屏幕上的值。“Contact Groups”節點具有兩個子節點。
open:true屬性將打開此分支。除了描述的屬性，注意這個代碼行：select：true。它允許選擇樹項目。現在，您可以用代碼 "Tree"替換模板。
我們來檢查結果：
步驟4：添加日歷
現在，您可以在時間選擇器中添加一個日歷到應用程序。這個方便的互動小部件提供了必要的時間和日期，當你想填寫一個表單或創建一個新的事件。該小部件用于創建GanttPRO應用程序，允許用戶使用在線甘特圖：
這不是一件艱巨的任務：
在您使用代碼"Calendar" 替換模板之后，您將得到以下結果：
步驟5：使用DataTable組件顯示電子郵件列表
目前，應用程序中已經有了一些相當簡單的組件，因此可以繼續處理更復雜的內容。
程序員可使用DataTable組件來顯示電子郵件列表。它是一個高級的數據組件，支持許多功能，如過濾，排序，分頁等。它支持不同的格式，如XML，JSON和CSV。至于其如何在真實的Web應用程序中運行的示例，請查看XL報告：
對于此示例，你需要使用JSON對象作為數據源：
如您所見，電子郵件列表將包含名稱，電子郵件地址，主題和日期等信息。
請注意，你還使用了文件夾屬性，其值確定存儲特定電子郵件的文件夾。在您的實例folder：1表示郵件存儲在收件箱文件夾中。The folder：2表示Webix在“發送”文件夾中存儲一個電子郵件。
現在可以創建一個新的DataTable組件：
scrollX：false代碼行禁用水平滾動條。columns屬性定義表將具有哪些列。第一列僅包含復選框。header:{ content:"masterCheckbox" }定義具有主復選框的標題，可用于選擇所有可用的電子郵件。使用“{common.checkbox（）}”，您可以在此列的每個單元格中添加一個復選框。
其他列只顯示數據源中的信息，id屬性的值定義在列（名稱，主題和日期）中顯示哪些數據。標題屬性將一個文本添加到標題。注意填充空間：fillspace:true。您已經使用它來強制列擴展以填充未使用的空間。
現在，用上面的代碼替換模板：“Email list”，你會得到這樣的東西：
步驟6：使用數據綁定
現在你必須編寫一些可以幫助Tree和DataTable協同工作的代碼。
記住，您在DataTable創建過程中使用的數據數組包含來自兩個不同文件夾的郵件：Inbox和Sent。您的任務是使DataTable組件根據所選文件夾顯示正確的電子郵件。要做到這一點，可以使用稱為數據綁定的機制。
使用bind（）函數實現數據綁定。應該從從屬組件調用，并將主組件作為參數。由于您希望DataTable根據所選節點樹更改其內容，因此第一個組件將是從屬組件，第二個組件將作為主節點。
除了綁定數據，你必須告訴你的應用程序，應該在應用程序加載之后選擇樹的第一個節點。 要實現該目標，您應該將相應的代碼放在ready方法中，如下所示：
現在，電子郵件列表的內容將根據所選文件夾進行更改：
步驟7：添加按鈕
這不是一件艱巨的任務，因為您已經學習了創建組件所需的屬性。您必須創建三個按鈕：Reply, Create和Delete。
這是您應該使用的代碼：
用實際的代碼替換模板后，你會得到這樣的：
用戶可能難以找到其他按鈕。為了簡化此任務，您可以給按鈕添加圖標。
Webix使用Font Awesome集合中的圖標。這些圖標是根據麻省理工學院許可證獲得許可的，有很多選擇。
要將常規按鈕轉換成帶有圖標的按鈕，您必須添加兩個屬性：
Type將定義您將使用哪種按鈕
Icon允許從收藏中選擇正確的按鈕
例如，如果要向“create”按鈕添加信封圖標，可以使用以下屬性組合：
使用相同的方法，您可以向所有按鈕添加圖標：
步驟8：顯示電子郵件內容
由于電子郵件的正文由HTML代碼呈現，您可以使用模板組件進行顯示。替換模板：“消息”代碼如下：
如果沒有選擇的電子郵件，用戶將看到以下消息：No message selected。您可以使用其id屬性的值來操作此組件。例如，您有一個包含消息的變量：
要在屏幕上顯示此消息，可以使用以下代碼：
步驟9.使用Windows
最后一步是提供創建新消息的可能，您已經擁有“create”按鈕，但它什么都不做。我們來改變一下：
接下來，用戶點擊此按鈕后，Webix將顯示一個窗口，該窗口的ID為“my_win”。此窗口將包含用于發送新電子郵件的表單，在顯示之前，您必須先刪除之前插入的數據。這就是為什么使用clear（）方法。
現在，您將定義此窗口的外觀。對于這個任務，你必須使用一個新的webix.ui（）構造函數：
移動屬性允許移動窗口，使用head屬性，可以定義窗口的標題。The position：“center”代碼行告訴Webix，新窗口應該出現在頁面的中心。body部分可能包含任何視圖。
步驟10：將窗體添加到窗口
Form widget可以以最小的努力創建Web窗體。
我們來看下面的例子：
無邊界屬性允許隱藏窗體的邊框。表單中最重要的是elements屬性，它定義了一組垂直排列的控件和控件組。
在您的情況下，表單將包含兩個文本字段，一個文本區域和兩個按鈕：發送和關閉。請注意，關閉按鈕使用hide（）方法關閉窗口。發送按鈕不執行任何操作，因為您的示例沒有后端。在使用click屬性的實際應用程序中，可以添加發送消息的代碼。
將創建表單的代碼添加到窗口代碼后，可以測試結果。單擊創建按鈕，屏幕上將出現一個新窗口：
Wrapping up
使用Webix，程序員可以盡可能少地為Web應用程序創建用戶界面。使用Layout組件，您可以快速構建復雜的布局。易用性允許程序員嘗試創建不同變體的模型，以確定哪些組件將保證更好的用戶體驗。
前端開發程序員需要做的就是在頁面上添加可用的數據組件，定義要使用的數據組件，并為其設置數據源。之后，程序員可以繼續進行配置過程，直到達到理想的結果。
論是我們在發郵件給2C客戶，還是給B2B客戶以及給Youtube或者Instagram網紅發開發信,都知道郵件標題是非常非常重要的。如果郵件標題沒有吸引到用戶,郵件內容寫的再精彩也是沒什么太大的作用, 因為用戶壓根就沒有看到。
上文主要寫了如何做好郵件內容-圖文并茂的HTML郵件,今天主要講講如何設置郵件標題的表情包,從而吸引到用戶點擊郵件,因為其他的郵件標題都是純文字的,用戶每天都收到很多的郵件,很難抓取到他們的注意,如果在標題中加入一些特殊符號,那就非常醒目啦,在幾十封的郵件標題中,一下子就抓住了用戶的注意。
就以自己的Gmail郵箱為例,每天收到很多的推銷郵件,都懶得點擊去看,但是當你收到帶特殊符號的郵件時,一下子就吸引到了我的注意,比如上圖中紅色方框里面的郵件標題。
郵件標題里面有樹的形狀圖,不論郵件的內容怎么樣,最起碼從郵件標題從幾十封郵件一下子就抓住了注意力,很想點擊進去看看里面的內容。
接下來就告訴大家如何制作郵件標題的特殊符號,從而吸引用戶的注意力,增加打開郵件的概率,至少比純文本的標題EDM營銷更加有效果。
這個工具就是Unicode-table(https://unicode-table.com),操作也是非常簡單,可以在搜索框輸入我們想要的符號,比如星星,樹,月亮,太陽等常見的符號,都是可以搜到的,也很有很多可以可供選擇的。
比如我們以太陽為例,在搜索框里輸入太陽,有207個關于太陽的表情符號,比如我們選擇Sun with face這個符號，直接點擊"Copy按鈕",然后復制到郵件標題就可以啦，操作也是非常方便的。
然后客戶收到的郵件標題就是帶著太陽笑臉的符號,一下子就會吸引用戶去點擊,我第一次收到這樣的郵件時，還挺好奇是怎么做到的。
建議大家去嘗試下不同的素材符號組合在一起,然后發給紅人或者開發客戶,看看是不是點開率,回復率提高啦呢。
另外告訴大家如何在線制作郵箱簽名,有時收到郵件看到有的客戶郵箱簽名非常漂亮,有頭像,職位,社交媒體賬號等信息，如下圖所示：
接下來就告訴大家借助一款工具我們也可以做出如此炫酷的郵箱簽名,從而讓用戶覺得你們是非常專業。
這個工具就是Hubspot(https://www.hubspot.com),一款專門制作在線郵箱簽名的工具。
只需要按照這個模板輸入對應的信息就可以,以及上傳頭像,放上自己社交賬號的鏈接，需要注意的是上傳頭像的時候需要輸入鏈接,先把頭像保存在Google drive,然后復制鏈接，而不是直接上傳頭像。
網上隨便找了頭像跟Logo,以及虛擬了一些姓名,地址等信息,填寫完成之后就是下面的這種格式, Hubspot上有很多的簽名模板排版可以供選擇,大家可以根據自己的喜愛去選擇喜歡的排版。
填寫完畢之后,下面有個"create signature按鈕",就生成了郵件簽名的模板,就可以復制添加到自己郵箱簽名那里,這樣郵件發出去就比之前顯得專業很多。
這篇文章主要講了在郵件標題中插入特殊符號,吸引用戶的注意，從而提高點擊郵件以及查看郵件內容的機會,還有就是設置郵件簽名的模板,再加上上文提到的如何制作圖文并茂的HTML郵件,做好EDM營銷，請參考如何制作圖文并茂的HTML郵件,做好EDM營銷
這3個工具可以結合起來用，相信只要有好的郵件營銷內容加上點晴的標題,相信做好EDM營銷,無論是開發2B，還是2C客戶,或者發郵件給Youtube,Instagram或科技媒體編輯,總會有很大的幫助。（來源： 下班后8小時）
以上內容屬作者個人觀點，不代表雨果網立場！本文經原作者授權轉載，轉載需經原作者授權同意。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
