Gửi email mẫu HTML

Trước khi bạn nhấn gửi chiến dịch của mình hoặc trước khi bạn chuyển các mẫu email của mình sang cơ sở mã hoặc nhà cung cấp dịch vụ email, điều quan trọng là phải kiểm tra email HTML của bạn. Làm điều này bằng cách gửi nó cho chính mình

Đăng ký trình quản lý mẫu email của chúng tôi, Postdrop, để viết mã, lưu trữ, xem trước và kiểm tra các mẫu email HTML của bạn

Gửi các mẫu email HTML từ Gmail rất phức tạp và không hiệu quả. Các mẫu HTML thực sự tiện dụng để thêm các yếu tố đồ họa như logo công ty, hình ảnh sản phẩm, v.v.  

Mặc dù có thể đính kèm hình ảnh trong Gmail nhưng những hình ảnh này sẽ không phản hồi. Hình ảnh và nội dung không phản hồi sẽ không giống như mong đợi, trên các kích thước màn hình khác nhau. Mã HTML tự động chia tỷ lệ nội dung của bạn để phù hợp với kích thước màn hình ở phía người nhận của bạn

Sử dụng Saleshandy để gửi email HTML

Làm cách nào để gửi các mẫu email HTML trong Gmail?

Gmail không hiển thị mã HTML một cách hoàn hảo. Người nhận của bạn sẽ nhận được HTML ở định dạng rất thô, nhưng bằng cách làm theo các bước bên dưới, bạn có thể tạo và gửi HTML hoàn hảo trong Gmail




Bước 1. Soạn mã HTML của bạn và lưu dưới dạng tệp html

mẹo chuyên nghiệp. Đảm bảo không có định dạng bổ sung nào trong tệp của bạn. Chỉ là văn bản đơn giản

Bước 2. Bây giờ, nhấp chuột phải vào tệp và mở tệp trong trình duyệt mới

Kiểm tra xem mã HTML của bạn có được định dạng đúng và chính xác như bạn muốn không

Bước 3. Sao chép toàn bộ nội dung từ trình duyệt [Ctrl A] và chèn vào hộp thư soạn thư của bạn

Bước 4. Bây giờ, chỉ cần gửi email HTML của bạn

mẹo chuyên nghiệp. Kiểm tra trước khi gửi email HTML của bạn. Bạn có thể gửi email đầu tiên của mình cho ai đó trong nhóm của mình để đảm bảo rằng nó hoàn hảo

Tại sao bạn nên gửi bản tin email bằng Gmail nếu bạn có số lượng người nhận hạn chế?

Việc tạo và gửi email HTML cho bản tin của bạn thực sự dễ dàng hơn bằng cách sử dụng các dịch vụ như MailChimp hoặc GetResponse. Nhưng điều này khiến email của bạn dễ bị chuyển vào thư mục Thư rác hoặc Quảng cáo. Đó là bởi vì các dịch vụ này sử dụng các máy chủ công cộng gửi hàng trăm nghìn email mỗi giây, hầu hết trong số đó sẽ bị báo cáo là thư rác

Khi những email này được gửi từ tài khoản Gmail/Gsuite của bạn, rất có thể chúng sẽ được gửi trong thư mục Hộp thư đến chính của người nhận. Vì máy chủ Gmail không gửi email hàng loạt như một số dịch vụ khác nên email được gửi bằng Gmail được coi là quan trọng đối với người nhận

Đọc bài viết này — Cách gửi bản tin bằng Gmail một cách hiệu quả để bắt đầu gửi bản tin của bạn từ Gmail

Tuy nhiên, nếu bạn có danh sách 10 nghìn người nhận trở lên, thì bạn không thể gửi email bản tin cho tất cả người nhận trong một ngày

Tiếp thị qua email rất quan trọng đối với bất kỳ doanh nghiệp kỹ thuật số nào. Đó là một kênh tiếp thị rẻ tiền cho phép chúng tôi cá nhân hóa các tương tác của khách hàng theo cách mà không kênh nào khác có thể sánh được

Tất cả các yếu tố này đều góp phần mang lại lợi tức đầu tư cao cho email, lên tới 40 đô la cho mỗi 1 đô la chi tiêu, đối với một số thương hiệu. Mặc dù điều đó tốt và tốt, nhưng các mẫu email HTML nói riêng rất khó tạo

Lấy email này từ Firefox làm ví dụ

Trông khá cơ bản phải không?

Xem Bút qBEKJpB của Iris [@irismtleung] trên CodePen

