Imeeli Tita & AutomationMobile ati tabulẹti Tita

16 Alagbeka ore HTML Imeeli Awọn iṣe ti o dara julọ Ti o Mu Ibi Apo-iwọle pọ si ati Ibaṣepọ

Ni 2023, o ṣee ṣe pe alagbeka yoo kọja tabili tabili bi ẹrọ akọkọ fun ṣiṣi imeeli. Ni otitọ, HubSpot rii iyẹn 46 ogorun ti gbogbo imeeli ṣi bayi waye lori alagbeka. Ti o ko ba ṣe apẹrẹ awọn imeeli fun alagbeka, o nlọ ọpọlọpọ adehun igbeyawo ati owo lori tabili.

  1. Ijeri Imeeli: Aridaju rẹ awọn apamọ ti wa ni ojulowo si ašẹ fifiranṣẹ ati IP adirẹsi jẹ pataki lati sunmọ si apo-iwọle ati ki o ko ipa si a ijekuje tabi àwúrúju folda. O tun ṣe pataki, nitorinaa, pe o pese ọna jijade kuro ni imeeli nipa lilo pẹpẹ ti o ṣafikun ọna asopọ yokuro.
  2. Apẹrẹ Idahun: awọn HTML imeeli yẹ ki o jẹ še lati wa ni idahun, eyi ti o tumo si wipe o le ṣatunṣe si awọn iwọn iboju ti awọn ẹrọ lori eyi ti o ti wa ni wiwo. Eyi ni idaniloju pe imeeli naa dara lori tabili mejeeji ati awọn ẹrọ alagbeka.
  3. Ko o ati laini koko-ọrọ ṣoki: Laini koko-ọrọ ti o han ṣoki ati ṣoki jẹ pataki fun awọn olumulo alagbeka nitori wọn le rii awọn ọrọ diẹ akọkọ ti laini koko-ọrọ nikan ni pane awotẹlẹ imeeli wọn. O yẹ ki o jẹ kukuru ati ṣe afihan akoonu ti imeeli ni deede. Gigun ohun kikọ ti o dara julọ ti laini koko-ọrọ imeeli le yatọ si da lori nọmba awọn ifosiwewe, gẹgẹbi akoonu imeeli, olugbo, ati alabara imeeli ti o nlo. Sibẹsibẹ, ọpọlọpọ awọn amoye ṣeduro fifipamọ awọn laini koko-ọrọ imeeli ni kukuru ati si aaye, ni igbagbogbo laarin awọn ohun kikọ 41-50 tabi awọn ọrọ 6-8. Lori awọn ẹrọ alagbeka, awọn laini koko-ọrọ ti o gun ju awọn ohun kikọ 50 le ge kuro, ati ni awọn igba miiran, le ṣe afihan awọn ọrọ diẹ akọkọ ti laini koko-ọrọ nikan. Eyi le jẹ ki o ṣoro fun olugba lati ni oye ifiranṣẹ akọkọ ti imeeli ati pe o le dinku iṣeeṣe ti ṣiṣi imeeli naa.
  4. Àkọ́kọ́ àkọ́kọ́: Akọbẹrẹ imeeli jẹ akopọ kukuru ti akoonu imeeli ti o han lẹgbẹẹ tabi labẹ laini koko-ọrọ ninu apoti-iwọle alabara imeeli. O jẹ ẹya pataki ti o le ni ipa lori iwọn ṣiṣi ti awọn imeeli rẹ nigbati iṣapeye. Pupọ julọ awọn alabara ṣafikun HTML ati CSS lati rii daju pe ọrọ iṣaaju ti ṣeto daradara.
<!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. Ifilelẹ ọwọn ẹyọkan: Awọn apamọ ti a ṣe apẹrẹ pẹlu apẹrẹ iwe-ẹyọkan rọrun lati ka lori awọn ẹrọ alagbeka. Akoonu yẹ ki o ṣeto ni ọna ti ọgbọn ati gbekalẹ ni ọna ti o rọrun, rọrun-lati-ka. Ti o ba ni awọn ọwọn pupọ, lilo CSS le fi oore-ọfẹ ṣeto awọn ọwọn naa ni apẹrẹ iwe-ẹyọkan.

