| name | 49-html-email-template |
| description | Dung khi can FILE HTML email chay duoc tren moi email client — cau truc table, CSS inline, be ngang 600px, dark mode, spec rieng cho Gmail, Outlook, Apple Mail va checklist test truoc khi gui. Mau va font lay tu brand guideline. Kich hoat khi user nhac 'email HTML', 'code email', 'template email', 'email responsive', 'email vo bo cuc tren Outlook', 'anh trong email khong hien', 'paste vao Brevo bi vo'. Khong dung cho — noi dung va chuoi gui email thi dung skill 14-email-marketing; trang web dat sau nut CTA thi dung skill 12-brief-landing-page; quy dinh mau va font thuong hieu thi dung skill 46-brand-guideline. |
| metadata | {"version":"1.0.1","category":"operations"} |
| license | MIT |
| triggers | ["email html","code email","template email html","email responsive","html email","email broadcast html"] |
| output | File .html duy nhat, self-contained — paste vao email tool (Brevo, Mailchimp, GetResponse...) la gui duoc ngay. Kem checklist test client. |
| related | ["14-email-marketing","46-brand-guideline","47-design-review","12-brief-landing-page"] |
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:
- Loai email + layout? Welcome / broadcast / nurture / offer / transactional — 1 cot don gian, 2 cot co hinh san pham, hay newsletter nhieu muc?
- Sections can co? Header / hero / body / social proof / CTA / footer — co anh hero khong?
- Copy da co chua? Hay can viet placeholder? CTA chinh link den dau?
- Gui bang tool nao? Brevo / Mailchimp / GetResponse / khac — de dung dung merge tag ({{first_name}}...).
Nguyen tac
- Table layout, khong div/flexbox/grid/float/position:absolute — Outlook desktop render bang Word engine, khong support.
- 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).
- Width toi da 600px, responsive ve 375px.
- Font he thong lam fallback: '[font body]', Arial, Helvetica, sans-serif — khong phu thuoc web font (nhieu client khong load Google Fonts).
- Moi the img phai co alt text + width/height attribute — nguoi doc chan anh van hieu email.
- Unsubscribe link bat buoc (phap ly) + dia chi cong ty o footer.
- Test mobile truoc — phan lon nguoi Viet doc email tren dien thoai.
- 1 file .html duy nhat, self-contained, duoi 100KB.
Quy trinh
Buoc 1 — Chon layout
| Layout | Dung cho |
|---|
| Simple 1 cot | Broadcast, nurture — de doc nhat, it loi nhat |
| 2 cot (hinh + text) | Offer email co hinh san pham |
| Newsletter nhieu muc | Digest, update — moi muc 1 block table rieng |
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
