I-imeyili Marketing & AutomationUkumakethwa Kwamaselula Nethebulethi

16 Izindlela Ezinhle Kakhulu Ze-imeyili Ye-HTML Esebenzisa Iselula Ekhulisa Ukubekwa Kwebhokisi Lemilayezo Engenayo Nokuhlanganyela

Ngo-2023, kungenzeka ukuthi iselula izodlula ideskithophu njengethuluzi eliyinhloko lokuvula i-imeyili. Eqinisweni, i-HubSpot ithole lokho 46 amaphesenti kuwo wonke ama-imeyili avuliwe manje ayenzeka kumakhalekhukhwini. Uma ungaklami ama-imeyili eselula, ushiya ukusebenzelana okuningi nemali etafuleni.

  1. Ukuqinisekiswa kwe-imeyili: Ukuqinisekisa yakho ama-imeyili aqinisekisiwe kusizinda sokuthumela kanye IP ikheli libalulekile ukuze ufinyelele ibhokisi lokungenayo futhi lingahanjiswa kudoti noma ifolda yogaxekile. Kubalulekile futhi, kunjalo, ukuthi unikeze indlela yokuphuma ku-imeyili usebenzisa inkundla ehlanganisa isixhumanisi sokuzikhipha ohlwini.
  2. Umklamo Ophendulayo: The i-HTML i-imeyili kufanele ibe yakhelwe ukuthi iphendule, okusho ukuthi ingakwazi ukuzivumelanisa nosayizi wesikrini wedivayisi ebukwa kuyo. Lokhu kuqinisekisa ukuthi i-imeyili ibukeka iyinhle kukho kokubili ideskithophu kanye namadivayisi eselula.
  3. Umugqa wesihloko ocacile futhi omfushane: Umugqa wesihloko ocacile futhi omfushane ubalulekile kubasebenzisi beselula ngoba bangabona kuphela amagama ambalwa okuqala omugqa wesihloko kufasitelana lokubuka kuqala le-imeyili. Kufanele ibe mfushane futhi ibonise ngokunembile okuqukethwe kwe-imeyili. Ubude bezinhlamvu obufanele bomugqa wesihloko se-imeyili bungahluka kuye ngezinto ezimbalwa, njengokuqukethwe kwe-imeyili, izethameli, kanye neklayenti le-imeyili elisetshenziswayo. Kodwa-ke, ochwepheshe abaningi batusa ukugcina imigqa yesihloko se-imeyili ibe mifushane futhi ifinyelele iphuzu, ngokuvamile phakathi kwezinhlamvu ezingu-41-50 noma amagama angu-6-8. Kumadivayisi eselula, imigqa yesihloko emide kunezinhlamvu ezingu-50 ingase inqanyulwe, futhi kwezinye izimo, ingabonisa kuphela amagama ambalwa okuqala omugqa wesihloko. Lokhu kungenza kube nzima kumamukeli ukuqonda umlayezo oyinhloko we-imeyili futhi kungase kunciphise amathuba okuthi i-imeyili ivulwe.
  4. Isihloko sangaphambilini: Isihloko se-imeyili siyisifinyezo esifushane sokuqukethwe kwe-imeyili okuvela eduze noma ngezansi komugqa wesihloko ebhokisini lokungenayo leklayenti le-imeyili. Isici esibalulekile esingaba nomthelela esilinganisweni esivulekile sama-imeyili akho uma elungiselelwe. Amaklayenti amaningi ahlanganisa i-HTML ne-CSS ukuze aqinisekise ukuthi umbhalo wangaphambili umiswe ngendlela efanele.
<!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. Isakhiwo sekholomu eyodwa: Ama-imeyili aklanywe ngesakhiwo sekholomu eyodwa afundeka kalula kumadivayisi eselula. Okuqukethwe kufanele kuhlelwe ngokulandelana okunengqondo futhi kwethulwe ngendlela elula nefundeka kalula. Uma unamakholomu amaningi, ukusebenzisa i-CSS kungahlela kahle amakholomu ngesakhiwo sekholomu eyodwa.

Nayi ifayili le- Isakhiwo se-imeyili ye-HTML okungamakholomu angu-2 kudeskithophu futhi igoqeka ibe ikholomu eyodwa ezikrinini zeselula:

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

