電子郵件營銷與自動化手機和平板電腦營銷
最大化收件箱放置和參與度的 16 個移動友好 HTML 電子郵件最佳實踐
到 2023 年,移動設備很可能會超過台式機成為打開電子郵件的主要設備。 事實上,HubSpot 發現 46% 的所有電子郵件打開現在發生在移動設備上。 如果您不是為移動設備設計電子郵件,那麼您就會失去很多參與度和金錢。
- 電子郵件驗證: 確保您的 電子郵件已通過身份驗證 到發送域和 IP 地址對於進入收件箱而不是路由到垃圾郵件文件夾至關重要。 當然,您還必須提供一種使用包含取消訂閱鏈接的平台來選擇退出電子郵件的方法。
- 響應式設計: HTML 電子郵件應該是 旨在響應,這意味著它可以根據正在查看的設備的屏幕尺寸進行調整。 這可確保電子郵件在桌面和移動設備上看起來都不錯。
- 清晰簡潔的主題行: 清晰簡潔的主題行對移動用戶很重要,因為他們可能只會在電子郵件預覽窗格中看到主題行的前幾個詞。 它應該簡短並準確地反映電子郵件的內容。 電子郵件主題行的最佳字符長度可能因多種因素而異,例如電子郵件內容、受眾和所使用的電子郵件客戶端。 然而,大多數專家建議保持電子郵件主題行簡短而切題,通常在 41-50 個字符或 6-8 個單詞之間。 在移動設備上,超過 50 個字符的主題行可能會被截斷,在某些情況下,可能只會顯示主題行的前幾個詞。 這會使收件人難以理解電子郵件的主要信息,並可能降低電子郵件被打開的可能性。
- 預報頭: 電子郵件標題是電子郵件內容的簡短摘要,顯示在電子郵件客戶端收件箱中主題行的旁邊或下方。 這是一個重要的元素,在優化時會影響電子郵件的打開率。 大多數客戶端都包含 HTML 和 CSS 以確保正確設置預報頭文本。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- 單列佈局: 採用單列佈局設計的電子郵件在移動設備上更易於閱讀。 內容應按邏輯順序組織,並以簡單易讀的格式呈現。 如果你有多列,利用 CSS 可以優雅地組織單列佈局中的列。
這是一個 HTML 電子郵件佈局 在桌面上是 2 列,在移動屏幕上折疊成單列:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
這是一個 HTML 電子郵件佈局 在桌面上是 3 列,在移動屏幕上折疊成單列:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- 明暗模式: 橋樑 電子郵件客戶端支持淺色和深色模式 的CSS
prefers-color-scheme
以適應用戶的喜好。 請務必使用具有透明背景的圖像類型。 這是一個代碼示例。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- 大而清晰的字體: 字體大小和样式的選擇應使文本在小屏幕上易於閱讀。 使用至少 14pt 的字體大小,避免使用在小屏幕上難以閱讀的字體。 常用字體很可能在不同的電子郵件客戶端中呈現一致,因此使用 Arial、Helvetica、Times New Roman、Georgia、Verdana、Tahoma 和 Trebuchet MS 通常是安全字體。 如果您確實使用自定義字體,請確保在您的 CSS 中標識了後備字體:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- 圖像的最佳使用: 圖像會減慢加載時間,並且可能無法在所有移動設備上正確顯示。 謹慎使用圖像,並確保它們的大小和 壓縮 用於移動觀看。 如果電子郵件客戶端阻止了圖像,請務必填寫圖像的替代文本。 所有圖像都應從安全網站存儲和引用(SSL). 下面是 HTML 電子郵件中響應圖像的示例代碼。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- 清晰的號召性用語 (CTA): 清晰突出的 CTA 在任何電子郵件中都很重要,但在適合移動設備的電子郵件中尤為重要。 確保 CTA 很容易找到,並且足夠大,可以在移動設備上點擊。 如果你合併按鈕,你可以確保你也用內聯樣式標籤用 CSS 編寫它們:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- 短小精悍的內容: 保持電子郵件的內容簡短而切題。 HTML 電子郵件的字符限制可能因所使用的電子郵件客戶端而異。 但是,大多數電子郵件客戶端對電子郵件施加最大大小限制,通常在 1024-2048 千字節之間(KB),其中包括 HTML 代碼和任何圖像或附件。 使用副標題、要點和其他格式化技術,使內容在小屏幕上滾動和閱讀時易於瀏覽。
- 互動元素: 結合 互動元素 吸引訂閱者註意力的郵件將提高電子郵件的參與度、理解力和轉化率。 GIF動畫、倒數計時器、視頻和其他元素受到大多數智能手機電子郵件客戶端的支持。
- 個性化: 為特定訂戶個性化稱呼和內容可以顯著提高參與度,只要確保你做對了! 例如。 如果名字字段中沒有數據,則進行回退很重要。
- 動態內容: 內容的細分和定制可以降低您的退訂率並保持訂閱者的參與度。
- 活動整合: 大多數現代電子郵件服務提供商都能夠自動附加 UTM 活動查詢字符串 對於每個鏈接,以便您可以將電子郵件視為分析中的一個渠道。
- 偏好中心: 對於電子郵件的選擇加入或選擇退出方法而言,電子郵件營銷太重要了。 合併一個偏好中心,您的訂閱者可以在其中更改他們接收電子郵件的頻率以及對他們來說重要的內容,這是與訂閱者保持強大的電子郵件程序的絕佳方式!
- 測試,測試,測試: 確保在多個設備上測試您的電子郵件或使用應用程序來 跨電子郵件客戶端預覽您的電子郵件 在您發送之前,確保它在不同的屏幕尺寸和操作系統上看起來不錯並且功能正常。 石蕊 報告顯示,最受歡迎的移動開放環境前 3 名仍然相同:Apple iPhone (iOS Mail)、Google Android、Apple iPad (iPadOS Mail)。 此外,合併主題行和內容的測試變體以提高打開率和點擊率。 許多電子郵件平台現在都包含自動測試,可以對列表進行抽樣,確定獲勝的變體,並將最好的電子郵件發送給剩餘的訂閱者。
如果您的公司正在努力設計、測試和實施移動響應電子郵件來推動參與,請不要猶豫與我的公司聯繫。 DK New Media 在幾乎每個電子郵件服務提供商的實施方面都有經驗(ESP).