Elektron pochta marketingi va avtomatlashtirishMobil va planshetlar marketingi

Kiruvchi xabarlar qutisini joylashtirish va jalb qilishni maksimal darajada oshiradigan 16 mobil qulay HTML elektron pochta amaliyoti

2023 yilda mobil telefon elektron pochtani ochish uchun asosiy qurilma sifatida ish stolini ortda qoldirishi ehtimoldan xoli emas. Aslida HubSpot buni topdi 46 foiz Barcha elektron pochta xabarlari endi mobil qurilmada ochiladi. Agar siz mobil telefonlar uchun elektron pochta xabarlarini ishlab chiqmasangiz, stolda juda ko'p ishtirok va pul qoldirasiz.

  1. Elektron pochta autentifikatsiyasi: O'zingizni ta'minlash elektron pochta xabarlari autentifikatsiya qilinadi yuboruvchi domenga va IP manzil kiruvchi qutiga kirish uchun juda muhim va keraksiz yoki spam jildiga yo'naltirilmaydi. Shuningdek, obunani bekor qilish havolasini o'z ichiga olgan platformadan foydalanib, elektron pochtadan voz kechish vositasini taqdim etishingiz ham muhim.
  2. Javob beradigan dizayn: The HTML elektron pochta bo'lishi kerak sezgir bo'lishi uchun yaratilgan, ya'ni u ko'rilayotgan qurilmaning ekran o'lchamiga moslasha oladi. Bu elektron pochta ish stoli va mobil qurilmalarda yaxshi ko'rinishini ta'minlaydi.
  3. Aniq va qisqa mavzu qatori: Mobil foydalanuvchilar uchun aniq va ixcham mavzu qatori muhim ahamiyatga ega, chunki ular elektron pochta xabarlarini oldindan ko'rish panelida mavzu satrining birinchi bir necha so'zlarini ko'rishlari mumkin. U qisqa bo'lishi va elektron pochta mazmunini to'g'ri aks ettirishi kerak. Elektron pochta mavzusi satrining optimal belgilar uzunligi elektron pochta tarkibi, auditoriya va foydalaniladigan elektron pochta mijozi kabi bir qator omillarga qarab farq qilishi mumkin. Biroq, ko'pchilik mutaxassislar elektron pochta mavzusini qisqa va aniq, odatda 41-50 belgi yoki 6-8 so'z orasida saqlashni tavsiya qiladi. Mobil qurilmalarda 50 belgidan uzunroq mavzu satrlari kesilishi mumkin va ba'zi hollarda mavzu satrining faqat bir necha so'zlarini ko'rsatishi mumkin. Bu qabul qiluvchining elektron pochta xabarining asosiy xabarini tushunishini qiyinlashtirishi va elektron pochtani ochish ehtimolini kamaytirishi mumkin.
  4. Old sarlavha: Elektron pochta sarlavhasi elektron pochta mijozining kirish qutisidagi mavzu satrining yonida yoki ostida paydo bo'ladigan xat mazmunining qisqacha xulosasidir. Bu optimallashtirilganda elektron pochtangizning ochiq tezligiga ta'sir qilishi mumkin bo'lgan muhim element. Ko'pgina mijozlar oldindan sarlavha matni to'g'ri o'rnatilganligiga ishonch hosil qilish uchun HTML va CSS-ni o'z ichiga oladi.
<!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. Bir ustunli tartib: Bir ustunli tartib bilan yaratilgan elektron pochta xabarlarini mobil qurilmalarda o'qish osonroq. Kontent mantiqiy ketma-ketlikda tashkil etilishi va oddiy, o'qilishi oson formatda taqdim etilishi kerak. Agar sizda bir nechta ustunlar bo'lsa, CSS-dan foydalanib, ustunlarni bitta ustunli tartibda tartibga solish mumkin.

Mana bir HTML elektron pochta tartibi ya'ni ish stolida 2 ta ustun va mobil ekranlarda bitta ustunga yig'iladi:

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

