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.
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 đến | Cách đánh giá |
|---|---|---|
| Bố cục mobile | Luồ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ột | Khả năng lướt đọc và hành vi responsive | So sánh độ sâu click và hành vi cuộn |
| Phân cấp CTA rõ ràng | Sự rõ ràng khi ra quyết định | Theo 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 text | Khả 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án | Nhận diện và niềm tin | Kiể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
FOOTERLợ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 buttonCấ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ộng | Trường hợp dùng | Độ tương thích |
|---|---|---|
| 600px | Email tiêu chuẩn | Phổ quát |
| 640px | Email nhiều nội dung | Hầu hết ứng dụng |
| 480px | Thiế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:
- Logo, rộng tối đa 200px, liên kết về website
- Điều hướng (tùy chọn), tối đa 2-4 liên kết chính
- 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...Những điều thiết yếu khi thiết kế footer
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ụng | Hỗ trợ web font |
|---|---|
| Apple Mail | Hỗ trợ đầy đủ |
| iOS Mail | Hỗ trợ đầy đủ |
| Outlook (Mac) | Hỗ trợ đầy đủ |
| Gmail | Không hỗ trợ |
| Outlook (Windows) | Không hỗ trợ |
| Yahoo Mail | Một phần |
Cách triển khai:
- Khai báo web font làm font chính
- Kèm font hệ thống tương tự làm dự phòng
- Kiểm thử hiển thị trên các ứng dụng chính
- 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ần | Desktop | Mobile |
|---|---|---|
| Tiêu đề lớn | 28-36px | 24-28px |
| Tiêu đề phụ | 20-24px | 18-22px |
| Thân bài | 16-18px | 16px (tối thiểu) |
| Chữ phụ | 14-16px | 14px (tối thiểu) |
| Pháp lý/footer | 12-14px | 12px |
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 spacingPhâ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 adipiscingelit. 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ạng | Phù hợp nhất cho | Dung lượng tối đa |
|---|---|---|
| JPEG | Ảnh chụp, dải màu chuyển | 200KB |
| PNG | Đồ họa, nền trong suốt | 150KB |
| GIF | Hoạt ảnh, đồ họa đơn giản | 500KB |
| SVG | Biể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 ảnh | Alt text kém | Alt 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 imageHì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ụng | Hỗ 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:
- Thiết kế cho màn hình nhỏ nhất trước
- Xếp nội dung theo chiều dọc
- Phóng to vùng chạm
- Đơn giản hóa điều hướng
- 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ần | Kích thước tối thiểu |
|---|---|
| Nút bấm | 44 x 44 pixel |
| Liên kết | chiều cao 44px |
| Khoảng cách liên kết | 10px giữa các liên kết |
Mẫu nút CTA:
MUA NGAY
44px minimum heightTypography 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àu | Liên tưởng | Dùng tốt nhất cho |
|---|---|---|
| Xanh dương | Tin cậy, điềm tĩnh | B2B, tài chính, công nghệ |
| Xanh lá | Tăng trưởng, sức khỏe | Sinh thái, chăm sóc sức khỏe, thành công |
| Đỏ | Khẩn cấp, năng lượng | Sale, CTA, cảnh báo |
| Cam | Thân thiện, hành động | CTA, điểm nhấn |
| Tím | Cao cấp, sáng tạo | Hàng xa xỉ, làm đẹp |
| Vàng | Lạ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ợp | Tỷ lệ tương phản | Đạt/Không đạt |
|---|---|---|
| Đen trên trắng | 21:1 | Đạt |
| Trắng trên xanh dương (#0066CC) | 4,8:1 | Đạt |
| Xám (#777) trên trắng | 4,48:1 | Sát ngưỡng |
| Xám nhạt (#AAA) trên trắng | 2,32:1 | Khô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:
- Hình trong suốt: dùng PNG với nền trong suốt
- Đảo màu: kiểm tra màu sắc khi bị đảo ngược
- Phiên bản logo: chuẩn bị biến thể logo sáng và tối
- Đị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-8pxPhầ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):
- Có thể cảm nhận: mọi người dùng đều cảm nhận được nội dung
- Có thể thao tác: giao diện điều hướng và sử dụng được
- Có thể hiểu: nội dung và thao tác rõ ràng
- 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ầu | Cách triển khai |
|---|---|
| Tương phản màu | Tỷ lệ tối thiểu 4,5:1 |
| Không chỉ dựa vào màu | Thêm chữ/biểu tượng |
| Chữ co giãn được | Dùng đơn vị tương đối |
| Chỉ báo focus rõ ràng | Viền bao dễ thấy |
| Alt text | Mô 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
FooterTemplate 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ợ FooterTemplate 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 FooterPhầ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ốt | Gmail (web), Apple Mail, iOS Mail |
| Cao | Outlook (Windows), Gmail (mobile) |
| Trung bình | Yahoo 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ịch | Brevo | Bạ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ước | Litmus | Bạ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ửi | Email on Acid | Bạ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 template | Stripo | Bạ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ợ CSS | Can I email | Bạ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ần | Biến thể kiểm thử |
|---|---|
| Hình hero | Ảnh chụp so với minh họa |
| Màu CTA | Mà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ục | Một cột so với nhiều cột |
| Độ dài | Ngắn gọn so với chi tiết |
| Hình ảnh | Có 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ế
- Xây dựng template hình ảnh trong Brevo.
- Giữ bố cục đủ đơn giản để hiển thị responsive.
- Dùng Tajo để đồng bộ dữ liệu khách hàng và ecommerce phục vụ cá nhân hóa.
- Thêm giá trị dự phòng cho các trường sản phẩm và khách hàng động.
- Xem trước thông điệp với các liên hệ mẫu thực tế.
- 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.
- 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:
- Thiết kế ưu tiên mobile: mọi chiến dịch quan trọng đều cần QA mobile
- Giữ mọi thứ đơn giản: một cột, phân cấp rõ ràng, một CTA chính
- Ư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
- 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
- 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
- Chiến dịch email marketing: hướng dẫn đầy đủ về lập kế hoạch, thực thi và tối ưu
- Chiến lược email marketing: hướng dẫn lập kế hoạch và thực thi
- Email marketing cho doanh nghiệp nhỏ: hướng dẫn đầy đủ (2026)
- ROI email marketing: cách tính toán, theo dõi và cải thiện lợi nhuận
- Email marketing cho người mới bắt đầu: hướng dẫn khởi đầu đầy đủ (2026)