前言
雖然現在的 Email Client 有在進步, 但是比起 browser 還是差太遠了. 假如你用 HTML5 + CSS3 的方式去寫 Email Template 的話是不行的.
這篇特地學習一下如何寫好 Email Marketing HTML Template.
參考
Youtube – The RIGHT WAY to Build HTML Email Templates 2022
Youtube – HTML Email Template Built the RIGHT WAY - 2022!
DOCTYPE, html, meta
DOCTYPE
我們寫網頁的 DOCTYPE 是這樣的
<!DOCTYPE html>
但在 email client, 這個是不 ok 的.
參考: Which Doctype Should I Use in HTML Email?
要用 XHTML 1.0 Transitional doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html
<html xmlns="http://www.w3.org/1999/xhtml">
meta
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
提醒, IE=edge 和 viewport 和平常的網頁是一樣的
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Standard CSS Reset
body { margin: 0; } table { border-spacing: 0; } td { padding: 0; } img { border: 0; }