Nếu bố cục này được hiển thị trên web, chúng tôi có thể làm chính xác điều tương tự với phiên bản đơn giản hóa này

Xem Ví dụ về Pen Mozilla Email trên Web của Lenny Johnson [@Lennyjohnson] trên CodePen

Sự khác biệt là rõ rệt. Và nếu bạn đã quen với việc tạo trang web cho trình duyệt, có lẽ bạn sẽ rùng mình khi nhìn thấy tất cả các kiểu và bảng nội tuyến được sử dụng để xử lý bố cục.

Một cách để thoát khỏi sự phức tạp này là chỉ sử dụng email văn bản thuần túy thay vì email HTML

Email văn bản thuần túy trông như thế này

Chúng vẫn truyền tải thông điệp nhưng có thể không phù hợp nhất với thương hiệu của bạn. Email HTML cung cấp cho bạn nhiều tùy chọn kiểu dáng hơn, nhưng chúng khó tạo

Sự cố khi tạo mẫu email HTML

Email rất khó tạo vì không giống như web, không có tiêu chuẩn nào được chấp nhận hoàn toàn về cách chúng nên được tạo kiểu

Và trong khi web được cai trị bởi một số trình duyệt chính, thì có rất nhiều ứng dụng email. Theo Litmus, có khoảng 1.000 ứng dụng email trên khắp thế giới, khoảng 250 ứng dụng email dành cho thiết bị di động và một số ít ứng dụng email dành cho máy tính để bàn

Khi bạn gửi email, bạn đang xử lý các ESP, ứng dụng email, kích thước màn hình và công cụ hiển thị khác nhau. Họ cùng nhau thêm các lớp phức tạp

Đây là những gì Litmus nói về kết xuất email

“Mỗi email mà các nhà tiếp thị gửi có khoảng 15.000 kết xuất tiềm năng [và đó là sử dụng toán học thận trọng]. ” Có tới 15.000 cách khác nhau để hiển thị email của bạn

Tạo email có thể là một nỗi đau lớn, nhưng không nhất thiết phải như vậy. Đến cuối bài viết này, bạn sẽ biết cách tạo email phản hồi tuyệt vời mà không cần dành toàn bộ thời gian cho nó

Cách tạo Email HTML

Khi nói đến việc tạo email HTML, bạn có thể chọn một số cách, mỗi cách đều có ưu và nhược điểm riêng.

Hãy lướt qua chúng

1. Sử dụng các cơ quan thiết kế email

Giống như một số người tìm đến các công ty thiết kế web để có một trang web, một số doanh nghiệp sử dụng các công ty thiết kế email

Điều này có ý nghĩa nếu bạn là một nhóm nhỏ và không có đủ ngân sách để có một nhà thiết kế email toàn thời gian trong nhóm của mình nhưng bạn vẫn muốn có các thiết kế tùy chỉnh

Một vài cơ quan thiết kế email đáng chú ý là

  • Email tu sĩ
  • thư bánh
  • Inbox quân đội
  • PSD2HTML

Một công ty thiết kế email sẽ tạo và thậm chí thiết kế các mẫu cho bạn. Mặc dù nó đắt hơn các tùy chọn khác trong danh sách này nhưng đây cũng là một trong những cách tốt nhất để đảm bảo rằng email của bạn hiển thị chính xác theo cách bạn muốn.

Sử dụng một công ty thiết kế email cũng tốn nhiều thời gian hơn khi bạn thuê ngoài công việc. Vì vậy, hãy đảm bảo ghi lại khoảng thời gian chờ đợi trong lịch tiếp thị của bạn, vì nó sẽ ảnh hưởng đến dòng thời gian của bạn

2. Sử dụng trình chỉnh sửa email kéo và thả

Cho đến nay, tùy chọn dễ nhất trong danh sách. Có nhiều trình chỉnh sửa kéo và thả có thể giúp bạn tạo các email phản hồi tuyệt vời

Nhược điểm duy nhất với một số trình chỉnh sửa email là bạn bị giới hạn bởi số lượng bạn có thể tùy chỉnh email của mình. Tuy nhiên, nếu bạn đang tạo các mẫu email tiêu chuẩn với bố cục đơn giản, trình chỉnh sửa kéo và thả sẽ rất phù hợp.

Lấy ví dụ này trên email giới thiệu từ trình chỉnh sửa Kéo và Thả của chúng tôi

Trình chỉnh sửa HTML kéo và thả của Vero

