Thiết kế email responsive đẹp trên mọi thiết bị

Danh mục: Nội dung & thiết kế

Theo kinh nghiệm, phần lớn email tại Việt Nam ngày nay được mở trên điện thoại trước tiên. Người nhận lướt Gmail, Zalo Mail hay Mail của iPhone trong vài giây — nếu email của bạn tràn ngang màn hình, chữ bé li ti, nút bấm trượt khỏi ngón tay, họ đóng ngay mà không cần lý do. Thiết kế responsive không phải là “cho đẹp”: nó quyết định email có được đọc và được nhấp hay không.

Tin tốt là: HTML email không giống web. Bạn không cần framework, không cần học hàng trăm thuộc tính. Chỉ cần nắm vài nguyên tắc bất biến — bố cục một cột, kích thước an toàn, ảnh có thẻ alt, nút bấm “bulletproof”, xử lý dark mode và test thật trước khi gửi — là email của bạn sẽ hiển thị ổn trên gần như mọi thiết bị và ứng dụng mail.

1. Bố cục một cột — nguyên tắc vàng

Nếu chỉ được nhớ một điều, hãy nhớ điều này: thiết kế email theo một cột dọc. Bố cục nhiều cột (kiểu báo, kiểu trang web) trông lung linh trên màn hình lớn nhưng vỡ vụn trên điện thoại: các cột chen nhau, chữ bị bóp, ảnh đè lên nhau. Một cột thì luôn xếp gọn theo chiều dọc, đọc trôi chảy từ trên xuống dù màn hình rộng hay hẹp.

Hãy hình dung email như một “cuộn giấy” người nhận vuốt xuống bằng ngón cái:

• Trên cùng: logo hoặc tên thương hiệu (nhỏ gọn, không chiếm hết màn hình).
• Khối hero: một tiêu đề lớn + một ảnh hoặc một thông điệp chính.
• Thân: nội dung chia thành các khối ngắn, mỗi khối một ý.
• CTA: một nút hành động chính, nổi bật, đặt sớm và lặp lại ở cuối nếu email dài.
• Chân thư: thông tin liên hệ, địa chỉ và liên kết hủy đăng ký.

Cần “hai cột” (ví dụ ảnh sản phẩm bên trái, mô tả bên phải)? Hãy dùng kỹ thuật xếp chồng: trên màn hình rộng hiển thị cạnh nhau, trên điện thoại tự rớt xuống thành một cột. Trong trình soạn kéo–thả của Mailemdi, các khối nhiều cột đã được lập trình sẵn để tự xếp chồng trên màn hình nhỏ — khi xem trước ở chế độ mobile bạn sẽ thấy hai cột tự rơi xuống thành một, không phải viết CSS tay.

Hình dung một email khuyến mãi thật cho cửa hàng thời trang, xếp theo một cột từ trên xuống:

1. Logo thương hiệu nhỏ, căn giữa, có khoảng đệm hai bên.
2. Khối hero: ảnh bộ sưu tập mới + tiêu đề “Sale cuối mùa — giảm đến 50%”.
3. Một đoạn ngắn 1–2 dòng nêu thời hạn ưu đãi (ví dụ “chỉ đến hết Chủ nhật”).
4. Nút CTA chính “Mua ngay” đặt ngay sau đoạn này, nổi bật.
5. 2–3 khối sản phẩm gợi ý, mỗi khối một ảnh + tên + giá + link, xếp dọc.
6. Lặp lại nút CTA một lần nữa ở gần cuối.
7. Chân thư: địa chỉ cửa hàng, hotline, link hủy đăng ký.

Toàn bộ bố cục này đọc trôi chảy bằng một ngón cái trên điện thoại, và vẫn gọn gàng khi mở trên máy tính — đó chính là sức mạnh của một cột.

2. Kích thước & khoảng cách an toàn

HTML email có những con số “an toàn” đã được cả ngành đúc kết qua nhiều năm. Bám theo chúng giúp email hiển thị ổn ở cả màn hình rộng lẫn điện thoại:

Hãy nghĩ về cả độ dài: email càng dài, người nhận càng dễ bỏ giữa chừng. Đặt thông điệp quan trọng nhất và nút CTA chính ở “phần trên màn hình” (above the fold) — vùng nhìn thấy ngay khi mở mà chưa cần cuộn.

3. Ảnh & thẻ alt — đừng để “email trắng”

