Hướng dẫn how to create html email - cách tạo email html

Khi bạn tạo email bằng công cụ kéo và thả hoặc dựa trên mô-đun, bạn thực sự đang tạo email HTML.

Có hai loại email chính bạn có thể gửi và nhận: email văn bản đơn giản (đây chính xác là những gì chúng nghe giống như - bất kỳ email nào chỉ chứa văn bản cũ không có định dạng) và email HTML, được định dạng và tạo kiểu CSS.

Email HTML rất dễ phát hiện - hầu hết các email tiếp thị đa phương tiện theo kiểu trong hộp thư đến của bạn là email HTML.

Là một nhà tiếp thị, có lẽ bạn đã so sánh các email HTML so với các email văn bản đơn giản và nhận ra rằng có những lợi ích khác nhau cho từng loại. Email HTML không tốt hơn các email văn bản đơn giản và trong các tình huống khác nhau, cả hai loại có thể là một phần của chương trình tiếp thị qua email thành công.

Ở đây, những gì một HTML trông như thế nào trên mặt trước. Nhấp vào nút HTML để xem mã đằng sau nó.

Xem mẫu email HTML từ HubSpot của Christina Perricone (@HubSpot) trên Codepen.

Trong bài viết này, chúng tôi sẽ đề cập đến cách bạn có thể bắt đầu tạo email HTML, bất kể mức độ trải nghiệm và sự thoải mái của bạn với mã hóa và chia sẻ một số mẫu miễn phí bạn có thể sử dụng. Hãy đi sâu vào.

Cách tạo email HTML

Tin tốt: Bạn thực sự không cần phải biết cách viết mã để tạo email HTML.

Hầu hết các công cụ tạo và gửi email (như HubSpot) sẽ cung cấp các mẫu HTML được định dạng sẵn, sẵn sàng để cho phép bạn thiết kế email mà không cần truy cập mã thực tế ở phía sau.

Khi bạn thực hiện các thay đổi trong trình chỉnh sửa email, những thay đổi đó sẽ được mã hóa tự động vào sản phẩm cuối cùng. Các công cụ xây dựng email như thế này là một lựa chọn lý tưởng nếu bạn không có nhà thiết kế email trong nhóm của mình, nhưng bạn vẫn muốn gửi email tiếp thị trông chuyên nghiệp.

Vẫn muốn tạo một email HTML từ đầu?

Nếu bạn thoải mái với HTML và muốn kiểm soát trực tiếp hơn mã email của mình, hầu hết các công cụ email sẽ cho phép bạn nhập các tệp HTML trực tiếp để sử dụng làm mẫu email tùy chỉnh.

Có rất nhiều mẫu email HTML miễn phí có sẵn trên web (một số trong đó chúng tôi sẽ chia sẻ bên dưới) và nếu bạn biết theo cách của mình xung quanh một tệp HTML, thường rất đơn giản để điều chỉnh mẫu với công cụ xây dựng email của công cụ xây dựng email của lựa chọn của bạn.

Để tạo một email HTML hoàn toàn từ đầu, bạn sẽ cần có kiến ​​thức nâng cao về HTML (hoặc làm việc với một nhà phát triển làm). Hướng dẫn này cung cấp một cái nhìn tổng quan chắc chắn về việc mã hóa một email HTML cơ bản. Bởi vì quá trình tạo email HTML từ đầu có thể liên quan, chúng tôi khuyên bạn nên làm việc với nhà phát triển hoặc sử dụng mẫu email HTML được làm sẵn.

Phát triển một email HTML dành riêng cho HubSpot?

Nếu bạn đang phát triển mẫu email HTML dành riêng để sử dụng trong HubSpot, bạn sẽ muốn đảm bảo rằng bạn bao gồm các mã thông báo Hubl cần thiết (chúng đảm bảo email của bạn có thể được tùy chỉnh và tuân thủ luật CAN-SPAM). Bạn có thể tìm thấy một hướng dẫn đầy đủ để mã hóa các mẫu email HTML dành riêng cho HubSpot tại đây. Hoặc cách khác, chỉ cần sử dụng trình chỉnh sửa email đơn giản của chúng tôi.

HTML email thực hành tốt nhất

