Email Marketing & AutomationPapatso ea mehala ea thekeng le ea Letlapa

Mekhoa e 16 e Molemo ka ho Fetisisa ea Imeile ea Imeile e eketsang ho beoa ha Inbox le ho Kopanela

Ka 2023, ho ka etsahala hore ebe mobile e tla feta komporo joalo ka sesebelisoa sa mantlha sa ho bula lengolo-tsoibila. Ebile, HubSpot e fumane seo liphesente tse 46 ea mangolo-tsoibila ohle a buloang hona joale a hlaha ho mobile. Haeba u sa rale li-imeile tsa mobile, u tlohela boitlamo le chelete e ngata tafoleng.

  1. Netefatso ea Imeile: Ho etsa bonnete ba hau li-imeile li netefalitsoe sebakeng sa ho romella le IP aterese e bohlokoa hore u fihle ho inbox, 'me u se ke ua fetisetsoa sebakeng se se nang thuso kapa foldareng ea spam. Ho bohlokoa hape, ehlile, hore o fane ka mokhoa oa ho tsoa ho lengolo-tsoibila o sebelisa sethala se kenyelletsang sehokelo sa ho ingolisa.
  2. Moralo o Arabela: The HTML imeile e lokela ho ba e etselitsoeng ho arabela, ho bolelang hore e khona ho ikamahanya le boholo ba skrine sa sesebelisoa seo e shebiloeng ho sona. Sena se tiisa hore lengolo-tsoibila le shebahala hantle ho lisebelisoa tsa desktop le tsa mehala.
  3. Taba e hlakileng le e khuts'oane: Mola oa sehlooho o hlakileng le o hlakileng o bohlokoa bakeng sa basebelisi ba mehala hobane ba ka bona mantsoe a seng makae feela a sehlooho sebakeng sa bona sa tlhahlobo ea lengolo-tsoibila. E lokela ho ba e khuts'oane le e nepahetseng e bonts'a litaba tsa lengolo-tsoibila. Bolelele bo nepahetseng ba mohala oa sehlooho sa lengolo-tsoibila bo ka fapana ho latela lintlha tse 'maloa, joalo ka litaba tsa lengolo-tsoibila, bamameli, le moreki oa lengolo-tsoibila le sebelisoang. Leha ho le joalo, litsebi tse ngata li khothaletsa ho boloka melaetsa ea litaba tsa lengolo-tsoibila e le khutšoane ho isa ntlheng, hangata lipakeng tsa litlhaku tse 41-50 kapa mantsoe a 6-8. Ho lisebelisoa tsa mohala, mela ea sehlooho e fetang litlhaku tse 50 e ka khaoloa, 'me maemong a mang, e ka hlahisa mantsoe a seng makae a pele a sehlooho. Sena se ka etsa hore ho be thata ho moamoheli ho utloisisa molaetsa oa mantlha oa lengolo-tsoibila mme se ka fokotsa monyetla oa hore lengolo-tsoibila le buloe.
  4. Hlooho: Sehlooho sa lengolo-tsoibila ke kakaretso e khuts'oane ea litaba tsa lengolo-tsoibila tse hlahang haufi kapa ka tlase ho sehlooho se lebokoseng la mangolo la moreki oa lengolo-tsoibila. Ke ntho ea bohlokoa e ka amang sekhahla se bulehileng sa mangolo-tsoibila a hau ha a ntlafalitsoe. Boholo ba bareki ba kenyelletsa HTML le CSS ho etsa bonnete ba hore mongolo oa lihlooho o hlophisitsoeng hantle.
<!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. Ponahalo ea kholomo e le 'ngoe: Li-imeile tse entsoeng ka sebopeho sa kholomo e le 'ngoe li bonolo ho li bala ho lisebelisoa tsa mohala. Likahare li lokela ho hlophisoa ka tatellano e utloahalang 'me li hlahisoe ka mokhoa o bonolo, oo ho leng bonolo ho o bala. Haeba u na le litšiea tse ngata, ho sebelisa CSS ho ka hlophisa litšiea ka mokhoa o motle ka sebopeho sa kholomo e le 'ngoe.

