Email Marketing & AutomationYeMahara neThebhu Kushambadzira

16 Mobile Hushamwari HTML Imeiri Maitiro Akanakisisa Anokwirisa Inbox Kuiswa uye Engagement

Muna 2023, zvinokwanisika kuti nharembozha ichapfuura desktop sechinhu chekutanga chekuvhura email. Muchokwadi, HubSpot yakawana izvozvo 46 muzana yeese maemail anovhurwa zvino aitika pane mobile. Kana usiri kugadzira maemail enharembozha, urikusiya yakawanda yekubatirana nemari patafura.

  1. Email Kusimbisa: Kusimbisa yako maemail ane chokwadi kune yekutumira domain uye IP kero yakakosha kuti usvike kuinbox uye kwete kuendeswa kune junk kana spam folda. Izvo zvakakoshawo, hongu, kuti iwe upe nzira yekubuda muemail uchishandisa chikuva chinosanganisira kusanyoreswa link.
  2. Inopindura Dhizaini: The HTML email inofanira kuva rakagadzirirwa kuti ridavire, zvinoreva kuti inokwanisa kujairana nesaizi yechidzitiro chemudziyo pairi kutariswa. Izvi zvinovimbisa kuti email inotaridzika zvakanaka pane ese ari maviri desktop uye nharembozha.
  3. Mutsara wezvidzidzo wakajeka uye wakapfupika: Mutsara wezvidzidzo wakajeka uye wakapfupika wakakosha kune vashandisi venhare nekuti vanogona kungoona mazwi mashoma ekutanga emutsetse wenyaya mune yavo email preview pane. Inofanira kuva pfupi uye zvakarurama kuratidza zviri mukati meemail. Hurefu hwakakwana hweiyo email yemusoro mutsara hunogona kusiyana zvichienderana nehuwandu hwezvinhu, senge email yemukati, vateereri, uye email mutengi ari kushandiswa. Nekudaro, nyanzvi zhinji dzinokurudzira kuchengetedza mitsara yenyaya yeemail ipfupi uye kusvika padanho, kazhinji pakati pe41-50 mavara kana 6-8 mazwi. Pamidziyo yenharembozha, mitsetse yezvidzidzo inodarika mavara makumi mashanu inogona kudimburwa, uye mune dzimwe nguva, inogona kungoratidza mazwi mashoma ekutanga emutsetse wenyaya. Izvi zvinogona kuita kuti zviome kune anogamuchira kuti anzwisise iyo huru meseji yeemail uye zvinogona kuderedza mukana weiyo email kuvhurwa.
  4. Preheader: E-mail preheader ipfupiso pfupi yezviri mukati meemail inoonekwa padivi kana pazasi pemutsara wenyaya muinbox yemutengi weemail. Chinhu chakakosha chinogona kukanganisa chiyero chakavhurika emaemail ako kana akagadziridzwa. Vazhinji vatengi vanosanganisira HTML neCSS kuti ive nechokwadi chekuti chinyorwa chepamberi chakamisikidzwa nemazvo.
<!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. Mamiriro echikamu chimwe chete: Maemail akagadzirwa aine imwe-column marongerwo ari nyore kuverenga panharembozha. Zviri mukati zvinofanirwa kurongwa munhevedzano ine musoro uye zvichiratidzwa zviri nyore, zviri nyore kuverenga. Kana uine makoramu akawanda, kushandisa CSS kunogona kuronga makoramu mune imwe-column marongerwo.

Heinoi HTML email marongerwo ndiyo 2 makoramu padesktop uye inodonha kune imwechete koramu pane nharembozha:

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

Heinoi HTML email marongerwo ndiyo 3 makoramu padesktop uye inodonha kune imwechete koramu pane nharembozha:

