Pemasaran & Otomasi EmailPemasaran Seluler dan Tablet

16 Praktik Terbaik Email HTML Ramah Seluler yang Memaksimalkan Penempatan dan Keterlibatan Kotak Masuk

Pada tahun 2023, kemungkinan ponsel akan melampaui desktop sebagai perangkat utama untuk membuka email. Faktanya, HubSpot menemukan itu 46 persen dari semua email terbuka sekarang terjadi di ponsel. Jika Anda tidak mendesain email untuk seluler, Anda meninggalkan banyak keterlibatan dan uang di atas meja.

  1. Otentikasi Email: Memastikan Anda email diautentikasi ke domain pengirim dan IP alamat sangat penting untuk masuk ke kotak masuk dan tidak dialihkan ke folder sampah atau spam. Ini juga penting, tentu saja, Anda menyediakan sarana untuk memilih keluar dari email menggunakan platform yang menyertakan tautan berhenti berlangganan.
  2. Desain responsif: Grafik HTML email seharusnya dirancang untuk menjadi responsif, yang berarti dapat menyesuaikan dengan ukuran layar perangkat yang sedang dilihat. Ini memastikan bahwa email terlihat bagus di desktop dan perangkat seluler.
  3. Baris subjek yang jelas dan ringkas: Baris subjek yang jelas dan ringkas penting bagi pengguna seluler karena mereka mungkin hanya melihat beberapa kata pertama dari baris subjek di panel pratinjau email mereka. Itu harus singkat dan secara akurat mencerminkan isi email. Panjang karakter optimal dari baris subjek email dapat bervariasi tergantung pada sejumlah faktor, seperti konten email, audiens, dan klien email yang digunakan. Namun, sebagian besar ahli merekomendasikan agar baris subjek email tetap pendek dan langsung ke intinya, biasanya antara 41-50 karakter atau 6-8 kata. Di perangkat seluler, baris subjek yang lebih panjang dari 50 karakter mungkin terpotong, dan dalam beberapa kasus, hanya menampilkan beberapa kata pertama dari baris subjek. Hal ini dapat mempersulit penerima untuk memahami pesan utama email dan dapat mengurangi kemungkinan email dibuka.
  4. Prajudul: Preheader email adalah ringkasan singkat dari konten email yang muncul di samping atau di bawah baris subjek di kotak masuk klien email. Ini adalah elemen penting yang dapat memengaruhi tingkat pembukaan email Anda saat dioptimalkan. Sebagian besar klien memasukkan HTML dan CSS untuk memastikan bahwa teks preheader disiapkan dengan benar.
<!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. Tata letak satu kolom: Email yang dirancang dengan tata letak satu kolom lebih mudah dibaca di perangkat seluler. Konten harus diatur dalam urutan yang logis dan disajikan dalam format yang sederhana dan mudah dibaca. Jika Anda memiliki banyak kolom, memanfaatkan CSS dapat mengatur kolom dengan anggun dalam tata letak satu kolom.

Ini sebuah Tata letak email HTML yaitu 2 kolom di desktop dan diciutkan menjadi satu kolom di layar seluler:

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

Ini sebuah Tata letak email HTML yaitu 3 kolom di desktop dan diciutkan menjadi satu kolom di layar seluler:

<!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. Mode Terang dan Gelap: jembatan klien email mendukung mode terang dan gelap CSS prefers-color-scheme untuk mengakomodasi preferensi pengguna. Pastikan untuk menggunakan jenis gambar di mana Anda memiliki latar belakang transparan. Berikut adalah contoh kode.
<!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. Font besar dan terbaca: Ukuran dan gaya font harus dipilih agar teks mudah dibaca di layar kecil. Gunakan ukuran font minimal 14pt dan hindari penggunaan font yang sulit dibaca di layar kecil. Font yang umum digunakan memiliki kemungkinan tinggi untuk dirender secara konsisten di klien email yang berbeda, jadi menggunakan Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, dan Trebuchet MS biasanya merupakan font yang aman. Jika Anda menggunakan font khusus, pastikan font fallback teridentifikasi di CSS Anda:
<!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. Penggunaan gambar yang optimal: Gambar dapat memperlambat waktu pemuatan dan mungkin tidak ditampilkan dengan benar di semua perangkat seluler. Gunakan gambar dengan hemat, dan pastikan ukurannya dan dikompresi untuk tampilan seluler. Pastikan untuk mengisi teks alternatif untuk gambar Anda jika klien email memblokirnya. Semua gambar harus disimpan dan dirujuk dari situs web yang aman (SSL). Berikut contoh kode gambar responsif dalam 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. Hapus ajakan bertindak (CTA): CTA yang jelas dan menonjol penting dalam email apa pun, tetapi sangat penting dalam email yang ramah seluler. Pastikan CTA mudah ditemukan dan cukup besar untuk diklik di perangkat seluler. Jika Anda memasukkan tombol, Anda dapat memastikan bahwa Anda telah menulisnya dalam CSS dengan tag gaya sebaris juga:
<!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. Isi singkat dan padat: Jauhkan isi email singkat dan to the point. Batas karakter untuk email HTML dapat bervariasi tergantung pada klien email yang digunakan. Namun, sebagian besar klien email memberlakukan batas ukuran maksimum untuk email, biasanya antara 1024-2048 kilobyte (KB), yang menyertakan kode HTML dan gambar atau lampiran apa pun. Gunakan subjudul, poin-poin, dan teknik pemformatan lainnya untuk membuat konten mudah dipindai saat menggulir dan membaca di layar kecil.
  2. Elemen interaktif: memasukkan elemen interaktif yang menarik perhatian pelanggan Anda akan mendorong tingkat keterlibatan, pemahaman, dan konversi dari email Anda. GIF animasi, penghitung waktu mundur, video, dan elemen lainnya didukung oleh sebagian besar klien email ponsel cerdas.
  3. Personalisasi: Mempersonalisasi sapaan dan konten untuk pelanggan tertentu dapat mendorong keterlibatan secara signifikan, pastikan Anda melakukannya dengan benar! Misalnya. Memiliki fallback jika tidak ada data di bidang nama depan itu penting.
  4. Konten Dinamis: Segmentasi dan penyesuaian konten dapat mengurangi tingkat berhenti berlangganan Anda dan membuat pelanggan Anda tetap terlibat.
  5. Integrasi Kampanye: Sebagian besar penyedia layanan email modern memiliki kemampuan untuk menambahkan secara otomatis String kueri kampanye UTM untuk setiap tautan sehingga Anda dapat melihat email sebagai saluran di analitik.
  6. Pusat Preferensi: Pemasaran email terlalu penting untuk sekadar pendekatan opt-in atau opt-out ke email. Memasukkan pusat preferensi di mana pelanggan Anda dapat mengubah seberapa sering mereka menerima email dan konten apa yang penting bagi mereka adalah cara yang bagus untuk mempertahankan program email yang kuat dengan pelanggan yang terlibat!
  7. Tes tes tes: Pastikan untuk menguji email Anda di beberapa perangkat atau gunakan aplikasi untuk pratinjau email Anda di seluruh klien email untuk memastikan tampilannya bagus dan berfungsi dengan baik pada berbagai ukuran layar dan sistem operasi SEBELUM Anda mengirim. Lakmus melaporkan bahwa 3 lingkungan terbuka seluler terpopuler tetap sama: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Selain itu, gabungkan variasi pengujian baris subjek dan konten Anda untuk meningkatkan rasio buka dan klik-tayang Anda. Banyak platform email sekarang menggabungkan pengujian otomatis yang akan mengambil sampel daftar, mengidentifikasi variasi pemenang, dan mengirimkan email terbaik ke pelanggan yang tersisa.

Jika perusahaan Anda kesulitan merancang, menguji, dan menerapkan email responsif seluler yang mendorong keterlibatan, jangan ragu untuk menghubungi perusahaan saya. DK New Media memiliki pengalaman dalam penerapan hampir semua penyedia layanan email (ESP).

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.