整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
作一封郵件和制作web頁(yè)面還是有很大不同的。當(dāng)不同的瀏覽器都在不斷向標(biāo)準(zhǔn)靠近的同時(shí)，大多數(shù)郵件客戶端卻止步不前，甚至有一些是在退步的。在2007年，Microsoft 將 Outlook 的渲染引擎從 IE 轉(zhuǎn)換成 Word的渲染方式，而一些基于web的郵件客戶端，像Gmail和Hotmail，則增加了一些怪異的模式，還有Lotus Notes的一些技巧。
根據(jù)我的經(jīng)驗(yàn)來(lái)看，我們解決這些問(wèn)題的關(guān)鍵是要關(guān)注下面三件事情。首先，保持簡(jiǎn)單，你的郵件設(shè)計(jì)的越復(fù)雜，你的郵件在某個(gè)受歡迎的、不支持標(biāo)準(zhǔn)的客戶端上“抽風(fēng)”的可能性就越大。其次，你需要將你的編碼技巧退步十年，這通常意味著我們要使用嵌套的表格，將CSS寫成內(nèi)聯(lián)的形式等。最后，你需要對(duì)你的設(shè)計(jì)進(jìn)行規(guī)律性的測(cè)試。
因?yàn)橹T如Gmail和Outlook 2007 無(wú)法支持浮動(dòng)(float)、外邊距(margin)、內(nèi)填充（padding）,你需要使用表格來(lái)作為你的郵件的框架。雖然表格嵌套的方法被廣泛支持，但是在對(duì)單元格的寬度、外邊距和內(nèi)填充的處理方法并不一致。為了達(dá)到最優(yōu)的效果，當(dāng)制作表格結(jié)構(gòu)時(shí)，請(qǐng)記住下面的技巧。
1、為每個(gè)單元格設(shè)置寬度，而不是表格
當(dāng)你把表格寬度、td 寬度、td的填充和CSS的填充寫到一封郵件時(shí)，你看到的結(jié)果可能是每個(gè)郵件客戶端它們看上去都不一樣。最可靠的方法是我們將為表格的每個(gè)單元格(th,td)設(shè)置寬度，而不是表格(table)本身。如下：
永遠(yuǎn)別指望郵件客戶端能夠計(jì)算出你沒(méi)有指定寬度的單元格的寬度。它絕對(duì)不會(huì)。同時(shí)也要避免使用基于百分比的寬度，像 Outlook 2007 這樣的客戶端從來(lái)不考慮這種寬度方式，特別是這些嵌套的表格。像素級(jí)視覺(jué)，如果你想對(duì)每個(gè)單元格做填充，可以使用表單的單元格填屬性或者用CSS的內(nèi)填充，但是不要這兩種一起使用。
2、嵌套迷思
表格的嵌套相對(duì)于設(shè)置左右浮動(dòng)和外邊距(margin)或者表單單元格填充的方法更加穩(wěn)固。如果你能使用這種表格嵌套的方法達(dá)到相同的效果，這將會(huì)給你在那些蹩腳的（buggier）郵件終端上面獲得最好的結(jié)果。
3、使用一個(gè)容器表單來(lái)設(shè)置 body 背景色彩
很多郵件客戶端會(huì)忽略掉在CSS中或者<body>標(biāo)簽中設(shè)置的背景色。針對(duì)這種情況，將你的整封郵件用一個(gè)寬度為100%的表單包起來(lái)，并且為其設(shè)置背景色。如下：
你可以使用同樣的方案在背景圖片的設(shè)置上，需要記住的是某些郵件客戶端是不支持背景圖片的，這樣你就需要設(shè)置一個(gè)背景顏色作為備份方案。
4、在單元格中避免使用多余的空格（whitespace）
盡最大可能，避免<td>標(biāo)簽中出現(xiàn)空格。某些郵件客戶端（Yahoo!或者Hotmail）可能會(huì)在某些場(chǎng)景下，對(duì)單元格的上面或者下面增加額外的填充，把你的設(shè)計(jì)破壞掉。
當(dāng)某些郵件設(shè)計(jì)師盡他們最大的努力去避免使用CSS時(shí)，他們又會(huì)去依賴夢(mèng)魘般的<font>標(biāo)簽，但實(shí)際情況是很多的CSS屬性是被大部分郵件客戶端支持的。請(qǐng)查看下面的跨郵件終端的綜合CSS支持列表list of CSS support，從中你也能發(fā)現(xiàn)一些安全的屬性和一些應(yīng)該被避免使用的屬性。
1、將css寫成內(nèi)聯(lián)(inline)的樣式
Gmail就是這方面的罪魁禍?zhǔn)?。CSS被從<head>和<body>中剝離，我們別無(wú)選擇的會(huì)將樣式寫成內(nèi)聯(lián)的形式。一個(gè)好消息是你可以完全自動(dòng)化的完成轉(zhuǎn)化。像Premailer提供意見(jiàn)點(diǎn)擊的方式完成這一過(guò)程。我強(qiáng)烈建議你將此步驟作為你構(gòu)建活動(dòng)的最后一步，你就能感受到這個(gè)CSS的所有益處。
2、避免使用字體的簡(jiǎn)寫和十六進(jìn)制計(jì)數(shù)法
一部分郵箱客戶端會(huì)放棄對(duì)簡(jiǎn)寫的css字體屬性的解析。比如，絕對(duì)不要將你的字體樣式設(shè)置成下面的樣子。如下：
相反，我們應(yīng)該寫成下面的形式：
談到字體這個(gè)話題，我最近也在不同的郵件客戶端測(cè)試引用字體（@font-face）。結(jié)果是凄涼的，這些瀏覽器安全的字體在郵件中使用還是遙遙無(wú)期。
當(dāng)我們用CSS來(lái)聲明顏色屬性時(shí)，有些郵件客戶端并不支持簡(jiǎn)寫的16進(jìn)制的顏色值，比如 color:#f60; 我們需要將其補(bǔ)充完整 color:#ff6600;。為了達(dá)到最優(yōu)的效果，我們需要使用常規(guī)寫法。
像前面提到的單元格的間距，段落的間距也無(wú)法做到所有客戶端的一致。我看到過(guò)設(shè)計(jì)師使用兩個(gè)<br>或者用DIV寫上內(nèi)聯(lián)(inline)的外邊距(margin)樣式彌補(bǔ)這個(gè)短板，但是我最近的測(cè)試顯示大多數(shù)情況下對(duì)段落的支持都還是比充足的（有一段時(shí)間 Yahoo! 根本不支持段落標(biāo)簽）。
最好的實(shí)踐方法是對(duì)每個(gè)段落通過(guò)內(nèi)聯(lián)(inline)的方法設(shè)置外邊距(margin)，像下面這樣：
再次提示，在你構(gòu)建郵件的時(shí)候通過(guò)在head標(biāo)簽中增加樣式，然后通過(guò)Premailer將他們轉(zhuǎn)化成每個(gè)段落的內(nèi)聯(lián)樣式。
如果你的設(shè)計(jì)對(duì)高度是很敏感的或者需要像素級(jí)別的完美，我強(qiáng)烈建議你不要將所有的段落寫到一起，而是將文本的格式化工作放到表單的單元格中來(lái)做。你可能會(huì)需要使用到表單的嵌套或者單元格填充(cellpadding)/CSS 來(lái)達(dá)到期望的樣子。下面就是一個(gè)例子：
某些郵件客戶端將會(huì)用他們的默認(rèn)樣式覆蓋你的鏈接色，你可以通過(guò)兩部來(lái)防止其發(fā)生。第一，針對(duì)每一個(gè)鏈接設(shè)置一個(gè)內(nèi)聯(lián)的（inline）的顏色：
接下來(lái)，增加一個(gè)冗余的 span 標(biāo)簽在 a 標(biāo)簽中。
也許這些方案看上去比較過(guò)激，如果這個(gè)顏色對(duì)你的設(shè)計(jì)很重要，這個(gè)多余的 span 標(biāo)簽是你達(dá)到一致表現(xiàn)的最好解決方案。
很重要的一件需要牢記在心中的關(guān)于圖片的事情是你的訂閱者可能看不到你的圖片。如果你有這方面的準(zhǔn)備，你就會(huì)保持你的內(nèi)容簡(jiǎn)單，并且重要的內(nèi)容不通過(guò)圖片的形式來(lái)展示。
在這個(gè)思想的指導(dǎo)下，在使用HTML郵件的過(guò)程中，下面有一些基本的要領(lǐng)需要牢記：
1、避免占位圖片
雖然使用占位圖片和嵌套表格的方式在10年前很流行，許多郵件客戶端已經(jīng)將其排除作為一種可靠的技術(shù)。很多客戶端會(huì)使用一個(gè)相同尺寸的空占位來(lái)替換圖片，另外一些會(huì)將所有的圖片移除。大多數(shù)郵件客戶端會(huì)給圖片賦予默認(rèn)的圖片區(qū)塊，這將導(dǎo)致訂閱者的第一感覺(jué)很差。堅(jiān)持將單元格賦予固定的寬度，讓其在沒(méi)有圖片的時(shí)候版式不會(huì)亂掉。
2、將圖片定義尺寸
如果你沒(méi)有給每個(gè)圖片設(shè)置尺寸，當(dāng)圖片沒(méi)有被下載時(shí)，有些客戶端會(huì)自己發(fā)明一個(gè)他們自己的尺寸，你的版式就亂掉了。同時(shí)，確保你的所有圖片在被用到郵件中前，都被賦予了正確的尺寸。某些客戶端會(huì)忽略你代碼中設(shè)置的尺寸，而去使用真實(shí)的圖片尺寸。
3、避免使用 PNG 圖片
Lotus Notes 6 和 7 并不支持 8位（8-bit）和24位（24-bit）的 PNG 圖片，所以需要使用GIF或者JPG格式的圖片，即使這會(huì)增加而外的圖片大小。
4、為背景圖片提供備份的顏色
Outlook 2007 不支持背景圖片(aside from this hack to get full page background images working)。如果你想在你的設(shè)計(jì)中使用背景圖像，提供一個(gè)背景色作為備份支持方案。這樣就能同時(shí)解決圖片被屏蔽和Outlook 2007的問(wèn)題。
5、不要忘記標(biāo)注替代文本（alt text）
缺少標(biāo)準(zhǔn)的支持意味著郵件客戶端對(duì)語(yǔ)義化和訪問(wèn)性良好的HTML郵件的破壞性是很大的。即使這樣，從圖片可能被屏蔽角度看，提供替代文本也是很重要的。這樣即使圖片在默認(rèn)狀態(tài)下被限制，大多數(shù)郵件客戶端也能顯示提供的文本來(lái)替代。另外還需要技術(shù)的是某些客戶端，比如 Outlook 2007, Hotmail 和 Apple Mail 在圖片被屏蔽的時(shí)候，并不提供替代文本（alt text）.
6、針對(duì) Hotmail 使用顯示hack
令人費(fèi)解的是，Windows Live Hotmail 對(duì)每個(gè)圖片增加了幾個(gè)像素的填充。一個(gè)變通的方案就是使用下面的顯示屬性來(lái)解決這個(gè)問(wèn)題。
這樣就能移除掉Hotmail的填充值，但是你也可能會(huì)給其它客戶端埋下隱患。
7、避免使用浮動(dòng)屬性（float）
Outlook 2007 和早期版本的 Notes 并不支持浮動(dòng)屬性（float）。在郵件中我們可以使用對(duì)齊屬性在針對(duì)圖像標(biāo)簽做到浮動(dòng)圖片的目的。
如果你在 Yahoo！的郵件中發(fā)現(xiàn)圖片的怪異表現(xiàn)，增加 align="top" 可能能夠解決你遇到的問(wèn)題。
由于缺少 Javascript 或者其他對(duì)象標(biāo)簽（object tag）的支持，視頻郵件最大的程度就是gif動(dòng)畫（如果你認(rèn)為那是視頻的話）。盡管如此，我最近做的一些關(guān)于用html5 videio 標(biāo)簽的測(cè)試結(jié)果，還是讓人感覺(jué)不錯(cuò)。
HTML 5的標(biāo)簽?zāi)壳霸谝徊糠粥]件終端是無(wú)法運(yùn)行的，包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作為如果視頻不被支持的補(bǔ)救方法，你可以提供穩(wěn)定的備選內(nèi)容，比如gif 動(dòng)畫或者一個(gè)可以點(diǎn)擊到瀏覽器播放視頻的圖片。
當(dāng)然，你是否需要將視頻添加到你的郵件里面，那就是另外一個(gè)議題了，如果你的答案是肯定的，你可以使用這些代碼案例。
移動(dòng)端有機(jī)胺的情況近期顯得比較雜亂了，隨著iPhone,Android的發(fā)明和Palm和RIM的改進(jìn)，認(rèn)為移動(dòng)端電子郵件終端不重要的年代一去不復(fù)返了。
為了給移動(dòng)端訂閱用戶良好的體現(xiàn)，我們?cè)诰幋a的過(guò)程中也有幾個(gè)關(guān)鍵點(diǎn)需要牢記心中。
1、保持寬度小于600像素
受限于郵件客戶端的視窗，這條規(guī)則來(lái)移動(dòng)視窗到來(lái)之前的年代就很重要。事實(shí)上，iphone 的視窗是320像素，Droid是480像素，Blackberry大概360像素。堅(jiān)持最大600像素寬的設(shè)計(jì)，能夠讓你的郵件縮小到上面提到的設(shè)備上面依然可讀。這個(gè)尺寸在桌面端和web端的預(yù)覽效果也很好。
2、注意文本尺寸的自動(dòng)調(diào)整
作為一個(gè)好的特性，基于webkit郵件客戶端(比如 iPhone, Pre 和 Android) 能夠自動(dòng)調(diào)整文本的大小來(lái)提高閱讀性。如果你的測(cè)試結(jié)果表明這項(xiàng)特點(diǎn)給你帶來(lái)的好處是破外了你的設(shè)計(jì)，你可以通過(guò)下面的屬性禁用：
雖然近幾年郵件客戶端對(duì)標(biāo)準(zhǔn)的支持并沒(méi)有取得長(zhǎng)足的進(jìn)步，但是某些郵件客戶端的改變卻從未停止（有好有壞），基于 web 的客戶端，如 Yahoo!、hotmail 和 Gmail 在這方面乏善可陳。我看到過(guò)無(wú)數(shù)次可行的設(shè)計(jì)方案被停止支持，沒(méi)有任何解釋。
基于這個(gè)原因，你也要對(duì)你的郵件設(shè)計(jì)保持規(guī)律的測(cè)試。我發(fā)現(xiàn)每個(gè)月進(jìn)行一些快速的測(cè)試的小技巧，特別基于web的客戶端。好的消息是經(jīng)過(guò)幾次設(shè)計(jì)和測(cè)試，你將會(huì)從這些雜亂無(wú)章中找到規(guī)律。一些潛在的陷阱將變的可以預(yù)計(jì)，一個(gè)對(duì)郵箱友好的設(shè)計(jì)模型也會(huì)在你心中成型。
本文參考“新浪UED”：創(chuàng)建堅(jiān)如磐石的HTML郵件
時(shí)在我們的收件箱里面,經(jīng)常會(huì)收到很多精美的HTML郵件,上面有文字,圖片,圖文并茂,點(diǎn)擊圖片按鈕可以直接跳轉(zhuǎn)到所要導(dǎo)流的頁(yè)面,有的郵件下面還有Social的Logo,比如Facebook,twitter,點(diǎn)擊按鈕就會(huì)跳轉(zhuǎn)所對(duì)應(yīng)的頁(yè)面。
比如上面截取了一些HTML的郵箱格式,這種HTML的EDM營(yíng)銷感覺(jué)非常的酷,比純文本的郵件更有豐富多彩,也更能傳達(dá)出更多的內(nèi)容跟素材,也更吸引抓住用戶的眼球。圖片下面直接可以設(shè)置鏈接,也方便用戶直接點(diǎn)擊進(jìn)入,避免二次流失。
今天就給大家介紹一款在線制作HTML郵件的工具,其實(shí)操作也是非常的簡(jiǎn)單,可以直接在網(wǎng)站內(nèi)的系統(tǒng)模板修改，替換成自己的素材和鏈接,也可以自己去設(shè)置圖文排版。
這款工具就是Topol,一款專門在線制作HTML郵件的工具,非常容易操作跟上手
網(wǎng)址為https://app.topol.io
剛開始制作時(shí)建議直接使用網(wǎng)址內(nèi)的模板去替換自己產(chǎn)品的素材,文案跟鏈接,因?yàn)榫W(wǎng)址里面提供了幾十套制作非常精美的HTML郵件,我們先來(lái)看看。
大家可以根據(jù)自己的喜愛(ài),去選擇喜歡的模板直接點(diǎn)擊進(jìn)去去后臺(tái)編輯,替換自己的元素,接下來(lái)來(lái)看看如何替換跟編輯：
比如就以下面這個(gè)手環(huán)的HTML郵件為模板,因?yàn)樯厦娴膱D文信息真的非常非常豐富,有產(chǎn)品圖片,購(gòu)買按鈕,產(chǎn)品Slogan,產(chǎn)品功能介紹以及社媒鏈接等，展示元素非常充足。
打開后臺(tái)頁(yè)面是這樣的,首先先熟悉下下方左側(cè)紅色方框內(nèi)的意思,其實(shí)也都是非常好理解的, 就是我們想要在右側(cè)HTML郵件模板中需要什么元素,直接把紅色方框內(nèi)的按鈕拖過(guò)去,比如需要放置文案，就把TEXT按鈕,拖過(guò)去,如果是放置圖片,GIF或者視頻,就把對(duì)應(yīng)的按鈕拖到需要放置的展示位置就可以。
Sturecture按鈕就是你想要圖片或者文案的格式,直接拖過(guò)去就可以,知道這些意思之后,接下來(lái)我們看看如何操作。
第一,先選擇你想要排列的Structure,比如選擇2個(gè)橫排并列,直接拖2個(gè)并列的結(jié)構(gòu)過(guò)去，如下所示：
第二,就是要思考你想要展示的元素是什么,是文案還是圖片,把想要展示的形式直接拖到上圖2個(gè)方框里面,比如我們選擇圖片
然后選擇2個(gè)我們自己產(chǎn)品的圖片放上去,如下圖所示,為了節(jié)省時(shí)間,文案部分就不做修改,修改方式跟圖片是一樣的,只需要把圖片的文案替換成我們自己的就可以。
然后圖片下面有個(gè)Check whole collection按鈕，可以刪去這個(gè)按鈕,也可以點(diǎn)擊保留按鈕,可以在按鈕下面放上自己的產(chǎn)品鏈接以及顯示在按鈕上的文案, 還可以調(diào)整按鈕顯示的驗(yàn)收,尺寸大小,字體驗(yàn)收等等非常詳細(xì)的信息,建議大家可以都去嘗試下。
下面就是產(chǎn)品功能的一些展示,可以把下面的主要展示功能替換為自己產(chǎn)品的功能以及圖片，文案等,操作方法跟上面那個(gè)一樣。
接下來(lái)就是產(chǎn)品櫥窗展示以及購(gòu)物按鈕添加,以及一些物流等相關(guān)信息,可以把下面的產(chǎn)品展示圖片替換成自己的以及鏈接。
在接下來(lái)就是一些社交媒體的展示,直接點(diǎn)擊下面的按鈕然后在對(duì)應(yīng)的社交媒體輸入對(duì)應(yīng)的鏈接,當(dāng)用戶點(diǎn)擊的時(shí)候就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面。
加好這些之后,就可以預(yù)覽下效果怎么樣，可以Preview在PC跟移動(dòng)端,哪里有不合適的可以直接調(diào)整下，如果覺(jué)得一切都o(jì)k的可以發(fā)送到自己的郵箱預(yù)覽,尤其是導(dǎo)流的鏈接,點(diǎn)擊下是否能跳轉(zhuǎn)到所要導(dǎo)流的頁(yè)面。
然后你的郵箱就會(huì)收到你自己親手做的HTML精美的郵件,因?yàn)槲疫@個(gè)主要做演示作用,有很多沒(méi)有調(diào)整所以做的比較難看,大家可以好好設(shè)計(jì)一下,做出非常精美的HTML郵件,從而做好EDM營(yíng)銷，吸引用戶點(diǎn)擊郵箱,從而提高轉(zhuǎn)化。
如果你的郵箱收到自己做的HTML郵件,檢查之后沒(méi)有問(wèn)題,就可以轉(zhuǎn)發(fā)給用戶,可以是做B2C的用戶，也可以是外貿(mào)B端用來(lái)發(fā)開發(fā)信的用戶。
還有一個(gè)方法發(fā)送HTML郵件,就是比較復(fù)雜一些,做好HTML郵件之后點(diǎn)擊保存按鈕,然后獲取HTML源代碼，然后復(fù)制源代碼去轉(zhuǎn)換。
比如常見(jiàn)的QQ郵箱,網(wǎng)易郵箱都可以轉(zhuǎn)化,以QQ郵箱為例,點(diǎn)擊格式--然后復(fù)制粘貼HTML源代碼--點(diǎn)擊可視化編輯按鈕就可以啦，如下圖所示
Topol工具真的非常方便制作HTML圖文并茂郵件,且操作方法也非常簡(jiǎn)單,功能也非常繁多,建議大家可以好好去研究下，做好EDM營(yíng)銷，不僅僅對(duì)B端,C端用戶,對(duì)開發(fā)紅人,聯(lián)系海外科技媒體編輯同樣適用。
這篇文章寫的也比較簡(jiǎn)單,主要是講一些重要的步驟,如何設(shè)計(jì)非常有吸引力的HTML需要小伙伴在下面好好去嘗試下。
這個(gè)適合初學(xué)者的指南中，你將學(xué)習(xí)如何創(chuàng)建一個(gè)響應(yīng)式電子郵件模板。你將跟隨逐步說(shuō)明以及代碼片段設(shè)計(jì)一個(gè)在任何設(shè)備上都看起來(lái)很棒的電子郵件模板。
這個(gè)項(xiàng)目非常適合渴望掌握電子郵件設(shè)計(jì)基礎(chǔ)的新手！
（本文視頻講解：java567.com）
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
