Cẩm nang thiết kế email: bố cục, mobile, khả năng tiếp cận và QA template (2026)

Thiết kế email marketing, vòng đời và giao dịch với hướng dẫn thực tế về bố cục, typography, hình ảnh, hiển thị responsive, dark mode, khả năng tiếp cận, kiểm thử và template tái sử dụng.

Tajo Team
Tajo Team
Cập nhật
0 lượt truy cập · 7 ngày
email design
Cẩm nang thiết kế email?

Thiết kế email ảnh hưởng trực tiếp đến việc người đăng ký có mở, đọc và hành động theo thông điệp của bạn hay không. Thiết kế kém dẫn đến email bị xóa, hủy đăng ký và mất doanh thu. Thiết kế tốt thúc đẩy tương tác, chuyển đổi và lòng trung thành với thương hiệu.

Hướng dẫn này giữ nguyên cấu trúc gốc: bố cục, typography, hình ảnh, mobile, màu sắc, khả năng tiếp cận, template, kiểm thử, bối cảnh Tajo/Brevo, FAQ và các bài viết liên quan. Bản cập nhật này loại bỏ các tuyên bố benchmark thiếu căn cứ và biến bài viết thành cẩm nang thiết kế email 2026 thực tế cho các đội email marketing, email vòng đời và email giao dịch.

Vì sao thiết kế email quan trọng

Trước khi đi vào các thực hành tốt nhất, hãy hiểu vì sao thiết kế email xứng đáng được bạn quan tâm.

Các thay đổi thiết kế thực sự ảnh hưởng đến điều gì

Hãy dùng quyết định thiết kế để giảm ma sát, không phải để chạy theo những mức tăng benchmark thiếu căn cứ.

Thành phần thiết kếẢnh hưởng đếnCách đánh giá
Bố cục mobileLuồng đọc, độ chính xác khi chạm, hiển thịXem trước trên iOS Mail, Gmail mobile và Outlook mobile
Cấu trúc một cộtKhả năng lướt đọc và hành vi responsiveSo sánh độ sâu click và hành vi cuộn
Phân cấp CTA rõ ràngSự rõ ràng khi ra quyết địnhTheo dõi click vào CTA chính và chuyển đổi phía sau
Độ tương phản dễ tiếp cận và alt textKhả năng đọc và truy cập hỗ trợChạy kiểm tra tương phản và xem trước khi tắt hình ảnh
Thương hiệu nhất quánNhận diện và niềm tinKiểm tra tên người gửi, logo, footer và tính nhất quán của hệ thống hình ảnh

Cái giá của thiết kế kém

Thiết kế kém tạo ra rủi ro vận hành và marketing đo lường được:

  • Bố cục vỡ làm giảm niềm tin vào thương hiệu.
  • Email chỉ toàn hình ảnh trở nên không đọc được khi hình ảnh bị chặn.
  • Độ tương phản thấp loại trừ người đọc và trượt các bài kiểm tra khả năng tiếp cận.
  • Nút quá nhỏ khiến thao tác chạm trên mobile khó hơn.
  • Thiếu alt text làm suy yếu trải nghiệm khi tắt hình ảnh và với trình đọc màn hình.
  • Hình ảnh nặng làm tải chậm và có thể khiến thông điệp trông như bị lỗi.
  • Phân cấp yếu che mất hành động chính.
  • Thiếu liên kết hủy đăng ký, địa chỉ hoặc tùy chọn nhận tin tạo rủi ro tuân thủ.

Phần 1: Thực hành tốt nhất về bố cục email

Nền tảng của thiết kế email hiệu quả bắt đầu từ bố cục. Bố cục quyết định cách thông tin chảy và dẫn dắt người đọc đến hành động bạn mong muốn.

Bố cục một cột và bố cục nhiều cột

Bố cục một cột là tiêu chuẩn vàng của thiết kế email hiện đại:

HEADER
HERO IMAGE
MAIN COPY
PRIMARY CTA BUTTON
SUPPORTING CONTENT
FOOTER

Lợi ích của bố cục một cột:

  • Hiển thị nhất quán trên mọi ứng dụng email
  • Luồng đọc tự nhiên từ trên xuống dưới
  • Tự động responsive trên mobile
  • Thời gian tải nhanh hơn
  • Dễ duy trì tính nhất quán thương hiệu hơn

Khi nào nên dùng bố cục nhiều cột:

  • Trưng bày nhiều sản phẩm cùng lúc
  • Nội dung kiểu bản tin với nhiều chủ đề khác nhau
  • Các tính năng so sánh
  • Đối tượng B2B chủ yếu dùng desktop

