Tôi có thể sử dụng HTML trong nội dung email không?

Lee Munroe là Trưởng phòng Thiết kế của OneSignal và là người tạo ra HTMLemail. io, có trụ sở tại San Francisco. Tìm hiểu thêm về Lee ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Hệ thống thiết kế thành công

• 
  Giao diện người dùng SmashingConf 2023

• 
  Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

• 
  Bắt đầu miễn phí

• 
  Quảng cáo trên tạp chí Smashing

Tôi đã dành nhiều năm để xây dựng các công cụ phát triển — hai năm trong số đó là trưởng nhóm thiết kế sản phẩm tại Mailgun, một dịch vụ email dành cho nhà phát triển, nơi tôi đã học được nhiều điều về cách thức hoạt động của email và các vấn đề mà nhà phát triển gặp phải khi xây dựng email HTML. Trong bài đăng này, tôi sẽ chia sẻ một số kiến ​​​​thức của mình về chủ đề này

email HTML. Hai từ mà khi kết hợp với nhau sẽ khiến lập trình viên phải rơi nước mắt. Nếu bạn là một nhà phát triển web, thì việc viết mã email sẽ là một nhiệm vụ không thể tránh khỏi vào một lúc nào đó trong sự nghiệp của bạn, cho dù bạn có thích hay không. Mã hóa email HTML là trường học cũ. Hãy nhớ lại năm 1999, khi chúng tôi tự gọi mình là “quản trị viên web” và sử dụng Frontpage, trình soạn thảo WYSIWYG và bảng để đánh dấu trang web của mình

Không có nhiều thay đổi trong thiết kế email. Trên thực tế, nó đã trở nên tồi tệ hơn. Với sự ra đời của các thiết bị di động và ngày càng có nhiều ứng dụng email, chúng tôi thậm chí còn có nhiều vấn đề cần giải quyết hơn khi xây dựng email HTML

Tôi đã dành nhiều năm để xây dựng các công cụ phát triển — hai năm trong số đó là trưởng nhóm thiết kế sản phẩm tại Mailgun, một dịch vụ email dành cho nhà phát triển, nơi tôi đã học được nhiều điều về cách thức hoạt động của email và các vấn đề mà nhà phát triển gặp phải khi xây dựng email HTML. Trong bài đăng này, tôi sẽ chia sẻ một số kiến ​​​​thức của mình về chủ đề này

Đọc thêm trên SmashingMag.

• Thiết kế và xây dựng các bản tin email mà không cần mất trí
• 18 Mẫu Email Dành Cho Nhà Thiết Kế Và Nhà Phát Triển Web
• Tạo mã hóa email HTML đáp ứng dễ dàng với MJML
• Cách cải thiện quy trình làm việc email của bạn với thiết kế mô-đun
  

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ “TypeScript trong 50 bài học”, hướng dẫn mới tuyệt vời của chúng tôi về TypeScript. Với các hướng dẫn chi tiết về mã, các ví dụ thực hành và các vấn đề phổ biến — tất cả được chia thành các bài học ngắn, dễ quản lý. Đối với những nhà phát triển biết đủ JavaScript để trở nên nguy hiểm

Giới thiệu về Gửi Email

Là nhà phát triển chịu trách nhiệm về chiến dịch email hoặc tất cả email mà công ty bạn gửi, bạn sẽ cần biết cách thức hoạt động của email, các yêu cầu pháp lý và cách thực sự gửi email. Các công ty gửi một số loại email khác nhau. Hãy cùng xem

Email tiếp thị

Rất nhiều nhà cung cấp dịch vụ email (ESP) chuyên về email tiếp thị và quảng cáo. Email SendPulse, Giám sát chiến dịch, MailChimp, Emma, ​​Liên hệ liên tục, chỉ kể tên một số. Họ cung cấp các giải pháp đầy đủ để quản lý người đăng ký, làm việc với các mẫu email, chạy các chiến dịch email hàng loạt và báo cáo

Email giao dịch

Email giao dịch bao gồm biên nhận, cảnh báo, email chào mừng, đặt lại mật khẩu, v.v. và thường được triển khai bằng các công cụ và API phát triển như SendPulse Transactional, Mailgun, SendGrid và Postmark. Các công cụ này tập trung vào API hơn, ít dựa trên CMS và WYSIWYG hơn;