Nayi ifayili le- Isakhiwo se-imeyili ye-HTML okungamakholomu angu-3 kudeskithophu futhi igoqeka ibe ikholomu eyodwa ezikrinini zeselula:

<!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. Imodi Ekhanyayo Nemnyama: Iningi amaklayenti e-imeyili asekela imodi ekhanyayo nemnyama CSS prefers-color-scheme ukwamukela izintandokazi zomsebenzisi. Qiniseka ukuthi usebenzisa izinhlobo zezithombe lapho unengemuva elibonisa ngale. Nasi isibonelo sekhodi.
<!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. Amafonti amakhulu, afundekayo: Usayizi wefonti nesitayela kufanele kukhethwe ukwenza umbhalo ufundeke kalula esikrinini esincane. Sebenzisa okungenani usayizi wefonti ongu-14pt futhi ugweme ukusebenzisa amafonti okunzima ukuwafunda ezikrinini ezincane. Amafonti asetshenziswa ngokuvamile anethuba eliphezulu lokunikeza ngokungaguquguquki kuwo wonke amaklayenti e-imeyili, ngakho ukusebenzisa i-Arial, i-Helvetica, i-Times New Roman, i-Georgia, i-Verdana, i-Tahoma, ne-Trebuchet MS ngokuvamile amafonti aphephile. Uma usebenzisa ifonti yangokwezifiso, qiniseka ukuthi unefonti yokubuyela emuva ekhonjwe ku-CSS yakho:
<!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. Ukusetshenziswa kahle kwezithombe: Izithombe zinganciphisa izikhathi zokulayisha futhi zingase zingabonisi kahle kuwo wonke amadivaysi eselula. Sebenzisa izithombe kancane, futhi uqiniseke ukuthi zisayizi futhi kucindezelwe ukubukwa kweselula. Qiniseka ukuthi ugcwalisa omunye umbhalo wezithombe zakho uma kwenzeka iklayenti le-imeyili lizivimbela. Zonke izithombe kufanele zigcinwe futhi zibhekiswe kuwebhusayithi evikelekile (I-SSL). Nasi isibonelo sekhodi yezithombe eziphendulayo ku-imeyili ye-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. Sula ukubizelwa esenzweni (I-CTA): I-CTA ecacile nevelele ibalulekile kunoma iyiphi i-imeyili, kodwa ibaluleke kakhulu ku-imeyili esebenziseka kalula. Qiniseka ukuthi i-CTA itholakala kalula nokuthi inkulu ngokwanele ukuthi ingachofozwa kudivayisi ephathwayo. Uma uhlanganisa izinkinobho, ungaqinisekisa ukuthi ubhale ngazo nge-CSS enamathegi esitayela esisemgqeni futhi:
<!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. Okuqukethwe okufushane nokufushane: Gcina okuqukethwe kwe-imeyili kukufushane futhi kuqondile. Umkhawulo wezinhlamvu ze-imeyili ye-HTML ungahluka kuye ngokuthi iklayenti le-imeyili elisetshenziswayo. Kodwa-ke, amaklayenti amaningi e-imeyili abeka umkhawulo kasayizi omkhulu wama-imeyili, ngokuvamile phakathi kuka-1024-2048 kilobytes (KB), okuhlanganisa kokubili ikhodi ye-HTML nanoma yiziphi izithombe noma okunamathiselwe. Sebenzisa izihlokwana, amaphoyinti ezinhlamvu, nezinye izindlela zokufometha ukuze wenze okuqukethwe kuskeneke kalula ngenkathi uskrola nokufunda esikrinini esincane.
  2. Izinto ezisebenzisanayo: bawafaka izinto ezibandakanyayo okubamba ukunaka kobhalisile kuzokhuphula ukuzibandakanya, ukuqonda, namazinga okuguqulwa ku-imeyili yakho. Ama-GIF ama-animated, izikhathi zokubala, amavidiyo, nezinye izici kusekelwa iningi lamaklayenti e-imeyili e-smartphone.
  3. Ukwenza okuthandwa nguwe: Ukwenza kube ngokwakho isibingelelo nokuqukethwe kobhalisile othile kungaqhuba kakhulu ukusebenzelana, qiniseka ukuthi uyakuthola kahle! Isb. Ukuba nezibuyekezo uma ingekho idatha enkambini yegama lokuqala kubalulekile.
  4. Okuqukethwe Okunamandla: Ukwehlukaniswa nokwenza ngendlela oyifisayo okuqukethwe kunganciphisa izilinganiso zokuzikhipha ohlwini futhi kugcine ababhalisile bakho bematasa.
  5. Ukuhlanganiswa Komkhankaso: Abahlinzeki besevisi ye-imeyili abaningi besimanje banamandla okufaka ngokuzenzakalelayo Izinhlamvu zemibuzo zomkhankaso we-UTM kuso sonke isixhumanisi ukuze ukwazi ukubuka i-imeyili njengesiteshi sokuhlaziya.
  6. Isikhungo Esithandwayo: Ukumaketha nge-imeyili kubaluleke kakhulu endleleni yokuphuma noma yokuphuma kuma-imeyili. Ukufaka isikhungo sokuncamelayo lapho ababhalisile bakho bengashintsha ukuthi bawathola kangaki ama-imeyili nokuthi yikuphi okuqukethwe okubalulekile kubo kuyindlela enhle yokugcina uhlelo lwe-imeyili oluqinile nababhalisile ababandakanyekayo!
  7. Hlola, Hlola, Hlola: Qiniseka ukuthi uhlola i-imeyili yakho kumadivayisi amaningi noma usebenzise uhlelo lokusebenza hlola kuqala ama-imeyili akho kuwo wonke amaklayenti e-imeyili ukuze uqinisekise ukuthi ibukeka iyinhle futhi isebenza kahle kumasayizi wesikrini ahlukene namasistimu okusebenza NGAPHAMBI kokuthi uthumele. I-Litmus ibika ukuthi izindawo ezivuliwe ezingu-3 eziphezulu ezaziwa kakhulu ziyaqhubeka nokufana: I-Apple iPhone (i-iOS Mail), i-Google Android, i-Apple iPad (i-iPadOS Mail). Futhi, hlanganisa ukuhluka kokuhlolwa kwemigqa yesihloko nokuqukethwe kwakho ukuze uthuthukise amazinga akho avulekile nawokuchofoza. Izinkundla eziningi ze-imeyili manje zifaka ukuhlola okuzenzakalelayo okuzosampula uhlu, kuhlonze okuhlukile okuwinile, futhi kuthumele i-imeyili engcono kakhulu kwababhalisile abasele.