Cấu trúc kim tự tháp ngược

Kim tự tháp ngược dẫn dắt người đọc một cách tự nhiên đến CTA của bạn:

WIDE: ATTENTION
Compelling headline
Hero image/copy
MEDIUM: INTEREST
Supporting information
Benefits/features
NARROW: ACTION
Focused CTA button

Cấu trúc này hướng sự chú ý một cách tự nhiên về lời kêu gọi hành động.

Chiều rộng email tối ưu

Chiều rộng khuyến nghị: 600-640 pixel

Chiều rộngTrường hợp dùngĐộ tương thích
600pxEmail tiêu chuẩnPhổ quát
640pxEmail nhiều nội dungHầu hết ứng dụng
480pxThiết kế ưu tiên mobileƯu tiên mobile

Email rộng hơn 640 pixel có thể gây cuộn ngang trong một số ứng dụng email, tạo trải nghiệm kém.

Khoảng trắng và không gian thở

Khoảng trắng không phải là không gian trống. Đó là một thành phần thiết kế giúp:

  • Tách các phần nội dung.
  • Làm phần thân bài dễ lướt đọc hơn.
  • Cho nút CTA không gian để nổi bật.
  • Giảm mỏi mắt.
  • Dẫn dắt ánh nhìn một cách tự nhiên.

Hướng dẫn về khoảng cách:

  • Tối thiểu 20px padding quanh mép nội dung
  • 30-40px giữa các phần lớn
  • 15-20px giữa các đoạn văn
  • 10px giữa các mục trong danh sách

Thực hành tốt nhất khi thiết kế header

Header đặt tông giọng và tạo nhận diện thương hiệu ngay lập tức.

Các thành phần header thiết yếu:

  1. Logo, rộng tối đa 200px, liên kết về website
  2. Điều hướng (tùy chọn), tối đa 2-4 liên kết chính
  3. Preheader, mở rộng dòng tiêu đề, 40-100 ký tự

Mẫu header:

[LOGO] | Cửa hàng | Tài khoản
Preheader: Mở rộng dòng tiêu đề
của bạn tại đây...

Footer xử lý các yêu cầu pháp lý và cung cấp điều hướng bổ sung:

Thành phần footer bắt buộc:

  • Địa chỉ gửi thư vật lý (yêu cầu của CAN-SPAM)
  • Liên kết hủy đăng ký (dễ nhìn thấy)
  • Liên kết tùy chọn nhận email
  • Liên kết chính sách bảo mật

Thành phần footer tùy chọn:

  • Biểu tượng mạng xã hội
  • Liên kết tải app
  • Liên hệ chăm sóc khách hàng
  • Điều hướng phụ
  • Thông tin đăng ký doanh nghiệp

Phần 2: Typography trong thiết kế email

Typography quyết định khả năng đọc và thiết lập tông hình ảnh cho thương hiệu của bạn. Typography trong email cần cân nhắc đặc biệt vì sự khác biệt hiển thị giữa các ứng dụng.

Font stack an toàn cho email

Không phải font nào cũng hiển thị nhất quán trên các ứng dụng email. Hãy dùng font stack có phương án dự phòng:

Stack sans-serif (hiện đại, gọn gàng):

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Stack serif (truyền thống, uy tín):

font-family: Georgia, 'Times New Roman', Times, serif;

Web font kèm dự phòng:

font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

Web font trong email

Web font tăng tính nhất quán thương hiệu nhưng đòi hỏi kế hoạch dự phòng.

Mức hỗ trợ web font của các ứng dụng email:

Ứng dụngHỗ trợ web font
Apple MailHỗ trợ đầy đủ
iOS MailHỗ trợ đầy đủ
Outlook (Mac)Hỗ trợ đầy đủ
GmailKhông hỗ trợ
Outlook (Windows)Không hỗ trợ
Yahoo MailMột phần

Cách triển khai:

  1. Khai báo web font làm font chính
  2. Kèm font hệ thống tương tự làm dự phòng
  3. Kiểm thử hiển thị trên các ứng dụng chính
  4. Chấp nhận việc hạ cấp mượt mà

Hướng dẫn về cỡ chữ

Cỡ chữ khuyến nghị:

Thành phầnDesktopMobile
Tiêu đề lớn28-36px24-28px
Tiêu đề phụ20-24px18-22px
Thân bài16-18px16px (tối thiểu)
Chữ phụ14-16px14px (tối thiểu)
Pháp lý/footer12-14px12px

Không bao giờ xuống dưới 12px cho bất kỳ đoạn chữ nào, vì chữ sẽ không đọc được trên mobile và gây vấn đề về khả năng tiếp cận.

