Email HTML tùy chỉnh là gì?

Nhận đúng thông điệp có thể khó khăn. Đặc biệt đối với các chủ doanh nghiệp đang cố gắng liên lạc với khách hàng mục tiêu của họ. Để thực hiện thành công, nhiều người chuyển sang email HTML tùy chỉnh. Vì chiến thuật này đã cho thấy kết quả đáng kinh ngạc về việc tăng mức độ tương tác và phản ứng của đối tượng mục tiêu, nên việc sử dụng các email như vậy chứng tỏ là một hướng đi đúng đắn. Ngoài ra, nó có rất nhiều lợi ích sẽ được thảo luận dưới đây

Mục lục

Email văn bản thuần túy VS Email HTML

Để bắt đầu, cần phải phân biệt rõ ràng giữa email văn bản thuần túy và email HTML. Email văn bản thuần túy, như tên cho thấy, chỉ là văn bản thuần túy, loại bỏ mọi định dạng. Nó không được tăng cường trực quan, do đó không có kiểu dáng và kích cỡ, màu sắc hoặc hình ảnh khác nhau cũng như văn bản liên kết siêu liên kết. Đó là một cấu trúc đơn giản của văn bản được mọi người sử dụng cho giao tiếp điện tử của họ

Mặt khác, có email HTML hoặc thư Ngôn ngữ đánh dấu siêu văn bản giàu hình ảnh bao gồm định dạng nặng chẳng hạn như các kiểu và kích cỡ khác nhau, từ in đậm, in nghiêng hoặc gạch chân, hình ảnh, logo, v.v. Đây là một bố cục bắt mắt phải được thực hiện một cách chuyên nghiệp để nó có thể hoạt động trên các ứng dụng email khác nhau

Từ nhiều lợi ích mà email HTML mang lại, đây là 4 lợi ích hàng đầu

Một thiết kế email sát thủ

Khi bạn đang cố gắng thuyết phục đối tượng mục tiêu rằng bạn thực sự có thứ họ cần xem, bạn cần thu hút sự chú ý của họ. Bạn chỉ có thể làm điều này bằng một cuộc tấn công trực quan vào hộp thư đến của họ. Với thiết kế email tùy chỉnh, bạn có thể đặt màu sắc của thương hiệu, logo và khẩu hiệu của bạn trước mắt họ và với hình ảnh của sản phẩm hoặc dịch vụ bạn cung cấp, bạn sẽ khiến họ nghĩ “Được rồi, tôi đang lắng nghe. ” Thêm vào đây các nút CTA và bạn sẽ khiến chúng hấp dẫn ngay lập tức

Thêm khách hàng tiềm năng và chuyển đổi

Email HTML khiến người nhận hành động. Với các liên kết có thể nhấp và các nút CTA, bạn điều hướng họ qua một hành trình đơn giản để thỏa mãn nhu cầu, sự tò mò hoặc khao khát khám phá của họ. Về cơ bản, họ đang tương tác với thông điệp bạn đang gửi cho họ và bạn đang giao tiếp trước khi được giới thiệu cá nhân

Kiểm soát một lượng lớn khách hàng tiềm năng

Có nhiều nền tảng dịch vụ email bạn có thể sử dụng để theo dõi hiệu suất của email. Các công cụ và báo cáo theo dõi email này sẽ đặt bạn vào vị trí của một người quan sát và bất cứ lúc nào bạn cũng sẽ biết ai đã làm gì với email bạn đã gửi. Dựa trên thông tin bạn thu thập, bạn có thể đo lường kết quả và hiệu quả, đồng thời sử dụng dữ liệu này để cải thiện tiếng nói của thương hiệu, dịch vụ hoặc lợi ích chung trong doanh nghiệp của bạn

Tập trung vào những thứ tốt