Uma inkampani yakho idonsa kanzima ngokuklama, ukuhlola, nokusebenzisa ama-imeyili asabelayo eselula ashayela ukuzibandakanya, ungangabazi ukuxhumana nefemu yami. DK New Media unolwazi ekusebenziseni cishe wonke umnikezeli wesevisi we-imeyili (ESP).

Douglas Karr

Douglas Karr i-CMO ye VulaINSIGHTS kanye nomsunguli we Martech Zone. UDouglas usize inqwaba yeziqalo eziphumelelayo ze-MarTech, uye wasiza ekukhuthaleni okungaphezu kuka-$5 bil ekuthengeni nasekutshalweni kwe-Martech, futhi uyaqhubeka nokusiza izinkampani ekusebenziseni nasekuzenzeleni amasu azo okuthengisa nokumaketha. UDouglas uyingcweti yokuguqula idijithali eyaziwa emhlabeni wonke kanye nesikhulumi se-MarTech. UDouglas futhi ungumbhali oshicilelwe wencwadi kaDummie kanye nencwadi yobuholi bebhizinisi.

Izihloko ezihlobene Nalesi

Buyela emuva kunkinobho phezulu
Close

I-Adblock itholiwe

Martech Zone iyakwazi ukukunikeza lokhu okuqukethwe ngaphandle kwenkokhiso ngoba senza imali ngesayithi yethu ngemali engenayo yezikhangiso, izixhumanisi ezingaphansi, noxhaso. Singajabula uma ungasusa i-ad blocker yakho njengoba ubuka isayithi lethu.