Mona ke Sebopeho sa lengolo-tsoibila la HTML ke hore likholomo tse 2 ho komporong 'me e oela ho kholumo e le 'ngoe ho li-skrini tsa mehala:

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

Mona ke Sebopeho sa lengolo-tsoibila la HTML ke hore likholomo tse 3 ho komporong 'me e oela ho kholumo e le 'ngoe ho li-skrini tsa mehala:

<!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. Mokhoa oa Leseli le Lefifi: Most bareki ba imeile ba tšehetsa mokhoa o bobebe le o lefifi CSS prefers-color-scheme ho dumellana le dikgethollo tsa mosebedisi. Etsa bonnete ba hore u sebelisa mefuta ea litšoantšo moo u nang le bokamorao bo bonaletsang. Mohlala oa khoutu ke ona.
<!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. Mehala e meholo, e balehang: Boholo ba fonte le setaele li lokela ho khethoa ho etsa hore mongolo o balehe habonolo skrineng se senyenyane. Sebelisa bonyane boholo ba fonte ea 14pt 'me u qobe ho sebelisa litlhaku tseo ho leng thata ho li bala likrineng tse nyane. Lifonti tse sebelisoang hangata li na le monyetla o moholo oa ho fana ka mokhoa o ts'oanang ho bareki ba fapaneng ba lengolo-tsoibila, kahoo ho sebelisa Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, le Trebuchet MS hangata ke lifonti tse bolokehileng. Haeba u sebelisa fonte e tloaelehileng, etsa bonnete ba hore u na le fonte ea morao e tsejoang ho CSS ea hau:
<!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. Tšebeliso e nepahetseng ea litšoantšo: Lits'oants'o li ka fokotsa lebelo la nako ea ho roaloa 'me li kanna tsa se hlahe hantle lisebelisoa tsohle tsa mohala. Sebelisa litšoantšo ka mokhoa o fokolang, 'me u etse bonnete ba hore li boholo le ho e hatelitsoe bakeng sa ho shebella mobile. Etsa bonnete ba hore u tlatsa mongolo oa alt bakeng sa litšoantšo tsa hau haeba moreki oa lengolo-tsoibila a li thibela. Lits'oants'o tsohle li lokela ho bolokoa le ho ngolisoa ho tsoa webosaeteng e sireletsehileng (SSL). Mona ke mohlala oa khoutu ea litšoantšo tse arabelang ho lengolo-tsoibila la 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. E hlakileng pitso ea ho nka khato (CTA): CTA e hlakileng le e hlahelletseng e bohlokoa ho lengolo-tsoibila lefe kapa lefe, empa e bohlokoa haholo ho lengolo-tsoibila le sebelisang mohala. Etsa bonnete ba hore CTA e fumaneha habonolo le hore e kholo ho lekana hore e ka totoba sesebelisoa sa mohala. Haeba o kenyelletsa likonopo, o ka etsa bonnete ba hore o li ngotse ka CSS ka li-tag tsa setaele sa inline:
<!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. Litaba tse khutšoane le tse khutšoane: Boloka litaba tsa lengolo-tsoibila li le khuts'oane ebile li hlakile. Moeli oa litlhaku bakeng sa lengolo-tsoibila la HTML o ka fapana ho latela hore na moreki oa lengolo-tsoibila o sebelisoa. Leha ho le joalo, boholo ba bareki ba lengolo-tsoibila ba beha moeli oa boholo ba li-imeile, hangata lipakeng tsa 1024-2048 kilobytes (KB), e kenyelletsang khoutu ea HTML le litšoantšo kapa lihokelo. Sebelisa lihloohoana, lintlha, le mekhoa e meng ea ho fometa ho etsa hore litaba li hlahlojoe habonolo ha u ntse u bala le ho bala skrineng se senyenyane.
  2. Lintho tse sebelisanang: se nang likarolo tse sebetsanang tse hapang tlhokomelo ea motho ea ngolisitseng li tla phahamisa boitlamo, kutloisiso, le litefiso tsa ho sokoloha ho tsoa ho lengolo-tsoibila la hau. Li-GIF tse nang le liphoofolo, li-timers, livideo, le likarolo tse ling li tšehetsoa ke boholo ba bareki ba imeile ba li-smartphone.
  3. Motho: Ho iketsetsa tumeliso le litaba tsa motho ea ngolisitseng ea itseng ho ka tsamaisa boitlamo haholo, etsa bonnete ba hore u e fumana hantle! Mohlala. Ho bohlokoa ho ba le liphoso haeba ho se na data sebakeng sa lebitso la pele.
  4. Litaba tse Matla: Ho arola le ho iketsetsa litaba ho ka fokotsa litefiso tsa hau tsa ho itokolla le ho boloka ba ngolisitseng ba tšoarehile.
  5. Kopano ea Letšolo: Boholo ba bafani ba litšebeletso tsa imeile ba sejoale-joale ba na le bokhoni ba ho ikamahanya le maemo Lipotso tsa lets'olo la UTM bakeng sa sehokelo se seng le se seng e le hore o ka bona lengolo-tsoibila e le mocha oa analytics.
  6. Setsi sa Boikhethelo: Ho bapatsa ka lengolo-tsoibila ho bohlokoa haholo molemong oa ho khetha ho kena kapa oa ho tsoa ho li-imeile. Ho kenyelletsa setsi sa khetho moo ba ngolisitseng ba ka fetolang hore na ba fumana mangolo-tsoibila hangata hakae le hore na ke litaba life tsa bohlokoa ho bona ke mokhoa o tsotehang oa ho boloka lenaneo le matla la imeile le ba ngolisitseng ba kopanelang!
  7. Teko, Teko, Teko: Etsa bonnete ba hore u lekola lengolo-tsoibila la hau ho lisebelisoa tse ngata kapa u sebelise sesebelisoa ho lekola li-imeile tsa hau ho bareki ba lengolo-tsoibila ho etsa bonnete ba hore e shebahala e le ntle ebile e sebetsa hantle ho li-skrini tse fapaneng tsa boholo le lits'ebetso tsa ts'ebetso PELE o romela. Litmus e tlaleha hore libaka tse 3 tse tummeng ka ho fetisisa tse bulehileng tsa mehala li tsoela pele ho tšoana: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Hape, kenyelletsa mefuta e fapaneng ea liteko tsa mela ea lithuto tsa hau le litaba ho ntlafatsa litefiso tsa hau tse bulehileng le tsa ho tobetsa. Li-platform tse ngata tsa lengolo-tsoibila li se li kenyelletsa tlhahlobo ea othomathike e tla etsa mohlala oa lenane, ho supa phapang e hapileng, le ho romella lengolo-tsoibila le letle ho ba ngolisitseng ba setseng.

