2014年3月8日 星期六

Mobile-friendly eDM 模板製作指南


在上一篇文章,我相信你已經感受過什麼是 responsive 的設計,亦發現到手機電郵推廣的驚人威力,但究竟如何可以製作一個 responsive 的電郵模板呢﹖

CSS3 media queries 是製作 responsive 電郵模板的關鍵,它們能使你的電郵配合不同手機裝置的規格:
  • 瀏覽器視窗的寬度和高度
  • 裝置的寬度和高度
  • 裝置方向,例如橫向/縱向 
  • 解晰度                                                                            (Rachel Andrew)
CSS3media_queries_responsive_eDM_template
只要使用 media queries,就能檢測到用戶所使用的手機裝置,電郵模板亦能配合不同手機裝置的規格。但是,受用家歡迎的郵箱提供戶 Gmail 並不支援 media queries,所以,嘗試用其他方法設計 responsive 電郵模板吧!


 第 1 個貼士:最佳 Responsive 電郵寬度為 600 px 


為了使你的郵件能在電郵客戶端的預覽窗格及手機裝置中被正確顯示,設計電郵的寬度時切勿超過 600 px,這亦能改善電郵在桌上電腦的可閱度。600 px 是 Outlook, Thunderbird, Apple mail 的安全顯示尺寸,600-650 px 同時亦是屏幕解晰度為 1024 x 768 的裝置的最佳瀏覽尺寸,例如 Yahoo 或 Aol Mail。不論任何電郵客戶端或手機裝置,讓你的電郵配合屏幕較小的裝置。

** 小提示︰電郵客戶端的預覽窗格平均高度為 300 - 500 px,盡量把重要和吸引人注意的資訊放在這範圍中,別等待讀者向下滾動你的電郵。


 第 2 個貼士:線性化 (Linearization):使用 1 個縱行 


在桌上電腦的電郵版本,多個縱行可被同時顯示在同一水平線上,但是,若用戶在手機上閱讀電郵,他們就需要放大或縮小電郵。所以設計手機電郵時,把所有縱行線性化為 1 個縱行,能使電郵的內容被清晰顯示。但是,用戶未必希望滾動屏幕,閱讀所有電郵內容的,所以最好的解決方法是只使用 1 個縱行,那用戶不用滾動屏幕,亦能清楚地閱讀整個電郵。


 第 3 個貼士:使用更大的字體和按鈕 


為了讀者能更容易地在手機上閱讀到電郵,每行電郵內容的最佳長度為 50-75 字元,而且要使用更大的字體加強可讀性,這不止方便了手機讀者,亦方便了桌上電腦讀者。我相信不論你使用手機或桌上電腦閱讀電郵,亦會選擇閱讀以更大字體製作的電郵。再者,你可以把大按鈕放置在電郵的上端,使讀者打開電郵後即可看到 (重溫製作按鈕的貼士),為手指粗大的讀者考慮一下 (建議 CTA 的尺寸至少超過 44 px),亦不要期望他們會滾動屏幕,按下按鈕。61% 的讀者在找不到他們需要的資訊後,會立即離開電郵,別忘記他們只會花 15-20 秒在一個電郵上 (重溫上一篇的讀者習慣),他們不會花費更多時間尋找你的 CTA  (行動呼喚按鈕)。

大家亦可以參考 EDMdesigner  (UFOSend 製作 responsive 電郵模板之合作伙伴) 的電郵編碼貼士:
  • 使用 doctype!如果你想使用為手機裝置而設的 media-queries,更要使用 HTML5 Doctype
  • 在任何元素中使用內聯樣式
  • 在以上提及的 <STYLE> 使用 CSS media queries
  • 如果你需要 padding,margin 或 border,使用 TABLE 包裝 item (閱讀更多 >>)
  • 永遠不要用 margin,你可使用 padding 和其他 wrapper table 代替
  • 僅記為 <IMG> 標籤以準確像素設定 HTML 屬性 (寬度和高度)
  • 使用 Classnames 及 target stylings 時,以 html 標籤 [class="classname"] 避免被電郵客戶端 (例如 Outlook.com 及 YahooMail) 的特性影響 (曾經有傳聞說 Android 的本機電郵程式並不支援 classnames,但經我們測試,2.3 – 4.2+ 亦能支援 classnames)
  • 不要縮減你的 HTML 電郵至 1 行HTML,因為不同電郵客戶端有不一樣的限制,有時會影響你的編碼
沒有一個萬全的方案可以製作不受任何電郵客戶端特性影響的 responsive 電郵模板,有時你需要在不同的電郵客戶端之間作出取捨。給你一個建議:為你的聯絡名單作統計,為最多訂閱者使用的電郵客戶端訂製電郵模板。
email_client_market_share

如果你有更多製作 responsive eDM 模板的主意,歡迎留言分享!

<< 返回首頁

來源﹕
Campaign Monitor
EDMdesigner @ UFOSend Official Partner
Email Client Market Share
Luke Wroblewski
Rachel Andrew
Reachmai

沒有留言:

張貼留言