Email Marketing & AutomationMobile na Tablet Marketing

16 Mobile Friendly HTML Email Praktek Pangalusna Nu Maksimalkeun Nempatkeun Koropak jeung Dursasana

Dina 2023, kamungkinan yén sélulér bakal ngaleuwihan desktop salaku alat utama pikeun muka email. Nyatana, HubSpot mendakan éta 46 persen sadaya email muka ayeuna lumangsung dina mobile. Upami anjeun henteu ngarancang email pikeun sélulér, anjeun bakal nyésakeun seueur papacangan sareng artos dina méja.

  1. Email auténtikasi: Mastikeun anjeun surelek dioténtikasi ka domain ngirim jeung IP alamat penting pikeun meunangkeun inbox jeung teu routed ka junk atawa folder spam. Éta ogé penting, tangtosna, anjeun nyayogikeun cara milih kaluar tina email nganggo platform anu ngalebetkeun tautan unsubscribe.
  2. Desain responsif: nu HTML email kudu dirancang pikeun responsif, nu hartina éta bisa nyaluyukeun kana ukuran layar alat nu eta keur ditempo. Ieu mastikeun yén email katingali saé dina desktop sareng alat sélulér.
  3. Garis subjek anu jelas sareng singket: Baris subjék anu jelas tur singket penting pikeun pamaké sélulér sabab ngan ukur ningali sababaraha kecap mimiti baris subjék dina jandela tilik emailna. Éta kedah ringkes sareng akurat ngagambarkeun eusi email. Panjang karakter optimal tina hiji garis subjek email bisa rupa-rupa gumantung kana sababaraha faktor, kayaning eusi email, panongton, sarta klien surélék nu dipaké. Sanajan kitu, lolobana ahli nyarankeun tetep garis subjek email pondok tur ka titik, ilaharna antara 41-50 karakter atawa 6-8 kecap. Dina alat sélulér, baris subjék anu panjangna leuwih ti 50 karakter bisa dipegatkeun, sarta dina sababaraha kasus, ngan ukur bisa mintonkeun sababaraha kecap mimiti baris subjék. Ieu tiasa ngajantenkeun panampi pikeun ngartos pesen utama email sareng tiasa ngirangan kamungkinan email dibuka.
  4. Preheader: Surélék preheader nyaéta ringkesan pondok tina eusi surelek nu nembongan di gigireun atawa di handap baris jejer dina koropak klien surelek. Ieu mangrupikeun unsur penting anu tiasa mangaruhan tingkat kabuka email anjeun nalika dioptimalkeun. Kalolobaan klien ngasupkeun HTML jeung CSS pikeun mastikeun yén téks preheader geus bener nyetél.
<!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 perenah kolom tunggal: Surélék anu dirarancang kalayan perenah hiji-kolom langkung gampang dibaca dina alat sélulér. Eusi kudu disusun dina runtuyan logis tur dibere dina basajan, format gampang-to-baca. Upami Anjeun gaduh sababaraha kolom, ngamangpaatkeun CSS gracefully bisa ngatur kolom dina perenah single-kolom.

Ieu hiji perenah email HTML nyaéta 2 kolom dina desktop sareng runtuh kana hiji kolom dina layar sélulér:

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

Ieu hiji perenah email HTML nyaéta 3 kolom dina desktop sareng runtuh kana hiji kolom dina layar sélulér:

