Tiếp thị qua email & Tự động hóaVideo Tiếp thị & Bán hàng

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 thì đó là một quá trình khá đơn giản. Hỗ trợ trình duyệt web hiện đại HTML, CSSvà JavaScript theo các tiêu chuẩn web nghiêm ngặt. Và chúng chỉ là một số ít 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 trường hợp ngoại lệ… và một số cách giải quyết đơn giản hoặc chức năng dành riêng cho các trình duyệt đó.

Do các tiêu chuẩn chung nên việc phát triển trình tạo trang trong hệ thống quản lý nội dung là điều đơn giản. 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ẽ để tạo các trang web phản hồi nhanh 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. Hiện nay, việc một nhà thiết kế web phát triển một trang web là điều khá hiếm gặp – họ thường phát triển các mẫu và sử dụng các trình chỉnh sửa trong hệ thống nội dung để điền nội dung. Biên tập viên 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 thiết kế một email HTML đẹp mắt thì quy trình này phức tạp hơn gấp nhiều lầ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 các tiêu chuẩn web đối với các ứng dụng email hiển thị email HTML. Hầu như mọi ứng dụng email và mọi phiên bản của mọi ứng dụng email đều hoạt độ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 dáng nội tuyến, chỉ hiển thị một bộ sưu tập phông chữ và bỏ qua mọi thứ trừ cấu trúc hướng bảng. Thật nực cười khi không có ai giải quyết vấn đề này. Do đó, việc thiết kế các mẫu hiển thị nhất quán trên các máy khách và thiết bị đã 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 – Gần đây, Apple Mail đã cập nhật để chặn tất cả cá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ọ mỗi lần 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ự tạo ra các vấn đề hơn là hạn chế chúng. Mặc dù họ quảng bá trình soạn thảo của mình là What You See Is What You Get (WYSIWYG), nhưng đ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ọ và người nhận sẽ thấy tất cả các vấn đề về thiết kế. Các công ty thường vô tình chọn một trình soạn thảo có nhiều tính năng thay vì một trình soạn thảo bị khóa vì nghĩ rằng trình soạn thảo này có nhiều tính năng hơn. Đ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 thì càng tốt vì ít có thể sai sót hơn.
  • Hiển thị ứng dụng khách qua email – Hàng trăm ứng dụng email 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ực tuyến. Mặc dù trình soạn thảo văn bản tiện lợi trên nhà cung cấp dịch vụ email của bạn có thể có cài đặt để đặt tiêu đề vào email của bạn, nhưng phần đệm, lề, chiều cao dòng và kích thước phông chữ có thể khác nhau đối với mỗi ứng dụng email. Kết quả là, bạn phải đơn giản hóa HTML và mã hóa từng thành phần một cách khác nhau (xem ví dụ bên dưới) – và thường viết bằng các ngoại lệ dành riêng cho ứng dụng email – để email hiển thị nhất quán. Không có loại khối đơn giản nào cả, bạn phải thực hiện các bố cục theo hướng bảng tương đương với việc xây dựng cho web ba mươi năm trước. Đó là lý do tại sao mọi bố cục mới đều yêu cầu cả quá trình phát triển cũng như thử nghiệm thiết bị và ứng dụng khách qua email. 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:

Email HTML

Chúng ta phải xây dựng một loạt bảng kết hợp tất cả kiểu dáng nội tuyến cần thiết để đặt nút đúng cách và đảm bảo nó trông đẹp mắt trên các ứng dụng email. Thẻ kiểu đi kèm cũng sẽ nằm ở đầu email này để kết hợp các lớp học.

<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>

HTML Web

Chúng ta có thể sử dụng một biểu định kiểu bên ngoài với các lớp để xác định trường hợp, căn chỉnh, màu sắc và kích thước của thẻ liên kết xuất hiện dưới dạng một nút.

<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. Kiểm tra mẫu – Hiểu rõ các ứng dụng email mà người đăng ký của bạn 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à điều rất quan trọng trước khi triển khai bất kỳ mẫu nào. Chúng ta có thể thiết kế một email theo đúng nghĩa đen từ bố cục Photoshop… nhưng việc cắt và chia nó thành một ứng dụng khách email chéo, theo bảng điều khiển là điều cần thiết để triển khai các thiết kế email tối ưu và nhất quán.
  2. 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.
  3. 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ý.
  4. 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à thoát y.

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 trực quan, HubSpot, Chiến dịch Màn hình, AWeber, eSputnik, OutlookGmail. Hơn hết, các mẫu Stripo đều đi kèm với các bài kiểm tra kết xuất email để bạn có thể đảm bảo chúng đã được kiểm tra và hoạt động ổn định 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

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.