Маркетинги почтаи электронӣ ва автоматизатсияМаркетинги мобилӣ ва планшетҳо

16 Таҷрибаҳои беҳтарини почтаи электронии HTML-и мобилӣ, ки ҷойгиркунӣ ва ҷалби паёмдониро ба ҳадди аксар мерасонанд

Дар соли 2023, эҳтимол дорад, ки мобилӣ ҳамчун дастгоҳи асосӣ барои кушодани почтаи электронӣ аз мизи корӣ болотар бошад. Дар асл, HubSpot инро ёфт 46 фоиз аз ҳама почтаи электронӣ ҳоло дар мобилӣ ба амал меоянд. Агар шумо почтаи электронӣ барои мобилӣ тарроҳӣ накунед, шумо ҷалб ва пули зиёдеро дар сари миз боқӣ мегузоред.

  1. Тасдиқи почтаи электронӣ: Таъмини шумо почтаи электронӣ тасдиқ карда мешавад ба домени ирсолкунанда ва IP Суроға барои ворид шудан ба паёмдон муҳим аст ва ба ҷузвдони партов ё спам интиқол дода намешавад. Албатта, инчунин муҳим аст, ки шумо воситаи даст кашидан аз почтаи электронӣ бо истифода аз платформае пешниҳод кунед, ки истиноди обунаро дар бар мегирад.
  2. Тарҳрезии ҷавобӣ: Дар HTML почтаи электронӣ бояд бошад барои посухгӯӣ тарҳрезӣ шудааст, ки маънои онро дорад, ки он метавонад ба андозаи экрани дастгоҳе, ки дар он дида мешавад, танзим кунад. Ин кафолат медиҳад, ки почтаи электронӣ ҳам дар мизи корӣ ва ҳам дар дастгоҳҳои мобилӣ хуб ба назар мерасад.
  3. Сатри равшан ва мухтасари мавзӯъ: Барои корбарони мобилӣ хати мавзӯъи дақиқ ва мухтасар муҳим аст, зеро онҳо метавонанд танҳо чанд калимаи аввали сатри мавзӯъро дар панели пешнамоиши почтаи электронии худ бубинанд. Он бояд мухтасар бошад ва мундариҷаи почтаи электрониро дақиқ инъикос кунад. Дарозии оптималии аломати хати мавзӯъи почтаи электронӣ метавонад вобаста ба як қатор омилҳо, ба монанди мундариҷаи почтаи электронӣ, аудитория ва муштарии почтаи электронӣ, ки истифода мешавад, фарқ кунад. Бо вуҷуди ин, аксари коршиносон тавсия медиҳанд, ки сатрҳои мавзӯи почтаи электрониро кӯтоҳ ва ба нукта, одатан байни 41-50 аломат ё 6-8 калима нигоҳ доранд. Дар дастгоҳҳои мобилӣ хатҳои мавзӯъ, ки аз 50 аломат дарозтаранд, метавонанд бурида шаванд ва дар баъзе мавридҳо танҳо чанд калимаи аввали сатри мавзӯъро нишон дода метавонанд. Ин метавонад барои қабулкунанда фаҳмидани паёми асосии почтаи электрониро душвор созад ва эҳтимоли кушодани почтаи электрониро коҳиш диҳад.
  4. Сарлавҳаи пешакӣ: Сарлавҳаи пешакии почтаи электронӣ мухтасари мундариҷаи почтаи электронӣ мебошад, ки дар паҳлӯ ё дар зери сатри мавзӯъ дар паёмдони муштарии почтаи электронӣ пайдо мешавад. Ин як унсури муҳимест, ки метавонад ҳангоми оптимизатсия ба суръати кушодаи мактубҳои шумо таъсир расонад. Аксари муштариён HTML ва CSS-ро дар бар мегиранд, то боварӣ ҳосил кунанд, ки матни пешакии матн дуруст танзим карда шудааст.
<!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. Тарҳбандии як сутун: Почтаи электронӣ, ки бо тарҳбандии як сутун тарҳрезӣ шудааст, хондан дар дастгоҳҳои мобилӣ осонтар аст. Мундариҷа бояд бо пайдарпаии мантиқӣ ташкил карда шавад ва дар формати содда, барои хондан пешниҳод карда шавад. Агар шумо якчанд сутун дошта бошед, бо истифода аз CSS метавонад сутунҳоро дар тарҳбандии яксутун ба таври зебо ташкил кунад.