Chiều cao dòng và khoảng cách

Giãn dòng hợp lý cải thiện khả năng đọc đáng kể:

Hướng dẫn chiều cao dòng:

  • Tiêu đề lớn: 1,1-1,3 lần cỡ chữ
  • Thân bài: 1,4-1,6 lần cỡ chữ
  • Chữ nhỏ: 1,5-1,7 lần cỡ chữ

Ví dụ:

16px body text 1.5 line height = 24px line spacing

Phân cấp văn bản

Tạo hệ thống phân cấp trực quan để dẫn dắt người đọc qua nội dung:

HEADLINE (28px, Bold)
The most important message
Subheadline (20px, Semibold)
Supporting context
Body copy (16px, Regular)
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Detailed information goes here.
Secondary text (14px, Regular, Gray)
Additional details, timestamps, etc.

Thực hành tốt nhất về căn lề

  • Tiêu đề lớn: căn giữa hoặc căn trái
  • Thân bài: căn trái (không bao giờ căn đều hai bên)
  • CTA: căn giữa
  • Danh sách: căn trái

Tránh căn đều hai bên trong email, vì khoảng cách từ không đều khiến việc đọc khó khăn.

Phần 3: Hình ảnh trong thiết kế email

Hình ảnh thu hút sự chú ý và truyền tải thông tin nhanh chóng. Nhưng chúng cũng tạo ra các vấn đề hiển thị tiềm ẩn cần được quản lý cẩn thận.

Checklist tối ưu hình ảnh

Trước khi thêm bất kỳ hình ảnh nào:

  • Nén xuống dưới 1MB (lý tưởng là dưới 200KB)
  • Đặt rõ thuộc tính width và height
  • Thêm alt text mô tả
  • Dùng định dạng file phù hợp
  • Kiểm thử khi tắt hình ảnh

Định dạng file hình ảnh

Định dạngPhù hợp nhất choDung lượng tối đa
JPEGẢnh chụp, dải màu chuyển200KB
PNGĐồ họa, nền trong suốt150KB
GIFHoạt ảnh, đồ họa đơn giản500KB
SVGBiểu tượng (hỗ trợ hạn chế)20KB

Thực hành tốt nhất về alt text

Alt text hiển thị khi hình ảnh không tải được và được trình đọc màn hình đọc lên.

Ví dụ alt text hiệu quả:

