言
這幾天有好幾個身邊的朋友很驚訝地問我怎樣制作出一些精美的圖文并茂的郵件,所以我決定從今天起一連幾天抽空編寫出一套教程,分享給有同樣需求的小伙伴。
圖文并茂的郵件的優點有哪些?
吸引力強,具有強大的視覺沖擊力,增加用戶的存留時間。
有效地引用導戶點擊鏈接。因為圖片和按鈕都可以增加跳轉鏈接,從而更有效地引導用戶點擊鏈接,跳轉到自己的網站。
更有效地提高轉化率,對于普通的文本郵件更有效地吸引用戶,提高潛在客戶到真實客戶的轉化率。
什么行業適用于圖文并茂的HTML郵件?
適用于HTML郵件的行業非常多,如:旅游、美食、地產、外貿、電商、推銷、廣告、保險…幾乎包含各行各業,只要涉及廣告與營銷的,都適合適用HTML郵件發送。
廢話不多說,看看接下來這幾天分享的這個例子,我選擇了一個較為復雜的頁面進行分析講解,如果大家都會做這個例子,那么90%的HTML郵件制作都難不倒你們了。雖然官方案例中也有這個例子,但我的做法跟它不一樣。先上圖:
相信熟悉微信的小伙伴看起來比較眼熟,這是微信發送的商戶資料審核通過的通知,這就是一封圖文并茂的HTML郵件。我教大家怎樣通過不寫代碼,直接使用拖拽應用來生成一份這樣的HTML郵件。
好今天就抽空寫到這里,準備吃早餐上班,今晚或明天就真正地開始我們的制作之旅。
————————————————
版權聲明:本文為CSDN博主「^_^秀」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/winner_xiu/article/details/99670227
件制作不同于其他的頁面制作,所以有些規范您還是得考慮的。
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等,前些年郵件病毒泛濫,大部分郵件運營商都已經屏蔽了這些元素
們在日常工作中,經常需要把整理好的表格,復制粘貼到郵件的正文中,那么怎樣通過UiPath來實現帶有表格內容的郵件正文。
本次內容所要用到的Activities有:
下面是整個流程的實現過程:
現在開始介紹每一個步驟的詳細設定
第一步:通過ReadRange來讀取我們需要發送郵件的正文內容的數據,輸出OutPut,我們定義為DataTable類型,命名為DT。這里的ReadRange,我使用的是WorkBook中的activities。
第二步:拼接html格式
head的內容:"<html><body><table border="+"1"+" cellspacing="+""+"><tr><td>姓名</td><td>身份證</td> <td>出生年</td><td>年齡</td></tr>"
tail的內容:"</tr></table></body></html>"
第三步:讀取temp模板,來用填寫數據。
temp模板的內容為:{0}:填寫姓名,{1}:身份證,{2}:出生年,{3}:年齡
第四步:通過for each row來將所有數據的填入,并拼接成html格式
body:body+string.Format(temp,row[0].ToString(),row[1].ToString(),row[2].ToString(),row[3].ToString())
第五步:通過Send OutlookMail Message來發送郵件,
outlook的格式選擇如下:
最后我們來看看實現之后,我的郵件收到的效果
好了,上面就是我們如何發送帶有表格正文的郵件,通過拼接html來實現的。
如果大家在實現的過程中有任何疑問,可以掃描下方二維碼,一起討論,共同學習
*請認真填寫需求信息,我們會在24小時內與您取得聯系。