響應(yīng)式郵件設(shè)計(jì)指南：讓您的郵件在各種設(shè)備上都能完美呈現(xiàn)

核心要點(diǎn)

• 隨著移動(dòng)設(shè)備在郵件閱讀中的普及，響應(yīng)式郵件佈局必須考慮移動(dòng)設(shè)備的特性。這需要重新排列郵件內(nèi)容，將原本水平排列的單元格在移動(dòng)設(shè)備上垂直排列。
• 單列郵件佈局（通常包含單個(gè)標(biāo)題圖像）無(wú)需重新排列元素，只需調(diào)整寬度以匹配設(shè)備尺寸即可。這屬於可縮放設(shè)計(jì)而非響應(yīng)式設(shè)計(jì)。
• 多列郵件佈局需要隨著設(shè)備寬度的減小重新排列列。這可以通過(guò)使用嵌套表格或更改表格單元格的 display 屬性來(lái)實(shí)現(xiàn)。後者更優(yōu)雅，並使用原生的 CSS 規(guī)則。
• 響應(yīng)式郵件中的圖像只需要經(jīng)典的響應(yīng)式技術(shù)（img {max-width: 100%;}）。但是，使用媒體查詢，可以隱藏一個(gè)圖像，並用另一個(gè)圖像作為背景圖像代替。

在之前的關(guān)於新聞稿撰寫(xiě)的文章中，我們已經(jīng)了解到一些技巧可以極大地改變您的郵件在不同客戶端中的顯示方式。

此外，我們必須考慮移動(dòng)設(shè)備，其在郵件閱讀中的使用量日益增長(zhǎng)。這就引出了為郵件構(gòu)建響應(yīng)式佈局的問(wèn)題。

由於我們知道郵件模板是用 HTML 表格構(gòu)建的，並且具有內(nèi)聯(lián) CSS，因此我們的工作比平時(shí)要復(fù)雜一些：

• 內(nèi)聯(lián) CSS 規(guī)則具有較高的特異性值（它們總能獲勝）。
• 表格並非設(shè)計(jì)用於佈局組合，因此我們必須注意郵件的組合，記住單元格（自然水平定位）應(yīng)該在移動(dòng)設(shè)備上垂直排列。
• 當(dāng)然，我們不能使用 JavaScript。

幸運(yùn)的是，大多數(shù)移動(dòng)設(shè)備都具有與現(xiàn)代CSS 規(guī)則的高兼容性，因此我們可以輕鬆地使用媒體查詢解決所有這些問(wèn)題，大量使用!important 聲明（以覆蓋內(nèi)聯(lián)樣式），並仔細(xì)注意內(nèi)容的排列方式。

對(duì)於此類(lèi)項(xiàng)目，採(cǎi)用“移動(dòng)優(yōu)先”方法非常重要，可以避免在小型設(shè)備上無(wú)法正確排列的佈局。

請(qǐng)注意，即使在本文中我們只討論響應(yīng)式問(wèn)題，響應(yīng)式移動(dòng)郵件也不一定是好的郵件。有效的移動(dòng)郵件設(shè)計(jì)涉及許多元素，包括字體大小、佈局組合等等：這些都是非常重要的任務(wù)，我們將在另一篇文章中介紹。

郵件佈局模式

關(guān)於響應(yīng)式，我們可以識(shí)別兩種類(lèi)型的郵件：?jiǎn)瘟泻投嗔小?

單列佈局

單列佈局（通常只有一個(gè)標(biāo)題圖像）沒(méi)有特殊需求。由於它們不需要重新排列元素，我們只需要注意所有寬度都能優(yōu)雅地降級(jí)以匹配設(shè)備尺寸。這並非響應(yīng)式設(shè)計(jì)，而是可縮放設(shè)計(jì)的經(jīng)典示例（參見(jiàn)《可縮放、流暢或響應(yīng)式：了解移動(dòng)郵件方法》）。

為了確保您的郵件正確調(diào)整大小，您只需要調(diào)整表格寬度：

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

您還需要調(diào)整圖像大小（參見(jiàn)本文末尾的“關(guān)於圖像”段落）並調(diào)整字體大小，但沒(méi)有其他特殊需求。

多列佈局

多列佈局需要隨著設(shè)備寬度的減小重新排列列。無(wú)論您使用兩列、三列還是更多列，都需要將它們垂直顯示而不是水平顯示。

實(shí)現(xiàn)此目的有兩種簡(jiǎn)單的方法：

1. 使用嵌套表格
2. 更改表格單元格的 display 屬性。

嵌套表格佈局

郵件組合通常需要使用嵌套表格。這始終被認(rèn)為是確?？蛻舳思嫒菪缘淖罴逊椒?，但另一方面，生成的代碼非常混亂且實(shí)際上難以閱讀。