Loại hình ảnhAlt text kémAlt text tốt
Ảnh sản phẩm”IMG_001""Áo thun cotton xanh, mặt trước”
Banner hero”Banner""Sale hè: giảm 30% toàn bộ đồ bơi”
Nút CTA”Button""Nút mua ngay”
Trang trí”Divider""" (để trống với hình trang trí)

Hướng dẫn về alt text:

  • Giữ dưới 125 ký tự
  • Mô tả chức năng, không phải vẻ ngoài
  • Bao gồm phần chữ quan trọng trong hình
  • Để trống với hình thuần trang trí

Hình ảnh responsive

Đảm bảo hình ảnh co giãn đúng trên các thiết bị:

<img src="image.jpg"
width="600"
height="400"
alt="Description"
style="max-width: 100%; height: auto;">

Thực hành tốt nhất về hình hero

Hình hero đặt tông hình ảnh cho toàn bộ email của bạn:

Thông số kỹ thuật:

  • Chiều rộng: 600px (tự thu nhỏ trên mobile)
  • Chiều cao: 200-400px
  • Dung lượng: dưới 200KB
  • Chữ chồng lên hình: tránh đặt chữ quan trọng trong hình

Mẫu hình hero:

HERO IMAGE
(Lifestyle/product shot)
Overlay text in HTML, not
embedded in image

Hình nền

Hình nền tăng sức hấp dẫn thị giác nhưng có mức hỗ trợ hạn chế:

Ma trận hỗ trợ:

Ứng dụngHỗ trợ hình nền
Apple MailĐầy đủ
iOS MailĐầy đủ
GmailĐầy đủ
Outlook (Windows)Không
Yahoo MailĐầy đủ

Luôn kèm màu nền đặc làm dự phòng cho người dùng Outlook.

Hướng dẫn về hình ảnh sản phẩm

Với email ecommerce giới thiệu sản phẩm:

  • Kích thước nhất quán cho mọi sản phẩm
  • Nền trắng hoặc trung tính
  • Nhiều góc chụp khi có thể
  • Chiều rộng tối thiểu 300px cho hình sản phẩm
  • Liên kết thẳng đến trang sản phẩm

Phần 4: Thiết kế email cho mobile

Hành vi trên mobile khác nhau theo từng danh sách và ngành, nhưng mọi chương trình email hiện đại đều cần thiết kế an toàn cho mobile. Hãy xem báo cáo về ứng dụng email của chính bạn, rồi đưa QA mobile thành bước bắt buộc trước khi gửi.

Nguyên tắc thiết kế mobile

Cách tiếp cận ưu tiên mobile:

  1. Thiết kế cho màn hình nhỏ nhất trước
  2. Xếp nội dung theo chiều dọc
  3. Phóng to vùng chạm
  4. Đơn giản hóa điều hướng
  5. Kiểm thử trên thiết bị thật

Kỹ thuật thiết kế responsive

Media query cho mobile:

@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}

Thiết kế thân thiện với thao tác chạm

Kích thước vùng chạm tối thiểu:

Thành phầnKích thước tối thiểu
Nút bấm44 x 44 pixel
Liên kếtchiều cao 44px
Khoảng cách liên kết10px giữa các liên kết

Mẫu nút CTA:

MUA NGAY
44px minimum height

Typography trên mobile

Điều chỉnh font cho mobile:

  • Thân bài: tối thiểu 16px (tránh bị phóng to trên iOS)
  • Tiêu đề lớn: 24-28px
  • Chiều cao dòng: tăng 10% trên mobile
  • Khoảng cách đoạn: tăng lên cho thao tác cuộn bằng ngón cái

Cân nhắc về hình ảnh trên mobile

  • Dùng chiều rộng linh hoạt (max-width: 100%)
  • Giảm số lượng hình trên mobile
  • Cân nhắc ẩn hình trang trí
  • Tải phiên bản hình nhỏ hơn khi có thể

Checklist kiểm thử mobile

  • Kiểm thử trên iOS Mail
  • Kiểm thử trên app Gmail (iOS và Android)
  • Kiểm thử trên app Outlook
  • Xác nhận hình ảnh tải được qua mạng di động
  • Kiểm tra thời gian tải dưới 3 giây
  • Xác nhận vùng chạm đủ lớn
  • Kiểm thử hiển thị dark mode

Phần 5: Màu sắc trong thiết kế email

Màu sắc truyền tải cảm xúc, dẫn hướng sự chú ý và củng cố bản sắc thương hiệu. Sử dụng màu có chiến lược giúp cải thiện hiệu quả email.

Tâm lý màu sắc trong email

MàuLiên tưởngDùng tốt nhất cho
Xanh dươngTin cậy, điềm tĩnhB2B, tài chính, công nghệ
Xanh láTăng trưởng, sức khỏeSinh thái, chăm sóc sức khỏe, thành công
ĐỏKhẩn cấp, năng lượngSale, CTA, cảnh báo
CamThân thiện, hành độngCTA, điểm nhấn
TímCao cấp, sáng tạoHàng xa xỉ, làm đẹp
VàngLạc quan, chú ýCảnh báo, điểm nhấn

Yêu cầu về độ tương phản màu

Chuẩn WCAG 2.1 AA:

  • Chữ thường: tỷ lệ tương phản tối thiểu 4,5:1
  • Chữ lớn (từ 18px): tỷ lệ tương phản tối thiểu 3:1
  • Thành phần giao diện: tỷ lệ tương phản tối thiểu 3:1

Dùng công cụ kiểm tra tương phản để xác minh khả năng tiếp cận:

Tổ hợpTỷ lệ tương phảnĐạt/Không đạt
Đen trên trắng21:1Đạt
Trắng trên xanh dương (#0066CC)4,8:1Đạt
Xám (#777) trên trắng4,48:1Sát ngưỡng
Xám nhạt (#AAA) trên trắng2,32:1Không đạt

Cân nhắc về dark mode

Hành vi dark mode khác nhau theo hệ điều hành, app và ứng dụng email. Hãy thiết kế cho cả hai chế độ:

Chiến lược dark mode:

  1. Hình trong suốt: dùng PNG với nền trong suốt
  2. Đảo màu: kiểm tra màu sắc khi bị đảo ngược
  3. Phiên bản logo: chuẩn bị biến thể logo sáng và tối
  4. Định hình bằng viền: thêm viền mảnh để tránh bị hòa vào nền

Thẻ meta cho dark mode:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Màu nút CTA

CTA phải nổi bật so với nội dung xung quanh:

Hướng dẫn màu CTA:

  • Dùng màu thương hiệu chính khi nó vẫn đạt yêu cầu tương phản.
  • Dùng màu nhấn tương phản khi bảng màu thương hiệu có độ tương phản nút thấp.
  • Kiểm thử các màu khuyến mãi khẩn cấp so với hành vi hủy đăng ký và khiếu nại.
  • Đừng chỉ dựa vào màu sắc; hãy làm nội dung CTA thật rõ ràng.

Thông số thiết kế nút:

BUTTON TEXT (ALL CAPS) Background: Brand color
Text: White or dark contrast
Padding: 15px 30px
Border radius: 4-8px

Phần 6: Khả năng tiếp cận trong thiết kế email

Thiết kế email dễ tiếp cận đảm bảo mọi người đều có thể tương tác với nội dung của bạn, bất kể khả năng. Điều này vừa đúng về đạo đức vừa thực tế, vì email dễ tiếp cận hoạt động tốt hơn với mọi người dùng.

Nền tảng về khả năng tiếp cận

Nguyên tắc cốt lõi (WCAG 2.1):

  1. Có thể cảm nhận: mọi người dùng đều cảm nhận được nội dung
  2. Có thể thao tác: giao diện điều hướng và sử dụng được
  3. Có thể hiểu: nội dung và thao tác rõ ràng
  4. Bền vững: nội dung hoạt động trên các công nghệ hỗ trợ

Tương thích với trình đọc màn hình

Trình đọc màn hình diễn giải email của bạn cho người dùng khiếm thị:

Thực hành tốt nhất:

  • Dùng HTML ngữ nghĩa (h1, h2, p, ul)
  • Thêm role=“presentation” cho các bảng bố cục
  • Kèm thuộc tính lang trong thẻ HTML
  • Cung cấp văn bản liên kết có ý nghĩa (không phải “bấm vào đây”)
  • Dùng aria-label cho các thành phần phức tạp

Ví dụ:

<html lang="en">
<table role="presentation">
<tr>
<td>
<h1>Summer Sale</h1>
<p>Shop our biggest discounts of the season.</p>
<a href="/sale" aria-label="Shop summer sale items">
Shop the Sale
</a>
</td>
</tr>
</table>
</html>

Điều hướng bằng bàn phím

Một số người dùng điều hướng email mà không dùng chuột:

  • Đảm bảo mọi liên kết có thể nhận focus
  • Duy trì thứ tự tab hợp lý
  • Cung cấp trạng thái focus dễ thấy
  • Tránh bẫy bàn phím

Khả năng tiếp cận thị giác

Cho người dùng có suy giảm thị lực:

Yêu cầuCách triển khai
Tương phản màuTỷ lệ tối thiểu 4,5:1
Không chỉ dựa vào màuThêm chữ/biểu tượng
Chữ co giãn đượcDùng đơn vị tương đối
Chỉ báo focus rõ ràngViền bao dễ thấy
Alt textMô tả, ngắn gọn

Khả năng tiếp cận nhận thức

Cho người dùng có khuyết tật nhận thức:

  • Dùng ngôn ngữ rõ ràng, đơn giản
  • Chia nội dung thành các phần ngắn
  • Cung cấp điều hướng nhất quán
  • Tránh nội dung nhấp nháy
  • Cho người dùng quyền kiểm soát nội dung tự phát

Công cụ kiểm thử khả năng tiếp cận

Công cụ khuyến nghị:

  • Litmus Accessibility Checker
  • Email on Acid
  • WAVE Web Accessibility Evaluation
  • Kiểm thử với trình đọc màn hình (NVDA, VoiceOver)

Phần 7: Template email và ví dụ

Áp dụng các thực hành tốt nhất này với các khung template cho những loại email phổ biến.

Template email khuyến mãi

Mục đích: thúc đẩy bán hàng hoặc chuyển đổi tức thì

LOGO Cửa hàng | Tài khoản
[HERO IMAGE/BANNER]
Sale mùa hè: Giảm 30%
HEADLINE (compelling)
Supporting copy (brief)
MUA NGAY
Product 1 Product 2
[Image] [Image]
$49 $79
[Mua] [Mua]
Footer: Mạng xã hội | Hủy đăng ký
Địa chỉ | Quyền riêng tư

Template bản tin

Mục đích: mang lại giá trị và duy trì tương tác

LOGO Số 42
BÀI VIẾT NỔI BẬT
[Large image]
Headline and excerpt
[Đọc thêm]
THÊM TIN TỨC
[Thumb] Story 2 headline
Brief excerpt...
[Thumb] Story 3 headline
Brief excerpt...
LIÊN KẾT NHANH
Link 1 | Link 2 | Link 3
Footer

Template email giao dịch

Mục đích: xác nhận hành động và cung cấp thông tin thiết yếu

LOGO
Đơn hàng đã được xác nhận
Cảm ơn bạn, [Name]!
CHI TIẾT ĐƠN HÀNG
Đơn hàng #: 12345
Ngày: 8 tháng 3 năm 2026
Tổng cộng: $149.99
SẢN PHẨM
[Image] Product Name $99
[Image] Product Name $50
Tạm tính: $149
Vận chuyển: MIỄN PHÍ
Tổng cộng: $149
THEO DÕI ĐƠN HÀNG
ĐỊA CHỈ GIAO HÀNG
John Smith
123 Main Street
City, State 12345
Cần trợ giúp? Liên hệ hỗ trợ
Footer

Template email chào mừng

Mục đích: giới thiệu thương hiệu và khuyến khích hành động đầu tiên

LOGO
[HERO/LIFESTYLE IMAGE]
Chào mừng bạn đến với [Brand], [Name]!
Brief, warm introduction.
Why they made a great choice.
ƯU ĐÃI CHÀO MỪNG CỦA BẠN
GIẢM 15%
Mã: WELCOME15
MUA NGAY
ĐIỂM KHÁC BIỆT CỦA CHÚNG TÔI
[Icon] Benefit 1
[Icon] Benefit 2
[Icon] Benefit 3
Theo dõi chúng tôi: biểu tượng mạng xã hội
Footer

Phần 8: Kiểm thử thiết kế email

Ngay cả email thiết kế tốt cũng có thể vỡ trên một số ứng dụng. Kiểm thử toàn diện giúp phát hiện lỗi trước khi đối tượng của bạn nhìn thấy chúng.

Checklist kiểm thử trước khi gửi

Rà soát nội dung:

  • Đã kiểm tra chính tả và ngữ pháp
  • Mọi liên kết hoạt động và được gắn theo dõi
  • Token cá nhân hóa hoạt động đúng
  • Dòng tiêu đề và preheader đã tối ưu
  • Liên kết hủy đăng ký có mặt và hoạt động

Rà soát thiết kế:

  • Hình ảnh hiển thị đúng
  • Alt text có trên mọi hình ảnh
  • Đã xác nhận hiển thị trên mobile
  • Đã kiểm thử dark mode
  • Thời gian tải dưới 3 giây

Rà soát kỹ thuật:

  • HTML hợp lệ
  • CSS inline ở nơi cần thiết
  • Dung lượng file dưới 100KB
  • Hình ảnh lưu trên CDN đáng tin cậy

Ma trận kiểm thử ứng dụng email

Kiểm thử trên các ứng dụng phổ biến nhất với đối tượng của bạn:

Mức ưu tiênỨng dụng email
Then chốtGmail (web), Apple Mail, iOS Mail
CaoOutlook (Windows), Gmail (mobile)
Trung bìnhYahoo Mail, Outlook (Mac)
Thấp hơnỨng dụng khác tùy theo đối tượng của bạn

Công cụ kiểm thử và thiết kế

Chọn công cụ theo quy trình làm việc:

Loại công cụVí dụDùng khi
Trình soạn chiến dịchBrevoBạn cần marketer thiết kế và gửi chiến dịch ngay trên nền tảng gửi
Hệ thống thiết kế và xem trướcLitmusBạn cần module, cộng tác, bản xem trước và QA đa ứng dụng
Hiển thị và QA trước khi gửiEmail on AcidBạn cần bản xem trước theo ứng dụng, kiểm tra HTML và QA email trước khi phát hành
Trình dựng templateStripoBạn cần trình dựng kéo-thả tái sử dụng và quy trình xuất HTML
Tra cứu hỗ trợ CSSCan I emailBạn cần xác minh một tính năng HTML hoặc CSS có an toàn trong các ứng dụng email không

Kiểm tra bảng giá và giới hạn gói hiện hành trước khi chọn công cụ. Một số sản phẩm tập trung vào xây dựng, một số vào QA, và một số làm cả hai.

A/B test các thành phần thiết kế

Kiểm thử các biến thể thiết kế để tối ưu hiệu quả:

Thành phầnBiến thể kiểm thử
Hình heroẢnh chụp so với minh họa
Màu CTAMàu thương hiệu so với màu tương phản
Nội dung CTA”Mua ngay” so với “Bắt đầu”
Bố cụcMột cột so với nhiều cột
Độ dàiNgắn gọn so với chi tiết
Hình ảnhCó so với không có

Thiết kế email với Tajo và Brevo

Tajo và Brevo giải quyết các phần khác nhau trong quy trình thiết kế email.

Brevo cung cấp môi trường chiến dịch và tự động hóa, bao gồm trình soạn kéo-thả, template, khối nội dung tái sử dụng, điều khiển phong cách và gửi chiến dịch. Tajo giúp các đội dùng Shopify và Brevo giữ cho dữ liệu khách hàng, đơn hàng, sự đồng ý, giỏ hàng và sản phẩm phía sau các template đó luôn chính xác.

Brevo đảm nhận gì

  • Tạo email chiến dịch và tự động hóa.
  • Khối nội dung kéo-thả.
  • Chỉnh sửa template và chiến dịch.
  • Điều khiển thương hiệu và phong cách.
  • Trường cá nhân hóa.
  • Gửi chiến dịch và báo cáo.

Tajo bổ sung gì

  • Dữ liệu khách hàng Shopify.
  • Trường liên hệ và sự đồng ý.
  • Bối cảnh đơn hàng và sản phẩm.
  • Sự kiện giỏ hàng và vòng đời.
  • Tín hiệu phân khúc khách hàng.
  • Đồng bộ dữ liệu cho các template ecommerce cá nhân hóa.

Quy trình thực tế

  1. Xây dựng template hình ảnh trong Brevo.
  2. Giữ bố cục đủ đơn giản để hiển thị responsive.
  3. Dùng Tajo để đồng bộ dữ liệu khách hàng và ecommerce phục vụ cá nhân hóa.
  4. Thêm giá trị dự phòng cho các trường sản phẩm và khách hàng động.
  5. Xem trước thông điệp với các liên hệ mẫu thực tế.
  6. Kiểm thử hiển thị trên các ứng dụng email chính bằng công cụ QA khi chiến dịch có giá trị cao.
  7. Theo dõi chuyển đổi, hủy đăng ký, khiếu nại và các lỗi riêng của template sau khi phát hành.

Tajo không loại bỏ nhu cầu QA thiết kế email. Nó làm cho dữ liệu bên trong các template cá nhân hóa đáng tin cậy hơn.

Bước tiếp theo

Thiết kế email vừa là một bộ môn sáng tạo vừa là một hệ thống sản xuất. Bố cục, typography, hình ảnh, khả năng tiếp cận, hiển thị và quy trình QA đều ảnh hưởng đến việc người đăng ký có hiểu và hành động theo thông điệp hay không.

Hãy nhớ các nguyên tắc cốt lõi sau:

  1. Thiết kế ưu tiên mobile: mọi chiến dịch quan trọng đều cần QA mobile
  2. Giữ mọi thứ đơn giản: một cột, phân cấp rõ ràng, một CTA chính
  3. Ưu tiên khả năng tiếp cận: khả năng tiếp cận tốt cải thiện kết quả cho mọi người
  4. Kiểm thử kỹ lưỡng: xem trước trên các ứng dụng và thiết bị trước khi gửi
  5. Cải tiến dựa trên dữ liệu: liên tục A/B test các thành phần thiết kế

Thiết kế email tuyệt vời không phải là chạy theo mọi xu hướng. Đó là giao tiếp rõ ràng, đứng vững trong điều kiện hộp thư thực tế.

Với các đội dùng Shopify và Brevo, hãy bắt đầu với Tajo để giữ dữ liệu khách hàng, sản phẩm, đơn hàng, giỏ hàng và sự đồng ý luôn sẵn sàng cho template email cá nhân hóa và các workflow tự động hóa.

Bài viết liên quan

Câu hỏi Thường gặp

Thiết kế email là gì?
Thiết kế email là việc lập kế hoạch và tạo ra cấu trúc, hệ thống phân cấp, typography, hình ảnh, nút bấm, khả năng tiếp cận, hành vi responsive, cách xử lý dark mode và quy trình QA hiển thị của một email trên các ứng dụng email khác nhau.
Làm sao để bắt đầu với thiết kế email?
Bắt đầu với bố cục một cột, hệ thống phân cấp rõ ràng, typography dễ đọc, một CTA chính, hình ảnh đã tối ưu, độ tương phản dễ tiếp cận, bản dự phòng dạng văn bản thuần, xem trước trên mobile, kiểm tra dark mode và kiểm thử hiển thị trước khi gửi.
Công cụ nào hỗ trợ thiết kế email?
Brevo, Stripo, Litmus, Email on Acid và các công cụ tương tự hỗ trợ xây dựng, xem trước, kiểm thử, cộng tác và QA hiển thị. Lựa chọn phù hợp phụ thuộc vào việc bạn cần trình soạn chiến dịch, module tái sử dụng, xem trước mã, kiểm thử trên ứng dụng email, kiểm tra khả năng tiếp cận hay dữ liệu ecommerce trong template.
Mỗi lần QA thiết kế email cần kiểm tra những gì?
QA cần kiểm tra liên kết, cá nhân hóa, alt text, hiển thị trên mobile, dark mode, tải hình ảnh, độ tương phản, yêu cầu về liên kết hủy đăng ký và địa chỉ, bản văn bản thuần, dung lượng file, các ứng dụng email chính và việc nội dung động có giá trị dự phòng an toàn hay không.
Chiều rộng email lý tưởng cho thiết kế là bao nhiêu?
Chiều rộng email tối ưu là 600-640 pixel. Mức này đảm bảo tương thích với mọi ứng dụng email lớn và tránh cuộn ngang. Với thiết kế ưu tiên mobile, một số nhà thiết kế dùng 480px. Tránh vượt quá 640px để không gặp lỗi hiển thị.
Làm sao để email thân thiện với mobile?
Dùng bố cục một cột, đặt cỡ chữ tối thiểu 16px, làm nút bấm tối thiểu 44x44 pixel, dùng hình ảnh linh hoạt với max-width: 100% và kiểm thử trên thiết bị di động thật. Triển khai CSS responsive với media query để điều chỉnh bố cục cho màn hình nhỏ.
Có nên dùng web font trong thiết kế email không?
Bạn có thể dùng web font, nhưng hãy kèm font hệ thống dự phòng vì Gmail và Outlook trên Windows không hỗ trợ web font. Khai báo font stack với web font đứng đầu, theo sau là các font hệ thống tương tự. Kiểm thử để đảm bảo thiết kế vẫn ổn với font dự phòng.
Làm sao để thiết kế email cho dark mode?
Dùng hình PNG nền trong suốt khi có thể, kiểm tra màu sắc khi bị đảo ngược, chuẩn bị phiên bản logo sáng và tối, và thêm viền mảnh để các thành phần không bị hòa vào nền tối. Thêm thẻ meta color-scheme để báo hiệu hỗ trợ dark mode.
Nên dùng định dạng file hình ảnh nào cho email?
Dùng JPEG cho ảnh chụp và hình có dải màu chuyển, PNG cho đồ họa có nền trong suốt hoặc chữ, và GIF cho hoạt ảnh đơn giản. Giữ mọi hình ảnh dưới 200KB để tải nhanh. Tránh SVG vì các ứng dụng email hỗ trợ hạn chế.
Một email nên có bao nhiêu CTA?
Tập trung vào một CTA chính cho mỗi email để tối đa hóa chuyển đổi. Bạn có thể thêm CTA phụ, nhưng hãy đảm bảo hành động chính nổi bật về kích thước, màu sắc và vị trí. Nhiều CTA ngang hàng nhau gây tê liệt quyết định.
Tỷ lệ tương phản chữ tối thiểu cho khả năng tiếp cận là bao nhiêu?
WCAG 2.1 yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn (từ 18px trở lên). Dùng công cụ kiểm tra tương phản trực tuyến để xác nhận các tổ hợp màu của bạn đạt chuẩn.
Làm sao để kiểm thử email trên các ứng dụng email khác nhau?
Dùng nền tảng kiểm thử email như Litmus hoặc Email on Acid để hiển thị bản xem trước trên hàng chục ứng dụng email. Tối thiểu, hãy kiểm thử trên Gmail (web và mobile), Apple Mail, iOS Mail và Outlook (Windows). Xây dựng ma trận kiểm thử dựa trên các ứng dụng phổ biến nhất với đối tượng của bạn.
Có nên kèm bản văn bản thuần của email không?
Có, luôn kèm bản văn bản thuần thay thế. Một số người dùng thích văn bản thuần, và nó cũng hỗ trợ khả năng gửi vào hộp thư. Nhà cung cấp dịch vụ email thường tự tạo bản này, nhưng bạn nên xem lại để đảm bảo dễ đọc.
Email marketing nên dài bao nhiêu?
Điều chỉnh độ dài theo mục đích: email khuyến mãi nên có 50-125 từ với hình ảnh mạnh, bản tin có thể 200-500 từ với các mục dễ lướt, và nội dung giáo dục có thể dài hơn nhưng cần cấu trúc tốt. Ưu tiên khả năng lướt đọc dù dài hay ngắn, và kiểm thử để tìm ra độ dài phù hợp với đối tượng của bạn.

Đăng ký quyền truy cập sớm

Nhập tên của bạn cùng email hoặc số điện thoại. Chúng tôi sẽ liên hệ và gửi thông tin truy cập Tajo.

tự động nhận diện
Nhận Brevo