Mana bir HTML elektron pochta tartibi ya'ni ish stolida 3 ta ustun va mobil ekranlarda bitta ustunga yig'iladi:

<!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. Yorug'lik va qorong'i rejim: eng elektron pochta mijozlari yorug'lik va qorong'u rejimlarni qo'llab-quvvatlaydi CSS prefers-color-scheme foydalanuvchining afzalliklarini qondirish uchun. Shaffof fonga ega bo'lgan rasm turlaridan foydalanganingizga ishonch hosil qiling. Mana kod misoli.
<!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. Katta, tushunarli shriftlar: Shrift o'lchami va uslubi matnni kichik ekranda o'qishni osonlashtirish uchun tanlanishi kerak. Kamida 14pt shrift o'lchamidan foydalaning va kichik ekranlarda o'qish qiyin bo'lgan shriftlardan qoching. Tez-tez ishlatiladigan shriftlar turli xil elektron pochta mijozlarida doimiy ravishda ko'rsatilish ehtimoli yuqori, shuning uchun Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma va Trebuchet MS dan foydalanish odatda xavfsiz shriftlar hisoblanadi. Agar siz maxsus shriftdan foydalansangiz, CSS-da zaxira shrift aniqlanganligiga ishonch hosil qiling:
<!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. Tasvirlardan optimal foydalanish: Rasmlar yuklanish vaqtini sekinlashtirishi va barcha mobil qurilmalarda toʻgʻri koʻrsatilmasligi mumkin. Tasvirlardan tejamkorlik bilan foydalaning va ularning o'lchamli va o'lchamli ekanligiga ishonch hosil qiling siqilgan mobil ko'rish uchun. E-pochta mijozi ularni bloklagan taqdirda rasmlaringiz uchun alternativ matnni to'ldirishni unutmang. Barcha rasmlar xavfsiz veb-saytdan saqlanishi va havola qilinishi kerak (SSL). Bu yerda HTML elektron pochtasidagi javob beruvchi tasvirlarning misol kodi.
<!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. Harakatga chaqiruvni tozalash (CTA): Aniq va ko'zga ko'ringan CTA har qanday elektron pochtada muhim, lekin mobil aloqa uchun qulay elektron pochta xabarida ayniqsa muhimdir. CTA ni topish oson va u mobil qurilmada bosish uchun etarlicha katta ekanligiga ishonch hosil qiling. Agar siz tugmachalarni o'z ichiga olgan bo'lsangiz, ularni CSS-da ichki uslub teglari bilan yozishingizga ishonch hosil qilishingiz mumkin:
<!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. Qisqa va ixcham tarkib: Elektron pochtaning mazmunini qisqa va mazmunli saqlang. HTML elektron pochta uchun belgilar chegarasi foydalanilayotgan elektron pochta mijoziga qarab farq qilishi mumkin. Biroq, ko'pgina elektron pochta mijozlari elektron pochta xabarlari uchun maksimal hajm chegarasini qo'yadi, odatda 1024-2048 kilobayt (KB), bu HTML kodni ham, har qanday rasm yoki qo'shimchalarni ham o'z ichiga oladi. Kichkina ekranda aylanayotganda va o'qiyotganda tarkibni osongina skanerlash uchun sarlavhalar, nuqta nuqtalari va boshqa formatlash usullaridan foydalaning.
  2. Interaktiv elementlar: o'z ichiga olgan interaktiv elementlar Sizning obunachingizning e'tiborini jalb qiladigan narsa sizning e-pochtangizdan jalb qilish, tushunish va konvertatsiya qilish tezligini oshiradi. Animatsiya qilingan GIF-rasmlar, ortga hisoblash taymerlari, videolar va boshqa elementlar smartfon elektron pochta mijozlarining ko'pchiligi tomonidan qo'llab-quvvatlanadi.
  3. Shaxsiylashtirish: Muayyan obunachi uchun salomlashish va kontentni shaxsiylashtirish qiziqishni sezilarli darajada oshirishi mumkin, shunchaki uni to'g'ri tushunganingizga ishonch hosil qiling! Masalan. Agar ism maydonida ma'lumotlar bo'lmasa, zaxiralarga ega bo'lish muhimdir.
  4. Dinamik tarkib: Tarkibni segmentlash va moslashtirish obunani bekor qilish stavkalarini kamaytirishi va obunachilarni jalb qilishi mumkin.
  5. Kampaniya integratsiyasi: Aksariyat zamonaviy elektron pochta provayderlari avtomatik ravishda qo'shish imkoniyatiga ega UTM kampaniyasi so'rovlari Har bir havola uchun elektron pochtani tahliliy kanal sifatida ko'rishingiz mumkin.
  6. Afzallik markazi: Elektron pochta marketingi elektron pochta xabarlariga kirish yoki rad etish yondashuvi uchun juda muhim. Sizning obunachilaringiz elektron pochta xabarlarini qanchalik tez-tez qabul qilishlarini va ular uchun qaysi kontent muhimligini o'zgartirishi mumkin bo'lgan imtiyozlar markazini o'z ichiga olish - band obunachilar bilan kuchli elektron pochta dasturini saqlashning ajoyib usuli!
  7. Sinov, sinov, sinov: Elektron pochtangizni bir nechta qurilmalarda sinab ko'ring yoki ilovadan foydalaning elektron pochta mijozlari bo'ylab elektron pochta xabarlaringizni oldindan ko'ring jo‘natishdan oldin turli ekran o‘lchamlari va operatsion tizimlarda yaxshi ko‘rinishi va to‘g‘ri ishlashini ta’minlash uchun. lakmus xabar berishicha, eng mashhur 3 ta mobil ochiq muhit bir xil bo'lib qolmoqda: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ochilish va bosish stavkalarini yaxshilash uchun mavzu satrlari va kontentingizning test variantlarini ham qo'shing. Ko'pgina elektron pochta platformalari endi ro'yxatni tanlab olish, g'olib variantni aniqlash va qolgan obunachilarga eng yaxshi elektron pochta xabarlarini yuborish uchun avtomatlashtirilgan testlarni o'z ichiga oladi.