Ана Тарҳбандии почтаи электронии HTML ки 2 сутун дар мизи корӣ аст ва дар экранҳои мобилӣ ба як сутуни ягона меафтад:

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

Ана Тарҳбандии почтаи электронии HTML ки 3 сутун дар мизи корӣ аст ва дар экранҳои мобилӣ ба як сутуни ягона меафтад:

<!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. Реҷаи равшан ва торик: Аксарияти муштариёни почтаи электронӣ ҳолати равшан ва торикро дастгирӣ мекунанд CSS prefers-color-scheme барои мувофиқ кардани афзалиятҳои корбар. Боварӣ ҳосил кунед, ки намудҳои тасвирро дар он ҷое, ки заминаи шаффоф доред, истифода баред. Инак як мисоли код.
<!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. Шрифтҳои калон, хониш: Андоза ва услуби шрифт бояд интихоб карда шавад, ки матн дар экрани хурд хондан осон бошад. Ҳадди ақалл андозаи шрифти 14птро истифода баред ва аз истифодаи ҳуруфҳое, ки хондан дар экранҳои хурд душвор аст, худдорӣ намоед. Шрифтҳои маъмулан истифодашаванда эҳтимолияти пайваста дар мизоҷҳои гуногуни почтаи электронӣ доранд, аз ин рӯ истифодаи Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma ва Trebuchet MS маъмулан шрифтҳои бехатар мебошанд. Агар шумо шрифти фармоиширо истифода баред, боварӣ ҳосил кунед, ки дар CSS-и худ шрифти бозгаштро муайян кунед:
<!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. Истифодаи оптималии тасвирҳо: Тасвирҳо метавонанд вақти боркуниро суст кунанд ва дар ҳама дастгоҳҳои мобилӣ дуруст намоиш надиҳанд. Тасвирҳоро сарфакорона истифода баред ва боварӣ ҳосил кунед, ки онҳо андозаи ва фишурдашуда барои тамошои мобилӣ. Боварӣ ҳосил кунед, ки матни зерро барои тасвирҳои худ пур кунед, агар муштарии почтаи электронӣ онҳоро масдуд кунад. Ҳама тасвирҳо бояд аз вебсайти бехатар нигоҳ дошта шаванд (SSL). Ин аст рамзи мисоли тасвирҳои ҷавобгӯ дар почтаи 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. Даъват ба амалро тоза кунед (CTA): CTA возеҳ ва намоён дар ҳама гуна почтаи электронӣ муҳим аст, аммо он махсусан дар почтаи электронӣ барои мобилӣ муҳим аст. Боварӣ ҳосил кунед, ки CTA-ро ёфтан осон аст ва он кофӣ калон аст, ки дар дастгоҳи мобилӣ пахш карда шавад. Агар шумо тугмаҳоро дохил кунед, шумо метавонед боварӣ ҳосил кунед, ки шумо онҳоро дар CSS бо барчаспҳои сабки 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. Мундариҷаи кӯтоҳ ва мухтасар: Мундариҷаи почтаи электрониро кӯтоҳ ва дақиқ нигоҳ доред. Маҳдудияти аломатҳои почтаи электронии HTML метавонад вобаста ба муштарии почтаи электронии истифодашаванда фарқ кунад. Бо вуҷуди ин, аксари муштариёни почтаи электронӣ барои мактубҳо маҳдудияти ҳадди аксарро муқаррар мекунанд, одатан байни 1024-2048 килобайт (KB), ки ҳам рамзи HTML ва ҳам ҳама тасвирҳо ё замимаҳоеро дар бар мегирад. Зерсарлавҳаҳо, нуқтаҳои тир ва дигар усулҳои форматкуниро истифода баред, то мундариҷаро ҳангоми ҳаракат ва хондан дар экрани хурд ба осонӣ скан кардан мумкин аст.
  2. Унсурҳои интерактивӣ: якҷоя гузаронидани унсурҳои интерактивӣ ки диққати муштарии шуморо ба худ ҷалб мекунад, сатҳи ҷалб, фаҳмиш ва табдили почтаи электронии шуморо афзоиш медиҳад. GIF-ҳои аниматсионӣ, таймерҳои ақибшумор, видеоҳо ва дигар унсурҳоро аксарияти муштариёни почтаи электронии смартфон дастгирӣ мекунанд.
  3. Фардикунонӣ: Фардикунонии салом ва мундариҷа барои муштарии мушаххас метавонад ҷалби шуморо ба таври назаррас афзоиш диҳад, танҳо боварӣ ҳосил кунед, ки шумо онро дуруст қабул мекунед! Масалан. Доштани бозгаштҳо, агар дар майдони ном ягон маълумот мавҷуд набошад, муҳим аст.
  4. Мундариҷаи динамикӣ: Сегментатсия ва мутобиқсозии мундариҷа метавонад нархҳои бекоркунии шуморо коҳиш диҳад ва муштариёни шуморо ҷалб кунад.
  5. Интегратсияи маърака: Аксари провайдерҳои хидматрасонии почтаи электронӣ қобилияти ба таври худкор илова карданро доранд Сатри пурсишҳои маъракаи UTM барои ҳар як истинод, то шумо метавонед почтаи электрониро ҳамчун канал дар таҳлил бинед.
  6. Маркази афзалиятнок: Маркетинги почтаи электронӣ барои танҳо як равиши дохил шудан ё рад кардани почтаи электронӣ хеле муҳим аст. Дохил кардани маркази афзалиятнок, ки дар он муштариёни шумо метавонанд зуд-зуд гирифтани мактубҳои электрониро тағйир диҳанд ва кадом мундариҷа барои онҳо муҳим аст, як роҳи афсонавӣ барои нигоҳ доштани барномаи қавии почтаи электронӣ бо муштариёни ҷалбшуда аст!
  7. Санҷиш, озмоиш, озмоиш: Боварӣ ҳосил кунед, ки почтаи электронии худро дар якчанд дастгоҳҳо санҷед ё як барномаро истифода баред паёмҳои электронии худро дар байни муштариёни почтаи электронӣ пешнамоиш кунед Барои боварӣ ҳосил кардан, ки он дар андозаҳои гуногуни экран ва системаҳои оператсионӣ хуб ба назар мерасад ва дуруст кор мекунад, пеш аз фиристодани шумо. Литмус гузориш медиҳад, ки се муҳитҳои маъмултарини мобилии мобилӣ ҳамоно боқӣ мемонанд: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Инчунин, вариантҳои санҷишии сатрҳои мавзӯъ ва мундариҷаи худро барои беҳтар кардани сатҳи кушода ва клики худ дохил кунед. Бисёр платформаҳои почтаи электронӣ ҳоло санҷиши автоматиро дар бар мегиранд, ки рӯйхатро интихоб мекунанд, варианти ғолибро муайян мекунанд ва беҳтарин почтаи электрониро ба муштариёни боқимонда мефиристанд.