Haeba k'hamphani ea hau e thatafalloa ke ho rala, ho etsa liteko, le ho kenya ts'ebetsong li-imeile tse arabelang ka mohala tse tsamaisang boitlamo, u seke oa tsilatsila ho ikopanya le feme ea ka. DK New Media o na le boiphihlelo ts'ebetsong ea hoo e batlang e le mofani e mong le e mong oa litšebeletso tsa imeile (ESP).

Douglas Karr

Douglas Karr ke CMO ea Bula LITLHAKISO le mothehi oa Martech Zone. Douglas o thusitse batho ba bangata ba atlehileng ho qala ka MarTech, o thusitse boitelong bo nepahetseng ba chelete e fetang $5 bilione ho reka le matsete a Martech, mme o ntse a tsoela pele ho thusa lik'hamphani ho kenya ts'ebetsong le ho iketsetsa maano a bona a ho rekisa le ho bapatsa. Douglas ke setsebi le sebui sa MarTech se tsebahalang lefatšeng ka bophara. Douglas hape ke sengoli se hatisitsoeng sa tataiso ea Dummie le buka ea boetapele ba khoebo.

Related Articles

Konopo ea holimo
Close

Adblock e fumanwe

Martech Zone e khona ho u fa litaba tsena ntle ho tefo hobane re etsa chelete sebakeng sa rona sa marang-rang ka lekeno la lipapatso, likhokahano tsa kopanelo le lithuso tsa lichelete. Re ka thabela ha o ka tlosa se thibelang lipapatso ha u ntse u sheba sebaka sa rona sa marang-rang.