<!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. Modeu Caang sareng Gelap: Lolobana klien email ngarojong modeu caang jeung poék CSS prefers-color-scheme pikeun nampung preferensi pamaké. Pastikeun ngagunakeun jinis gambar dimana anjeun gaduh latar transparan. Ieu 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. Font anu ageung sareng tiasa dibaca: Ukuran font sareng gaya kedah dipilih supados téks gampang dibaca dina layar leutik. Anggo sahenteuna ukuran font 14pt sareng ulah nganggo font anu hese dibaca dina layar leutik. Fon anu biasa dianggo gaduh kamungkinan anu luhur pikeun rendering sacara konsisten dina klien email anu béda, janten nganggo Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, sareng Trebuchet MS biasana mangrupikeun fon anu aman. Upami anjeun nganggo font khusus, pastikeun gaduh font fallback anu dicirikeun dina CSS anjeun:
<!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. Pamakéan gambar anu optimal: Gambar tiasa ngalambatkeun waktos beban sareng tiasa henteu ditingalikeun leres dina sadaya alat sélulér. Paké gambar sparingly, sarta pastikeun yén éta téh ukuran na dikomprés pikeun nempoan mobile. Pastikeun pikeun ngeusian téks alt pikeun gambar anjeun upami klien email ngablokir aranjeunna. Sadaya gambar kedah disimpen sareng dirujuk tina situs wéb anu aman (SSL). Ieu conto kode gambar responsif dina 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-ka-aksi (nya čta): CTA anu jelas sareng nonjol penting dina email naon waé, tapi éta penting pisan dina email anu ramah-mobile. Pastikeun yén CTA téh gampang pikeun manggihan tur éta cukup badag pikeun diklik dina alat mobile. Upami anjeun ngalebetkeun tombol, anjeun tiasa mastikeun yén anjeun parantos ditulis dina CSS sareng tag gaya inline ogé:
<!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. eusi pondok tur singket: Tetep eusi email pondok tur ka titik. Watesan karakter pikeun email HTML tiasa rupa-rupa gumantung kana klien email anu dianggo. Nanging, kalolobaan klien email maksakeun wates ukuran maksimal pikeun email, biasana antara 1024-2048 kilobyte (KB), nu ngawengku duanana kode HTML jeung sagala gambar atawa kantétan. Anggo subjudul, titik pélor, sareng téknik pormat anu sanés supados eusina gampang dipinda nalika ngagulung sareng maca dina layar leutik.
  2. Unsur interaktif: incorporating elemen interaktif nu néwak perhatian palanggan anjeun bakal ngajalankeun up Dursasana, pamahaman, jeung ongkos konvérsi tina email Anjeun. GIF animasi, Timer mundur, video, sareng elemen sanésna dirojong ku mayoritas klien email smartphone.
  3. Personalisasi: Pribados salam sareng eusi pikeun palanggan khusus tiasa sacara signifikan nyorong papacangan, ngan pastikeun anjeun leres! Misalna. Ngabogaan fallbacks lamun euweuh data dina widang ngaran hareup penting.
  4. Eusi dinamis: Segméntasi sareng kustomisasi eusi tiasa ngirangan tingkat unsubscribe anjeun sareng ngajaga palanggan anjeun aktipitas.
  5. Integrasi Kampanye: Kaseueuran panyadia ladenan email modern gaduh kamampuan pikeun nambihan sacara otomatis UTM kampanye querystrings pikeun unggal tautan supados anjeun tiasa ningali email salaku saluran dina analytics.
  6. Pusat Préferénsi: Pamasaran email penting teuing pikeun ngan ukur milih atanapi milih kaluar kana email. Ngalebetkeun pusat pilihan dimana palanggan anjeun tiasa ngarobih sabaraha sering aranjeunna nampi email sareng eusi naon anu penting pikeun aranjeunna mangrupikeun cara anu saé pikeun ngajaga program email anu kuat sareng palanggan anu aktip!
  7. Uji, Uji, Uji: Pastikeun pikeun nguji email anjeun dina sababaraha alat atanapi nganggo aplikasi pikeun nilik surelek Anjeun sakuliah klien surélék pikeun mastikeun yén éta kasampak alus tur fungsina leres dina ukuran layar béda jeung sistem operasi saméméh anjeun ngirim. lakmus ngalaporkeun yén luhureun 3 pang populerna ulang mobile lingkungan kabuka tetep sarua: Apple iPhone (ios Surat), Google Android, Apple iPad (iPadOS Surat). Oge, lebetkeun variasi tés tina garis subjek sareng eusi anjeun pikeun ningkatkeun tingkat kabuka sareng klik-liwat anjeun. Seueur platform email ayeuna ngalebetkeun tés otomatis anu bakal sampel daptar, ngaidentipikasi variasi unggul, sareng ngirim email anu pangsaéna ka palanggan anu sésana.

Upami perusahaan anjeun bajoang sareng ngarancang, nguji, sareng ngalaksanakeun email responsif mobile anu nyababkeun papacangan, ulah ragu ngahubungi firma kuring. DK New Media gaduh pangalaman dina palaksanaan ampir unggal panyadia layanan email (ESP).

Douglas Karr

Douglas Karr nyaeta CMO tina OpenINSIGHTS jeung pangadeg nu Martech Zone. Douglas geus mantuan puluhan startups MarTech suksés, geus mantuan dina karajinan alatan leuwih $ 5 bil dina akuisisi jeung Investasi Martech, sarta terus mantuan pausahaan dina ngalaksanakeun jeung ngajadikeun otomatis jualan na strategi marketing maranéhanana. Douglas mangrupikeun transformasi digital anu diakui sacara internasional sareng ahli MarTech sareng spiker. Douglas ogé panulis anu diterbitkeun tina pituduh Dummie sareng buku kapamimpinan bisnis.

Artikel nu patali

Deui tombol luhur
deukeut

Adblock Dideteksi

Martech Zone tiasa masihan anjeun eusi ieu tanpa biaya sabab kami ngamonetisasi situs kami ngalangkungan pendapatan iklan, tautan afiliasi, sareng sponsor. Kami bakal ngahargaan upami anjeun ngahapus pameungpeuk iklan anjeun nalika anjeun ningali situs kami.