1. Đảm bảo email HTML của bạn đáp ứng cho các kích thước và thiết bị màn hình khác nhau.
2. Hãy chắc chắn rằng kiểu dáng của bạn hoạt động trong các ứng dụng email khác nhau.
3. Hãy ý thức về việc email HTML của bạn mất bao lâu để tải.
4. Lập kế hoạch (càng nhiều càng tốt) cho sự không nhất quán của người dùng cuối.
5. Tiến hành thử nghiệm kỹ lưỡng.

Bây giờ bạn đã hiểu những điều cơ bản của những gì phát triển email HTML, chúng ta hãy xem qua một vài thực tiễn tốt nhất quan trọng mà bạn nên ghi nhớ. Bất kể bạn dự định sử dụng phương pháp nào để tạo email HTML, những thực tiễn tốt nhất này sẽ giúp cải thiện thiết kế, trải nghiệm người dùng và khả năng gửi email của bạn.

1. Đảm bảo email HTML của bạn đáp ứng với các kích thước và thiết bị màn hình khác nhau.

Cách email của bạn nhìn vào hộp thư đến của người dùng phụ thuộc vào nhiều yếu tố khác nhau.

Một trong những yếu tố lớn nhất và rõ ràng nhất là kích thước màn hình của thiết bị mà nó đang được xem. Một email trông tuyệt vời và được định dạng tốt trên máy tính để bàn có thể dễ dàng biến thành một mớ văn bản và hình ảnh chồng chéo không thể đọc được khi được xem trên màn hình điện thoại thông minh.

Để đảm bảo các email HTML của bạn trông giống như cách bạn dự định trên một phổ rộng các kích thước màn hình, điều tốt nhất bạn có thể làm là giữ cho bố cục của bạn đơn giản và đơn giản. Khi bạn bắt đầu thêm các phần tử phức tạp hơn như nhiều cột và hình ảnh nổi, việc dịch định dạng email của bạn trở nên khó khăn hơn cho các kích thước màn hình khác nhau.

Nếu bạn quyết định phát triển bố cục phức tạp hơn, hãy đảm bảo bạn đang tích cực giải quyết cách các yếu tố sẽ được sắp xếp lại cho phù hợp với các kích thước màn hình khác nhau. Ví dụ: nếu email của bạn hiển thị dưới dạng nhiều cột trên máy tính để bàn, cùng cấu trúc đó sẽ không bay trên thiết bị di động-bạn sẽ cần sử dụng các truy vấn phương tiện để xác định cách các phần tử sẽ được hiển thị trên các kích thước màn hình khác nhau.

Hãy nhớ rằng, việc phát triển các email HTML thực sự phản hồi vượt xa cấu trúc và định dạng của thông điệp của bạn. Hãy suy nghĩ về cách trải nghiệm người dùng tổng thể của email của bạn sẽ được cảm nhận trên các thiết bị khác nhau. Đảm bảo rằng các lựa chọn phông chữ của bạn cũng dễ đọc trên thiết bị di động như trên máy tính để bàn và sử dụng các nút hoặc CTA thân thiện với thiết bị di động thay cho văn bản siêu liên kết ).

Bạn có thể tìm thấy hướng dẫn chuyên sâu hơn của chúng tôi về các thực tiễn tốt nhất của email di động ngay tại đây.

2. Đảm bảo kiểu dáng của bạn hoạt động trong các ứng dụng email khác nhau.

Một yếu tố lớn khác ảnh hưởng lớn đến cách các email HTML của bạn xuất hiện trong hộp thư đến của người đăng ký của bạn là ứng dụng email mà họ đang sử dụng để mở tin nhắn. Mỗi ứng dụng email đều tải email một chút khác nhau, vì vậy một email trông có vẻ như trong Gmail có thể sẽ trông khác nhau trong Outlook.

May mắn thay, nếu bạn biết hầu hết các ứng dụng email phổ biến đều tải các yếu tố HTML và CSS cụ thể, bạn có thể tạo trải nghiệm khá nhất quán trên các hộp thư đến của người dùng khác nhau. Đó là tất cả về việc biết những thẻ không được hỗ trợ nào để tránh và thích nghi cho phù hợp. Hướng dẫn toàn diện này giải thích cách các ứng dụng email phổ biến nhất (bao gồm Gmail và nhiều phiên bản của Outlook) hỗ trợ và hiển thị các yếu tố kiểu dáng khác nhau.

Bạn cũng có thể kiểm tra một bài viết chúng tôi đã viết về tối ưu hóa email cho các ứng dụng email khác nhau.