Với các email HTML, bạn đang tập trung vào các điểm chính của thư bằng cách sử dụng các định dạng và phương tiện khác nhau. Đây là điều mà người nhận đánh giá cao vì không ai muốn đọc những email dài với nhiều thông tin trong đó. Mọi người muốn hình ảnh và thứ gì đó cho thấy đâu là phần quan trọng nhất. Họ không đọc, họ lướt qua thư một cách nhanh chóng và tập trung vào phần thu hút sự chú ý của họ. Bằng cách có một email HTML, bạn sẽ có thể tạo điều kiện thuận lợi cho quá trình này cho người nhận

Điểm mấu chốt

Chúng không chỉ cải tiến về mặt hình ảnh mà còn có các email HTML chuyên nghiệp hơn rất nhiều. Bạn đang truyền tải thông điệp thương hiệu của mình theo cách đại diện và bạn đang nói với khách hàng tiềm năng của mình rằng bạn muốn kinh doanh. Đối với họ, thật yên tâm khi biết rằng họ đang đặt niềm tin vào một công ty chuyên nghiệp hoặc bỏ tiền để đổi lấy một dịch vụ hoặc sản phẩm chuyên nghiệp

Vì vậy, hãy để lại các email văn bản đơn giản để liên lạc hàng ngày và sử dụng các email HTML để quảng cáo trực quan cho thương hiệu của bạn

Các mẫu email HTML tùy chỉnh là công cụ tốt nhất mà các nhà tiếp thị email có để thúc đẩy các chiến dịch của họ. Quá trình tạo mẫu email tùy chỉnh từ đầu có thể khá khó khăn, nhưng sau khi đọc bài viết này, bạn sẽ có kiến ​​thức để hiểu và quản lý các dự án đó, từ đầu đến cuối

Đây là một bản xem trước ngắn về những gì ở phía trước

Cách tạo email HTML tùy chỉnh hoạt động?

Mọi thứ bắt đầu với thiết kế email. Bạn cần một thiết kế mẫu email phù hợp với nhận diện thương hiệu của bạn và phù hợp với mã hóa email HTML. Thiết kế email không thể có tính tương tác giống như một trang web, đó là lý do tại sao điều quan trọng là bạn phải làm việc với một nhà thiết kế web có kinh nghiệm thực tế trong việc tạo các mẫu email. Một nhà thiết kế email chuyên nghiệp sẽ tạo thiết kế mẫu email của bạn ở định dạng tệp lớp bằng một trong các chương trình thiết kế sau – Photoshop, Sketch hoặc Adobe Illustrator

Sau đó, bạn phải nghĩ xem người đọc sẽ truy cập email của bạn trên thiết bị nào (máy tính để bàn, máy tính xách tay, máy tính bảng hoặc điện thoại di động) và ứng dụng email nào họ sẽ sử dụng (Outlook, Gmail, Ứng dụng Gmail dành cho Android, Apple Mail, v.v.) . Những điều này sẽ xác định bố cục của mẫu email của bạn. Có 5 loại bố cục chính cho email – Chỉ dành cho máy tính để bàn, Phản hồi trên thiết bị di động, Ưu tiên thiết bị di động, Linh hoạt hoặc Kết hợp. Chúng ta sẽ thảo luận những điều này chi tiết hơn sau trong bài viết

Nếu bạn nghĩ đến việc tích hợp mẫu email của mình với nền tảng tiếp thị qua email, bạn phải thông báo trước cho người viết mã email. Một số nền tảng tiếp thị qua email yêu cầu bổ sung các thẻ tùy chỉnh trong mã HTML để mẫu email có thể hoạt động bình thường trong nền tảng của họ

Khi tất cả những điều trên đã được kiểm tra, trình mã hóa email sẽ bắt đầu làm việc trên mẫu email của bạn. Anh ấy sẽ lấy văn bản và hình ảnh từ tệp thiết kế lớp và anh ấy sẽ bắt đầu viết mã HTML, đồng thời kiểm tra tiến độ của mình trong trình duyệt web

