Hiểu những thách thức (và thất vọng) của thiết kế email HTML

Nếu bạn mở một hệ thống quản lý nội dung để xây dựng các trang web, đó là một quá trình khá đơn giản. Các trình duyệt web hiện đại hỗ trợ HTML, CSS và JavaScript để khắt khe bộ tiêu chuẩn web. Và, chúng thực sự chỉ là một số ít các trình duyệt mà các nhà thiết kế cần phải lo lắng. Tất nhiên vẫn có những ngoại lệ… và một số cách giải quyết hoặc chức năng đơn giản dành riêng cho các trình duyệt đó.

Do các tiêu chuẩn tổng thể, việc phát triển trình tạo trang trong hệ thống quản lý nội dung thực sự dễ dàng. Các trình duyệt tuân thủ HTML5, CSS và JavaScript… và các nhà phát triển có thể xây dựng các giải pháp cực kỳ mạnh mẽ để xây dựng các trang web đáp ứng với các thiết bị và nhất quán trên các trình duyệt. Hai thập kỷ trước, hầu như mọi nhà thiết kế web đều sử dụng phần mềm máy tính để bàn để phát triển các trang web. Bây giờ, việc một nhà thiết kế web phát triển một trang web là điều khá phổ biến - thường xuyên hơn không, họ đang phát triển các mẫu và sử dụng trình chỉnh sửa trong hệ thống nội dung để điền nội dung. Người biên tập trang web thật tuyệt vời.

Nhưng những người biên tập email lại đang ở phía sau một cách đáng tiếc. Đây là lý do tại sao…

Thiết kế email HTML phức tạp hơn nhiều so với một trang web

Nếu công ty của bạn muốn có một email HTML đẹp được thiết kế, thì quá trình này phức tạp hơn theo cấp số nhân so với việc xây dựng một trang web vì một số lý do:

• Không có tiêu chuẩn - KHÔNG có sự tuân thủ nghiêm ngặt đối với bất kỳ trang web nào tiêu chuẩn bởi các ứng dụng email hiển thị email HTML. Trên thực tế, hầu như mọi ứng dụng email và mọi phiên bản của mọi ứng dụng email hành động khác nhau. Một số sẽ tôn vinh CSS, phông chữ bên ngoài và HTML hiện đại. Những người khác tôn trọng một số kiểu nội tuyến, sẽ chỉ hiển thị một bộ sưu tập phông chữ và bỏ qua mọi thứ ngoại trừ cấu trúc hướng bảng. Thực sự là khá nực cười vào thời điểm này khi không có ai làm việc về vấn đề này. Do đó, việc thiết kế các mẫu hiển thị trên các máy khách và thiết bị một cách nhất quán đã trở thành một công việc kinh doanh lớn và có thể khá tốn kém.
• Bảo mật ứng dụng khách qua email - Chỉ trong tuần này, Apple Mail đã cập nhật để chặn tất cả hình ảnh trong email HTML theo mặc định không được nhúng trong email. Bạn có thể cấp quyền tải email cho họ cùng một lúc hoặc phải bật cài đặt để tắt cài đặt này. Cùng với cài đặt bảo mật ứng dụng email, còn có cài đặt công ty.
• Bảo mật CNTT - Nhóm CNTT của bạn có thể triển khai các bộ quy tắc nghiêm ngặt về những đối tượng thực sự có thể được hiển thị trong email. Ví dụ: nếu hình ảnh của bạn đến từ một miền cụ thể không được liệt kê trong danh sách trắng trong tường lửa của công ty, thì hình ảnh sẽ không hiển thị trong email của bạn. Đôi khi, chúng tôi phải phát triển email và lưu trữ tất cả hình ảnh trên máy chủ của công ty để nhân viên của họ có thể xem hình ảnh.
• Nhà cung cấp dịch vụ email - Để làm cho vấn đề tồi tệ hơn, những người xây dựng email mà các nhà cung cấp dịch vụ email (ESPs) thực sự đưa ra các vấn đề hơn là hạn chế chúng. Trong khi họ quảng cáo biên tập viên của họ là Những gì bạn thấy là những gì bạn nhận được (WYSIWYG), điều ngược lại thường đúng với thiết kế email. Bạn sẽ xem trước email trong nền tảng của họ, sau đó người nhận email sẽ thấy tất cả các loại vấn đề thiết kế. Các công ty thường vô tình chọn một trình soạn thảo giàu tính năng thay vì một trình soạn thảo bị khóa vì nghĩ rằng cái này có nhiều tính năng hơn cái kia. Điều ngược lại là đúng… nếu bạn muốn các email hiển thị nhất quán trên tất cả các ứng dụng email, thì càng đơn giản càng tốt vì ít có thể xảy ra sai sót hơn.
• Hiển thị ứng dụng khách qua email - Có hàng trăm ứng dụng email, mỗi ứng dụng hiển thị HTML khác nhau trên máy tính để bàn, ứng dụng, thiết bị di động và ứng dụng email trên web. Mặc dù trình soạn thảo văn bản tiện lợi của bạn trên nhà cung cấp dịch vụ email của bạn có thể có cài đặt để đưa tiêu đề vào email của bạn… phần đệm, lề, chiều cao dòng và kích thước phông chữ có thể khác nhau trên mỗi ứng dụng email. Do đó, bạn phải cắt giảm HTML và viết mã mọi phần tử khác nhau (xem ví dụ bên dưới) - và thường viết các ngoại lệ dành riêng cho ứng dụng email - để có được email hiển thị nhất quán. Không có loại khối đơn giản nào, bạn phải tạo bố cục theo hướng bảng tương đương với việc xây dựng web cách đây ba mươi năm. Đó là lý do tại sao bất kỳ bố cục mới nào đều yêu cầu cả phát triển và thử nghiệm thiết bị và ứng dụng khách email chéo. Những gì bạn thấy trong hộp thư đến của mình có thể hoàn toàn khác với những gì tôi thấy trong hộp thư đến của mình. Đó là lý do tại sao các công cụ kết xuất như Email về axit or màu xanh lấy ở loài rêu là điều bắt buộc để đảm bảo các thiết kế mới của bạn hoạt động trên tất cả các ứng dụng email. Dưới đây là danh sách ngắn các ứng dụng email phổ biến và công cụ kết xuất của chúng:
  • Sử dụng Apple Mail, Outlook cho Mac, Android Mail và iOS Mail WebKit.
  • Outlook 2000, 2002 và 2003 sử dụng Internet Explorer.
  • Outlook 2007, 2010 và 2013 sử dụng Microsoft Word (vâng, Word!).
  • Ứng dụng email trực tuyến sử dụng công cụ tương ứng của trình duyệt của họ (ví dụ: Safari sử dụng WebKit và Chrome sử dụng Blink).

Ví dụ về HTML cho Web Vs. E-mail

Nếu bạn muốn có một ví dụ minh họa sự phức tạp của việc thiết kế trong email so với web, thì đây là một ví dụ hoàn hảo từ bài viết của Mailbakery 19 Sự khác biệt lớn giữa Email và Web HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Cách tránh các vấn đề về thiết kế email

Các vấn đề về thiết kế email có thể tránh được bằng cách làm theo một quy trình hợp lý:

1. Thiết kế mẫu - Xây dựng một mẫu với các bố cục và khối nội dung khác nhau bao gồm mọi phong cách mà bạn muốn tạo ra trong các thiết kế email của mình. Khi chúng tôi triển khai một khách hàng, chúng tôi luôn thúc đẩy họ thiết kế một email cho tương lai - không chỉ là chiến dịch email tiếp theo được gửi đi. Bằng cách đó, chúng tôi hoàn toàn có thể thiết kế, phát triển, thử nghiệm và triển khai các giải pháp thay thế cần thiết trước họ đã từng gửi email đầu tiên đó.
2. Kiểm tra mẫu - Việc hiểu các ứng dụng email mà người đăng ký của bạn đang sử dụng và đảm bảo rằng email HTML của bạn được kiểm tra đầy đủ trên thiết bị di động và máy tính để bàn là rất quan trọng trước khi triển khai bất kỳ mẫu nào. Chúng tôi có thể thiết kế một email theo đúng nghĩa đen từ một bố cục photoshop… nhưng việc cắt và phân loại nó thành ứng dụng khách email chéo, hướng bảng là điều cần thiết để triển khai các thiết kế email tối ưu và nhất quán.
3. Kiểm tra nội bộ - Sau khi mẫu của bạn được thiết kế và thử nghiệm, nó sẽ được gửi đến danh sách hạt giống nội bộ trong tổ chức để xem xét và phê duyệt. Bạn thậm chí có thể muốn bắt đầu với một tập hợp con rất hạn chế các cá nhân để trước tiên đảm bảo không có tường lửa hoặc các vấn đề bảo mật liên quan đến việc hiển thị email trong nội bộ. Nếu điều này đang tạo ra một phiên bản trên một nhà cung cấp dịch vụ email mới, bạn thậm chí có thể tìm thấy một số vấn đề về lọc hoặc chặn liên quan đến việc đưa email của bạn vào hộp thư đến.
4. Phiên bản mẫu - Không thay đổi bố cục hoặc thiết kế của bạn mà không làm việc trên phiên bản mới của mẫu có thể được thiết kế, kiểm tra và triển khai đúng cách. Nhiều doanh nghiệp yêu thích các thiết kế một lần cho mọi chiến dịch… nhưng điều đó đòi hỏi mọi email phải được thiết kế, phát triển và triển khai cho từng chiến dịch. Điều này làm tăng thêm rất nhiều thời gian cho quy trình tiếp thị qua email nội bộ. Và, bạn có nguy cơ không hiểu những yếu tố nào trong email của bạn đang hoạt động tốt hơn những yếu tố nào không. Nhất quán không chỉ là một cách giúp quá trình này dễ dàng hơn mà còn quan trọng đối với hành vi của người đăng ký.
5. Trường hợp ngoại lệ của nhà cung cấp dịch vụ email - Hầu như mọi nhà cung cấp dịch vụ email đều có cách giải quyết các vấn đề mà trình tạo email của họ đưa ra. Chúng tôi thường có thể thêm CSS thô vào tài khoản - hoặc thậm chí có một khối nội dung phải có trong mọi email - để công ty sử dụng trình chỉnh sửa email tích hợp sẵn và không làm nó phá vỡ thiết kế email của bạn. Tất nhiên, điều đó có thể yêu cầu một số khóa đào tạo và kiểm soát quy trình để triển khai các bước đó nhằm đảm bảo chúng được tuân thủ. Hoặc - bạn có thể chỉ muốn phát triển thiết kế email của mình theo một giải pháp đã được chứng minh là hoạt động trên các máy khách và thiết bị, sau đó dán lại vào nhà cung cấp dịch vụ email của bạn.

Nền tảng thiết kế email

Bởi vì các nền tảng dịch vụ email đã thực hiện một công việc kém hiệu quả trong việc xây dựng và duy trì các trình tạo kết xuất liên tục giữa các khách hàng và thiết bị chéo, một số nền tảng tuyệt vời đã được tung ra thị trường. Một thứ mà chúng tôi đã sử dụng rộng rãi là Stripo.

Stripo không chỉ là một trình tạo email, họ còn có một thư viện hơn 900 mẫu có thể dễ dàng nhập. Khi bạn thiết kế email, bạn có thể gửi email tới hơn 60 ESP và gửi email cho khách hàng, bao gồm Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook và Gmail. Tốt nhất của tất cả các mẫu Stripo đi kèm với các bài kiểm tra kết xuất email được bao gồm để bạn có thể đảm bảo chúng đã được kiểm tra và hoạt động nhất quán trên hơn 40 ứng dụng email.

Đăng nhập vào bản trình diễn trình chỉnh sửa Stripo

Tiết lộ: Martech Zone đang liên kết với của tôi công ty tư vấn tiếp thị người thiết kế và triển khai các email khách hàng chéo cho các thương hiệu hàng đầu trong hầu hết các nhà cung cấp dịch vụ email. Tôi cũng là một chi nhánh của Stripo và tôi đang sử dụng liên kết của tôi trong bài viết này.