Eyi ni Ifilelẹ imeeli HTML iyẹn jẹ awọn ọwọn meji lori tabili tabili ati ṣubu si ọwọn kan lori awọn iboju alagbeka:

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

Eyi ni Ifilelẹ imeeli HTML iyẹn jẹ awọn ọwọn meji lori tabili tabili ati ṣubu si ọwọn kan lori awọn iboju alagbeka:

<!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. Ipo Imọlẹ ati Dudu: julọ awọn alabara imeeli ṣe atilẹyin ina ati ipo dudu CSS prefers-color-scheme lati gba awọn ayanfẹ olumulo. Rii daju lati lo awọn oriṣi aworan nibiti o ti ni isale ti o han gbangba. Eyi ni apẹẹrẹ koodu kan.
<!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. Awọn nkọwe nla, ti o le sọ: Iwọn fonti ati ara yẹ ki o yan lati jẹ ki ọrọ rọrun lati ka lori iboju kekere kan. Lo o kere ju iwọn fonti 14pt ki o yago fun lilo awọn nkọwe ti o nira lati ka lori awọn iboju kekere. Awọn nkọwe ti o wọpọ ni iṣeeṣe giga ti ṣiṣe ni igbagbogbo kọja awọn alabara imeeli oriṣiriṣi, nitorinaa lilo Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, ati Trebuchet MS jẹ awọn nkọwe ailewu ni igbagbogbo. Ti o ba lo fonti aṣa kan, rii daju pe o ni fonti fallback ti a damọ ninu CSS rẹ:
<!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. Lilo awọn aworan ti o dara julọ: Awọn aworan le fa fifalẹ awọn akoko fifuye ati pe o le ma han daradara lori gbogbo awọn ẹrọ alagbeka. Lo awọn aworan ni iwọn, ati rii daju pe wọn jẹ iwọn ati fisinuirinu fun mobile wiwo. Rii daju lati fọwọsi ọrọ alt fun awọn aworan rẹ ni iṣẹlẹ ti alabara imeeli ṣe dina wọn. Gbogbo awọn aworan yẹ ki o wa ni ipamọ ati tọka si lati oju opo wẹẹbu ti o ni aabo (SSL). Eyi ni koodu apẹẹrẹ ti awọn aworan idahun ni imeeli HTML kan.
<!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. Pa ipe-si-igbese kuro (CTA): CTA ti o han gbangba ati olokiki ṣe pataki ni imeeli eyikeyi, ṣugbọn o ṣe pataki paapaa ni imeeli ore-alagbeka. Rii daju pe CTA rọrun lati wa ati pe o tobi to lati tẹ lori ẹrọ alagbeka kan. Ti o ba ṣafikun awọn bọtini, o le rii daju pe o ti kọ wọn sinu CSS pẹlu awọn ami ara inline daradara:
<!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. Akoonu kukuru ati ṣoki: Jeki akoonu ti imeeli ni kukuru ati si aaye. Iwọn ohun kikọ fun imeeli HTML le yatọ si da lori alabara imeeli ti o nlo. Bibẹẹkọ, pupọ julọ awọn alabara imeeli fi opin iwọn ti o pọju fun awọn imeeli, ni igbagbogbo laarin 1024-2048 kilobytes (KB), eyiti o pẹlu mejeeji koodu HTML ati eyikeyi awọn aworan tabi awọn asomọ. Lo awọn akọle kekere, awọn aaye ọta ibọn, ati awọn ilana ọna kika miiran lati jẹ ki akoonu ni irọrun ṣawari lakoko lilọ kiri ati kika lori iboju kekere kan.
  2. Awọn eroja ibaraenisepo: palapapo ibanisọrọ eroja ti o gba akiyesi ti awọn alabapin rẹ yoo ṣe agbeko adehun, oye, ati awọn oṣuwọn iyipada lati imeeli rẹ. Awọn GIF ti ere idaraya, awọn aago kika, awọn fidio, ati awọn eroja miiran jẹ atilẹyin nipasẹ ọpọlọpọ awọn alabara imeeli ti foonuiyara.
  3. Àdáni: Ti ara ẹni ikini ati akoonu fun alabapin kan pato le ṣe ifilọlẹ adehun ni pataki, kan rii daju pe o gba ni ẹtọ! Fun apẹẹrẹ. Nini awọn ifẹhinti ti ko ba si data ni aaye orukọ akọkọ jẹ pataki.
  4. Àkóónú Ìmúdàgba: Pipin ati isọdi ti akoonu le dinku awọn oṣuwọn ṣiṣe alabapin rẹ ki o jẹ ki awọn alabapin rẹ ṣiṣẹ.
  5. Ijọpọ Ipolongo: Pupọ julọ awọn olupese iṣẹ imeeli ni agbara lati fi sii laifọwọyi UTM ipolongo querystrings fun gbogbo ọna asopọ ki o le wo imeeli bi ikanni ni awọn atupale.
  6. Ile-iṣẹ ayanfẹ: Titaja imeeli ṣe pataki pupọ fun ijade-iwọle tabi ọna ijade si awọn imeeli. Ṣafikun ile-iṣẹ ayanfẹ nibiti awọn alabapin rẹ le yipada bii igbagbogbo wọn gba awọn apamọ ati kini akoonu ṣe pataki fun wọn jẹ ọna ikọja lati tọju eto imeeli ti o lagbara pẹlu awọn alabapin ti o ṣiṣẹ!
  7. Idanwo, Idanwo, Idanwo: Rii daju lati ṣe idanwo imeeli rẹ lori awọn ẹrọ pupọ tabi lo ohun elo kan si ṣe awotẹlẹ awọn imeeli rẹ kọja awọn alabara imeeli lati rii daju pe o dara ati pe o ṣiṣẹ daradara lori awọn iwọn iboju oriṣiriṣi ati awọn ọna ṣiṣe KI o to firanṣẹ. Litmus Ijabọ pe oke 3 awọn agbegbe ṣiṣi alagbeka olokiki julọ tẹsiwaju lati jẹ kanna: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Paapaa, ṣafikun awọn iyatọ idanwo ti awọn laini koko-ọrọ rẹ ati akoonu lati mu ilọsiwaju ṣiṣi ati tẹ-nipasẹ awọn oṣuwọn. Ọpọlọpọ awọn iru ẹrọ imeeli ni bayi ṣafikun idanwo adaṣe ti yoo ṣe ayẹwo atokọ naa, ṣe idanimọ iyatọ ti o bori, ati firanṣẹ imeeli ti o dara julọ si awọn alabapin to ku.

