Tiếp thị qua email & Tự động hóaTiếp thị trên điện thoại di động và máy tính bảng

16 Thực tiễn tốt nhất về email HTML thân thiện với thiết bị di động giúp tối đa hóa vị trí hộp thư đến và mức độ tương tác

Vào năm 2023, có khả năng thiết bị di động sẽ vượt qua máy tính để bàn trở thành thiết bị chính để mở email. Trên thực tế, HubSpot nhận thấy rằng 46% của tất cả các email mở hiện nay xảy ra trên điện thoại di động. Nếu bạn không thiết kế email cho thiết bị di động, bạn sẽ bỏ lỡ rất nhiều tương tác và tiền bạc.

  1. Xác thực email: Đảm bảo của bạn email được xác thực đến miền gửi và IP địa chỉ là rất quan trọng để truy cập hộp thư đến và không được chuyển đến thư mục thư rác hoặc thư rác. Tất nhiên, điều cần thiết là bạn cung cấp phương tiện từ chối nhận email bằng cách sử dụng nền tảng kết hợp liên kết hủy đăng ký.
  2. Thiết kế đáp ứng: Mô hình HTML email nên được được thiết kế để đáp ứng, có nghĩa là nó có thể điều chỉnh theo kích thước màn hình của thiết bị mà nó đang được xem. Điều này đảm bảo rằng email trông đẹp mắt trên cả máy tính để bàn và thiết bị di động.
  3. Dòng chủ đề rõ ràng và súc tích: Dòng chủ đề rõ ràng và súc tích rất quan trọng đối với người dùng thiết bị di động vì họ có thể chỉ nhìn thấy một vài từ đầu tiên của dòng chủ đề trong khung xem trước email của họ. Nó phải ngắn gọn và phản ánh chính xác nội dung của email. Độ dài ký tự tối ưu của dòng tiêu đề email có thể khác nhau tùy thuộc vào một số yếu tố, chẳng hạn như nội dung email, đối tượng và ứng dụng email đang được sử dụng. Tuy nhiên, hầu hết các chuyên gia khuyên bạn nên giữ cho dòng tiêu đề email ngắn và đi thẳng vào vấn đề, thường là từ 41-50 ký tự hoặc 6-8 từ. Trên thiết bị di động, các dòng chủ đề dài hơn 50 ký tự có thể bị cắt và trong một số trường hợp, chỉ có thể hiển thị một vài từ đầu tiên của dòng chủ đề. Điều này có thể khiến người nhận khó hiểu được thông điệp chính của email và có thể làm giảm khả năng email được mở.
  4. tiêu đề trước: Tiêu đề trước của email là một bản tóm tắt ngắn về nội dung của email xuất hiện bên cạnh hoặc bên dưới dòng chủ đề trong hộp thư đến của ứng dụng email. Đây là một yếu tố quan trọng có thể ảnh hưởng đến tỷ lệ mở email của bạn khi được tối ưu hóa. Hầu hết các khách hàng kết hợp HTML và CSS để đảm bảo rằng văn bản tiêu đề trước được thiết lập đúng.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. Bố cục một cột: Email được thiết kế với bố cục một cột sẽ dễ đọc hơn trên thiết bị di động. Nội dung nên được sắp xếp theo một trình tự hợp lý và được trình bày dưới dạng đơn giản, dễ đọc. Nếu bạn có nhiều cột, việc sử dụng CSS có thể sắp xếp các cột một cách duyên dáng trong bố cục một cột.

Đây là một Bố cục email HTML đó là 2 cột trên máy tính để bàn và thu gọn thành một cột duy nhất trên màn hình di động:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