Sau khi mã hóa hoàn tất, mẫu email của bạn phải được kiểm tra trên tất cả các thiết bị và ứng dụng email hiện đại để phát hiện sự cố. Chúng tôi cũng sẽ thảo luận về kiểm tra email chi tiết hơn

Giai đoạn 1. Thiết kế

Các yếu tố cần thiết trong thiết kế email và phần mềm thiết kế bạn cần để tạo một thiết kế mẫu email

1. 1 Giới thiệu

Các thiết kế email thường lấy các yếu tố chính dành riêng cho thương hiệu của chúng từ thiết kế trang web. Tính nhất quán của thương hiệu trong email cũng quan trọng như trong bất kỳ lĩnh vực tiếp thị nào khác. Người đọc của bạn sẽ có thể nhanh chóng nhận ra phong cách thương hiệu của bạn khi họ mở email của bạn

Tuy nhiên, email tĩnh hơn một chút so với các trang web hiện đại. Nhiều yếu tố tương tác là tiêu chuẩn cho thiết kế trang web, nhưng yêu cầu Java Script để triển khai, sẽ không tìm thấy vị trí của chúng trong email. Ứng dụng email chỉ đọc HTML và CSS. Điểm khởi đầu tốt để tìm hiểu thêm về thiết kế email là hướng dẫn dành cho người mới bắt đầu của chúng tôi Cách thiết kế mẫu bản tin

1. 2 Phần Mềm Thiết Kế Email

Để tạo các thiết kế email tùy chỉnh chuyên nghiệp, bạn phải sử dụng phần mềm thiết kế chuyên dụng. Một số chương trình thiết kế web phổ biến nhất là Adobe Photoshop, Adobe Illustrator và Sketch. Chúng cho phép bạn tạo các thiết kế email tùy chỉnh trong các tệp được xếp lớp, đây là tiêu chuẩn cho mã hóa web và email. Dưới đây là một số ưu điểm chính của việc làm việc với các tệp lớp

• bạn nhận được tất cả các phần email, với các thành phần liền kề của chúng, được nhóm trong các thư mục lớp riêng biệt – đầu trang, chân trang, nội dung, v.v.;
• nếu có một hình ảnh phức tạp bao gồm nhiều lớp hình ảnh, trình mã hóa email sẽ có thể dễ dàng tách các hình ảnh ra;
• các văn bản có thể được sao chép và đặt trực tiếp vào tệp HTML;
• vân vân

Dưới đây là một số ví dụ tuyệt vời về thiết kế email Thương mại điện tử và Giao dịch từ các thương hiệu hàng đầu mà bạn có thể sử dụng làm nguồn cảm hứng thiết kế

Giai đoạn 2. mã hóa

Ở đây chúng tôi thảo luận về bố cục email, cấu trúc email và chi tiết cụ thể về mã hóa email HTML

2. 1 Trình soạn thảo văn bản

Trình viết mã email sẽ viết HTML và CSS cho email của bạn bằng trình soạn thảo văn bản. Đây là một chương trình giúp anh ấy cấu trúc mã của mình và cũng giúp đọc mã dễ dàng hơn. Trước đây, các lập trình viên trang web và email thường làm việc trên Windows Notepad, nhưng ngày nay có nhiều công cụ chỉnh sửa văn bản tiên tiến hơn để viết mã. Tại MailBakery, chúng tôi sử dụng Sublime Text, nhưng các tùy chọn phổ biến khác là Notepad ++, Chân đế, Komodo và TextMate (dành cho Mac OS)

2. 2 mã bơ

Nếu trình thiết kế email của bạn hoạt động trên Sketch (dành cho iOS), nhưng trình viết mã email của bạn hoạt động trên PC, thì anh ta sẽ không thể mở các tệp Skethc. May mắn thay ai đó nghĩ về vấn đề này và đưa ra một giải pháp. Nó được gọi là Avocode. Đây là chương trình cho phép bạn mở các file Sketch trên máy tính Windows. Sử dụng Avocode, trình mã hóa email của bạn sẽ có thể mở tệp Phác thảo và nhận hình ảnh cũng như văn bản cho email HTML tùy chỉnh của bạn