Ti ile-iṣẹ rẹ ba n tiraka pẹlu ṣiṣe apẹrẹ, idanwo, ati imuse awọn imeeli ti o ṣe idahun alagbeka ti o n ṣe awakọ, ma ṣe ṣiyemeji lati kan si ile-iṣẹ mi. DK New Media ni iriri ninu imuse ti fere gbogbo olupese iṣẹ imeeli (ESP).

Douglas Karr

Douglas Karr jẹ CMO ti Ṣii awọn oye ati oludasile ti Martech Zone. Douglas ti ṣe iranlọwọ fun awọn dosinni ti awọn ibẹrẹ MarTech aṣeyọri, ti ṣe iranlọwọ ni aisimi ti o ju $ 5 bilionu ni awọn ohun-ini Martech ati awọn idoko-owo, ati tẹsiwaju lati ṣe iranlọwọ fun awọn ile-iṣẹ ni imuse ati adaṣe awọn tita ati awọn ilana titaja wọn. Douglas jẹ iyipada oni nọmba agbaye ti a mọye ati alamọja MarTech ati agbọrọsọ. Douglas tun jẹ onkọwe ti a tẹjade ti itọsọna Dummie ati iwe itọsọna iṣowo kan.

Ìwé jẹmọ

Pada si bọtini oke
Close

Ti ṣe awari Adblock

Martech Zone ni anfani lati pese akoonu yii fun ọ laisi idiyele nitori a ṣe monetize aaye wa nipasẹ wiwọle ipolowo, awọn ọna asopọ alafaramo, ati awọn onigbọwọ. A yoo ni riri ti o ba yọ ohun idena ipolowo rẹ bi o ṣe nwo aaye wa.