49 HTML Email Template

HTML Email Template

Email HTML khac website HTML: phai dung table layout, inline CSS, tranh moi thu client khong support. Tieu chi: dep tren Gmail, Outlook, Apple Mail, doc duoc tren mobile 375px — khong co exception. Noi dung va sequence lay tu 14-email-marketing; skill nay lo phan code.

Thu thap thong tin

Doc brand guideline (46-brand-guideline) va noi dung email tu 14-email-marketing neu co. Neu thieu, hoi toi da 4 cau:

1. Loai email + layout? Welcome / broadcast / nurture / offer / transactional — 1 cot don gian, 2 cot co hinh san pham, hay newsletter nhieu muc?
2. Sections can co? Header / hero / body / social proof / CTA / footer — co anh hero khong?
3. Copy da co chua? Hay can viet placeholder? CTA chinh link den dau?
4. Gui bang tool nao? Brevo / Mailchimp / GetResponse / khac — de dung dung merge tag ({{first_name}}...).

Nguyen tac

1. Table layout, khong div/flexbox/grid/float/position:absolute — Outlook desktop render bang Word engine, khong support.
2. Toan bo CSS inline — Gmail co the strip the <style> (chi giu <style> cho media query mobile va dark mode, phan con lai inline het).
3. Width toi da 600px, responsive ve 375px.
4. Font he thong lam fallback: '[font body]', Arial, Helvetica, sans-serif — khong phu thuoc web font (nhieu client khong load Google Fonts).
5. Moi the img phai co alt text + width/height attribute — nguoi doc chan anh van hieu email.
6. Unsubscribe link bat buoc (phap ly) + dia chi cong ty o footer.
7. Test mobile truoc — phan lon nguoi Viet doc email tren dien thoai.
8. 1 file .html duy nhat, self-contained, duoi 100KB.

Quy trinh

Buoc 1 — Chon layout

Buoc 2 — Code theo spec ky thuat

Container: 600px desktop / 100% mobile
Background ngoai: mau xam nhat (vd #F4F4F4)
Background body: [mau nen] (thuong trang)
Font: '[font body]', Arial, Helvetica, sans-serif
Body font-size: 16px / line-height: 1.6
Mobile breakpoint: max-width 480px

Design tokens doc tu brand guideline:

• Header: nen [mau primary], logo ban sang, padding 20px.
• Hero: nen [mau primary] hoac gradient [mau primary] sang [mau secondary]; headline bold 28px mau sang; subtext 16px; CTA button.
• Body: nen sang, padding 40x48px desktop / 24x20px mobile; H2 bold 22px [mau text dam]; body 16px line-height 1.7.
• CTA button: nen [mau primary], text bold 16px mau sang, padding 14x32px, radius 8px, display inline-block, text-decoration none. (Outlook khong ve border-radius — chap nhan nut vuong fallback, khong dung anh lam button.)
• Social proof: quote nen [mau nen nhe], border-left 4px [mau primary], ten + role nguon quote.
• Footer: nen xam nhat, text 13px [mau text phu] — logo nho ~80px, links website/social, dia chi, unsubscribe, copyright.

Buoc 3 — Dien sections

• Header: logo, can giua.
• Hero: pre-header text (optional), headline (toi da 60 ky tu), subtext (toi da 100 ky tu), CTA button, hero image optional 600x300px co alt text.
• Body: "Chao {{first_name}}," → opening 2-3 cau → main content (doan ngan, toi da 4 cau/doan) → bullet list neu co (dung table, khong dung ul de an toan render) → CTA thu hai neu can.
• Footer bat buoc: dia chi cong ty [dia chi], unsubscribe "Ban nhan email nay vi da dang ky tai [website] | Huy dang ky", copyright © [nam] [ten thuong hieu].

Buoc 4 — Mobile responsive + dark mode

@media only screen and (max-width: 480px) {
  /* container: 100% */
  /* body font: 15px */
  /* CTA: width 100%, can giua */
  /* padding: 24px 20px */
  /* image: 100% width */
}

Dark mode:

• Them <meta name="color-scheme" content="light dark"> va <meta name="supported-color-schemes" content="light dark">.
• @media (prefers-color-scheme: dark) chi duoc ho tro mot phan: Apple Mail ho tro tot; Gmail thuong tu dao mau va bo qua media query; Outlook co the tu invert.
• Quy tac an toan khi khong kiem soat duoc dark mode: logo PNG nen trong phai du tuong phan tren ca nen sang lan toi (hoac them vien sang); khong dung text den thuan tren background trong suot; vung quan trong (CTA) dung mau nen solid; test tren it nhat 1 client dark mode truoc khi gui.

Buoc 5 — Placeholders bat buoc truoc khi gui

• {{first_name}} — ten nguoi nhan (doi cu phap theo tool gui)
• {{unsubscribe_link}} — bat buoc phap ly
• [dia chi cong ty] — dien that
• [CTA_LINK] — dien link that (kem UTM theo 14-email-marketing)

Spec cac email client

Test checklist truoc khi gui

• Gmail desktop + Gmail app mobile
• iPhone Mail app
• Outlook desktop (neu tep nguoi nhan co dan van phong)
• Dark mode preview it nhat 1 client
• Tat ca link hoat dong — dac biet CTA va unsubscribe
• Alt text cho moi img; email van hieu duoc khi anh bi block
• File size HTML < 100KB
• Merge tag dung cu phap tool gui ({{first_name}} khong bi in tho)
• Gui test that toi 2-3 hop thu khac nhau truoc khi gui ca list
• Subject + preheader da dien (lay tu 14-email-marketing)

Lien ket skill

• 14-email-marketing: chien luoc, sequence, noi dung, subject line — viet truoc, code sau.
• 46-brand-guideline: mau, font, logo cho email tokens.
• 47-design-review: review email truoc khi gui (brand + readability + CTA + platform fit).
• 12-brief-landing-page: CTA email thuong tro ve landing page — dong bo message giua 2 ben.

Checklist chat luong

• Table layout, khong flexbox/grid/float/absolute
• CSS inline het (tru media query + dark mode trong style)
• Width 600px, mobile ve 375px khong vo layout
• Font fallback he thong, khong phu thuoc web font
• CTA button dat chuan: solid, >= 44px chieu cao tren mobile
• Footer du: dia chi + unsubscribe + copyright
• Dark mode meta tags + quy tac an toan da ap dung
• Da chay het test checklist tren
• 1 file .html duy nhat, self-contained