2. 3 Chọn kiểu bố cục

Như chúng tôi đã giải thích ở phần đầu, tùy thuộc vào ứng dụng email và thiết bị bạn đang nhắm mục tiêu, có 5 bố cục mẫu email mà người viết mã email của bạn có thể chọn

 
Chỉ dành cho máy tính để bàn – Các email HTML tùy chỉnh được mã hóa là Chỉ dành cho máy tính để bàn sẽ trông giống nhau trên cả máy tính để bàn và thiết bị di động. Với sự gia tăng sử dụng điện thoại thông minh, đây là bố cục đang bị đẩy ra khỏi sự tồn tại. Tuy nhiên, nó vẫn là một lựa chọn, vì vậy chúng tôi phải đề cập đến nó. Email Chỉ dành cho Máy tính để bàn có thể được mã hóa, do đó, email này sẽ thu nhỏ kích thước của màn hình mà nó được xem trên đó.

 
Phản hồi trên thiết bị di động – Nội dung của email phản hồi trên thiết bị di động có bố cục dạng cột, sử dụng toàn bộ chiều rộng của màn hình thiết bị di động. Các văn bản và hình ảnh được sắp xếp lại và sắp xếp theo thứ tự khác, điều này giúp cho việc đọc email và tương tác với nó dễ dàng hơn rất nhiều. Trong trường hợp này, người lập trình email tạo phiên bản dành cho máy tính để bàn trước, sau đó sử dụng Truy vấn phương tiện, anh ta chuẩn bị phiên bản dành cho thiết bị di động.

 
Ưu tiên cho thiết bị di động – Sử dụng kiểu bố cục này có nghĩa là phiên bản email dành cho thiết bị di động của bạn quan trọng hơn, do đó, người viết mã email của bạn sẽ tạo phiên bản đó trước. Sau đó, sử dụng Truy vấn phương tiện, anh ấy sẽ chuẩn bị phiên bản dành cho máy tính để bàn. Ý tưởng ở đây là khán giả mà bạn tập trung vào đang sử dụng thiết bị di động ở mức độ mở rộng cao hơn nhiều.

 
Linh hoạt – Đây là bố cục email, cho phép sắp xếp lại các thành phần email cho các kích thước màn hình khác nhau mà không cần sử dụng Truy vấn phương tiện. Vì Ứng dụng Gmail không hỗ trợ Truy vấn phương tiện, đây là cách để tạo phiên bản di động của email HTML tùy chỉnh cho người dùng Ứng dụng Gmail của bạn. Tuy nhiên, đây không phải là bố cục đáp ứng di động thực sự và đôi khi nó không hoạt động như mong đợi. Các truy vấn phương tiện cung cấp cho chúng tôi các công cụ cần thiết để tinh chỉnh bố cục trên thiết bị di động và sự vắng mặt của chúng có nghĩa là đôi khi email của bạn có thể bị hỏng trên thiết bị di động. Việc áp dụng thành công kiểu bố cục Fluid thực sự phụ thuộc vào trải nghiệm của người lập trình email với nó.

 
Kết hợp linh hoạt – Bố cục email này kết hợp mã của bố cục Linh hoạt với Truy vấn phương tiện. Đây là một cách khác để có phiên bản email di động cho Ứng dụng Gmail. Với bố cục Fluid Hybrid, chúng tôi tận dụng tốt nhất từ ​​cả hai thế giới – chúng tôi sử dụng Truy vấn phương tiện để tạo email phản hồi trên thiết bị di động, nhưng chúng tôi cũng quan tâm đến khả năng tương thích của Ứng dụng Gmail. Tuy nhiên, điều này phải trả giá vì bạn cần sử dụng nhiều mã hơn để phù hợp với cả hai kỹ thuật di động trong mẫu email HTML tùy chỉnh của mình.

