Email Ready: Tạo HTML Email từ Figma hoặc từ ảnh

Biến một thiết kế thành HTML email khó hơn biến nó thành trang web, vì hộp thư không phải là trình duyệt. Email Ready là kiểu đầu ra của MarkupGen được làm riêng cho việc này, và nó cho bạn hai cách: generate ra mã HTML email từ thiết kế Figma, hoặc tạo email từ ảnh bằng cách cắt thiết kế thành các lát và gắn link bấm được. Bài viết này giải thích cả hai cách, khi nào nên dùng cách nào, và toàn bộ những gì công cụ làm thay bạn.

Email Ready là gì

Mỗi dự án MarkupGen có một kiểu đầu ra. Responsive HTML dành cho website và landing page. Email Ready dành cho newsletter và email marketing: thay vì flexbox và grid, nó tạo ra HTML dạng bảng (table) với CSS inline — đúng định dạng mà Gmail, Outlook và Apple Mail hiển thị ổn định. Trong giao diện tiếng Việt, lựa chọn này hiển thị với tên "Email HTML".

Bạn chọn nó trong phần cài đặt bố cục của dự án, bấm generate, và kết quả là một tài liệu email hoàn chỉnh chứ không phải một trang web.

Cách 1: generate mã HTML email

Đây là cách mặc định, và là cách phù hợp khi email chủ yếu gồm chữ, nút bấm và hình ảnh đơn giản.

• Bố cục dạng bảng với CSS inline. Không flexbox, không grid, không file CSS ngoài để email client loại bỏ.
• Chữ thật. Tiêu đề và đoạn văn vẫn là văn bản, nên chọn được, trình đọc màn hình đọc được, và vẫn hiển thị khi ảnh bị chặn.
• Hiệu ứng email không hỗ trợ được chuyển thành ảnh. Những phần của thiết kế không có cách thể hiện an toàn trong email sẽ được chuyển thành ảnh thay vì bị bỏ mất hoặc vỡ.
• Tài liệu chuẩn XHTML 1.0 Transitional. Doctype, namespace và thuộc tính được chuẩn hoá khi xuất, vì đây là khai báo mà Outlook, Gmail và Apple Mail xử lý ổn định nhất.
• Chỉnh sửa trực tiếp. Đổi nội dung và thay ảnh ngay trong trình biên tập trước khi xuất.
• Đồng hồ đo dung lượng. Thẻ Xuất Email hiển thị dung lượng HTML hiện tại so với giới hạn, để bạn thấy vấn đề trước khi người nhận thấy.

Vấn đề 102KB: vì sao Gmail cắt bớt thư

Gmail cắt bớt mọi thư có HTML nặng hơn khoảng 102KB. Người nhận chỉ thấy phần đầu email kèm link "Xem toàn bộ thư" — còn phần nằm dưới vết cắt, thường là nút kêu gọi hành động và link huỷ đăng ký, bị ẩn đi.

Một thiết kế nhiều section có thể vượt giới hạn đó khi ở dạng mã. MarkupGen cảnh báo ở mức 100KB — trong bảng bố cục và một lần nữa trong hộp thoại gửi thử — và gợi ý cách thứ hai.

Cách 2: tạo email từ ảnh

Tạo Email từ ảnh đi theo hướng ngược lại. Thay vì mô tả thiết kế bằng mã, nó dùng chính ảnh thiết kế, cắt thành các lát, rồi ghép lại trong một bảng nhẹ. HTML chỉ chứa bảng và đường dẫn ảnh, nên thường chỉ nặng vài KB dù thiết kế phức tạp đến đâu.

Cách hoạt động:

1. Bắt đầu từ một ảnh. Ảnh thiết kế của dự án được nạp sẵn, hoặc bạn tải lên ảnh khác — artboard Figma, banner, poster.
2. Vẽ vùng click. Kéo chuột trên ảnh để vẽ khung quanh từng nút, banner hoặc sản phẩm. Di chuyển, đổi kích thước từ mọi cạnh và góc, dịch từng 1px bằng phím mũi tên, hoặc nhập toạ độ chính xác.
3. Thêm link và mô tả alt. Mỗi vùng có một link (http(s)://, mailto: hoặc tel:), một tên và mô tả alt.
4. Đặt chiều rộng email. Mặc định 600px; đổi nếu template của bạn cần chiều rộng khác.
5. Tạo mã. MarkupGen cắt ảnh và dựng bảng.
6. Xem trước, gửi thử và xuất. Kiểm tra bản xem trước desktop và mobile (375px), gửi email thử, rồi áp dụng mã vào dự án hoặc mang đi nơi khác.

Những việc công cụ tự lo trong quá trình đó:

• Chỉ cắt ở nơi cần. Ảnh được cắt theo mép trên và mép dưới của mỗi vùng. Các lát liền kề không có link được gộp lại, nên có ít ảnh hơn và ít request hơn.
• Đường cắt hiển thị rõ. Đường kẻ màu vàng cho thấy chính xác vết cắt sẽ rơi vào đâu, để bạn đặt chúng vào khoảng nền trống thay vì cắt ngang dòng chữ.
• Ghép lại chính xác từng pixel. Vị trí cắt được làm tròn về pixel nguyên ở kích thước hiển thị, nên các lát ghép lại đúng bằng ảnh gốc, không hở và không lệch cột.
• Lát cắt không mất chất lượng, được lưu trữ sẵn. Các lát được lưu dạng PNG và tự động tải lên với URL tuyệt đối — bạn không phải tự host. Ảnh 2x vẫn sắc nét vì được hiển thị ở chiều rộng email chứ không bị thu nhỏ.
• Mã dành riêng cho Outlook. Chiều rộng cố định, conditional comment cho engine dựa trên Word của Outlook, và các reset để không xuất hiện khoảng hở giữa các lát.
• Chỉ nhận link an toàn. Mọi thứ không phải http(s), mailto hoặc tel đều bị từ chối, và vùng không có link hợp lệ sẽ bị bỏ qua kèm cảnh báo thay vì xuất ra một link hỏng.
• Vùng được lưu cùng dự án. Mở lại công cụ sau đó để sửa link hoặc dời vùng mà không phải vẽ lại từ đầu.
• Giới hạn rộng rãi. Tối đa 200 vùng liên kết và 400 lát cắt cho mỗi email, với ảnh rộng tới 4000px.

Nên dùng cách nào?

Quy tắc thực tế: bắt đầu bằng mã được generate. Chuyển sang cách dùng ảnh khi đồng hồ dung lượng vượt giới hạn, hoặc khi thiết kế phụ thuộc vào font và hiệu ứng mà email client không tái hiện được.

Mọi thứ bạn làm được với kết quả

Cả hai cách đều dẫn tới cùng một đích:

• Gửi email thử tới hộp thư thật, ngay từ trình biên tập. Việc gửi bị chặn nếu còn nội dung hoặc hình ảnh nào trong thiết kế chưa được gán.
• Xem trước trên desktop và mobile trước khi gửi.
• Sao chép mã, tải file .html, hoặc chia sẻ link tới một bản email đã được lưu trữ.
• Áp dụng vào dự án rồi lưu, để email nằm cùng phần còn lại của dự án.
• Làm việc bằng ngôn ngữ của bạn — giao diện có sẵn 10 ngôn ngữ.

Để tìm hiểu kỹ hơn về việc kiểm tra, xem bài generate và gửi thử HTML email marketing.

Những đánh đổi, nói thẳng

Email dạng ảnh không phải không có giá. Chữ trong ảnh không chọn, không copy và không tìm kiếm được. Nếu email client chặn ảnh mặc định, người nhận chỉ thấy mô tả alt cho đến khi họ cho phép hiển thị ảnh — đó là lý do công cụ yêu cầu điền alt cho từng vùng. Bố cục có chiều rộng cố định, nên trên màn hình nhỏ nó thu nhỏ lại chứ không tự sắp xếp lại; hãy xem bản xem trước mobile. Và bản xem trước trên trình duyệt không bao giờ là bằng chứng: luôn mở email thử trong các ứng dụng mà người nhận của bạn dùng.

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

Vì sao Gmail cắt bớt email của tôi? Gmail cắt bớt thư có HTML nặng hơn khoảng 102KB và giấu phần còn lại sau link "Xem toàn bộ thư". MarkupGen hiển thị dung lượng hiện tại và cảnh báo ở mức 100KB.

Tôi có thể biến một ảnh thành HTML email có link bấm được không? Có. Tạo Email từ ảnh cắt ảnh thành lát, bọc mỗi vùng bạn vẽ trong link riêng, và ghép ảnh lại thành một bảng mà email client hiển thị ổn định.

Tôi có phải tự host ảnh không? Không. Các lát cắt được tự động tải lên và tham chiếu bằng URL tuyệt đối, nên email dùng được ngay khi bạn gửi.

Email dạng ảnh có chạy trên Outlook không? Kết quả dùng bố cục bảng, chiều rộng cố định và mã điều kiện dành riêng cho Outlook. Bạn vẫn nên gửi thử tới một hộp thư Outlook trước khi chạy chiến dịch.

Tôi có sửa được link sau khi tạo mã không? Có. Các vùng được lưu cùng dự án, nên bạn có thể mở lại công cụ, đổi link hoặc dời vùng, rồi tạo lại mã.

Tính năng này chỉ dùng được với thiết kế Figma thôi sao? Cách generate mã bắt đầu từ thiết kế Figma. Cách dùng ảnh còn nhận bất kỳ ảnh nào bạn tải lên trong một dự án Email Ready.

Nếu bạn có một chiến dịch email đang nằm trong Figma — hoặc chỉ trong một tấm ảnh — hãy bắt đầu miễn phí và có HTML sẵn sàng gửi trong vài phút. Đội marketing có thể xem quy trình tổng thể tại MarkupGen cho đội marketing.