Trình chỉnh sửa email kéo và thả của Vero là một cải tiến mới về thiết kế email. Được xây dựng từ đầu trên khung MJML có thể mở rộng, trình chỉnh sửa email dễ sử dụng của chúng tôi cho phép nhóm của bạn gửi email đẹp mắt và hấp dẫn đến mọi thiết bị mà không cần viết một dòng mã nào.  

Vero kéo và thả trình chỉnh sửa html

Một vài trình chỉnh sửa kéo và thả email tuyệt vời là.  

  • Vero
  • Stripo
  • Taxi cho Email
  • BEE miễn phí
  • bưu thiếp
  • topol
  • bỏ lớp

3. Sử dụng các mẫu email html được thiết kế sẵn

Các mẫu email được thiết kế sẵn giống như trình chỉnh sửa kéo và thả ở chỗ chúng nhanh nhưng phong cách thiết kế của bạn bị giới hạn ở mẫu mà bạn chọn. Nhưng vì có hàng ngàn mẫu để lựa chọn trực tuyến, email của bạn có thể trông giống như bất kỳ thứ gì bạn muốn

Nếu bạn đang tìm kiếm các mẫu email HTML, hãy bắt đầu với Thư viện mẫu miễn phí của Vero. Các mẫu được thiết kế chuyên nghiệp của chúng tôi có tất cả các yếu tố bạn cần để gửi các chiến dịch đẹp, có thương hiệu ngay lập tức.  

Một số tùy chọn mẫu khác để kiểm tra

  • Thư viện mẫu HTML miễn phí của Vero
  • mẫu giấy quỳ
  • Stripo
  • BEE miễn phí
  • Chủ ĐềRừng

4. Tạo mẫu từ đầu

Mặc dù yêu cầu đường cong học tập dốc hơn, tùy chọn này cung cấp cho bạn toàn quyền kiểm soát mọi khía cạnh trong thiết kế email của bạn. Nếu bạn biết HTML và CSS [hoặc muốn học], thì bạn đã có những kỹ năng cơ bản cần thiết để xây dựng các mẫu HTML

Một vài hướng dẫn thực sự tuyệt vời trên Internet để giúp bạn bắt đầu là

  • Envato
  • Email tu sĩ

Một số khung thực sự tốt giúp quá trình tạo mẫu HTML dễ dàng hơn

  • MJML
  • Sự thành lập
  • Cerberus

Tạo từ đầu rất tốn thời gian, nhưng bạn sẽ không cần phải tạo một cái mới mỗi lần nếu mẫu của bạn có thể tái sử dụng

Dù bạn sử dụng phương pháp nào để tạo mẫu HTML, thì vẫn có một số phương pháp hay nhất cần ghi nhớ

Các phương pháp hay nhất về email HTML

1. Sử dụng văn bản tiêu đề trước. Văn bản tiêu đề trước là một đoạn nhỏ, thường là 50-100 ký tự, mà bạn thấy bên cạnh dòng chủ đề của email ở hầu hết các khách hàng. Nó rất quan trọng vì nó có thể lôi kéo người đăng ký của bạn mở email. Đây là một email có văn bản tiêu đề trước trong Gmail

Thông thường, các ứng dụng email sẽ lấy đoạn văn bản đầu tiên trong nội dung của bạn và sử dụng nó làm tiêu đề trước, nhưng bạn cũng có thể chỉ định nội dung bạn muốn.

Mẫu email hoặc trình chỉnh sửa của bạn phải có tùy chọn bao gồm văn bản tiêu đề trước

2. Hình ảnh. Vì hình ảnh bị chặn theo mặc định trên một số ứng dụng email, bạn nên đảm bảo rằng người đọc vẫn có thể hiểu email mà không cần hình ảnh. Bạn cũng nên thêm văn bản thay thế mô tả để cho mọi người biết nội dung của email nếu họ không thể xem hình ảnh

Thích email này từ Microsoft

Mặc dù hình ảnh không hiển thị nhưng người đọc vẫn có thể nắm được ý chính

Trong email, hình ảnh nên được giữ càng nhỏ càng tốt, vì điều này ảnh hưởng đến tốc độ tải nội dung. Nên sử dụng kích thước hình ảnh từ 250kb trở xuống