2. 4 Cấu trúc Email và Mã hóa

Trình mã hóa email sẽ xác định ba phần chính trong email của bạn – tiêu đề, nội dung email và chân trang – và anh ấy sẽ bắt đầu mã hóa mẫu email tùy chỉnh từ trên xuống dưới

 
Tiêu đề – Thiết kế email hợp lý yêu cầu mẫu email của bạn bắt đầu bằng tiêu đề. Tiêu đề email thường chứa logo công ty, khẩu hiệu, liên kết truyền thông xã hội, ngày thực hiện chiến dịch email, v.v.

 
Nội dung email – Đây là nơi gửi thông điệp chính của email. Đối với các bản tin, bạn có các bản xem trước bài viết của mình trong nội dung email, đối với các email thương mại điện tử, danh sách sản phẩm sẽ có ở đó. Hình ảnh, biểu đồ, bảng và nút kêu gọi hành động cũng có trong nội dung email.

Có nhiều loại phần và kiểu mà bạn có thể sử dụng để thiết kế thông điệp của mình. Khám phá sự đa dạng của thiết kế phần email trong bài viết 40 phần mẫu email để truyền cảm hứng cho các thiết kế tương lai của bạn

 
Chân trang – Thường chứa logo công ty, văn bản bản quyền, địa chỉ liên hệ và liên kết mạng xã hội.

2. 5 chi tiết cụ thể về mã hóa email

Các kỹ thuật mã hóa mà chúng tôi sử dụng khi làm việc trên các email tùy chỉnh không giống với các kỹ thuật mà chúng tôi sử dụng để mã hóa các trang web. Điều này là do hầu hết các ứng dụng email phổ biến trên máy tính để bàn vẫn không đọc được HTML và CSS3 hiện đại. Ở giai đoạn này, chúng tôi mã hóa tất cả các email của mình bằng cách sử dụng bảng và CSS3 chỉ được chấp nhận bởi các ứng dụng email di động

2. 6 Thêm CSS

Nếu HTML chịu trách nhiệm về nội dung email của bạn và vị trí của nó, thì CSS cho phép bạn làm cho nội dung đó trông đẹp mắt bằng cách thêm màu sắc và bằng cách chọn kiểu và kích thước phông chữ phù hợp, v.v.

It’s important to note that we don’t write the CSS in the of the emails, where it usually goes when we code webpages. This is because some of the most popular email clients strip the from your code and you’ll loose the whole email styling if you place the CSS there. In email we place the CSS inline, we stick it directly to the section it is meant to style.

Nếu bạn tò mò muốn tìm hiểu thêm về việc sử dụng CSS trong mã hóa email, đây là một số tài nguyên hữu ích về Tạo nền và Hỗ trợ CSS trong Email

giai đoạn 3. thử nghiệm

Một phần quan trọng của mã hóa email HTML tùy chỉnh là kiểm tra email và sửa lỗi

Khi công việc viết mã trên email của bạn hoàn tất, việc email hiển thị chính xác trong trình duyệt web của bạn là chưa đủ, nó phải được kiểm tra trên tất cả các ứng dụng email chính. Để thực hiện việc này một cách nhanh chóng và hiệu quả, chúng tôi khuyên bạn nên sử dụng các dịch vụ kiểm tra email như Litmus và Email On Acid. Cả hai dịch vụ đều được thanh toán

Trong trường hợp bạn đang tìm kiếm một cách miễn phí để kiểm tra email của mình, bạn có thể thiết lập tài khoản với các nhà cung cấp dịch vụ email phổ biến nhất, gửi cho mình một email kiểm tra và kiểm tra xem nó hiển thị như thế nào trên cả máy tính để bàn và thiết bị di động

giai đoạn 4. Tích hợp phần mềm email

