Kutsatsa kwa Imelo & ZodzichitiraKutsatsa Kwama foni ndi Ma Tablet

16 Njira Zabwino Kwambiri za Imelo ya HTML Zomwe Zimakulitsa Kuyika kwa Ma Inbox ndi Kuchita Chibwenzi

Mu 2023, ndizotheka kuti foni yam'manja idzaposa kompyuta ngati chida choyambirira chotsegulira maimelo. M'malo mwake, HubSpot adapeza izi peresenti 46 mwa maimelo onse omwe amatsegulidwa tsopano amapezeka pafoni. Ngati simukupanga maimelo am'manja, mukusiya zambiri komanso ndalama patebulo.

  1. Kutsimikizira Imelo: Kukonzekera kwanu maimelo ndi otsimikizika ku domain yotumiza ndi IP adilesi ndiyofunikira kuti mufike ku inbox osati kupita ku foda yazakudya kapena sipamu. Ndikofunikiranso, kuti mupereke njira yotulutsira imelo pogwiritsa ntchito nsanja yomwe ili ndi ulalo wodziletsa.
  2. Dongosolo Labwino: The HTML imelo iyenera kukhala adapangidwa kuti aziyankha, zomwe zikutanthauza kuti imatha kusintha kukula kwa zenera la chipangizo chomwe chikuwonetsedwa. Izi zimatsimikizira kuti imelo ikuwoneka bwino pakompyuta komanso pazida zam'manja.
  3. Mzere womveka bwino komanso wachidule: Mzere womveka bwino komanso wachidule ndi wofunikira kwa ogwiritsa ntchito mafoni chifukwa amatha kungowona mawu ochepa amutuwo pagawo lowonera maimelo. Iyenera kukhala mwachidule komanso molondola zomwe zili mu imelo. Kutalika koyenera kwa mutu wa imelo kumatha kusiyanasiyana kutengera zinthu zingapo, monga zomwe zili mu imelo, omvera, ndi kasitomala wa imelo omwe akugwiritsidwa ntchito. Komabe, akatswiri ambiri amalimbikitsa kuti mizere ya mitu ya imelo ikhale yayifupi komanso mpaka, nthawi zambiri pakati pa zilembo 41-50 kapena mawu 6-8. Pazida zam'manja, mizere yotalikirapo kuposa zilembo 50 imatha kudulidwa, ndipo nthawi zina, imatha kuwonetsa mawu ochepa oyambira pamutuwo. Izi zingapangitse kuti zikhale zovuta kwa wolandirayo kumvetsa uthenga waukulu wa imelo ndipo zingachepetse mwayi wotsegula imelo.
  4. Mutu Wamutu: Mutu wam'mutu wa imelo ndi chidule chachidule cha zomwe zili mu imelo yomwe imawonekera pafupi kapena pansi pamutu wamutu mubokosi la kasitomala wa imelo. Ndi chinthu chofunikira chomwe chingakhudze kuchuluka kwa maimelo anu akakonzedwa. Makasitomala ambiri amaphatikiza HTML ndi CSS kuti awonetsetse kuti zolemba zam'mutu zakhazikitsidwa bwino.
<!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. Masanjidwe agawo limodzi: Maimelo opangidwa ndi gawo limodzi ndi osavuta kuwerenga pazida zam'manja. Zomwe zili mkati ziyenera kukonzedwa motsatira ndondomeko zomveka bwino ndi kuperekedwa m'njira yosavuta, yosavuta kuwerenga. Ngati muli ndi mizati yambiri, kugwiritsa ntchito CSS kungathe kukonza bwino zigawozo mugawo limodzi.

Nazi izi Mapangidwe a imelo a HTML ndiye mizati 2 pakompyuta ndipo imagwera pagawo limodzi pazithunzi zam'manja:

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

Nazi izi Mapangidwe a imelo a HTML ndiye mizati 3 pakompyuta ndipo imagwera pagawo limodzi pazithunzi zam'manja:

<!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. Kuwala ndi Mdima: kwambiri makasitomala a imelo amathandizira kuwala ndi mdima mode CSS prefers-color-scheme kutengera zomwe wogwiritsa ntchito amakonda. Onetsetsani kuti mukugwiritsa ntchito mitundu yazithunzi pomwe muli ndi mbiri yowonekera. Nachi chitsanzo cha code.
<!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 akulu, omveka: Kukula kwa font ndi kalembedwe ziyenera kusankhidwa kuti mawuwo akhale osavuta kuwerenga pakompyuta yaying'ono. Gwiritsani ntchito kukula kwa zilembo 14pt ndikupewa kugwiritsa ntchito zilembo zomwe zimakhala zovuta kuwerenga pazithunzi zazing'ono. Mafonti omwe amagwiritsidwa ntchito nthawi zambiri amakhala ndi mwayi wopereka nthawi zonse pamakasitomala osiyanasiyana a imelo, motero kugwiritsa ntchito Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, ndi Trebuchet MS nthawi zambiri ndi zilembo zotetezeka. Ngati mumagwiritsa ntchito font yokhazikika, onetsetsani kuti muli ndi font yobwereranso yodziwika mu CSS yanu:
<!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. Kugwiritsa ntchito bwino zithunzi: Zithunzi zimatha kuchepetsa nthawi yotsegula ndipo mwina sizingawoneke bwino pazida zonse zam'manja. Gwiritsani ntchito zithunzi mosamala, ndipo onetsetsani kuti ndi zazikulu komanso zazikulu amavomerezedwa kuti muwonere mafoni. Onetsetsani kuti mwadzaza zolemba za alt pazithunzi zanu ngati kasitomala wa imelo atsekereza. Zithunzi zonse ziyenera kusungidwa ndikutchulidwa kuchokera patsamba lotetezedwa (SSL). Nachi chitsanzo cha code ya zithunzi zoyankhira mu imelo ya 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. Kuyitanitsa kuchitapo kanthu (CTA): CTA yomveka bwino komanso yodziwika bwino ndiyofunikira mu imelo iliyonse, koma ndiyofunikira kwambiri mu imelo yolumikizana ndi mafoni. Onetsetsani kuti CTA ndiyosavuta kupeza komanso kuti ndi yayikulu mokwanira kuti mudindidwe pa foni yam'manja. Ngati muphatikiza mabatani, mutha kuwonetsetsa kuti mwalemba mu CSS yokhala ndi ma tag amkati:
<!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. Nkhani zazifupi komanso zazifupi: Sungani zomwe zili mu imelo zazifupi komanso molunjika. Malire a maimelo a HTML amatha kusiyanasiyana kutengera kasitomala wa imelo omwe akugwiritsidwa ntchito. Komabe, makasitomala ambiri a imelo amaika malire a kukula kwa maimelo, nthawi zambiri pakati pa 1024-2048 kilobytes (KB), yomwe imaphatikizapo nambala ya HTML ndi zithunzi zilizonse kapena zomata. Gwiritsani ntchito timitu ting'onoting'ono, ma bullet point, ndi njira zina zosinthira kuti zomwe zili munthawuzo ziwoneke mosavuta poyenda ndikuwerenga pa sikirini yaying'ono.
  2. Zokambirana: pophatikiza zinthu zogwirizana zomwe zimakopa chidwi cha olembetsa anu zidzakulitsa chidwi, kumvetsetsa, ndi kutembenuka kuchokera ku imelo yanu. Ma GIF oonetsa, zowerengera zowerengera, makanema, ndi zinthu zina zimathandizidwa ndi makasitomala ambiri a imelo a smartphone.
  3. Makonda: Kupanga malonje ndi zomwe zili kwa munthu wolembetsa zitha kuyendetsa bwino chinkhoswe, onetsetsani kuti mwapeza bwino! Mwachitsanzo. Kukhala ndi zolakwika ngati palibe deta mu gawo la dzina loyamba ndikofunikira.
  4. Zamphamvu: Kugawa ndikusintha zomwe zili kutha kuchepetsa mitengo yanu yodziletsa ndikupangitsa olembetsa anu kukhala otanganidwa.
  5. Kuphatikiza kwa Campaign: Ambiri opereka maimelo amakono ali ndi kuthekera kowonjezera Mafunso okhudza kampeni ya UTM pa ulalo uliwonse kuti mutha kuwona imelo ngati njira yowerengera.
  6. Malo Okonda: Kutsatsa maimelo ndikofunikira kwambiri pakungolowetsa kapena kutulutsa maimelo. Kuphatikizira malo okonda komwe olembetsa anu amatha kusintha kangati amalandila maimelo komanso zomwe zili zofunika kwa iwo ndi njira yabwino kwambiri yosungira pulogalamu yolimba ya imelo ndi olembetsa omwe akuchita!
  7. Yesani, Yesani, Yesani: Onetsetsani kuti mwayesa imelo yanu pazida zingapo kapena gwiritsani ntchito pulogalamuyo yang'anani maimelo anu pamakasitomala a imelo kuwonetsetsa kuti ikuwoneka bwino komanso imagwira ntchito bwino pamawonekedwe osiyanasiyana azithunzi ndi makina ogwiritsira ntchito MUSANATUMA. Litmus malipoti kuti malo atatu otchuka kwambiri otsegula mafoni akupitilizabe kukhala ofanana: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Komanso, phatikizani kusiyanasiyana kwa mayeso amizere yanu ndi zomwe zili kuti muwongolere mitengo yanu yotseguka ndi kudina. Mapulatifomu ambiri a imelo tsopano akuphatikizira kuyesa kwaotomatiki komwe kumawonetsa mndandandawo, kuzindikira zopambana, ndikutumiza imelo yabwino kwambiri kwa olembetsa otsala.

Ngati kampani yanu ikulimbana ndi kupanga, kuyesa, ndikugwiritsa ntchito maimelo omwe amayankha mafoni omwe akuyendetsa ntchito, musazengereze kulumikizana ndi kampani yanga. DK New Media ali ndi chidziwitso pakukhazikitsa pafupifupi aliyense wopereka maimelo (ESP).

Douglas Karr

Douglas Karr ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.