Bạn viết một tiêu đề khiến người ta phải mở email. Preview text đủ tò mò để họ đọc tiếp. Nội dung đúng ngữ cảnh, CTA rõ ràng — đúng mọi thứ mình đã nói ở bài trước. Rồi người đọc mở email ra trên điện thoại, và cả bố cục vỡ tan: chữ tràn ra ngoài màn hình, ảnh không hiện, nút bấm biến mất. Họ đóng email lại trong 2 giây, không phải vì nội dung dở, mà vì email trông không đáng tin.
Đây là phần "vỏ" của email — thứ quyết định một nội dung tốt có thực sự đến được với người đọc hay không. Bài này đi qua 5 phần: bố cục, màu sắc, hình ảnh, cách hiển thị trên điện thoại, và một điều rất nhiều người bỏ qua — bản email dạng chữ thuần đi kèm bản HTML. Nếu bạn dùng EzyMail để soạn mẫu thư, đây chính xác là những nguyên tắc cần áp dụng khi viết phần HTML của mẫu thư đó.

1. Bố cục email — đừng để người đọc phải đoán nên nhìn vào đâu

Thử tưởng tượng bạn mở một email dài ngoằng, không biết đâu là ý chính, phải cuộn mãi mới thấy được điều quan trọng nhất. Phần lớn người đọc sẽ không cuộn đến đó — họ đóng email trước khi kịp thấy. Bố cục tốt giải quyết đúng vấn đề này: đặt thông tin đúng chỗ, để mắt người đọc đi đúng đường bạn muốn.
Ba nguyên tắc gần như không đổi trong nhiều năm qua, dù giao diện hộp thư có cập nhật thế nào:
  • Chiều rộng chuẩn: 600-640px. Đây là con số an toàn để email hiển thị gọn gàng trên mọi ứng dụng đọc email — từ Gmail, Outlook, Yahoo đến Apple Mail — mà không bị cắt hay phải cuộn ngang. Rộng hơn 700px bắt đầu có rủi ro vỡ layout trên một số phiên bản Outlook cũ.
  • Nội dung quan trọng nhất nằm trong 300-500px đầu tiên. Đây là phần "phía trên màn hình gập" — thứ người đọc thấy ngay mà không cần cuộn xuống. Nếu thông điệp cốt lõi và CTA chính không nằm ở đây, rất nhiều người sẽ không bao giờ thấy chúng.
Screenshot 2026-07-23 120617.png
  • Tỷ lệ chữ và ảnh khoảng 60/40. Một email chỉ toàn ảnh, không có chữ, dễ bị bộ lọc spam đánh dấu và cũng không hiển thị được gì nếu ảnh bị chặn. Giữ phần lớn thông điệp bằng chữ thật, ảnh chỉ nên minh họa thêm.

2. Màu sắc

Màu sắc là thứ dễ bị đối xử như chuyện thẩm mỹ thuần túy, nhưng thực ra nó quyết định người đọc có đọc được chữ hay không. Một email "đẹp" theo mắt người thiết kế nhưng chữ xám nhạt trên nền trắng vẫn có thể là một email không ai đọc nổi.
  • Giữ tương phản đủ rõ giữa chữ và nền. Quy tắc an toàn là tỷ lệ tương phản tối thiểu 4.5:1 giữa màu chữ và màu nền — tương đương với chữ đen hoặc xám đậm trên nền trắng, không phải xám nhạt trên trắng nhìn cho "sang".
  • Không dùng quá nhiều màu trong một email. Chọn 1 màu thương hiệu chính (dùng cho header và nút CTA), 1 màu chữ chính, và tối đa 1 màu nhấn phụ. Nhiều màu cạnh tranh nhau khiến mắt không biết nên nhìn vào đâu trước.
  • Cân nhắc chế độ tối (dark mode). Nhiều ứng dụng email tự động đảo màu nền tối khi người đọc bật dark mode — Apple Mail đảo khá mạnh, Outlook thì gần như không đổi gì. Nếu logo hay chữ quan trọng đang đặt trên nền trong suốt, nó có thể biến mất hoàn toàn khi nền bị đảo màu. Cách an toàn là luôn đặt nền màu rõ ràng, không để trong suốt.

3. Hình ảnh

Đây là một sự thật hay bị bỏ qua: rất nhiều ứng dụng email chặn hiển thị ảnh mặc định, người đọc phải chủ động bấm tải mới thấy. Nếu bạn dồn hết thông điệp quan trọng vào một tấm banner đẹp, một phần không nhỏ người nhận sẽ chỉ thấy một khoảng trống.
  • Luôn thêm alt text cho mọi ảnh. Alt text là dòng chữ mô tả thay thế, hiện ra ngay cả khi ảnh chưa tải — nó cứu cả một khối nội dung khỏi biến mất hoàn toàn.