Nhiều nền tảng tiếp thị qua email cung cấp trình tạo mẫu email kéo và thả. Thông thường chúng rất dễ sử dụng, nhưng với bố cục được thiết lập sẵn, chúng sẽ hạn chế khả năng sáng tạo của bạn

Đây là lý do tại sao sẽ thuận tiện hơn nhiều khi sử dụng nền tảng tiếp thị qua email cho phép bạn cập nhật mẫu email tùy chỉnh của mình thông qua trình chỉnh sửa trực quan. Cách tốt nhất để tìm hiểu những khả năng mà trình soạn thảo trực quan của nền tảng email cung cấp là yêu cầu người viết mã email của bạn kiểm tra tài liệu tích hợp của nền tảng. Nó cũng sẽ cho anh ta thấy những thẻ, lớp và thuộc tính tùy chỉnh nào nên được sử dụng cho nền tảng để đọc mã tùy chỉnh một cách chính xác

Các nền tảng email tốt hơn sẽ cho phép bạn cắt email của mình thành các phần (được gọi là bố cục/mô-đun) và cung cấp cho bạn nhiều tùy chọn để thử với các phần này. Bạn sẽ có thể thêm và xóa các phần, chuyển đổi và thay thế các phần, chỉnh sửa văn bản và tải lên hình ảnh mới. Nền tảng tiếp thị qua email cho phép cập nhật mẫu email tùy chỉnh là tài sản vô giá cho nhóm tiếp thị của bạn

Như chúng tôi đã nói ở phần đầu của bài viết này, điều rất quan trọng là bạn phải chia sẻ với người lập trình email của mình ngay từ đầu, nếu bạn có ý định tích hợp mẫu email với một nền tảng tiếp thị qua email. Mã hóa lại email ở giai đoạn sau chắc chắn sẽ làm tăng chi phí phát triển email

Dưới đây là đánh giá chi tiết về 9 Trình chỉnh sửa mẫu email HTML tốt nhất trong các nền tảng tiếp thị qua email

Danh sách kiểm tra mã hóa email HTML tùy chỉnh

Khi anh ấy làm việc trên mẫu email HTML tùy chỉnh của bạn, hãy yêu cầu người viết mã email của bạn theo dõi danh sách kiểm tra này

• Thiết kế email của bạn có thân thiện với người dùng không?
• Anh ấy đã cắt hình ảnh từ PSD/Ai/Sketch/Avocode tốt chưa?
• Anh ấy đã kiểm tra HTML và CSS chưa?
• Mã có sạch sẽ và được tổ chức tốt để các nhà thiết kế và nhà phát triển khác cũng có thể đọc được không?
• Làm thế nào nặng là email anh ấy mã hóa? . Ngoài ra, Gmail đang cắt các thư trên 102kb
• Yêu cầu anh ấy kiểm tra ảnh chụp màn hình thử nghiệm cẩn thận. Tất cả đều trông rất giống nhau, mặc dù đôi khi có những mâu thuẫn nhỏ

Phần kết luận

Chúng tôi hy vọng rằng bạn đã hiểu rõ hơn về quy trình tạo email HTML tùy chỉnh ngay bây giờ. Khi làm việc với các dự án email HTML tùy chỉnh của mình, bạn sẽ thấy rằng điều khó nhất là làm cho email của bạn hiển thị chính xác trên tất cả các ứng dụng email chính. Đây là lý do tại sao điều quan trọng là bạn không nên vội vàng thực hiện các dự án email của mình và kiểm tra email cẩn thận, báo cáo bất kỳ lỗi nào được tìm thấy cho người lập trình email của bạn.

Nếu bạn cần bất kỳ sự trợ giúp nào với Mẫu email HTML tùy chỉnh của mình từ đầu, vui lòng liên hệ với MailBakery. Chúng tôi rất sẵn lòng trợ giúp

Email HTML được sử dụng để làm gì?

Email HTML có an toàn không?

Email HTML trong Outlook là gì?