Một giải pháp thay thế cho việc sử dụng dịch vụ là cuộn máy chủ email của riêng bạn bằng thứ gì đó như Postfix. Nhược điểm của điều này là bạn phải thiết lập và định cấu hình nó cũng như hiểu các chi tiết kỹ thuật của việc gửi email, triển khai theo dõi và hủy đăng ký cũng như nhận email được gửi đến hộp thư đến

Vòng đời Email

Các dịch vụ email dựa trên vòng đời và hành vi giúp giới thiệu, tương tác, v.v. Rất nhiều ESP tập trung vào tiếp thị cũng cung cấp dịch vụ này, nhưng tôi có xu hướng nhóm các dịch vụ như SendPulse Automation, Intercom, Customer. io, Drip, Vero và ConvertKit vào danh mục này

Danh sách email Các phương pháp hay nhất

Đừng mua danh sách email. Có thể có một số dịch vụ hợp pháp ngoài kia, nhưng tốt nhất bạn nên tránh xa các danh sách mua hàng hoàn toàn

Kinh nghiệm của tôi là bất kỳ ai mua danh sách email sẽ bị trả lại rất nhiều, khiến địa chỉ Giao thức Internet (IP) của họ bị mang tiếng xấu và email của họ bị nhà cung cấp dịch vụ Internet (ISP) chặn hoặc gửi đến thư rác. 85% email trên thế giới được coi là thư rác, theo SenderBase;

Có hai lựa chọn

Người đăng ký phải xác minh địa chỉ email của họ sẽ thêm một bước bổ sung vào quy trình, nhưng điều đó hợp lý và ngăn người khác lạm dụng địa chỉ email của họ bằng cách đăng ký họ vào danh sách mà không có sự cho phép của họ. Nó cũng giúp giữ cho danh sách đăng ký của bạn sạch sẽ và là “cách chính xác 100% để xác thực địa chỉ email”

CÓ THỂ SPAM

Đây là những yêu cầu pháp lý của bạn để gửi email, được thực thi bởi Đạo luật CAN-SPAM năm 2003

• Không sử dụng thông tin tiêu đề sai hoặc gây hiểu nhầm
• Không sử dụng các dòng chủ đề lừa đảo
• Xác định tin nhắn là một quảng cáo
• Cho người nhận biết bạn đang ở đâu
• Cho người nhận biết cách chọn không nhận email trong tương lai từ bạn
• Tôn trọng các yêu cầu từ chối ngay lập tức
• Theo dõi những gì người khác đang làm thay cho bạn

MailChimp có một danh sách tốt các yêu cầu pháp lý về email theo quốc gia

Phân Tích Và Đo Lường Hiệu Suất

Đo lường mọi thứ. Bạn cần đo lường để biết liệu email của mình có đang được cải thiện hay không. Các con số sẽ khác nhau rất nhiều tùy thuộc vào những gì bạn làm, ngành của bạn, loại email bạn gửi và bối cảnh. Tuy nhiên, nhìn chung

• 20% là một tỷ lệ mở tốt,
• 3 đến 7% là tỷ lệ nhấp tốt,
• 5% là tỷ lệ thoát kém,
• 0. 01% là tỷ lệ thư rác kém,
• 1% là tỷ lệ hủy đăng ký kém

Ngoài ra, hãy nhớ rằng tỷ lệ mở và tỷ lệ nhấp có thể là số liệu phù phiếm (hãy đọc “chúng không thực sự quan trọng”). Vào cuối ngày, điều bạn thực sự muốn theo dõi là mục tiêu cuối cùng hoặc chuyển đổi. Tại Airbnb, họ theo dõi điểm chất lượng email, đây là một chỉ báo tốt về chất lượng tương tác

Trình tạo URL của Google có thể giúp theo dõi nếu bạn đang sử dụng Google Analytics

Gửi điểm và danh tiếng

Email của bạn có danh tiếng và điểm số liên quan đến chúng. Điều này ảnh hưởng đến cách các ISP và nhà cung cấp hộp thư xử lý email của bạn, liệu họ có chấp nhận hay từ chối email đó và liệu họ có gửi email đến hộp thư đến của người nhận hay chuyển thẳng đến thư rác hay không