Screenshot 2026-07-23 120825.png
  • Không đặt thông tin quan trọng chỉ trong ảnh. Mã giảm giá hay hạn chót chương trình nằm trong file ảnh sẽ không bao giờ đến được với người dùng ứng dụng chặn ảnh. Thông tin quan trọng luôn cần có ở dạng chữ HTML thật.
  • Nén ảnh trước khi chèn vào email. Ảnh nặng làm cả email nặng theo, và Gmail sẽ cắt bớt nội dung nếu email vượt quá 102KB — người đọc phải bấm "Xem toàn bộ thư" mới thấy hết, mà phần lớn sẽ không bấm.

4. Responsive trên điện thoại

Responsive trên điện thoại là khả năng để email tự động điều chỉnh bố cục, kích thước chữ và hình ảnh phù hợp với màn hình của từng thiết bị. Thay vì giữ nguyên giao diện trên máy tính, email sẽ tự sắp xếp lại nội dung để người đọc không cần phóng to, cuộn ngang hay gặp lỗi hiển thị khi mở trên điện thoại.
Nếu phải chọn một phần dễ làm hỏng cả email nhất, đó chính là phần này. Một mẫu thư đẹp long lanh trên máy tính có thể vỡ hoàn toàn khi mở trên điện thoại — mà phần lớn người đọc của bạn đang dùng điện thoại.
  • Thiết kế theo chiều rộng di động 320-480px. Đây là khoảng chiều rộng màn hình phổ biến nhất. Mẫu thư cần tự động co lại vừa khung này, chữ không nhỏ đến mức phải phóng to mới đọc được.
  • Dùng media query để đổi bố cục ở ngưỡng 600px. Thiết kế mặc định cho máy tính (600-640px), rồi dùng media query để tự động xếp các cột nội dung chồng lên nhau theo chiều dọc và phóng to chữ khi màn hình hẹp hơn 600px.
Screenshot 2026-07-28 164833.png
  • Nút CTA nên là chữ + nền màu bằng HTML/CSS, không phải ảnh. Nút dạng ảnh biến mất hoàn toàn nếu ảnh bị chặn — người đọc sẽ không thấy nút bấm nào cả. Nút dựng bằng HTML/CSS luôn hiển thị được, và trên điện thoại nên đủ lớn để bấm bằng ngón tay (tối thiểu khoảng 44x44px).

5. Email HTML và Email Text — cái bạn không thấy nhưng luôn cần có

Có một sự thật ít người để ý: một email chuyên nghiệp thực chất luôn được gửi đi ở hai định dạng cùng lúc — bản HTML đầy đủ định dạng mà bạn quen thấy, và một bản Email Text chỉ gồm chữ thuần, âm thầm đi kèm phía sau.
Vì sao cần cả hai, không chỉ HTML?
  • Một số ứng dụng email cũ hoặc được cấu hình riêng — thường gặp ở môi trường doanh nghiệp — không hiển thị được HTML, chỉ đọc được bản chữ thuần.
  • Bộ lọc spam có xu hướng tin tưởng hơn với email có kèm bản plain text — một email chỉ có HTML, đặc biệt loại toàn ảnh, dễ bị đánh dấu nghi ngờ hơn.
  • Phần mềm đọc màn hình hỗ trợ người khiếm thị đọc bản plain text dễ dàng và chính xác hơn.
Viết bản Email Text không phải chỉ xóa hết định dạng HTML đi. Nó cần được viết lại gọn gàng: giữ nguyên thông điệp chính và CTA (viết rõ đường link thay vì nút bấm, ví dụ "Xem chi tiết tại: https://..."), bỏ hết phần trang trí không cần thiết.
Nếu bạn thiết lập mẫu thư trong EzyMail, mẫu thư cần cấu hình cả nội dung HTML lẫn nội dung text thuần cho cùng một mẫu — để hệ thống gửi đi đúng định dạng phù hợp với từng ứng dụng đọc email của người nhận.

Kết luận

Đi hết 5 phần ở trên, có một điều đáng chú ý: gần như không có phần nào đòi hỏi thiết kế cầu kỳ. Chiều rộng cố định 600-640px, tương phản chữ rõ ràng, ảnh có alt text, bố cục tự xếp gọn trên điện thoại, và luôn kèm bản plain text dự phòng — đó là toàn bộ những gì cần nhớ. Một khi mẫu thư đã dựng đúng ngay từ lần đầu, bạn gần như không cần sửa lại cho những chiến dịch sau — phần khó nhất luôn là làm đúng lần đầu tiên, không phải làm đẹp.