Tên của tệp hình ảnh của bạn cũng quan trọng, nhưng không phải vì mục đích tạo kiểu. Chỉ là những cái tên dài, khó hiểu có thể báo hiệu bộ lọc thư rác ở một số khách hàng. Đảm bảo tên hình ảnh của bạn ngắn gọn và phù hợp. Ví dụ. Coffee-cup.jpg is a lot better than image2-1539760546.jpg

3. Hoạt hình và video. Hoạt ảnh trong email được tạo bằng ảnh GIF vì không có hoạt ảnh CSS. Và phát video trong email đơn giản là không được hỗ trợ bởi nhiều ứng dụng email, ngay cả bởi những ứng dụng lớn như Gmail và Yahoo

Một cách đơn giản để khắc phục điều này là sử dụng hình ảnh có nút phát ở giữa. Hình ảnh là một liên kết, khi được nhấp vào, sẽ mở trình duyệt và phát video

Đây là một ví dụ từ Platforma 2

4. nút. Vì hình ảnh không tải theo mặc định trên một số ứng dụng email, nên tốt nhất là không có hình ảnh làm nút. Thay vào đó, bạn nên sử dụng các nút HTML, còn được gọi là nút chống đạn

Vì các nút thúc đẩy CTA của bạn và là một trong những yếu tố quan trọng nhất trong email, nên đừng để nó có cơ hội hiển thị

Ví dụ: mọi nút trong email này từ Adidas đều là nút chống đạn

5. thẻ được hỗ trợ. Vì email thiếu các tiêu chuẩn cứng nhắc nên nhiều khách hàng không hỗ trợ các công nghệ web hiện đại. Vì vậy, một nguyên tắc chung là mã của bạn càng cũ thì càng hiển thị tốt hơn trong ứng dụng email

Điều này có nghĩa là

  • HTML 4 thay vì HTML 5
  • CSS2 thay vì CSS3
  • Bảng thay vì div

Không phải là HTML 5 sẽ không hiển thị. Chỉ là email của bạn có thể gặp sự cố hiển thị trên nhiều ứng dụng email

Quy tắc tương tự cũng ảnh hưởng đến các đoạn văn và thẻ tiêu đề, vì chúng có xu hướng hiển thị không nhất quán giữa các ứng dụng khách, vì vậy hãy luôn kiểm tra xem các thẻ này có ảnh hưởng đến giao diện email của bạn không

Và trong khi chúng ta đang bàn về chủ đề thẻ, điều đáng nói là bạn không nên thêm nhiều hơn một lớp vào thẻ vì một số khách hàng không nhận ra nhiều lớp

Một cách khác là kết hợp nhiều kiểu trong thẻ hoặc sử dụng kiểu nội tuyến

6. Thu nhỏ HTML của bạn. Phiên bản rút gọn của email HTML của bạn là phiên bản mà tất cả các khoảng trắng thừa đã bị xóa. Điều này làm giảm kích thước tệp, cho phép email của bạn tải nhanh hơn

Một số trình chỉnh sửa email cung cấp cho bạn tùy chọn để thu nhỏ HTML của bạn trực tiếp, nhưng nếu không, có những công cụ như Willpeavy và HTML minifier cho việc đó

Kiểm tra email của bạn

Thử nghiệm có thể cứu bạn khỏi các sự cố kết xuất có thể xuất hiện. Rất may, có những công cụ tuyệt vời giúp việc kiểm tra email giữa các máy khách và thiết bị trở nên dễ dàng

Hai loại phổ biến nhất là Litmus và Email On Acid. Cả hai đều là công cụ trả phí, nhưng nếu email là một phần quan trọng trong doanh nghiệp của bạn thì việc kiểm tra không phải là thứ bạn nên bỏ qua

Sử dụng các mẫu email HTML trong Vero

Nếu bạn là khách hàng của Vero Cloud hoặc Connect, bạn sẽ có quyền truy cập vào nhiều mẫu HTML sẵn sàng để chỉnh sửa miễn phí của chúng tôi

Từ thông tin cập nhật sản phẩm đến thông báo của công ty, việc tạo một email đẹp mắt cũng dễ dàng như chọn một mẫu từ thư viện mẫu HTML miễn phí của chúng tôi, chỉnh sửa và cá nhân hóa nó rồi nhấn gửi

 

Bạn có thể đọc thêm về cách sử dụng các mẫu HTML trong Vero tại đây

Vero tự động tạo phiên bản văn bản thuần túy của email của bạn cho những khách hàng không hỗ trợ HTML. Để ghi đè phiên bản được tạo tự động, bạn có thể thêm văn bản thuần túy tùy chỉnh của riêng mình

