如何為移動優先方法設計電子郵件

已發表: 2015-05-21

我們正在打一場好仗，這是一場永無休止的電子郵件源源不斷的戰鬥。無論我們去哪裡，無論我們有什麼設備，電子郵件都可以在任何地方找到我們。閱讀本文後，您可能會收到另外十封電子郵件。作為設計師，我們處於收件箱的兩端：我們不斷收到電子郵件，但我們也負責設計和創建實際的電子郵件設計。

無論您的電子郵件目標是誰，目標都是在向訂閱者、客戶和潛在客戶發送電子郵件時提供最佳用戶體驗。而且由於大多數電子郵件是在移動設備上打開的，我們需要設計電子郵件以適應任何可以打開它們的設備。

我們已經習慣了響應式網頁設計和一流的移動應用程序，我們常常想當然地認為我們可以拿起任何設備並設計量身定制的體驗。有了電子郵件，事情就不會那麼枯燥無味了。在技術方面，它落後於現代網頁設計光年。我們需要使用 HTML 屬性、基於表格的佈局和內聯樣式進行設計，但不能保證它們在每個電子郵件客戶端中的行為都相同。

為所有設備設計電子郵件，我有什麼選擇？

在你去清理你的 CD-ROM 收藏之前，請記住，即使有限制，設計一個成功的“響應式”電子郵件也是有希望的。創建一個真正響應的電子郵件當然是一種選擇，但在創建成功的移動優先設計時考慮所有這三種方法很重要：

可擴展設計
流體設計
響應式設計

要選擇最適合您需求的方法，了解這三種設計形式之間的差異和限制非常重要。做出決定需要了解您的受眾以及他們使用的設備和電子郵件客戶端。由於並非所有電子郵件客戶端都提供相同的 CSS 支持，因此這將有助於確定哪種方法最適合您的用戶。

可擴展設計

可擴展的電子郵件佈局用途廣泛，因為它們在所有屏幕尺寸上都是可讀和可點擊的。如果您的受眾傾向於在各種設備上打開他們的電子郵件：移動設備、平板電腦和台式機，這是一個很好的選擇。

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

這個選項通常是最容易實現的，因為它不使用媒體查詢並且沒有需要調整的表格寬度。一個優點是在設計這種類型的電子郵件時沒有很大的學習曲線。在大多數情況下，移動設備是閱讀電子郵件的最常用設備，這很容易確保首先考慮移動設備。更大的按鈕、易於閱讀的文本和清晰的號召性用語使移動設備優先滿足更小屏幕尺寸的需求。

可擴展的電子郵件設計可能會受到限制，因為它必須是單列才能在所有設備上正常工作。原因是，如果設計有多個列，這些列在移動設備上會變得非常小，影響可讀性。但是，如果您滾動瀏覽收件箱，您會看到很多單列佈局，因為它們很常見。

內容是任何電子郵件的關鍵，因此文本大小應適合移動設備和大屏幕。對於大多數電子郵件客戶端，整個電子郵件將填滿屏幕，因此用戶不必垂直滾動。但是，仍然建議將關鍵信息和號召性用語放在電子郵件的左上角，以防電子郵件沒有按預期填滿屏幕。

流體設計

流體電子郵件設計

您可能熟悉網頁設計中的“流動”佈局。設計組件具有百分比寬度，並根據用戶的屏幕分辨率進行調整，保持相同的寬度。流暢的電子郵件設計利用了同樣的想法。

此電子郵件選項彌合了可擴展選項和真正負責任的選項之間的差距。與可擴展選項相比，必須完成更多的前期設計。這樣做的原因是基於百分比的大小使表格和圖像的寬度適應查看電子郵件的任何屏幕尺寸。表格不會改變不同大小的佈局，但內容會流動並填充空間。對於文本繁重的電子郵件來說，這是一個很好的選擇，因為對副本和圖像之間的相互關係的控制較少。保持佈局簡單仍然是一個好主意，最好是單個表格佈局，以將電子郵件的易讀性作為第一要務。

還記得我們怎麼說這彌合了固定和響應之間的差距嗎？原因是對於較大的屏幕需要限制尺寸。如果電子郵件太寬，文本行在視覺上會變得太長，我們希望確保我們的讀者可以輕鬆閱讀我們的電子郵件。將您的電子郵件內容包裝在一個固定寬度的容器表中將有助於在更大的屏幕尺寸上顯示。然後一個有用的媒體查詢將針對較小的屏幕尺寸。

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

移動設備的媒體查詢示例：

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

響應式電子郵件

響應式設計

讓我們從可擴展且流暢的電子郵件中獲取我們所知道的信息，並添加更多規則。響應式讓您可以更好地控制使用 CSS 媒體查詢在不同斷點處呈現的內容。使用此選項，可以更改佈局，也可以使用特定斷點的條件樣式自定義其他元素。

以下是響應式佈局的媒體查詢示例：

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

與其他選項一樣，您不僅限於一列或簡單的設計。電子郵件可以更複雜，對佈局和圖像數量的限制更少。例如，電子郵件設計在大型設備上可以是多列，但在移動設備上可以是單列。文本大小、圖像和大多數其他內容都可以優化以獲得最佳體驗。

在我們創建具有多個媒體查詢的複雜設計之前，討論一些權衡是很重要的。媒體查詢不適用於所有電子郵件客戶端。事實上，支持非常有限。根據 Litmus 媒體查詢支持列表，Android Outlook.com 應用程序、Android 4.x 原生客戶端和 iOS (iPhone/iPad) 目前支持它們。如果您的大多數觀眾是移動設備和平板電腦用戶，則可以充分利用這些潛力。

其他設計注意事項

在開始創建電子郵件設計之前，查看分析以確定用戶的電子郵件客戶端和設備非常重要。建議經常檢查這一點，讓您的設計方法隨著事情的變化而發展。即使有限制，電子郵件也在不斷發展，因此跟上當前支持的內容很重要。

這裡有一些很好的資源供進一步閱讀：

移動特定 CSS
電子郵件的未來
iPhone 和 Android 電子郵件

好消息是，在當前電子郵件的限制下，移動優先的方法是可能的。即使設計不是最真實的“響應式”形式，只需指定幾個特定的百分比和一些媒體查詢，您將創建一個肯定會留下深刻印象的電子郵件設計，無論使用什麼設備。在大多數情況下，大多數用戶都在移動設備上查看電子郵件，因此採用移動優先的方法成為您電子郵件設計的堅實基礎。