職場(chǎng)秘技：教你制作出精美的郵件模板
時(shí)間：2023-07-06 02:45:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-06 02:45:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
職場(chǎng)秘技：教你制作出精美的郵件模板：
"專業(yè)"才是職場(chǎng)的秘技，而能夠制作出精美的郵件模板也是專業(yè)的表現(xiàn)。
郵件是職場(chǎng)以及商務(wù)溝通非常重要的方式，而職場(chǎng)和商務(wù)是最需要體現(xiàn)出專業(yè)性的，大公司群發(fā)的郵件通常都制作精美、圖文搭配、布局精巧，而且郵件還動(dòng)態(tài)適配不同的終端，這篇文章就來(lái)從技術(shù)的角度教你如何量身定制屬于自己的郵件模板，掌握郵件代碼開(kāi)發(fā)的秘技。
要學(xué)會(huì)制作郵件模板，需要你有一點(diǎn)HTML和CSS的知識(shí)，這些知識(shí)并不難，一周的時(shí)間就可以學(xué)會(huì)，點(diǎn)擊HackWeek網(wǎng)頁(yè)開(kāi)發(fā)。你也可以按照本文的方法零基礎(chǔ)做一個(gè)郵件模板。
如何借鑒優(yōu)秀的案例
一封精美的郵件是技術(shù)、設(shè)計(jì)、運(yùn)營(yíng)、產(chǎn)品等多種思想結(jié)合的產(chǎn)物，當(dāng)我們開(kāi)始設(shè)計(jì)我們自己的郵件模板時(shí)，如果是從零開(kāi)始，那確實(shí)是一件比較費(fèi)時(shí)費(fèi)力的事情，我們可以去找一些優(yōu)秀的案例來(lái)借鑒。
要說(shuō)明一下，如果你只是簡(jiǎn)單地通過(guò)復(fù)制案例郵件的正文然后使用可視化編輯器進(jìn)行自己的加工，很容易改變郵件的結(jié)構(gòu)和整個(gè)樣式，因此我們最好是拷貝郵件背后的代碼再來(lái)修改。
像易企秀之于H5，秀米之于微信公眾號(hào)排版，市面上也有一些不錯(cuò)的可視化郵件模板制作工具，比較值得推薦的是MailChimp。MailChimp也是一個(gè)郵件群發(fā)的平臺(tái)，它的界面是純英文的哦。
那如何查看郵件的代碼呢？QQ郵箱查看郵件代碼的方式如下：
如果是其他郵箱如163等的郵件除了轉(zhuǎn)發(fā)到QQ郵箱外，還有沒(méi)有其他方法呢？那就是使用Chrome的開(kāi)發(fā)者工具。如下圖，找到整封郵件的代碼，然后復(fù)制出來(lái)再來(lái)研究~~
Chrome的開(kāi)發(fā)者工具極其強(qiáng)大，專業(yè)的前端開(kāi)發(fā)程序員都會(huì)使用到它，但它對(duì)那些完全不懂技術(shù)的小白來(lái)說(shuō)，也有非常多實(shí)用的功能，關(guān)于Chrome的開(kāi)發(fā)者工具，我們下次會(huì)向大家詳細(xì)介紹一下，敬請(qǐng)關(guān)注。
一些準(zhǔn)備工作
為了讓郵件內(nèi)容可以直接以網(wǎng)頁(yè)的形式呈現(xiàn)出來(lái)，有兩種方式，一種是直接在郵件客戶端里面是使用代碼來(lái)編寫(xiě)(比如QQ郵箱)，比如下圖是我收到的大疆公司發(fā)的郵件的部分截圖，有沒(méi)有覺(jué)得這種排列和底部的設(shè)計(jì)還是挺不錯(cuò)的？我也把該郵件做成了網(wǎng)頁(yè)以及為了讓代碼可讀對(duì)格式等進(jìn)行了一些并處理上傳到了服務(wù)器上，大家可以通過(guò) Demystifying Email Design 來(lái)查看。同時(shí)，你也可以將網(wǎng)頁(yè)另存為就能查看到這封郵件的代碼了。
另外一種方法是使用網(wǎng)頁(yè)編輯工具如Webstorm、Sublime來(lái)對(duì)代碼進(jìn)行編輯，推薦這種方法，因?yàn)猷]件所涉及的代碼還是挺長(zhǎng)的，層級(jí)比較多，所以借助于工具可以更加方便地對(duì)代碼進(jìn)行編輯。大家編輯的時(shí)候注意代碼縮進(jìn)，讓代碼更加清晰。
下面就從代碼的角度來(lái)詳細(xì)說(shuō)明一個(gè)精美的郵件模板是怎么誕生的
第一步：新建一個(gè)html文件
使用Sublime或Webstorm等網(wǎng)頁(yè)編輯工具，新建一個(gè)html文件，將如下代碼復(fù)制粘貼到html文件里面，郵件的正文代碼會(huì)寫(xiě)在body標(biāo)簽內(nèi)，我們從QQ郵箱拷貝的代碼也是復(fù)制粘貼在這個(gè)<body>標(biāo)簽里面，保存之后，郵件就做成了網(wǎng)頁(yè)啦。
控制郵件樣式的css支持內(nèi)聯(lián)式和嵌入式兩種寫(xiě)法，style寫(xiě)在<body>標(biāo)簽里面這個(gè)寫(xiě)法和html的規(guī)范有點(diǎn)不一樣哦，這個(gè)要注意一下~在style標(biāo)簽里面我們可以以class和id選擇器的形式來(lái)定義。
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="format-detection" content="telephone=no"><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> <title>郵件模板</title></head><body style="padding:0; margin:0"><style type="text/css"><!-- 控制郵件樣式的css寫(xiě)在這里 --></style><!-- 郵件正文代碼 --></body></html>第二步：郵件正文的框架
通常我們把整個(gè)郵件的內(nèi)容都置于一個(gè)table標(biāo)簽里面，所以這里我們需要大家對(duì)HTML的table標(biāo)簽比較熟悉，HTML的table標(biāo)簽相關(guān)知識(shí)內(nèi)容可以學(xué)習(xí)這里： HTML <table> 標(biāo)簽 以及CSS的表格屬性：CSS 參考手冊(cè)
下面先建了一個(gè)一行一列的table表格，整封郵件都放到了這個(gè)表格里面，表格的寬度為100%,cellpadding、cellspacing、boder-spacing、vertical-align等這些大家學(xué)習(xí)的時(shí)候可以對(duì)照我們?cè)O(shè)置Excel表格來(lái)學(xué)習(xí)，知識(shí)都是相通的，不需要死記下來(lái)哦(我的記憶力就很差，不是用編輯器提示和查文檔，完全沒(méi)法寫(xiě)代碼)~~
<table cellpadding="0" cellspacing="0" width="100%" class="body" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top;width: 100%;table-layout: fixed"><tbody><tr style="vertical-align: top"><td><!-- 郵件的內(nèi)容寫(xiě)在這里 --></td></tr></tbody></table>第三步：郵件正文的結(jié)構(gòu)
在第二步中，我們確定了郵件正文的整個(gè)框架都是一個(gè)一行一列的table表格，那么我們開(kāi)始寫(xiě)郵件的正文啦，寫(xiě)郵件的時(shí)候我們都是一段一段分塊來(lái)寫(xiě)，先寫(xiě)頭部，再寫(xiě)中間的，可能中間有好幾塊，最后是尾部，于是我們可以把每一塊都寫(xiě)成一個(gè)table表格。
這個(gè)思想是不是和寫(xiě)html的時(shí)候很相似，不同的是html我們是用一個(gè)個(gè)div標(biāo)簽和section標(biāo)簽來(lái)分塊，這里使用table來(lái)分塊。值得說(shuō)明的是，郵件代碼也可以使用div來(lái)分塊，只是用table標(biāo)簽來(lái)分塊寫(xiě)郵件是最常見(jiàn)的做法。把一個(gè)整體的網(wǎng)頁(yè)和一封整體的郵件分成一塊塊的分別來(lái)編輯它們的代碼，是不是更加井井有條一些？分塊編寫(xiě)是寫(xiě)網(wǎng)頁(yè)以及寫(xiě)郵件專業(yè)化、流程化的做法。
我們是用table來(lái)分塊，這就相當(dāng)于整封郵件，是一個(gè)大的一行一列的表格里面裝著很多個(gè)多行多列的表格。也就相當(dāng)于我們是在第二步的<td>標(biāo)簽里面添加了又嵌套了很多個(gè)table標(biāo)簽。大家可以查看大疆的郵件代碼，把郵件的每一塊的table折疊起來(lái)，這樣一封郵件的代碼結(jié)構(gòu)就清晰了。如下圖
我們可以看到這封郵件是一個(gè)一行一列的table標(biāo)簽里面嵌套著8個(gè)table標(biāo)簽，也就是說(shuō)整封郵件被分成了8塊，從代碼上就是，我們是把第二步的代碼往<td>標(biāo)簽里面復(fù)制了8遍...
當(dāng)大家把一封復(fù)雜的郵件分成一塊一塊解讀時(shí)，就發(fā)現(xiàn)沒(méi)有想象之中那么難啦~~
第四步：定義table的樣式
在第二步中，我們已經(jīng)提到html和css關(guān)于table標(biāo)簽和屬性的資料，大家可以根據(jù)需要自行來(lái)添加，這里我們說(shuō)明一下寫(xiě)郵件代碼要注意的點(diǎn)。
注意一：為了讓整個(gè)頁(yè)面美觀，我們需要給整封郵件設(shè)置一個(gè)寬度，比如Apple Music的郵件是750px，大疆的是650px，這時(shí)候就會(huì)用到width，width也可以設(shè)置成百分比。
注意二：為了讓郵件的正文內(nèi)容不要太靠近邊框，我們需要設(shè)置一個(gè)cellspacing，比如為20px。
注意三：值得說(shuō)明的是table的很多屬性被css給取代了，比如bgcolor，我們可以使用style="background-color:***"來(lái)代替，當(dāng)然你也可以用bgcolor。
注意四：table標(biāo)簽通常只是用來(lái)給郵件來(lái)分塊，類似于html的div的作用，所以在郵件里面使用會(huì)跟html的div一樣類似與頻繁，所以會(huì)有table標(biāo)簽的嵌套。而table標(biāo)簽和div標(biāo)簽不同的是，table標(biāo)簽往往是一組，包含tbody，tr，td。大家可以把第二步里面的整個(gè)當(dāng)成一組，確實(shí)也是夠長(zhǎng)的...
第五步：郵件樣式的說(shuō)明
在寫(xiě)郵件的時(shí)候，總會(huì)涉及到文本、圖片、鏈接、按鈕等元素，我們來(lái)說(shuō)明一下這些元素的樣式。比如文本、鏈接的樣式，這些我們可以使用郵件客戶端自帶的編輯器來(lái)解決。這里主要介紹一下圖片。
不過(guò)CSS里面有很多屬性是用可視化的編輯器實(shí)現(xiàn)不了的，比如圓角、虛線、邊框、漸變色、透明度、陰影等等，這些都是css經(jīng)常會(huì)使用到的基本屬性。不過(guò)由于郵件不需要做得那么花哨(郵件的核心是布局)，這里就不多說(shuō)了。
我們寫(xiě)郵件的時(shí)候，通過(guò)可視化的編輯器往郵件里面插入圖片的時(shí)候，這個(gè)圖片經(jīng)常會(huì)溢出，不能適配不同的終端，要么不是太大，就是太小。推薦大家添加的圖片為100%的寬度，讓圖片占滿一行。我們可以找到該圖片，把該img的width修改成為100%，將height設(shè)置為auto。如果是這樣就需要一張一張圖片處理，你也可以使用css的!important一起設(shè)置。
<style type="text/css">table[class="body"] img { height: auto !important; width: 100% !important; }</style><table cellpadding="0" cellspacing="0" width="100%" class="body" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top;width: 100%;table-layout: fixed"><tbody><tr style="vertical-align: top"><td><img src="http://link.dji.com/custloads/290636680/md_625190.jpg" ></td></tr></tbody></table>第六步：郵件的響應(yīng)式布局
通常我們用代碼編寫(xiě)多行多列的時(shí)候用到的并不是table表格，而往往使用div標(biāo)簽，也就是說(shuō)table在郵件里面起到的作用就是進(jìn)行分塊搭建郵件的結(jié)構(gòu)以及制作一些真正的表格(表格的樣式固定)，如騰訊企業(yè)郵箱報(bào)價(jià)表：
而像大疆郵件里面的三個(gè)產(chǎn)品是一個(gè)table，但是三個(gè)產(chǎn)品的排列卻不是用table的一行三列來(lái)做的；底部關(guān)于我們部分，左邊2/3右邊1/3,這樣看似用表格可以實(shí)現(xiàn)的布局方式通常不用table來(lái)實(shí)現(xiàn)，這是因?yàn)橐獙?shí)現(xiàn)響應(yīng)式的布局(當(dāng)在手機(jī)上打開(kāi)這封郵件時(shí)，一行三列會(huì)變成三行一列)，也就是為了讓郵件適配到不同的終端，table適合做固定布局，但不大適合做響應(yīng)式布局(雖然也可以，但是現(xiàn)在大家都不這么用了)。
那我們?cè)诖a上該如何實(shí)現(xiàn)呢？這里我們需要用到媒體查詢（media query）的知識(shí)。比如你整封郵件設(shè)置的寬度為650px。響應(yīng)式布局其實(shí)是有兩套以上的css，當(dāng)打開(kāi)郵件的終端屏幕寬度大于650px時(shí)，為一套，這時(shí)你可以固定每個(gè)分欄的寬度；當(dāng)屏幕小于650px時(shí)，每個(gè)分欄就要有所調(diào)整了。
比如大疆的郵件的例子，當(dāng)屏幕寬度大于650px時(shí)，每個(gè)分欄的寬度為216px，但是當(dāng)屏幕小于650px時(shí)，每個(gè)分欄的寬度就變成了100%了。
/* 當(dāng)屏幕寬度小于650px的時(shí)候 */@media only screen and (max-width: 650px) {table[class="body"] .col { width: 100% !important; }}<table cellpadding="0" cellspacing="0" width="100%" class="body" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top;width: 100%;table-layout: fixed"><tbody><tr style="vertical-align: top"><td> <div class="col" style="width: 216px"> </div> <div class="col" style="width: 216px"> </div> <div class="col" style="width: 216px"> </div></td></tr></tbody></table>本文就寫(xiě)到這里，又到了腦暴的時(shí)間：
- 郵件到底不支持哪些html標(biāo)簽和CSS屬性呢？
- 郵件作為網(wǎng)頁(yè)除了有終端適配的問(wèn)題，不同的郵件客戶端是否也存在適配問(wèn)題呢？
- H5模板催生了一系列創(chuàng)業(yè)公司，那郵件模板呢？你是否可以挖掘其中的商機(jī)？
如果你遇到了問(wèn)題，或者有更好的經(jīng)驗(yàn)與創(chuàng)意，歡迎大家關(guān)注HackWeek技術(shù)社區(qū)(微信號(hào)：hackweekorg)。
在線咨詢