3. Hãy ý thức về thời gian email HTML của bạn mất bao lâu để tải.

Mất bao lâu email của bạn để tải rất có thể là sự khác biệt giữa việc đạt được một khách hàng mới và mất một thuê bao thất vọng. Mặc dù có thể hấp dẫn để tận dụng tất cả các tùy chọn kiểu dáng và cơ hội khác nhau để kết hợp hình ảnh mà email HTML cung cấp, nhưng không có vấn đề gì nếu email của bạn mất quá nhiều thời gian để tải.

Khi bạn thiết kế email HTML của mình, hãy duy trì ý thức về việc email của bạn sẽ mất bao lâu - đặc biệt là nếu ai đó, hãy nói, mở tin nhắn của bạn trên Subway Subway của họ với kết nối dữ liệu yếu. Dưới đây là một vài bước nhỏ bạn có thể thực hiện sẽ đi một chặng đường dài để cải thiện thời gian tải.

Sử dụng hình ảnh một cách tiết kiệm.

Bằng cách đó, bạn sẽ củng cố thông điệp bạn muốn nhận được cho người đăng ký. Luôn luôn sử dụng máy nén hình ảnh (như máy nén.io) để giảm kích thước tệp càng nhiều càng tốt. Hầu hết các máy nén hình ảnh có thể giảm đáng kể kích thước tệp của hình ảnh mà không ảnh hưởng đến chất lượng, vì vậy thực hiện bước thêm này sẽ không làm tổn thương tính toàn vẹn trực quan của email của bạn.

Sử dụng phông chữ web tiêu chuẩn.

Phông chữ tùy chỉnh là tuyệt vời để tăng cường trang đích, nhưng họ có thể thêm một lớp phức tạp bên ngoài khi thêm vào email. Như chúng tôi đã nói ở trên, tất cả các ứng dụng email xử lý các yếu tố kiểu khác nhau và điều này đặc biệt mở rộng sang phông chữ. Để an toàn, hãy sử dụng phông chữ web tiêu chuẩn và kiểm tra để đảm bảo ứng dụng email hầu hết người đăng ký của bạn sử dụng hỗ trợ một phông chữ cụ thể.

Hãy thử một máy tính minifier HTML.

Một minifier HTML (như minifycode.com và smallseotools.com) tự động xóa mã không cần thiết trong tệp HTML. Các yếu tố lặp đi lặp lại, thêm các yếu tố sẽ bị loại bỏ, nhưng kết xuất thực tế của email của bạn sẽ giữ nguyên (luôn luôn kiểm tra nó!). Mỗi dòng mã ảnh hưởng đến thời gian một email mất bao lâu để tải, vì vậy hãy dành thời gian để xóa mã rác có thể có tác động tích cực đến thời gian tải.

Giữ thông điệp của bạn tập trung vào một mục tiêu duy nhất.

Cách tốt nhất để giảm thời gian tải email là giảm số lượng nội dung bạn thêm vào mỗi email của bạn. Nó có vẻ rõ ràng, nhưng quá nhiều nhà tiếp thị cố gắng nhét quá nhiều nội dung vào email của họ. Điều đó không chỉ dẫn đến trải nghiệm người dùng không phù hợp (không ai muốn đọc một cuốn tiểu thuyết ở dạng email), mà còn có thể gửi thời gian tải của bạn ra khỏi bảng xếp hạng và khiến người dùng từ bỏ email của bạn. Giữ cho nó đơn giản, và người dùng của bạn sẽ cảm ơn bạn.

4. Lập kế hoạch (càng nhiều càng tốt) cho sự không nhất quán của người dùng cuối.

Kích thước màn hình và ứng dụng email không phải là yếu tố duy nhất có thể thay đổi cách gửi email HTML của bạn trong hộp thư đến của người đăng ký của bạn. Các yếu tố như phiên bản ứng dụng email của họ, hệ điều hành, cài đặt người dùng duy nhất, phần mềm bảo mật của chúng và liệu chúng có tự động tải hình ảnh có thể ảnh hưởng đến cách tải email của bạn.

Như bạn có thể đoán bằng danh sách các yếu tố khổng lồ, cố gắng giải quyết tất cả chúng (mỗi lần bạn gửi email) có thể sẽ đủ để khiến bạn ném máy tính của mình qua phòng.

Nhưng bạn không cần phải hoàn toàn bất lực khi đối mặt với các biến này-bạn chỉ cần thực hiện một kế hoạch trước một chút.