技巧在於使用 table align="left" 屬性，該屬性導(dǎo)致表格水平對(duì)齊。

每個(gè)元素必須具有特定寬度，並且它們的總和必須與它們的容器值相同。

當(dāng)設(shè)備寬度減小時(shí)，我們必須調(diào)整容器大小並將所有表格列強(qiáng)制為 100% 寬度。

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

此技術(shù)確保與大多數(shù)客戶端兼容：我在 Litmus 中測(cè)試了演示文件，並且所有客戶端都獲得了良好的結(jié)果，允許以下警告：

• Outlook 2007、2010 和 2013（這些版本的 Outlook 使用 Microsoft Word 作為渲染引擎：參見(jiàn) Litmus 博客上的《Microsoft Outlook 客戶端渲染差異指南》）；
• 最舊版本的 Lotus Notes；
• Gmail Android 應(yīng)用。

這是一個(gè)良好的起點(diǎn)（有關(guān)測(cè)試的部分結(jié)果，請(qǐng)參見(jiàn)下文），我們還必須考慮這個(gè)測(cè)試是用空表格構(gòu)建的：添加內(nèi)容（和更多嵌套表格！?。┠鷳?yīng)該能夠修復(fù)所有錯(cuò)誤並使此技術(shù)與所有客戶端都能正常工作。

更改表格單元格的 display 屬性

構(gòu)建多列郵件的第二種方法更優(yōu)雅，並使用原生的 CSS 規(guī)則。

此技術(shù)包括在設(shè)備寬度減小時(shí)更改默認(rèn)表格單元格的 display 屬性（您可以在 responsiveemailpatterns.com 上找到許多示例）。這會(huì)導(dǎo)致單元格垂直重新堆疊：

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

此測(cè)試的結(jié)果非常好：所有客戶端都正確呈現(xiàn)了測(cè)試郵件（有時(shí)存在細(xì)微的錯(cuò)誤），但請(qǐng)記住，我們嘗試過(guò)空郵件，添加內(nèi)容後結(jié)果可能會(huì)有所不同。

關(guān)於圖像

在響應(yīng)式郵件中，圖像只需要我們目前在 Web 中使用的經(jīng)典響應(yīng)式技術(shù)（img {max-width: 100%;}）。

但是，正如 Campaign Monitor 響應(yīng)式郵件設(shè)計(jì)指南中建議的那樣，使用媒體查詢，您可以隱藏一個(gè)圖像，並用另一個(gè)圖像作為背景圖像代替。

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

請(qǐng)記住，即使通過(guò) CSS 隱藏的圖像也會(huì)加載到客戶端，因此請(qǐng)注意這一點(diǎn)。

一個(gè)不錯(cuò)的選擇是將同一圖像用於 img 標(biāo)籤和 background-image 源。您必須準(zhǔn)備一個(gè)多用途圖像，以便用於所有這些範(fàn)圍，就像下面的示例一樣：

選擇合適的圖像後，您可以將其用於許多媒體查詢斷點(diǎn)。準(zhǔn)備就緒後，您只需要添加少量 CSS 規(guī)則：

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

您還可以添加 background-size 屬性以調(diào)整每個(gè)斷點(diǎn)視圖（注意客戶端對(duì)此規(guī)則的支持）。

不幸的是，這不太可能解決您對(duì)高密度設(shè)備的所有需求——但是它可以減少為所有其他情況加載的文件數(shù)量。

結(jié)論

那麼，是否存在一種單一的、萬(wàn)能的、有史以來(lái)最好的響應(yīng)式郵件創(chuàng)作技術(shù)呢？

通常情況下，答案是否定的。每個(gè)項(xiàng)目都需要不同的方法，並且有不同的最佳解決方案。真正的答案是掌握一系列有用的技術(shù)，並不斷嘗試新的方法。

資源

• http://ipnx.cn/link/f663b8c9b8331a8c625007b4337601ec
• http://ipnx.cn/link/90e08c6d15d206857d4fd54fa2f334bc
• http://ipnx.cn/link/ae0de04da95f06c3c85934ea84bcccc0
• http://ipnx.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• http://ipnx.cn/link/3d4233a54febe35fbf7749c3affb8e15
• http://ipnx.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• http://ipnx.cn/link/7006bc554a1a9de85c416551c10368e2

關(guān)於構(gòu)建響應(yīng)式郵件的常見(jiàn)問(wèn)題

（此處省略了原文中提供的常見(jiàn)問(wèn)題解答部分，因?yàn)樵摬糠謨?nèi)容與原文其他部分相比，改寫(xiě)難度較小，且篇幅較長(zhǎng)，為避免輸出過(guò)長(zhǎng)，此處略去。）

以上是一盒用於構(gòu)建響應(yīng)電子郵件的技巧的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！