Một số yếu tố đóng góp là

• danh tiếng IP của bạn (kiểm tra danh tiếng của bạn với SenderScore),
• chữ ký tên miền của bạn (xem DKIM và SPF),
• tỷ lệ thoát và tỷ lệ khiếu nại

Gửi Email Hàng Loạt

Khi bạn gửi nhiều email (hãy tưởng tượng một chiến dịch có hàng triệu email), chúng không được gửi đi ngay lập tức. Chúng chỉ có thể được gửi với tốc độ nhanh nhất mà máy chủ và địa chỉ IP có thể xử lý chúng. Hãy nhớ rằng người nhận của bạn có thể không nhận được email cùng một lúc

Vì vậy, nếu bạn đang gửi hàng triệu email cùng một lúc, có thể bạn sẽ cần khá nhiều IP để xử lý tải

Email khách hàng

Litmus theo dõi thị phần của các ứng dụng email, dựa trên số liệu thống kê nội bộ của chính nó. Hãy nhớ rằng điều này có thể không giống nhau đối với cơ sở khách hàng của bạn, nhưng đó là một chỉ báo tốt để theo dõi

Dưới đây là số liệu thống kê tính đến tháng 12 năm 2016

• điện thoại Iphone. 33%
• Gmail. 19%
• iPad. 12%
• Android. số 8%
• Apple Mail. 7%

Hãy nhớ rằng không phải tất cả các email đều có thể được theo dõi. Theo dõi email được thực hiện thông qua theo dõi pixel, vì vậy chỉ những khách hàng có bật hình ảnh mới báo cáo lại

Mẫu HTML

Xây dựng các mẫu email HTML có thể là một công việc nặng nhọc. Kết quả là, có rất nhiều email được thiết kế kém - lộn xộn, theo chủ đề, dài dòng, vô nghĩa, gây mất tập trung. Nếu bạn thích thử thách hoặc muốn có giao diện độc đáo, thì việc xây dựng của riêng bạn thực sự có thể thú vị và bổ ích. Ngoài ra, một số mẫu email tốt có sẵn

• mẫu giấy quỳ
• Mẫu email HTML đáp ứng thực sự đơn giản
• Mẫu email HTML
• Nền tảng cho Email 2

Xây dựng các mẫu email HTML

Bây giờ bạn đã biết cách thiết lập và gửi email đúng cách. Quyết định tiếp theo bạn sẽ đưa ra là có mã hóa mẫu HTML của riêng bạn hay không. Điều này phức tạp hơn một chút so với mã hóa trang web trung bình. Hãy đi sâu vào

Công cụ kết xuất máy khách

Thiết kế email vẫn còn trong thời kỳ đen tối. Do có nhiều ứng dụng email và thiết bị, email của bạn sẽ được hiển thị cho người dùng theo nhiều cách khác nhau

Ứng dụng email sử dụng các công cụ khác nhau để hiển thị email HTML

• Apple Mail, Outlook cho Mac, Android Mail và iOS Mail sử dụng WebKit
• Outlook 2000, 2002 và 2003 sử dụng Internet Explorer
• Outlook 2007, 2010 và 2013 sử dụng Microsoft Word (vâng, Word. )
• Máy khách web sử dụng công cụ tương ứng của trình duyệt (ví dụ: Safari sử dụng WebKit và Chrome sử dụng Blink)

Khách hàng cũng sẽ thêm hương vị phong cách của riêng họ lên trên phong cách của bạn. Ví dụ: Gmail đặt tất cả phông chữ

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Nhìn vào số liệu thống kê của riêng bạn để bạn biết những gì để thiết kế

Hỗ trợ Gmail cho CSS nội tuyến và truy vấn phương tiện

Chỉ gần đây, Google mới công bố hỗ trợ CSS nhúng và truy vấn phương tiện trong Gmail. Điều này rất lớn đối với ngành phát triển email

Giờ đây, kể từ tháng 9 năm 2016, Gmail sẽ hỗ trợ nhiều thuộc tính CSS, giúp việc phát triển mẫu cho Gmail dễ dàng hơn rất nhiều

Sử dụng bảng HTML để bố trí