Agar sizning kompaniyangiz faollikni oshiruvchi mobil javob beruvchi elektron pochta xabarlarini loyihalash, sinovdan o'tkazish va amalga oshirishda qiynalayotgan bo'lsa, mening firmam bilan bog'lanishdan tortinmang. DK New Media deyarli har bir elektron pochta xizmati provayderini amalga oshirish tajribasiga ega (ESP).

Douglas Karr

Douglas Karr ning CMO hisoblanadi OpenINSIGHTS va asoschisi Martech Zone. Duglas o'nlab muvaffaqiyatli MarTech startaplariga yordam berdi, Martechni sotib olish va investitsiyalarida 5 milliard dollardan ortiq mablag'ni sinchkovlik bilan tekshirishda yordam berdi va kompaniyalarga savdo va marketing strategiyalarini amalga oshirish va avtomatlashtirishda yordam berishda davom etmoqda. Duglas xalqaro miqyosda tan olingan raqamli transformatsiya va MarTech mutaxassisi va ma'ruzachisi. Duglas, shuningdek, Dummie's qo'llanmasi va biznes rahbariyati kitobining nashr etilgan muallifi.

Haqida Maqolalar

Yuqoriga qaytish tugmasi
yaqin

Adblock aniqlandi

Martech Zone Sizga ushbu kontentni hech qanday to'lovsiz taqdim eta oladi, chunki biz saytimizni reklama daromadlari, sheriklik havolalari va homiylik orqali monetizatsiya qilamiz. Saytimizni ko'rayotganingizda reklama blokeringizni olib tashlasangiz, biz juda minnatdormiz.