Đây là chỗ nhiều người Việt mới làm email vấp nặng nhất: thiết kế email thành một tấm ảnh duy nhất (cắt từ Canva, Photoshop) rồi nhúng vào. Trông đẹp trong trình soạn, nhưng:

• Nhiều ứng dụng mail chặn ảnh theo mặc định — người nhận thấy một ô trống toang hoác.
• Bộ lọc spam “đọc” chữ trong email; email toàn ảnh, không có chữ thật, dễ bị nghi spam hơn.
• Ảnh quá nặng làm email tải chậm và dễ bị Gmail cắt (xem mục trên).

Nguyên tắc: chữ là chữ thật, ảnh chỉ để minh họa. Tỷ lệ thường được khuyên là khoảng 60% chữ / 40% ảnh — không phải con số bắt buộc, nhưng cho thấy tinh thần: nội dung cốt lõi phải đọc được ngay cả khi mọi ảnh đều tắt.

Thẻ alt: chiếc “phao” khi ảnh không tải

Mọi ảnh nên có thuộc tính alt — dòng chữ thay thế hiển thị khi ảnh bị chặn hoặc tải lỗi. Thay vì một ô trống vô nghĩa, người nhận vẫn hiểu khối đó nói gì. Ví dụ:

• Viết alt mô tả nội dung, đừng để trống và cũng đừng nhồi từ khóa. “Banner khuyến mãi” vô dụng; “Giảm 30% giày thể thao đến hết Chủ nhật” mới hữu ích.
• Luôn đặt width cho ảnh để ứng dụng mail giữ đúng chỗ trước khi ảnh tải xong.
• Nén ảnh trước khi nhúng: xuất JPG/PNG ở đúng bề rộng cần dùng (thường tối đa 600px hoặc 1200px cho màn Retina), tránh đính ảnh 4000px nặng vài MB.
• Ảnh phải có link rõ ràng: nếu ảnh để bấm vào, bọc nó trong thẻ liên kết và vẫn dùng alt — đừng bắt người nhận đoán.

4. Nút “bulletproof” — CTA luôn hiện

Nút kêu gọi hành động (CTA) là nơi tiền bạc nằm: “Mua ngay”, “Nhận ưu đãi”, “Xem chi tiết”. Sai lầm phổ biến là làm nút bằng một tấm ảnh. Khi ảnh bị chặn, nút biến mất — và người nhận không có gì để bấm.

Giải pháp là nút bulletproof: nút được dựng bằng HTML/CSS (màu nền, bo góc, chữ thật) chứ không phải ảnh. Dù ảnh bị tắt, nút vẫn hiện đầy đủ với chữ đọc được. Tinh thần là một ô có nền màu, padding rộng và chữ là text thật:

Vài nguyên tắc cho CTA hiệu quả trên mọi thiết bị:

• Đủ to để chạm: chiều cao tối thiểu khoảng 44px, padding ngang rộng rãi. Ngón tay không bấm trúng một link bé tí.
• Tương phản mạnh: màu nút nổi bật trên nền email; chữ rõ ràng, đậm.
• Một CTA chính: đừng để 5 nút cạnh tranh nhau. Một hành động chính, các link phụ để dưới dạng text.
• Lời kêu gọi cụ thể: “Nhận mã giảm 20%” tốt hơn “Bấm vào đây”.
• Lặp lại CTA ở cuối nếu email dài — người cuộn tới cuối không nên phải vuốt ngược lên.

Các khối nút trong trình soạn của Mailemdi vốn đã là nút bulletproof — bạn chỉ chọn màu, bo góc, chữ và dán link. Trước khi gửi, hãy rà lại toàn bộ liên kết trong email (nút, ảnh, link văn bản) bằng công cụ Soát link trong email — nó bắt các link rỗng, sai địa chỉ hay thiếu link hủy đăng ký, tránh cảnh nút đẹp nhưng bấm vào không ra đâu cả.

5. Dark mode — email không bị “vô hình”

Ngày càng nhiều người bật chế độ tối trên điện thoại. Khi đó nhiều ứng dụng mail (Gmail, Outlook, Mail của iPhone) tự đảo màu email của bạn: nền trắng thành đen, chữ đen thành trắng. Nghe có vẻ tiện, nhưng nó hay gây ra hai tai nạn:

• Logo & chữ “mất tích”: logo chữ đen trên nền trong suốt sẽ tàng hình trên nền tối. Tương tự, chữ màu tối đặt thủ công có thể không được đảo và chìm vào nền đen.
• Viền lạ quanh ảnh: ảnh có nền trắng (như logo PNG không trong suốt) nổi lên thành một mảng trắng chói giữa email tối.