Xem xét việc tạo một phiên bản trang web của email của bạn.

Điều này giống như cho email của bạn một nút không an toàn. Nếu vì một lý do nào đó - do một trong nhiều yếu tố được thảo luận ở trên - email được thiết kế đáng yêu của bạn như là một mớ hỗn độn tuyệt đối khi một người đăng ký mở nó, ít nhất họ sẽ có tùy chọn để nhấp vào "Xem dưới dạng trang web" và xem email là Bạn dự định nó sẽ được.

Vì các yếu tố phong cách hiển thị nhất quán hơn nhiều trên các trình duyệt web so với ứng dụng email, bạn sẽ có thể kiểm soát nhiều hơn phiên bản trang web của tin nhắn của mình. Trong HubSpot, có một tùy chọn bạn có thể bật sẽ tự động tạo phiên bản trang web.

Tạo một phiên bản văn bản đơn giản của email của bạn.

Một phiên bản văn bản đơn giản chính xác là những gì nó nghe giống như - một phiên bản thay thế của email HTML của bạn hiển thị bằng văn bản hoàn toàn đơn giản. Việc thêm một phiên bản văn bản đơn giản của email HTML của bạn rất quan trọng vì một số ứng dụng email và cài đặt người dùng không thể (hoặc chọn không) tải HTML.

Nếu đây là trường hợp, máy khách sẽ tìm kiếm một phiên bản thay thế văn bản đơn giản của email HTML của bạn để tải cho người dùng. Nếu một người không tồn tại, nó có thể báo hiệu cho máy chủ email của người nhận rằng tin nhắn của bạn là spam - hoặc có khả năng nguy hiểm.

Hầu hết các công cụ email như HubSpot sẽ tự động cung cấp một phiên bản văn bản đơn giản hiển thị nếu máy chủ email của người nhận yêu cầu, nhưng nếu bạn mã hóa email HTML từ đầu, bạn sẽ cần tạo một cái gì đó gọi là tin nhắn MIME nhiều phần.

Thông báo MIME nhiều phần là một email chứa cả phiên bản văn bản và HTML thuần túy của cùng một email. Nếu ứng dụng email hoặc hệ thống bảo mật email của người nhận không cho phép email HTML, phiên bản văn bản đơn giản sẽ được hiển thị. Đây là một quá trình đòi hỏi kiến ​​thức nâng cao về mã hóa, vì vậy chúng tôi khuyên bạn nên làm việc với nhà phát triển.

Hãy chắc chắn rằng email của bạn vẫn có ý nghĩa nếu hình ảnh không tải.

Một số người dùng đã tắt quá trình tải hình ảnh tự động, điều đó có nghĩa là họ sẽ thấy email của bạn mà không cần hình ảnh khi họ mở nó. Vì lý do này, đừng hoàn toàn dựa vào hình ảnh để có được ý nghĩa của thông điệp của bạn và luôn thêm văn bản Alt vào các hình ảnh bạn bao gồm. Alt-text sẽ tải ngay cả khi hình ảnh không, vì vậy người đăng ký của bạn có thể có được ý tưởng chung về những gì hình ảnh bao gồm.

5. Tiến hành thử nghiệm kỹ lưỡng.

Cuối cùng, bạn sẽ cần kiểm tra email HTML của mình ở mọi giai đoạn phát triển để đảm bảo nó hoạt động trên các ứng dụng email, hệ điều hành và loại thiết bị khác nhau. Đừng chờ đợi cho đến khi kết thúc quá trình để kiểm tra email của bạn - kiểm tra vì bạn làm việc là cách tốt nhất để phát hiện sự không nhất quán giữa các ứng dụng email khác nhau và đảm bảo bạn tạo trải nghiệm phù hợp nhất có thể cho người nhận.

Một số công cụ email (như HubSpot) cung cấp thử nghiệm trong ứng dụng trong các nhà xây dựng email của họ để làm cho quá trình dễ dàng hơn. Nếu bạn đang làm việc từ đầu, bạn có thể sử dụng một công cụ như kiểm tra email HTML hoặc xem trước để hiểu rõ hơn về cách email của bạn sẽ xem xét các ứng dụng và thiết bị email khác nhau.

