HTML / CSS – Email Marketing HTML Template

前言

雖然現在的 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!

CSS support in email client

 

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;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章