Bạn không kiểm soát hoàn toàn được dark mode (mỗi ứng dụng đảo màu một kiểu), nhưng có thể thiết kế để chịu được cả hai chế độ:

• Dùng logo có viền/đệm an toàn: logo PNG nền trong suốt với phiên bản nhìn rõ trên cả nền sáng lẫn tối, hoặc thêm một quầng sáng nhẹ quanh logo.
• Tránh đặt chữ tối trên nền tối và ngược lại — chọn cặp màu vẫn tương phản dù bị đảo.
• Đừng cố giấu ranh giới: một nút màu cam (như màu thương hiệu) nhìn ổn trên cả nền sáng và tối, vì màu nhấn không bị đảo mạnh như đen/trắng.
• Test ở cả hai chế độ: bật dark mode trên điện thoại rồi gửi thử cho chính mình. Đây là cách nhanh nhất để bắt lỗi logo/chữ biến mất.

6. Test trên các ứng dụng mail trước khi gửi

Đây là bước không bao giờ được bỏ qua. Một email đẹp trong trình soạn có thể vỡ tan trên Outlook hay bị cắt trên Gmail. Đừng để cả danh sách của bạn trở thành nơi phát hiện lỗi. Quy trình test tối thiểu:

• Bước 1 — Xem trước trong app: dùng chế độ Preview của Mailemdi để kiểm tra nhanh bố cục desktop và mobile cạnh nhau. Bắt sớm các lỗi rõ ràng (chữ tràn, ảnh lệch).
• Bước 2 — Gửi thử tới chính mình: gửi tới ít nhất một địa chỉ Gmail và một địa chỉ Outlook/Yahoo. Đây là các ứng dụng phổ biến nhất với người nhận Việt Nam.
• Bước 3 — Mở trên điện thoại thật: mở email vừa gửi trên iPhone và một máy Android. Làm “test ngón cái”: cuộn, bấm thử nút, xem chữ có đủ to không.
• Bước 4 — Tắt ảnh & bật dark mode: mở lại với ảnh bị chặn để kiểm tra thẻ alt và nút bulletproof; bật chế độ tối để chắc logo/chữ không biến mất.
• Bước 5 — Soát nội dung & vào inbox: kiểm tra mọi link đều đúng, không lỗi chính tả, và thư rơi vào Inbox chứ không phải tab Quảng cáo/Spam.

Ngay trong trình soạn của Mailemdi, nút xem trước cho phép bạn xem nhanh email ở chế độ desktop và mobile cạnh nhau, kèm khung mô phỏng cách Gmail, Outlook và Apple Mail hiển thị — bắt sớm lỗi bố cục trước khi gửi thật. Trước khi bấm gửi, hãy soát nội dung qua công cụ Soát từ khóa spam để tránh từ ngữ và cấu trúc khiến bộ lọc nghi ngờ — thiết kế đẹp mấy mà rơi vào spam thì cũng vô nghĩa. Muốn hiểu sâu hơn vì sao thư vào hay ngoài Inbox, đọc thêm hướng dẫn vào Inbox.

Checklist trước khi gửi

In ra hoặc lưu lại danh sách này; soát một lượt trước mỗi chiến dịch:

• ☐ Bố cục một cột, bề rộng tối đa ~600px.
• ☐ Cỡ chữ thân ≥ 14px (lý tưởng 16px), giãn dòng thoáng.
• ☐ Nội dung chính là chữ thật, không phải một tấm ảnh.
• ☐ Mọi ảnh có thẻ alt mô tả rõ và được nén.
• ☐ Nút CTA là bulletproof, đủ to để chạm, một hành động chính.
• ☐ Logo/chữ vẫn nhìn rõ ở chế độ dark mode.
• ☐ Dung lượng HTML dưới ~102KB để Gmail không cắt.
• ☐ Đã gửi thử & mở trên Gmail, Outlook, iPhone, Android.
• ☐ Chân thư có thông tin liên hệ và link hủy đăng ký.

Bạn không phải bắt đầu từ trang trắng. Mailemdi có sẵn thư viện mẫu email đã được thiết kế responsive sẵn — chọn một mẫu, thay nội dung, đổi màu thương hiệu là gửi được. Cần dựng chiến dịch hoàn chỉnh? Xem thêm hướng dẫn tạo chiến dịch; muốn email tự gửi theo hành vi khách, đọc hướng dẫn Automation.