Có một số lượng lớn các mẫu email HTML có sẵn trên web và chúng khác nhau về chất lượng, khả năng đáp ứng và giá cả. Chúng tôi đã kết hợp một lựa chọn các mẫu email HTML miễn phí cung cấp trải nghiệm người dùng đáp ứng. Hãy chắc chắn đọc các điều khoản và điều kiện trên từng mẫu riêng lẻ trước khi sử dụng.

1. Mẫu email HTML miễn phí HubSpot

Bao gồm trong phiên bản MIỄN PHÍ của Hub Marketing, mẫu này là một nơi tuyệt vời để bắt đầu nếu bạn đang tìm kiếm một mẫu có nhiều chỗ để tùy chỉnh. Bạn có thể dễ dàng thêm hình ảnh, văn bản và nút trong trình soạn thảo kéo và thả trực quan và bạn có thể tự tin rằng các mẫu bạn thiết kế sẽ đáp ứng hoàn toàn trên bất kỳ thiết bị nào.

2. TIN TỨC TIN TỨC HTML Mẫu email theo Màn hình chiến dịch

Mẫu hiện đại này là tinh vi và tối thiểu. Bảng màu tinh tế và thiết kế đơn giản làm cho nó trở thành một lựa chọn linh hoạt cho nhiều ngành công nghiệp và mục đích khác nhau, và nó đã được thử nghiệm trên các ứng dụng và thiết bị email khác nhau để đảm bảo trải nghiệm người dùng nhất quán trên các nền tảng khác nhau.

3. Mẫu email HTML miễn phí của Unlayer

Mặc dù mẫu này được thiết kế cho một công ty thể dục, bạn có thể dễ dàng điều chỉnh nó cho riêng mình. Mẫu sạch, bị tắt này là một cách tuyệt vời để hiển thị nội dung mà nhóm của bạn đã tạo và kết nối các thuê bao với các sản phẩm hoặc bài đăng trên blog gần đây nhất của bạn. Thiết kế có hai cột đáp ứng đầy đủ với nhiều tùy chọn bảng màu và phòng ở trên cùng để làm nổi bật một cuộc gọi hành động.

4. Mẫu email HTML miễn phí tối giản

Bằng chứng là đôi khi ít thực sự hơn là nhiều hơn, thiết kế dễ dàng, đáp ứng đầy đủ này tận dụng tối đa khoảng trắng và giữ sự tập trung vững chắc vào lời nói và yếu tố thị giác của bạn. Nếu không có phiền nhiễu, nội dung của bạn có thể thực sự tỏa sáng - trên bất kỳ thiết bị nào.

5. Mẫu email HTML miễn phí từ Bee miễn phí

Bộ sưu tập các mẫu nguồn mở miễn phí này hoàn toàn đáp ứng và được thử nghiệm trên các ứng dụng email phổ biến. Bạn có thể chỉnh sửa và xây dựng chúng trên nền tảng miễn phí của BEE, sau đó xuất tệp HTML sang ổ đĩa cục bộ của bạn.

Đây là một lựa chọn lý tưởng nếu bạn muốn có một nơi khởi đầu được đánh bóng, phong cách hơn, nhưng bạn vẫn muốn có thể tùy chỉnh thiết kế để phù hợp với nhu cầu của công ty bạn. Mỗi mẫu có sẵn ở nhiều định dạng cho các mục đích tiếp thị khác nhau, như email giao dịch, thu thập NPS và đăng ký đăng ký đăng ký email.

6. Mẫu email HTML miễn phí theo màn hình chiến dịch

Thiết kế hoàn hảo, kiểu dáng đẹp này từ Màn hình chiến dịch sẽ hoàn hảo để gửi mã giảm giá - nhưng nó cũng có thể đóng vai trò như một cách phong cách để giới thiệu các sản phẩm mới nhất của bạn cho người đăng ký email. Nó cũng đáng để kiểm tra Màn hình chiến dịch Thư viện đầy đủ các mẫu email phản hồi.

Tạo email HTML để tăng số lượng thuê bao của bạn

Email HTML là một cách hấp dẫn để chia sẻ những gì xảy ra trong doanh nghiệp của bạn và giữ cho người đăng ký quay lại để biết thêm. Với các mẹo và mẫu mà chúng tôi đã chia sẻ, bạn đang trên đường tạo ra các email HTML tuyệt đẹp mà không cần viết một dòng mã duy nhất.

Lưu ý của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 6 năm 2019 và đã được cập nhật về tính toàn diện.