Div có các vấn đề về định vị và mô hình hộp trong các ứng dụng khách khác nhau — cụ thể là những ứng dụng sử dụng Microsoft Word để kết xuất (i. e. Quan điểm). Bạn có thể sử dụng div nếu muốn, nhưng sẽ an toàn hơn khi viết mã như năm 1999 và bám vào bảng. Điều này có nghĩa là

• 
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  7 thay vì

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  8,

• 
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  9 thay vì

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
    <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
          <tr>
            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  0,

• 
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
    <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
          <tr>
            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  1 thay vì

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
    <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
          <tr>
            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  2,
• CSS2 thay vì CSS3,
• HTML4 thay vì HTML5,

• 
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
    <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
          <tr>
            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  3 thay vì

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
    <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
          <tr>
            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  4,
• Thuộc tính HTML thay vì CSS,
• CSS nội tuyến thay vì biểu định kiểu hoặc khối

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
    <tr>
      <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
          <tr>
            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  5

Đây là những thực tiễn tốt nhất. Bạn chắc chắn có thể bỏ qua con đường an toàn và vượt lên trên

Khi sử dụng bảng, đừng quên

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
  <tr>
    <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS nội tuyến

Một số ứng dụng khách (đáng chú ý nhất là Gmail cho đến gần đây) sẽ loại bỏ bất kỳ CSS nào không được nội tuyến. Bạn có một vài lựa chọn ở đây

• viết CSS nội tuyến khi bạn đi,
• sử dụng một CSS inliner dựa trên web,
• sử dụng một trình nội tuyến CSS có lập trình,
• hãy để ESP của bạn xử lý nội tuyến cho bạn (nếu nó hỗ trợ)

Viết nội tuyến khi bạn di chuyển không chính xác là một giải pháp có thể mở rộng hoặc có thể bảo trì, vì vậy tôi có xu hướng không khuyến nghị điều này, nhưng tôi biết rằng rất nhiều nhà phát triển email thích điều này để duy trì quyền kiểm soát 100%. Nếu bạn viết nội tuyến CSS của mình theo cách thủ công, thì tôi khuyên bạn nên sử dụng đoạn mã và/hoặc ngôn ngữ tạo khuôn mẫu với các phần tử và trình trợ giúp. Điều này sẽ giúp bạn không phải lặp lại chính mình

Các trình nội tuyến dựa trên web bao gồm Trình nội tuyến CSS đáp ứng của Email HTML và Trình nội tuyến Email phản hồi của Nền tảng cho Email

Đối với nội tuyến có lập trình, tôi khuyên dùng Node. nước ép mô-đun js. Premailer gem và Roadie là những lựa chọn thay thế tốt cho Ruby

nút

Cố gắng đạt được nút khách hàng chéo hoàn hảo là điều khó khăn. Như đã đề cập, bạn nên sử dụng bảng và ô bảng cho hầu hết mọi thứ, kể cả các nút

Sở thích của tôi là sử dụng giải pháp sau. Đây là cách thông thường bạn có thể định kiểu một nút cho trang web

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Thay vào đó, hãy viết nó như thế này

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Sau đó, khi CSS của bạn được inlined, nó sẽ trông như thế này

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
  <tr>
    <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Những gì đang xảy ra ở đây? .

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
  <tr>
    <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
  <tr>
    <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Đây chỉ là một cách để thực hiện các nút trong email. Phải thừa nhận rằng không phải lúc nào nó cũng giống hệt nhau ở mọi khách hàng, nhưng web cũng không phải lúc nào cũng hoàn hảo về pixel. Tôi thích điều này hơn vì nó đơn giản hơn và không liên quan đến việc sử dụng nội dung hình ảnh hoặc VML

VML là gì? . Vector Markup Language (VML) được hỗ trợ bởi các phiên bản cũ của Outlook. Theo Microsoft, kể từ Internet Explorer (IE) 10, VML đã lỗi thời, điều đó có nghĩa là nó không còn được hỗ trợ trong các phiên bản IE mới. Tuy nhiên, miễn là có Outlook 2007, 2010 và 2013, bạn sẽ thấy nó được sử dụng, thường là cho hình nền

kiểu chữ