Đây là một Bố cục email HTML đó là 3 cột trên máy tính để bàn và thu gọn thành một cột duy nhất trên màn hình di động:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Chế độ sáng và tối: Hầu hết ứng dụng email khách hỗ trợ chế độ sáng và tối CSS prefers-color-scheme để phù hợp với sở thích của người dùng. Đảm bảo sử dụng các loại hình ảnh mà bạn có nền trong suốt. Đây là một ví dụ mã.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. Phông chữ lớn, dễ đọc: Kích thước và kiểu phông chữ nên được chọn để làm cho văn bản dễ đọc trên màn hình nhỏ. Sử dụng ít nhất cỡ chữ 14pt và tránh sử dụng phông chữ khó đọc trên màn hình nhỏ. Các phông chữ thường được sử dụng có khả năng hiển thị nhất quán cao trên các ứng dụng email khác nhau, do đó, sử dụng Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma và Trebuchet MS thường là các phông chữ an toàn. Nếu bạn sử dụng phông chữ tùy chỉnh, hãy chắc chắn rằng bạn đã xác định phông chữ dự phòng trong CSS của mình:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. Sử dụng hình ảnh tối ưu: Hình ảnh có thể làm chậm thời gian tải và có thể không hiển thị chính xác trên tất cả các thiết bị di động. Sử dụng hình ảnh một cách tiết kiệm và đảm bảo rằng chúng có kích thước và nén để xem trên thiết bị di động. Đảm bảo điền vào văn bản thay thế cho hình ảnh của bạn trong trường hợp ứng dụng email chặn chúng. Tất cả các hình ảnh phải được lưu trữ và tham khảo từ một trang web an toàn (SSL). Đây là mã ví dụ về hình ảnh phản hồi trong email HTML.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Xóa lời kêu gọi hành động (Cố vấn trưởng): CTA rõ ràng và nổi bật rất quan trọng trong bất kỳ email nào, nhưng nó đặc biệt quan trọng trong email thân thiện với thiết bị di động. Đảm bảo rằng CTA dễ tìm và đủ lớn để nhấp vào trên thiết bị di động. Nếu bạn kết hợp các nút, bạn có thể đảm bảo rằng bạn cũng đã viết chúng bằng CSS với các thẻ kiểu nội tuyến:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. Nội dung ngắn gọn, súc tích: Giữ nội dung của email ngắn gọn và đi thẳng vào vấn đề. Giới hạn ký tự cho email HTML có thể khác nhau tùy thuộc vào ứng dụng email đang được sử dụng. Tuy nhiên, hầu hết các ứng dụng email đều áp đặt giới hạn kích thước tối đa cho email, thường là từ 1024-2048 kilobyte (KB), bao gồm cả mã HTML và mọi hình ảnh hoặc tệp đính kèm. Sử dụng các tiêu đề phụ, dấu đầu dòng và các kỹ thuật định dạng khác để làm cho nội dung có thể dễ dàng quét được khi cuộn và đọc trên màn hình nhỏ.
  2. Các yếu tố tương tác: Kết hợp các yếu tố tương tác thu hút sự chú ý của người đăng ký của bạn sẽ tăng tỷ lệ tương tác, hiểu và chuyển đổi từ email của bạn. GIF hoạt hình, đồng hồ đếm ngược, video và các yếu tố khác được hỗ trợ bởi phần lớn các ứng dụng email trên điện thoại thông minh.
  3. Cá nhân hóa: Cá nhân hóa lời chào và nội dung cho một người đăng ký cụ thể có thể thúc đẩy đáng kể mức độ tương tác, chỉ cần đảm bảo rằng bạn thực hiện đúng! Ví dụ. Có dự phòng nếu không có dữ liệu trong trường tên là rất quan trọng.
  4. Nội dung động: Việc phân đoạn và tùy chỉnh nội dung có thể giảm tỷ lệ hủy đăng ký của bạn và giữ chân người đăng ký của bạn.
  5. Tích hợp chiến dịch: Hầu hết các nhà cung cấp dịch vụ email hiện đại đều có khả năng tự động thêm Chuỗi truy vấn chiến dịch UTM cho mọi liên kết để bạn có thể xem email dưới dạng một kênh trong phân tích.
  6. Trung tâm ưu tiên: Tiếp thị qua email quá quan trọng đối với cách tiếp cận chọn tham gia hoặc từ chối đối với email. Kết hợp một trung tâm ưu tiên nơi những người đăng ký của bạn có thể thay đổi tần suất họ nhận email và nội dung nào quan trọng đối với họ là một cách tuyệt vời để duy trì một chương trình email mạnh mẽ với những người đăng ký tham gia!
  7. Kiểm tra, Kiểm tra, Kiểm tra: Đảm bảo kiểm tra email của bạn trên nhiều thiết bị hoặc sử dụng một ứng dụng để xem trước email của bạn trên các ứng dụng email để đảm bảo rằng nó trông đẹp và hoạt động bình thường trên các kích thước màn hình và hệ điều hành khác nhau TRƯỚC KHI bạn gửi. màu xanh lấy ở loài rêu báo cáo rằng 3 môi trường mở di động phổ biến nhất tiếp tục giống nhau: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ngoài ra, hãy kết hợp các biến thể thử nghiệm của dòng chủ đề và nội dung của bạn để cải thiện tỷ lệ mở và tỷ lệ nhấp của bạn. Nhiều nền tảng email hiện kết hợp thử nghiệm tự động sẽ lấy mẫu danh sách, xác định biến thể chiến thắng và gửi email tốt nhất cho những người đăng ký còn lại.

Nếu công ty của bạn đang vật lộn với việc thiết kế, thử nghiệm và triển khai các email phản hồi trên thiết bị di động nhằm thúc đẩy sự tương tác, đừng ngần ngại liên hệ với công ty của tôi. DK New Media có kinh nghiệm triển khai hầu như mọi nhà cung cấp dịch vụ email (ESP).

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.