Email Marketing & OtomasiPemasaran Seluler lan Tablet

16 Praktik Paling Apik Email HTML Mobile Friendly Sing Ngoptimalake Penempatan lan Keterlibatan Inbox

Ing taun 2023, kemungkinan seluler bakal ngluwihi desktop minangka piranti utama kanggo mbukak email. Nyatane, HubSpot nemokake iku 46 persen kabeh email mbukak saiki dumadi ing seluler. Yen sampeyan ora ngrancang email kanggo seluler, sampeyan bakal ninggalake akeh keterlibatan lan dhuwit ing meja.

  1. Otentikasi Email: Mesthekake sampeyan email wis dikonfirmasi menyang domain ngirim lan IP alamat iku kritis kanggo njaluk menyang kothak mlebu lan ora routed menyang ajur utawa folder spam. Sampeyan uga penting, mesthi, sampeyan menehi cara kanggo milih metu saka email nggunakake platform sing nggabungake link unsubscribe.
  2. Desain responsif: The HTML email kudu dirancang supaya responsif, sing tegese bisa nyetel ukuran layar piranti sing lagi dideleng. Iki mesthekake yen email katon apik ing desktop lan piranti seluler.
  3. Baris subyek sing cetha lan ringkes: Baris subyek sing cetha lan ringkes penting kanggo pangguna seluler amarga mung bisa ndeleng sawetara tembung pisanan baris subyek ing panel pratinjau email. Sampeyan kudu ringkes lan kanthi akurat nggambarake isi email kasebut. Dawane karakter sing optimal saka baris subyek email bisa beda-beda gumantung saka sawetara faktor, kayata isi email, pamirsa, lan klien email sing digunakake. Nanging, umume ahli nyaranake supaya baris subyek email tetep cekak lan langsung, biasane antarane 41-50 karakter utawa 6-8 tembung. Ing piranti seluler, baris subyek sing luwih dawa saka 50 karakter bisa dipotong, lan ing sawetara kasus, mung bisa nampilake sawetara tembung pisanan saka baris subyek. Iki bisa dadi angel kanggo panampa mangertos pesen utama email lan bisa nyuda kemungkinan email dibukak.
  4. Preheader: Preheader email minangka ringkesan isi email sing katon ing jejere utawa ing ngisor baris subyek ing kothak mlebu klien email. Iki minangka unsur penting sing bisa nyebabake tingkat mbukak email nalika dioptimalake. Umume klien nggabungake HTML lan CSS kanggo mesthekake yen teks preheader wis disetel kanthi bener.
<!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 kolom tunggal: Email sing dirancang nganggo tata letak kolom siji luwih gampang diwaca ing piranti seluler. Isi kasebut kudu diatur kanthi urutan logis lan diwenehi format sing prasaja lan gampang diwaca. Yen sampeyan duwe pirang-pirang kolom, nggunakake CSS bisa ngatur kolom kanthi tata letak siji-kolom.

Punika tata letak email HTML yaiku 2 kolom ing desktop lan ambruk dadi kolom siji ing 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>

