Имэйлийн маркетинг ба автоматжуулалтГар утас, таблет маркетинг

Ирсэн имэйлийн байршуулалт, оролцоог нэмэгдүүлэх 16 гар утсанд ээлтэй HTML имэйлийн шилдэг туршлага

2023 онд гар утас нь цахим шуудан нээх үндсэн төхөөрөмж болох ширээний компьютерийг давж гарах магадлал өндөр байна. Үнэндээ HubSpot үүнийг олж мэдсэн 46 хувь Бүх цахим шуудангийн нээлгүүдийг гар утсан дээр хийдэг. Хэрэв та гар утсанд зориулж имэйл зохион бүтээгээгүй бол та ширээн дээр маш их оролцоо, мөнгө үлдээх болно.

  1. Имэйл баталгаажуулалт: Таныг баталгаажуулах имэйлүүд баталгаажуулсан байна илгээгч домайн руу болон IP хаяг нь ирсэн мэйлд ороход чухал ач холбогдолтой бөгөөд хаягдал эсвэл спам хавтас руу чиглүүлэхгүй. Мэдээжийн хэрэг та бүртгэлээ цуцлах холбоосыг агуулсан платформ ашиглан имэйлээс татгалзах арга хэрэгслийг өгөх нь чухал юм.
  2. Хариуцлагатай дизайн: The 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. Том, гаргацтай фонтууд: Текстийг жижиг дэлгэц дээр уншихад хялбар болгох үүднээс үсгийн хэмжээ, хэв маягийг сонгох хэрэгтэй. Хамгийн багадаа 14pt фонт ашиглах ба жижиг дэлгэц дээр уншихад хэцүү фонт ашиглахаас зайлсхий. Түгээмэл хэрэглэгддэг фонтууд нь янз бүрийн цахим шуудангийн үйлчлүүлэгчдэд тогтмол дамждаг тул 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-д доторлогооны хэв маягийн шошготойгоор бичсэн эсэхээ баталгаажуулах боломжтой.
<!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. Туршилт, Туршилт, Туршилт: Имэйлээ олон төхөөрөмж дээр туршиж үзэх эсвэл програм ашиглахаа мартуузай и-мэйл клиентүүдээр дамжуулан имэйлээ урьдчилан үзэх Таныг илгээхээсээ өмнө янз бүрийн хэмжээтэй дэлгэц болон үйлдлийн системүүд дээр сайн харагдах, хэвийн ажиллаж байгаа эсэхийг баталгаажуулах. Litmus Хамгийн алдартай гар утасны нээлттэй 3 орчин хэвээр байна: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Нээлттэй болон товшилтын хувь хэмжээг сайжруулахын тулд сэдэв болон агуулгынхаа туршилтын хувилбаруудыг оруулаарай. Олон цахим шуудангийн платформууд одоо автоматжуулсан тестийг багтаасан бөгөөд энэ нь жагсаалтыг түүвэрлэх, ялалтын хувилбарыг тодорхойлох, үлдсэн захиалагчдад хамгийн сайн имэйл илгээх болно.

Хэрэв танай компани оролцоог бий болгож буй гар утасны хариу үйлдэл бүхий имэйлийг зохион бүтээх, турших, хэрэгжүүлэхэд бэрхшээлтэй байгаа бол манай фирмтэй холбоо барихаас бүү эргэлз. DK New Media бараг бүх цахим шуудангийн үйлчилгээ үзүүлэгчийг хэрэгжүүлсэн туршлагатай (ESP).

Douglas Karr

Douglas Karr нь CMO юм OpenINSIGHTS болон үүсгэн байгуулагч Martech Zone. Дуглас олон арван амжилттай MarTech стартапуудад тусалж, Martech-ийн худалдан авалт, хөрөнгө оруулалтад 5 тэрбум гаруй долларын зохих шалгалт хийхэд тусалсан бөгөөд компаниудад борлуулалт, маркетингийн стратегиа хэрэгжүүлэх, автоматжуулахад нь тусалсаар байна. Дуглас бол олон улсад хүлээн зөвшөөрөгдсөн дижитал хувиргалт, MarTech мэргэжилтэн, илтгэгч юм. Дуглас бол Даммигийн гарын авлага, бизнесийн манлайллын номыг хэвлүүлсэн зохиолч юм.

холбоотой зүйл

Дээшээ буцах товч
Хаах

Adblock илэрсэн

Martech Zone Бид зар сурталчилгааны орлого, түншлэлийн холбоос, ивээн тэтгэгчээр дамжуулан сайтаа мөнгөжүүлдэг учраас энэ агуулгыг танд ямар ч үнэгүйгээр өгөх боломжтой. Та манай сайтыг үзэж байхдаа зар хориглогчоо устгавал бид талархах болно.