Агар ширкати шумо бо тарҳрезӣ, озмоиш ва татбиқи паёмҳои мобилии ҷавобӣ, ки боиси ҷалби онҳо мегардад, мубориза барад, шарм надоред бо ширкати ман тамос гиред. DK New Media дар татбиқи амалан ҳар як провайдери хидматрасонии почтаи электронӣ таҷриба дорад (ESP).

Douglas Karr

Douglas Karr CMO аз OpenINSIGHTS ва асосгузори Martech Zone. Дуглас ба даҳҳо стартапҳои бомуваффақияти MarTech кӯмак кардааст, дар тафтиши зарурӣ ба маблағи беш аз 5 миллиард доллар дар харид ва сармоягузории Martech кӯмак кардааст ва ба ширкатҳо дар татбиқ ва автоматикунонии стратегияҳои фурӯш ва маркетинги онҳо кӯмак мерасонад. Дуглас трансформатсияи рақамии дар сатҳи байналмилалӣ эътирофшуда ва коршинос ва сухангӯи MarTech мебошад. Дуглас инчунин муаллифи нашршудаи дастури Dummie ва китоби роҳбарияти тиҷорат аст.

Мақолаҳо марбут

Бозгашт ба боло
наздик

Блоки рекламавӣ ошкор карда шуд

Martech Zone қодир аст, ки ин мундариҷаро ба шумо бепул пешниҳод кунад, зеро мо сайти худро тавассути даромади таблиғотӣ, истинодҳои шарикӣ ва сарпарастӣ монетизатсия мекунем. Мо миннатдор хоҳем буд, агар шумо ҳангоми дидани сайти мо блокатори таблиғоти худро хориҷ кунед.