Nói chung, gắn bó với phông chữ hệ thống tiêu chuẩn là dễ dàng nhất. Điều này bao gồm Helvetica, Arial, v.v. Tuy nhiên, chúng tôi có thể sử dụng phông chữ web, chẳng hạn như Google Fonts. Đặt chúng phía sau một truy vấn phương tiện có điều kiện của WebKit để Outlook không làm chúng rối tung lên

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hãy nhớ bao gồm một họ phông chữ, cỡ chữ và màu sắc cho mỗi

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

điều kiện

Chúng tôi có thể áp dụng các kiểu CSS cụ thể và hiển thị hoặc ẩn các thành phần và nội dung cho các phiên bản Outlook khác nhau

Các mục tiêu sau đây nhắm mục tiêu tất cả các phiên bản Outlook dựa trên Microsoft Word

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Đoạn mã tiếp theo này nhắm mục tiêu tất cả các phiên bản Outlook dựa trên IE

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Chúng tôi cũng có thể nhắm mục tiêu số phiên bản cụ thể của Outlook

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Chúng tôi có thể nhắm mục tiêu các máy khách dựa trên WebKit bằng truy vấn phương tiện

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hình ảnh và Truyền thông

Hình ảnh trong Email

Một số khách hàng sẽ hiển thị hình ảnh theo mặc định. Một số sẽ không. Hãy ghi nhớ điều này khi đưa hình ảnh vào nội dung email của bạn. Điều này cũng ảnh hưởng đến số liệu theo dõi vì hình ảnh thường được sử dụng để theo dõi lượt mở

• Outlook chặn kết xuất hình ảnh theo mặc định
• Apple Mail không
• Gmail không (nữa)

Hãy nhớ bao gồm văn bản

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hãy nhớ bao gồm thiết lập lại cơ bản cho tất cả các hình ảnh

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

GIF hoạt hình được hỗ trợ trong hầu hết các máy khách. Các phiên bản Outlook 2007 đến 2013 không hỗ trợ GIF động, thay vào đó sẽ quay lại khung hình đầu tiên

Hãy nhớ nén nội dung phương tiện của bạn và tải chúng lên mạng phân phối nội dung (CDN), chẳng hạn như Amazon Web Services, Cloudinary hoặc imgix. Hầu hết các ESP tiếp thị sẽ xử lý việc này cho bạn

Đồ họa vector có thể mở rộng (SVG) có rất nhiều lợi thế trên web. Như bạn mong đợi, hỗ trợ qua email khác nhau và SVG yêu cầu một số điều kiện hoặc thủ thuật dự phòng. Tôi thường khuyên bạn nên tránh xa SVG trong email, nhưng nếu bạn muốn nghiêm túc về nó, thì CSS-Tricks có hướng dẫn về hỗ trợ SVG trong email

Đối với hình ảnh sẵn sàng cho Retina, hãy cung cấp hình ảnh lớn hơn (1. 5× thành 3×) và thay đổi kích thước. Tôi thường lưu hình ảnh chất lượng thấp có kích thước 2×, hình ảnh này hoạt động tốt. (Tôi đã viết thêm về kỹ thuật này. )

Hãy nhớ rằng, đối với Outlook, bạn cần khai báo độ rộng của hình ảnh với thuộc tính

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Video trong Email

Video được hỗ trợ trong iOS, Apple Mail và Outlook. com. Bạn có thể sử dụng truy vấn phương tiện để hiển thị hoặc ẩn video dựa trên ứng dụng khách. Email on Acid có nhiều hơn về hỗ trợ video qua email

Để có cảm hứng, hãy xem hướng dẫn của Kevin Mandeville về mã hóa video HTML5 làm nền trong email — nội dung ấn tượng và đáng xem

Biểu mẫu trong Email

Hỗ trợ cho các phần tử biểu mẫu khác nhau. Cố gắng tránh xa và liên kết với một biểu mẫu bên ngoài nếu bạn cần. Campaign Monitor đưa ra một số lời khuyên về các biểu mẫu

Rõ ràng, nó phụ thuộc vào mục tiêu của bạn. Tránh xa các biểu mẫu sẽ an toàn hơn, nhưng Rebelmail và Mixmax đã làm được những điều thú vị với các biểu mẫu cho khảo sát và thương mại điện tử, với sự hỗ trợ dự phòng tốt