<!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. Chiedza uye Nerima Modhi: Most email vatengi vanotsigira chiedza uye rima mode CSS prefers-color-scheme kuenderana nezvido zvemushandisi. Iva nechokwadi chekushandisa mhando dzemifananidzo apo une kuseri kwakajeka. Heino muenzaniso wekodhi.
<!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. Mafonti makuru, anonyoreka: Saizi yefonti uye maitiro zvinofanirwa kusarudzwa kuita kuti zvinyorwa zvive nyore kuverenga padiki skrini. Shandisa ingangoita 14pt saizi yefonti uye dzivirira kushandisa mafonti akaoma kuverenga pamasikirini madiki. Mafonti anowanzo shandiswa ane mukana wakakura wekupa zvinogara kune akasiyana maemail vatengi, saka kushandisa Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, uye Trebuchet MS anowanzo akachengeteka mafonti. Kana iwe ukashandisa font yakajairwa, ita shuwa kuti une font yekudzokera kumashure yakaonekwa muCSS yako:
<!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. Kushandiswa kwemifananidzo kwakaringana: Mifananidzo inogona kudzikisira nguva yekuremerwa uye inogona kusaratidza zvakanaka panharembozha dzese. Shandisa mifananidzo zvishoma, uye ita shuwa kuti yakakura uye rakamanikidzwa yekuona mobile. Ita shuwa yekuzadza alt mavara emifananidzo yako kana iyo email mutengi achivavharira. Mifananidzo yese inofanirwa kuchengetwa uye kutumirwa kubva kune yakachengeteka webhusaiti (SSL) Heino muenzaniso kodhi yemifananidzo inopindura mune HTML email.
<!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. Kudaidzira-ku-chiito kwakajeka (CTA): Iyo yakajeka uye yakakurumbira CTA yakakosha mune chero email, asi inonyanya kukosha mune mobile-inoshamwaridzika email. Ita shuwa kuti CTA iri nyore kuwana uye kuti yakakura zvekuti inogona kudzvanywa panharembozha. Kana iwe ukabatanidza mabhatani, unogona kuve nechokwadi kuti une iwo akanyorwa muCSS ane inline maitiro tag zvakare:
<!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. Zvipfupi uye zvipfupi zvemukati: Chengetedza zvirimo zveemail zvipfupi uye kusvika padanho. Muganhu weiyo email yeHTML unogona kusiyana zvichienderana nemutengi we email ari kushandiswa. Nekudaro, vazhinji vatengi veemail vanoisa yakakura saizi muganho wemaemail, kazhinji pakati pe1024-2048 kilobytes (KB), iyo inosanganisira ese ari maviri HTML kodhi uye chero mifananidzo kana zvakabatanidzwa. Shandisa misoro midiki, mapoinzi, uye mamwe maitiro ekufomatidza kuita kuti zvirimo zvinyorwe nyore paunenge uchikwenya nekuverenga padiki skrini.
  2. Interactive elements: pakusanganisirawo interactive elements iyo inobata kutarisisa kwemunyoreri wako inosimudzira kubatanidzwa, kunzwisisa, uye mitengo yekushandura kubva kune yako email. Mhuka dzeGIF, nguva dzekuverengera, mavhidhiyo, uye zvimwe zvinhu zvinotsigirwa nevazhinji veemail email vatengi.
  3. Kusarudzika: Kugadzirisa sarupu uye zvemukati zvemumwe munyoreri zvinogona kutyaira zvakanyanya kubatanidzwa, iva nechokwadi chekuti wazviwana chaizvo! Eg. Kuve nekudzokera kumashure kana pasina data mundima yezita rekutanga kwakakosha.
  4. Dynamic Content: Segmentation uye kugadzirisa zvemukati kunogona kuderedza yako yekusanyoreswa mitengo uye kuchengetedza vanyoreri vako vakabatikana.
  5. Campaign Integration: Mazhinji emazuva ano maemail masevhisi vanopa vane kugona kuzvishongedza otomatiki UTM mitsvairo yemushandirapamwe chese chinongedzo kuitira kuti iwe ugone kuona email sechiteshi mune analytics.
  6. Preference Center: Kushambadzira neemail kwakanyanya kukosha kune kungosarudza-kupinda kana yekubuda nzira kumaemail. Kubatanidza nzvimbo yekuda uko vanyoreri vako vanogona kuchinja kuti kazhinji sei vanogashira maemail uye izvo zvemukati zvakakosha kwavari inzira inonakidza yekuchengeta yakasimba email chirongwa nevanyoreri vakabatikana!
  7. Muedzo, Muedzo, Muedzo: Ita shuwa yekuyedza email yako pamidziyo yakawanda kana kushandisa application ku tarisisa maemail ako kune maemail vatengi kuve nechokwadi chekuti inotaridzika zvakanaka uye inoshanda nemazvo pamasikirwo akasiyana siyana uye masisitimu anoshanda USATI watumira. Litmus inoshuma kuti nzvimbo nhatu dzepamusoro dzinozivikanwa dzenhare dzakavhurika dzinoramba dzakafanana: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Zvakare, sanganisira bvunzo dzakasiyana dzemitsetse yezvidzidzo uye zvirimo kuti uvandudze yako yakavhurika uye yekudzvanya-kuburikidza nemitengo. Mazhinji emapuratifomu eemail ikozvino anosanganisira otomatiki kuyedza iyo inoedza rondedzero, kuona inokunda mutsauko, uye kutumira iyo yakanakisa email kune vasara vanyoreri.

Kana kambani yako iri kunetsekana nekugadzira, kuyedza, uye kushandisa nharembozha inopindura maemail ari kutyaira kubatanidzwa, usazeza kubata femu yangu. DK New Media ane ruzivo mukuitwa kweanenge ese email service provider (kunyanya).

Douglas Karr

Douglas Karr ndiye CMO OpenINSIGHTS uye muvambi we Martech Zone. Douglas akabatsira akawanda ekubudirira kweMarTech kutanga, akabatsira mukushingairira kweanopfuura madhora mashanu emadhora mukutenga nekudyara kweMartech, uye anoenderera mberi nekubatsira makambani kuita nekuita otomatiki nzira dzawo dzekutengesa nekutengesa. Douglas inyanzvi inozivikanwa pasi rese yedhijitari uye MarTech nyanzvi uye mutauri. Douglas zvakare munyori akaburitswa wegwaro raDummie uye bhuku rehutungamiriri hwebhizinesi.

Related Articles

Kudzoka kumusoro
pedyo

Adblock Yaonekwa

Martech Zone inokwanisa kukupa izvi zvemukati pasina muripo nekuti isu tinoita mari saiti yedu kuburikidza nemari yekushambadza, affiliate links, uye kutsigira. Tinozotenda kana iwe ukabvisa yako ad blocker iwe paunoona yedu saiti.