Punika tata letak email HTML yaiku 3 kolom ing desktop lan ambruk dadi kolom siji ing 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 cahya lan peteng: paling klien email ndhukung mode cahya lan peteng CSS prefers-color-scheme kanggo nampung preferensi pangguna. Priksa manawa sampeyan nggunakake jinis gambar ing ngendi sampeyan duwe latar mburi transparan. Punika conto 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. Huruf gedhe sing bisa diwaca: Ukuran lan gaya font kudu dipilih supaya teks gampang diwaca ing layar cilik. Gunakake paling sethithik ukuran font 14pt lan aja nganggo font sing angel diwaca ing layar cilik. Huruf sing umum digunakake nduweni kemungkinan dhuwur kanggo nggawe kanthi konsisten ing klien email sing beda-beda, mula nggunakake Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, lan Trebuchet MS biasane dadi font sing aman. Yen sampeyan nggunakake font khusus, priksa manawa sampeyan duwe font mundur sing diidentifikasi ing CSS sampeyan:
<!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. Panggunaan gambar sing optimal: Gambar bisa nyuda wektu mbukak lan bisa uga ora ditampilake kanthi bener ing kabeh piranti seluler. Gunakake gambar sparingly, lan priksa manawa padha ukuran lan dikompresi kanggo ndeleng seluler. Dadi manawa kanggo ngisi teks alt kanggo gambar sampeyan yen klien email ngalangi. Kabeh gambar kudu disimpen lan dirujuk saka situs web sing aman (SSL). Punika conto kode gambar responsif ing 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. Ajakan tumindak sing jelas (CTA): CTA sing jelas lan penting penting ing email apa wae, nanging penting banget ing email sing ramah seluler. Priksa manawa CTA gampang ditemokake lan cukup gedhe kanggo diklik ing piranti seluler. Yen sampeyan nggabungake tombol, sampeyan bisa mesthekake yen sampeyan wis nulis ing CSS kanthi tag gaya inline uga:
<!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 lan ringkes: Tansah isi email cekak lan langsung. Watesan karakter kanggo email HTML bisa beda-beda gumantung saka klien email sing digunakake. Nanging, umume klien email ngetrapake watesan ukuran maksimal kanggo email, biasane antarane 1024-2048 kilobyte (KB), sing kalebu kode HTML lan gambar utawa lampiran. Gunakake subjudul, titik peluru, lan teknik format liyane supaya konten bisa dipindai kanthi gampang nalika nggulung lan maca ing layar cilik.
  2. Unsur interaktif: gabungke unsur interaktif sing narik perhatian pelanggan sampeyan bakal ningkatake keterlibatan, pemahaman, lan tingkat konversi saka email sampeyan. GIF animasi, countdown timer, video, lan unsur liyane didhukung dening mayoritas klien email smartphone.
  3. Pribadhi: Nggawe pribadhi salam lan konten kanggo pelanggan tartamtu bisa nyebabake keterlibatan, priksa manawa sampeyan bener! Contone. Duwe fallbacks yen ora ana data ing kolom jeneng ngarep iku penting.
  4. Isi dinamis: Segmentasi lan kustomisasi konten bisa nyuda tingkat unsubscribe lan tetep melu pelanggan.
  5. Integrasi Kampanye: Umume panyedhiya layanan email modern duwe kemampuan kanggo nambah kanthi otomatis UTM kampanye querystrings kanggo saben pranala supaya sampeyan bisa ndeleng email minangka saluran ing analytics.
  6. Pusat Preferensi: Pemasaran email penting banget kanggo mung pendekatan opt-in utawa opt-out kanggo email. Nggabungake pusat pilihan ing ngendi pelanggan sampeyan bisa ngganti sepira kerepe dheweke nampa email lan konten apa sing penting kanggo dheweke minangka cara sing apik kanggo njaga program email sing kuwat karo pelanggan sing melu!
  7. Tes, Tes, Tes: Priksa manawa nyoba email sampeyan ing pirang-pirang piranti utawa gunakake aplikasi kanggo pratinjau email sampeyan ing klien email kanggo mesthekake yen katon apik lan fungsi mlaku ing macem-macem ukuran layar lan sistem operasi sadurunge sampeyan ngirim. Litmus laporan sing ndhuwur 3 paling populer re lingkungan mbukak seluler terus padha: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Uga, gabungke variasi tes baris subjek lan konten kanggo nambah tarif mbukak lan klik-tayang. Akeh platform email saiki nggabungake tes otomatis sing bakal menehi conto dhaptar, ngenali variasi sing menang, lan ngirim email sing paling apik menyang pelanggan sing isih ana.

Yen perusahaan sampeyan lagi berjuang karo ngrancang, nguji, lan ngetrapake email responsif seluler sing nyurung keterlibatan, aja ragu-ragu hubungi perusahaanku. DK New Media duwe pengalaman ing implementasine meh kabeh panyedhiya layanan email (ESP).

Douglas Karr

Douglas Karr punika CMO saka OpenINSIGHTS lan pangadeg ing Martech Zone. Douglas wis mbantu Welasan wiwitan MarTech sukses, wis mbantu ing amarga rajin liwat $ 5 bil ing pitukon lan investasi Martech, lan terus kanggo ngewangi perusahaan ing ngleksanakake lan ngotomatisasi dodolan lan strategi marketing. Douglas minangka transformasi digital sing diakoni sacara internasional lan pakar lan speaker MarTech. Douglas uga dadi penulis buku pandhuan Dummie lan buku kepemimpinan bisnis.

Artikel web

Bali menyang ndhuwur tombol
Cedhak

Adblock Dideteksi

Martech Zone bisa nyedhiyakake konten iki tanpa biaya amarga kita monetisasi situs liwat revenue iklan, pranala afiliasi, lan sponsor. Kita bakal ngormati yen sampeyan bakal mbusak blocker iklan nalika ndeleng situs kita.