Tác vụ Gmail

Google cung cấp các hành động hữu ích cho Gmail. Bạn có thể đã nhìn thấy chúng trên GitHub cho các vấn đề hoặc trên Amazon cho các đơn đặt hàng

Thêm mã là đơn giản. Bạn có hai lựa chọn

• JSON-LD
• vi dữ liệu

Bắt danh sách trắng bao gồm một vài bước nữa. Bạn có thể kiểm tra các hành động của Gmail bằng địa chỉ

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Văn bản tiêu đề trước

Một cái gì đó quan trọng nhưng thường bị lãng quên là văn bản tiêu đề trước. Một số khách hàng hiển thị văn bản xem trước bên cạnh hoặc dưới dòng chủ đề. Những ứng dụng khách này bao gồm iOS, Apple Mail, Outlook 2013, Gmail và AOL

Khách hàng sẽ lấy đoạn văn bản đầu tiên họ tìm thấy trong nội dung email của bạn và hiển thị nó ở đây. Tận dụng tối đa điều này và thêm một yếu tố ẩn vào nội dung cơ thể của bạn xuất hiện đầu tiên. Văn bản này sẽ cung cấp thêm động lực để người dùng mở email của bạn. Ẩn văn bản như vậy

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Sử dụng công cụ tiêu đề và chủ đề của Austin Woodall để xem trước các chủ đề và tiêu đề email của bạn

Kiểm tra Email

Tôi không nghĩ mình đã từng gửi email thành công ngay lần đầu tiên. Luôn luôn có điều gì đó cần sửa, luôn có lỗi đánh máy, luôn có sự cố kết xuất trong Outlook, luôn có điều gì đó tôi quên thêm vào

Bạn có thể kiểm tra email của mình theo một số cách

• Gửi email cho chính bạn và kiểm tra nó trên ứng dụng khách trên máy tính để bàn (Outlook), ứng dụng web (Gmail) và ứng dụng khách di động (iOS Mail)
• Tự động kiểm tra bằng Litmus hoặc Email on Acid
• Đọc lại nội dung và kiểm tra bố cục hiển thị
• Thử nghiệm A/B với nhiều loại nội dung, độ dài nội dung và dòng chủ đề

Làm thế nào để bạn gửi email HTML cho chính mình? . Nó khó hơn bạn nghĩ. PutsMail cho phép bạn thực hiện việc này khá dễ dàng và Thunderbird cho phép bạn soạn thảo bằng trình soạn thảo HTML của nó

MIME nhiều phần

Một email văn bản thuần túy chỉ có vậy, văn bản thuần túy. Email HTML chỉ là HTML. Hầu hết các email bạn gửi hoặc nhận là email nhiều phần MIME (Multipurpose Internet Mail Extensions) (đừng nhầm với loại MIME). Tiêu chuẩn này kết hợp cả văn bản thuần túy và HTML, để người nhận quyết định hiển thị cái nào

Khi bạn gửi email, cho dù là giao dịch hay hàng loạt, hãy bao gồm cả phiên bản HTML và văn bản thuần túy. Theo suy nghĩ của bạn, ngay cả khi mọi người đều sử dụng ứng dụng khách hiển thị HTML, thì vẫn gửi văn bản thuần túy

Ngoài ra, hãy lưu ý rằng một số ứng dụng khách hiển thị email văn bản thuần dưới dạng HTML; . Hầu hết các ESP sẽ xây dựng MIME cho bạn, vì vậy bạn không thực sự cần phải lo lắng về điều đó. Một số cũng sẽ tạo phiên bản thuần văn bản, dựa trên HTML của bạn

mẹo chuyên nghiệp. Trong Gmail, chọn “Hiển thị bản gốc” từ trình đơn thả xuống để xem MIME đầy đủ

Một phần MIME mới đã xuất hiện.

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

khả năng tiếp cận

Trên web, nếu bạn tuân theo các tiêu chuẩn và phương pháp hay nhất, đồng thời sử dụng đánh dấu ngữ nghĩa và cú pháp HTML hợp lệ, thì bạn có xu hướng nhận được khả năng truy cập cơ bản ngay lập tức. Thật không may, với email, do chúng tôi bị hack quá nhiều và hỗ trợ HTML kém nên khả năng truy cập thường bị bỏ qua