Ví dụ truyền cảm hứng về các mẫu email

1. Gặp

Một trong những lợi ích của việc sử dụng email HTML là chúng giúp giữ thông điệp của chúng tôi về thương hiệu. Email này từ Meetup sử dụng logo và bảng màu giống như trang web của họ

2. GasBuddy

Trong email này, Gasbuddy cho thấy rằng các email HTML rất đáng để nỗ lực

Làm thế nào khác bạn có thể cấu trúc dữ liệu như thế này trong một email?

Email HTML cho phép bạn lấy dữ liệu từ nguồn dữ liệu bên ngoài để bạn có thể tạo email động thay đổi dựa trên dữ liệu người dùng

3. Tủ quần áo bong bóng

Tiếp thị là một phần kể chuyện và email HTML cho chúng tôi khả năng làm cho câu chuyện của chúng tôi hấp dẫn và hấp dẫn hơn đối với người đọc

Lấy email này từ kho Bubs làm ví dụ

Giọng điệu của email vui tươi và hoàn toàn phù hợp với thương hiệu Bub's Warehouse

4. Google

Hình ảnh có thể làm cho email HTML hấp dẫn hơn nhưng nếu chúng không được bật trên ứng dụng khách của người nhận – điều đó có thể dẫn đến trải nghiệm tồi tệ

Để đảm bảo điều này không xảy ra, hãy xem xét việc chặn hình ảnh. Đây là email từ Google có và không có chặn hình ảnh

Văn bản thay thế đủ mô tả để chúng tôi vẫn có được trải nghiệm nhất quán theo bất kỳ cách nào

Con đường phía trước

Mặc dù việc tạo các mẫu email HTML có thể hơi phức tạp, nhưng lợi ích của email vượt xa chi phí của chúng. Để tạo email HTML, bạn có thể sử dụng mẫu có sẵn, công ty thiết kế email hoặc thậm chí là trình chỉnh sửa trực quan

Dù bạn chọn tùy chọn nào, bạn phải luôn thử nghiệm trên các ứng dụng khách và kích thước màn hình khác nhau để đảm bảo thông điệp của bạn giống nhau đối với tất cả khách hàng của bạn

Hãy nhớ chuẩn bị email HTML của bạn có tính năng chặn hình ảnh và giống như các công ty trong ví dụ trên, tìm cách kết hợp dữ liệu, hướng dẫn phong cách thương hiệu của bạn cũng như nội dung hấp dẫn trực quan trong email của bạn

Làm cách nào để tạo một mẫu email trong HTML?

Cách tạo email HTML .
Mở một ứng dụng nơi bạn có thể nhập mã HTML. .
Bắt đầu loại tài liệu HTML của bạn. .
Tạo phần thân và bảng chính. .
Thiết kế cấu trúc mẫu email và tiêu đề. .
Tạo khu vực nội dung. .
Thay đổi kiểu của chân trang mẫu email. .
Tạo kiểu cho văn bản. .
Kiểm tra email

Làm cách nào để gửi email trong HTML?

Thẻ HTML cung cấp cho bạn tùy chọn chỉ định địa chỉ email để gửi email. Trong khi sử dụng thẻ làm thẻ email, bạn sẽ sử dụng mailto. địa chỉ email cùng với thuộc tính href. Sau đây là cú pháp sử dụng mailto thay vì sử dụng http. Mã này sẽ tạo liên kết sau mà bạn có thể sử dụng để gửi email. use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http. This code will generate the following link which you can use to send email.

Tôi có thể gửi email dựa trên HTML không?

Nhấp vào hộp văn bản chính trong cửa sổ "Soạn thư", sau đó nhấn Ctrl + V [Windows] hoặc ⌘ Command + V [Mac] . Nội dung của trang HTML sẽ xuất hiện trong email chính xác như được định dạng trên trang HTML. Gửi email của bạn. Nhấp vào nút Gửi trong cửa sổ "Soạn thư" để thực hiện việc này.

Làm cách nào để gửi email HTML CSS?

Cách thành công với CSS trong email HTML .
Sử dụng CSS nội tuyến. Nếu bạn bắt đầu sử dụng CSS, cách tốt nhất của bạn là sử dụng mã nội tuyến. .
Tránh CSS nhúng và CSS bên ngoài trong email HTML. .
Tránh xa hình ảnh nền. .
Xem những nền tảng mà khán giả của bạn đang sử dụng. .
Tuyệt đối không sử dụng CSS

Chủ Đề