Soạn thảo email html gmail
|
Mục lục Show
Khi bạn tạo một email bằng một công cụ kéo và thả hoặc dựa trên mô-đun, bạn thực sự đang tạo một email HTML. Có hai loại email chính mà 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ứa nội dung cũ đơn giản mà không có định dạng ) và email HTML, được định dạng và tạo kiểu bằng HTML và inline CSS. Email HTML rất dễ nhận ra hầu hết các email marketing đa phương tiện được tạo kiểu trong hộp thư đến là email HTML. Là nhà tiếp thị, bạn có thể đã so sánh email HTML với email văn bản đơn giản và nhận ra rằng mỗi loại có những lợi ích khác nhau. Email HTML vốn không tốt hơn email văn bản đơn giản, và trong nhiều 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ị email thành công. Đây là hình ảnh của HTML ở phía trước, Nhấp vào nút HTML để xem mã đằng sau nó. Xem mẫu email Pen HTML từ HubSpot của Christina Perricone (@ Hubspot ) trên CodePen. Trong bài viết này, chúng tôi sẽ giải thích các bạn bắt đầu tạo email HTML như thế nào, bất kể mức độ kinh nghiệm và sự thoải mái của bạn trong việc mã hoá, chia sẻ một số mẫu miễn phí mà bạn có thể sử dụng. Chúng ta cùng lặn vào. Tin tốt là bạn không cần biết cách mã hoá để tạo một email HTML. Hầu hết các công cụ tạo và gửi email ( như HubSpot ) sẽ cung cấp định dạng trước, ready-to-go HTML templates cho phép bạn thiết kế email mà không cần truy cập vào mã thực tế trên back-end. Khi bạn thực hiện những thay đổi trong trình soạn thảo email, những thay đổi đó sẽ tự động được mã hoá vào sản phẩm cuối cùng. 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ị chuyên nghiệp. Vẫn muốn tạo một email HTML từ đầu sao?Nếu bạn thoải mái với HTML và muốn kiểm soát trực tiếp hơn về mã của email, hầu hết các công cụ email sẽ cho phép bạn nhập trực tiếp các tập tin HTML để sử dụng làm mẫu email tuỳ chỉnh. Có rất nhiều mẫu email HTML miễn phí có sẵn trên web ( một số trong số đó chúng tôi sẽ chia sẻ bên dưới ), và nếu anh biết cách anh xử lý một tập tin HTML, thông thường, bạn sẽ dễ dàng áp dụng mẫu vào công cụ xây dựng email mà bạn lựa chọn. Để tạo một email HTML hoàn toàn từ đầu, bạn cần có kiến thức cao hơn về HTML ( hoặc làm việc với nhà phát triển ). Hướng dẫn này cung cấp một tổng quan rõ ràng về việc mã hoá một email HTML cơ bản. Bởi vì quá trình tạo một email HTML từ đầu có thể khá phức tạp, chúng tôi khuyến nghị làm việc với nhà phát triển hoặc sử dụng mẫu email HTML đã 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ột mẫu email HTML đặc biệt để sử dụng trong HubSpot, bạn cần chắc chắn rằng bạn đã bao gồm các thẻ HubL yêu cầu ( những thẻ này đảm bảo rằng email của bạn có thể được tuỳ biến và tuân thủ quy tắc CAN-SPAM ). Bạn có thể tìm một hướng dẫn đầy đủ để mã hoá các mẫu email HTML dành riêng cho HubSpot ở đây. Hoặc thay vào đó, hãy sử dụng trình soạn thảo email đơn giản là những gì bạn thấy là những gì bạn nhận được. Thực hành tốt nhất của email HTML
Bây giờ bạn đã hiểu về cơ bản của việc phát triển một email HTML, hãy đi qua một vài thực hành tốt nhất quan trọng mà bạn cần lưu tâm. Cho dù bạn định sử dụng phương pháp nào để tạo email HTML, những thực hành tốt nhất này sẽ giúp cải thiện thiết kế, kinh nghiệm người dùng, và khả năng gửi email của bạn. 1. Đảm bảo rằng email HTML của bạn có phản ứng với các kích cỡ màn hình và thiết bị khác nhauCách email của bạn xuất hiện trong 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 cỡ màn hình của thiết bị đang được xem trên. 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 hỗn độn không thể đọc được, chồng chéo văn bản và hình ảnh khi xem trên màn hình điện thoại thông minh. Để đảm bảo rằng email HTML của bạn trông như bạn muốn trên một loạt các kích cỡ màn hình, điều tốt nhất bạn có thể làm là giữ cho bố cục đơn giản và dễ dàng. Khi bạn bắt đầu thêm các yếu tố phức tạp hơn như nhiều cột và các hình ảnh nổi, sẽ khó hơn khi dịch định dạng email của bạn sang các kích cỡ màn hình khác nhau. Nếu bạn quyết định phát triển một bố cục phức tạp hơn, đảm bảo rằng bạn đang chủ động tìm cách sắp xếp lại các yếu tố để phù hợp với các kích cỡ màn hình khác nhau. Ví dụ,, nếu email của bạn hiển thị dưới dạng cột trên màn hình, cấu trúc tương tự sẽ không hoạt động trên di động mà bạn cần sử dụng các câu hỏi phương tiện để xác định cách các yếu tố sẽ được hiển thị trên các kích cỡ màn hình khác nhau. Nhớ rằng việc phát triển các email HTML thật sự đáp ứng vượt xa cấu trúc và định dạng của tin nhắn. Suy nghĩ về cách trải nghiệm tổng thể của người dùng trên email của bạn sẽ được nhận thức 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ó thể đọc được trên 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 di động thay cho văn bản siêu liên kết ( bạn đã từng thử nhấn vào dòng nhỏ của văn bản siêu liên kết trên di động chưa? Không dễ lắm ). Bạn có thể tìm thấy hướng dẫn chi tiết về các phương pháp tốt nhất trên email điện tử ngay tại đây. 2. Đảm bảo kiểu tóc của bạn phù hợp với nhiều ứng dụng email khác nhauMột yếu tố lớn khác ảnh hưởng rất 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ý là ứng dụng email mà họ đang sử dụng để mở tin nhắn, Mỗi ứng dụng email tải các email khác nhau một chút, vì vậy một email trông trong Gmail sẽ có vẻ khác biệt trong Outlook. Thật may mắn, nếu bạn biết cách các ứng dụng email phổ biến nhất tải các yếu tố HTML và CSS cụ thể, bạn có thể tạo ra một 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. Tất cả là về việc biết những thẻ không được hỗ trợ để tránh và thích nghi tương ứng. 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 Outlook ) hỗ trợ và tạo các yếu tố phong cách khác nhau, Bạn cũng có thể xem một bài viết về cách tối ưu hoá email cho các khách hàng email khác nhau. 3. Nhận thức về thời gian cho email HTML được tải lênThời gian gửi email có thể là sự khác biệt giữa việc nhận được khách hàng mới và việc mất người đăng ký thất vọng. Mặc dù có thể rất hấp dẫn khi tận dụng tất cả các tuỳ chọn phong cách và cơ hội kết hợp các hình ảnh mà email HTML cung cấp, không có vấn đề gì nếu email của bạn quá lâu để tải. Khi bạn thiết kế email HTML, lưu ý về thời gian email của bạn sẽ được tải, đặc biệt là khi có ai đó đang, nói, mở tin nhắn trên tàu điện ngầm buổi sáng của họ với kết nối dữ liệu yếu. Sau đây là một vài bước nhỏ mà bạn có thể thực hiện để cải thiện thời gian tải. Sử dụng hình ảnh một cách thận trọngBằng cách đó, bạn sẽ củng cố thông điệp mà bạn muốn truyền đến người đăng ký. Luôn dùng máy nén ảnh ( như máy nén. Io ) để giảm dung lượng tập tin càng nhiều càng tốt. Hầu hết các máy nén ảnh có thể làm giảm đáng kể dung lượng tệp của ả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 ảnh hưởng đến tính toàn vẹn hình ảnh của email của bạn. Sử dụng phông chữ tiêu chuẩnPhông chữ tuỳ biến rất thích hợp để tạo độ nhọn cho trang đặt chân, nhưng chúng có thể thêm vào một lớp phức tạp khác khi được thêm vào email. Như chúng ta đã nói ở trên, tất cả khách hàng email đều xử lý các yếu tố phong cách khác nhau, và điều này đặc biệt kéo dài đến các phông chữ. Để an toàn, hãy sử dụng các phông chữ tiêu chuẩn và kiểm tra để chắc chắn rằng hầu hết các ứng dụng email của bạn đều hỗ trợ một phông chữ cụ thể. Thử dùng bộ giảm thiểu HTMLMột trình tối giản HTML ( như mã tối giản. Com và các công cụseo. Com ) tự động xoá mã không cần thiết trong tập tin HTML. Một cách lặp đi lặp lại, các yếu tố bổ sung sẽ bị xoá đi, nhưng việc hiển thị thực tế của email sẽ vẫn như cũ ( luôn kiểm tra nó! ). Mỗi dòng mã ảnh hưởng đến thời gian tải email, vì vậy dành thời gian xoá bỏ 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ấtCách tốt nhất để giảm thời gian tải email là giảm lượng nội dung bạn thêm vào mỗi email gửi. Điều này 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 này không chỉ dẫn đến trải nghiệm của người dùng ( không ai muốn đọc tiểu thuyết bằng email ), nhưng nó có thể gửi thời gian tải xuống khỏi biểu đồ và khiến người dùng từ bỏ email của bạn. Hãy đơn giản, và người dùng sẽ cảm ơn bạn. 4. Lên kế hoạch ( càng nhiều càng tốt ) cho sự mâu thuẫn của người dùng cuối cùngKích cỡ màn hình và ứng dụng email không phải là yếu tố duy nhất có thể làm thay đổi cách mà email HTML của bạn hiển thị trong hộp thư đến của người đăng ký. Các yếu tố như phiên bản của ứng dụng email của họ, hệ điều hành của họ, cài đặt người dùng duy nhất của họ, phần mềm an ninh của họ, và dù họ có tự động tải ảnh hay không, tất cả đều có thể ảnh hưởng đến cách email của bạn được tải. Như anh có thể đoán bằng danh sách lớn các nhân tố đó, cố gắng giải quyết tất cả chúng ( mỗi lần bạn gửi một email ) có thể đủ để khiến bạn ném máy tính vào phòng. Nhưng bạn không cần phải hoàn toàn bất lực trước những biến số này bạn chỉ cần lên kế hoạch trước. Cân nhắc tạo một phiên bản trang web của emailGiống như đưa cho email của bạn một nút an toàn thất bại. Nếu vì một số lý do nào đó do một trong nhiều yếu tố được đề cập ở trên, email được thiết kế đầy yêu thương của bạn sẽ trở thành một mớ hỗn độn tuyệt đối khi người đăng ký mở nó, ít nhất họ sẽ có tuỳ chọn để nhấp vào ” xem dưới dạng trang web ” và xem email theo ý của bạn. Vì các yếu tố phong cách thường xuyên hiển thị trên các trình duyệt web so với các ứng dụng email, bạn sẽ có thể kiểm soát nhiều hơn về phiên bản trang web của tin nhắn. Ở HubSpot, bạn có thể bật tuỳ chọn để tự động tạo phiên bản trang web. Tạo phiên bản văn bản đơn giản của emailPhiên bản văn bản thuần tuý chính xác là phiên bản thay thế của email HTML với văn bản thuần tuý hoàn toàn. Thêm phiên bản văn bản đơn giản của email HTML là rất quan trọng vì một số ứng dụng email và thiết lập người dùng không thể ( hoặc không chọn ) tải HTML. Trong trường hợp này, khách hàng sẽ tìm 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 nó 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à thư rác 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 nó, nhưng nếu bạn đang mã hoá một email HTML từ đầu, bạn cần tạo một thứ gọi là tin nhắn MIME đa phần. Thông điệp MIME nhiều phần là một email chứa cả văn bản đơn giản và phiên bản HTML của cùng một email. Nếu ứng dụng email hoặc hệ thống bảo mật của người nhận không cho phép gửi 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 một kiến thức cao hơn về mã hoá, vì vậy chúng tôi khuyến nghị làm việc với một nhà phát triển. Đảm bảo email của bạn vẫn có ý nghĩa nếu ảnh không được tải lênMột số người dùng đã tắt tính năng tải ảnh tự động, nghĩa là họ sẽ thấy email của bạn mà không có hình ảnh khi họ mở nó. Vì lý do này, bạn không nên hoàn toàn dựa vào hình ảnh để truyền tải ý nghĩa của thông điệp, và luôn luôn thêm văn bản Alt vào hình ảnh mà bạn thực sự bao gồm. Văn bản Alt sẽ được tải ngay cả khi không có hình ảnh, vì vậy người đăng ký của bạn có thể có được ý tưởng chung về nội dung hình ảnh bao gồm. 5. Tiến hành kiểm tra kỹ lưỡngCuối cùng, bạn 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 khác nhau, hệ điều hành, và các loại thiết bị. Đừng đợi đến khi kết thúc quá trình kiểm tra email khi bạn làm việc là cách tốt nhất để tìm ra sự mâu thuẫn giữa các khách hàng email khác nhau và đảm bảo rằng bạn đang tạo ra trải nghiệm nhất quán 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 máy 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 công cụ như HTML Email Check hoặc Previewmy Email để có được một ý tưởng tốt hơn về cách email của bạn sẽ xuất hiện trong các ứng dụng và thiết bị email khác nhau. Các mẫu email HTML đơn giản và miễn phíCó rất nhiều 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 đã thu thập được một loạt các mẫu email HTML miễn phí cung cấp trải nghiệm người dùng đáp ứng. Nhớ đọc các điều khoản và điều kiện trên mỗi mẫu cá nhân trước khi sử dụng. 1. Bản mẫu email HTML miễn phí HubSpot Được bao gồm trong phiên bản miễn phí của Marketing Hub, đây là một khởi đầu tuyệt vời nếu bạn đang tìm mẫu có nhiều chỗ để tuỳ biến. Bạn có thể dễ dàng thêm hình ảnh, văn bản, và các 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 mà bạn thiết kế sẽ hoàn toàn đáp ứng trên bất kỳ thiết bị nào. 2. Công ty News HTML Email template của Campaign MonitorMô hình hiện đại này rất tinh vi và tối giản. Màu sắc tinh tế và thiết kế đơn giản làm cho nó là 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. Bản mẫu email HTML miễn phí của UnlayerMặc dù mẫu này được thiết kế cho một công ty chăm sóc sức khoẻ, bạn có thể dễ dàng điều chỉnh nó cho riêng mình. Thứ này sạch sẽ, template muted là một cách tuyệt vời để hiển thị nội dung mà nhóm của bạn đã tạo ra và kết nối người đăng ký với các sản phẩm hoặc bài viết blog gần đây nhất của bạn. Thiết kế có hai cột đáp ứng đầy đủ với nhiều tuỳ chọn màu sắc, và phòng ở trên cùng để làm nổi bật một cuộc gọi đến hành động. 4. Công cụ email HTML miễn phí MINImalistBằng chứng rằng đôi khi ít hơn thực sự là nhiều hơn, dễ dàng thế này, thiết kế đáp ứng đầy đủ tạo ra không gian trống và duy trì sự tập trung chặt chẽ vào lời nói và các yếu tố thị giác. Không có sự phân tán thiết kế, nội dung của bạn có thể chiếu sáng trên bất kỳ thiết bị nào. 5. Bản mẫu email HTML miễn phí từ Bee FreeBộ sưu tập các mẫu nguồn mở miễn phí này hoàn toàn đáp ứng và được kiểm tra trên các khách hàng email phổ biến. Bạn có thể chỉnh sửa và xây dựng trên nền tảng Bee Free, sau đó xuất tập tin HTML vào ổ đĩa địa phương. Đây là lựa chọn lý tưởng nếu bạn muốn có phong cách hơn, điểm bắt đầu đánh bóng, nhưng bạn vẫn muốn có thể tuỳ biến thiết kế để phù hợp với nhu cầu của công ty. Mỗi mẫu có sẵn dưới nhiều dạng khác nhau cho các mục đích tiếp thị khác nhau, như email giao dịch, bộ sưu tập NPS, và liên hệ lại với người đăng ký email. 6. Bản mẫu email HTML miễn phí của Campaign MonitorCái áo đẹp này, thiết kế phản ứng từ Campaign Monitor là hoàn hảo để gửi mã chiết khấu nhưng nó cũng có thể là một cách trang nhã để giới thiệu các sản phẩm mới nhất của bạn cho người đăng ký qua email. Cũng đáng để kiểm tra Campaign Monitors toàn bộ thư viện các mẫu email đáp ứng. Tạo email HTML để tăng số lượng người đăng nhậpEmail HTML là một cách hấp dẫn để chia sẻ những gì đang xảy ra trong doanh nghiệp của bạn và giữ cho người đăng ký trở về với nhiều hơn. Với những lời khuyên và mẫu mà chúng tôi đã chia sẻ, bạn có thể tạo ra những email HTML đẹp mà không cần phải viết một dòng mã duy nhất. Lưu ý của biên tập viên : Bài viết này ban đầu được xuất bản vào tháng 6 năm 2019 và đã được cập nhật về độ toàn diện. |