Tôi đã thấy rất ít cuộc thảo luận về khả năng truy cập email, nhưng một điều nổi bật là bài đăng của Mark Robbins về khả năng truy cập. Ông đề nghị như sau

• Thêm

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  08 vào mỗi bảng để rõ ràng bảng đang được sử dụng để bố trí
• Cung cấp văn bản

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  03 với các mô tả có ý nghĩa
• Nếu bạn không cần hoặc muốn văn bản

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  03, thì hãy sử dụng

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  21 để trình đọc màn hình biết văn bản đó được để trống
• Sử dụng các thẻ HTML ngữ nghĩa, chẳng hạn như

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  22 và

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  23, nếu có
• Sử dụng thuộc tính

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  24 cho các phần tử như đầu trang và chân trang (ví dụ:

  
  <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td> <a href="" target="_blank">Take action now</a> </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

  25)

Thiết kế email đáp ứng

• Email mở trên di động ở mức 50% và đang tăng lên. Số liệu chính xác phụ thuộc vào báo cáo bạn kiểm tra và đối tượng bạn phục vụ, nhưng tôi nghĩ tất cả chúng ta đều có thể đồng ý rằng điều này quan trọng
• Thị phần ứng dụng email khách, tính đến tháng 8 năm 2016, đặt iPhone ở mức 33%, iPad ở mức 11% và Android ở mức 10% (tức là hơn 50%. )
• MailChimp nhận thấy rằng số lần nhấp duy nhất giữa những người dùng thiết bị di động cho các chiến dịch phản hồi đã tăng từ 2. 7 đến 3. 1% — tăng gần 15%

“Thiết kế web đáp ứng” là một cụm từ được đặt ra bởi Ethan Marcotte vào năm 2010

Bằng cách kết hợp bố cục linh hoạt, dựa trên lưới và truy vấn phương tiện CSS3, chúng tôi có thể tạo một thiết kế đáp ứng tốt hình dạng của màn hình hiển thị nó

Trong thế giới email, chúng ta vẫn có thể sử dụng thiết kế linh hoạt, bố cục dựa trên lưới và truy vấn phương tiện. Vấn đề là không phải tất cả khách hàng đều hỗ trợ những. Do đó, chúng tôi cần một số hack trên đường đi

Cho đến gần đây, Gmail không hỗ trợ truy vấn phương tiện. Rất may, kể từ tháng 9 năm 2016, hầu hết các khách hàng của họ đều. Tuy nhiên, một số ứng dụng khách di động vẫn không, bao gồm Yahoo, Windows Phone 8 và Gmail cho Android

Một số kỹ thuật được sử dụng trong thế giới email để giải quyết vấn đề thiếu hỗ trợ cho các truy vấn phương tiện. Một số thuật ngữ bạn sẽ nghe là “linh hoạt”, “thích ứng”, “phản hồi nhanh”, “lai” và “xốp. ”

Dịch

Giải pháp đơn giản nhất là bám vào một cột duy nhất và làm cho email của bạn trôi chảy. Điều này có nghĩa là khi khung nhìn co lại, vùng nội dung của bạn co lại

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Đáp ứng và thích ứng

Sử dụng truy vấn phương tiện và điểm dừng, chúng tôi có thể cung cấp các kiểu thay thế cho các chế độ xem có kích thước khác nhau. Chúng ta cũng có thể ẩn hoặc hiện các phần tử

Điều này bắt đầu trở nên phức tạp khi bạn giới thiệu lưới và cột. Bạn có thể có bố cục hai cột và sau đó chuyển sang bố cục một cột xếp chồng lên nhau bên dưới chiều rộng khung nhìn nhất định

Tuy nhiên, như chúng ta đã thấy, các truy vấn phương tiện không được hỗ trợ ở mọi nơi, vì vậy điều này không phải lúc nào cũng đáng tin cậy

lai và xốp

Kỹ thuật này sử dụng một chút linh hoạt, một chút phản hồi nhanh và một vài thủ thuật để hỗ trợ Outlook. Chúng tôi cũng đảm bảo rằng các cột xếp chồng lên nhau mà không có truy vấn phương tiện

Kỹ thuật này được phác thảo bởi ActionRocket và Nicole Merlin đã viết một hướng dẫn từng bước tuyệt vời về nó

Đây là một đoạn mã tôi sử dụng để tạo hầu hết các email của mình

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hãy xem kho lưu trữ nguồn mở xốp của Fabio Carneiro trên GitHub và đọc bài viết của Stig về mã hóa email ưu tiên thiết bị di động. Rémi Parmentier cũng có một kỹ thuật phản hồi khác không cần truy vấn phương tiện và sử dụng hàm

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hình ảnh phản hồi

Như đã đề cập, sử dụng hình ảnh Retina ở 1. 5× đến 3× và đặt kích thước hình ảnh nội tuyến

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Chúng tôi không thể dựa vào

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td> <a href="" target="_blank">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Tự động hóa quy trình làm việc của bạn

Quá trình kết hợp một email chống đạn rất phức tạp. Có rất nhiều bước, và có rất nhiều điều sai sót

Giống như bất kỳ nhiệm vụ đơn điệu nào với các bước, tôi khuyên bạn nên tự động hóa những gì bạn có thể để bạn xây dựng hệ thống một lần và giúp công việc trong tương lai dễ dàng hơn

Brian Graves có một bài viết hay về cách tạo mô-đun email của bạn. Giống như bạn có một hệ thống thiết kế và thư viện mẫu cho trang web hoặc ứng dụng, bạn nên làm như vậy đối với email, làm cho các thành phần có thể tái sử dụng và email nhất quán trên sản phẩm và công ty của bạn

Kevin Mandeville khuyên bạn nên sử dụng các đoạn mã có thể tái sử dụng để tối ưu hóa quy trình làm việc của mình, để bạn không phải viết lại mã liên tục. Trong bài đăng của mình, anh ấy phác thảo cách sử dụng đoạn trích trong các trình chỉnh sửa hiện đại (chẳng hạn như Atom và Sublime) và anh ấy chỉ ra thư viện đoạn trích do cộng đồng đóng góp do Litmus lưu trữ

Về phần mình, tôi đã tổng hợp và mã nguồn mở quy trình làm việc của Grunt để tự động hóa các bản dựng email. Nó chạy nhiều tác vụ khác nhau, chẳng hạn như CSS nội tuyến, nén hình ảnh, tải hình ảnh lên CDN, gửi bản xem trước và thử nghiệm với Litmus, tất cả chỉ bằng một lệnh. Nếu bạn chưa quen với Grunt, tôi đã viết một bài hướng dẫn chi tiết về cách thức hoạt động của nó. Foundation for Email cũng có một số công cụ tự động hóa tuyệt vời dành cho nhà phát triển, cũng như Mailjet với khung email phản hồi MJML

Nhìn về tương lai

Google vừa mới triển khai hỗ trợ cho các truy vấn phương tiện; . Vì vậy, tương lai có vẻ tươi sáng hơn nhiều

Ngày càng có nhiều công ty và nhà phát triển đang thử nghiệm những gì có thể với công nghệ email. Hoạt hình CSS, âm thanh, giỏ hàng trong email. Mong đợi nhiều trường hợp email tương tác và động xuất hiện vào năm 2017

Phần kết luận

Thiết kế và phát triển email là một con thú. Nó rất giống với việc xây dựng một trang web… 10 năm trước. Các nhà cung cấp ứng dụng email không tiến bộ như các nhà cung cấp trình duyệt web trong việc áp dụng các tiêu chuẩn mới và người dùng cũng như các công ty của chúng tôi không áp dụng các ứng dụng email mới như chúng tôi làm với trình duyệt web. Thêm vào đó là sự gia tăng của thiết bị di động và chúng tôi rơi vào tình trạng phải hỗ trợ sự kết hợp phức tạp giữa ứng dụng khách và phiên bản

Phần giới thiệu của tôi ở đây là tổng quan cấp cao; . Hy vọng rằng nó đã cung cấp cho bạn cái nhìn sâu sắc về thế giới xây dựng và gửi email, đồng thời các đoạn mã và tài nguyên đã thêm vài giờ vào cuộc sống của bạn

HTML có thể được sử dụng trong email không?

Làm cách nào tôi có thể đặt liên kết HTML bên trong nội dung email?