اي ميل مارڪيٽنگ ۽ خودڪارموبائل ۽ ٽيبلٽ مارڪيٽنگ

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. روشني ۽ اونداهي موڊ: گهڻو ڪري اي ميل کلائنٽ روشني ۽ اونداهي موڊ جي حمايت ڪن ٿا ايس ايم ايس 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, and 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. تصويرن جو بهترين استعمال: تصويرون لوڊشيڊنگ جي وقت کي سست ڪري سگھن ٿيون ۽ شايد سڀني موبائيل ڊوائيسز تي صحيح نموني ڏيکاري نه سگھن ٿيون. تصويرن کي ٿورو استعمال ڪريو، ۽ پڪ ڪريو ته اهي سائيز ۽ آهن مچائي موبائل ڏسڻ لاء. پڪ ڪريو ته توهان جي تصويرن لاءِ alt متن ڀريو ان واقعي ۾ ته اي ميل ڪلائنٽ انهن کي بلاڪ ڪري. سڀئي تصويرون محفوظ ڪيون وڃن ۽ محفوظ ويب سائيٽ تان حوالو ڏنو وڃي (ايس ايس ايل). هتي هڪ 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 ڳولڻ آسان آهي ۽ اهو ڪافي وڏو آهي ته موبائل ڊوائيس تي ڪلڪ ڪيو وڃي. جيڪڏهن توهان بٽڻ شامل ڪريو ٿا، توهان پڪ ڪري سگهو ٿا ته توهان انهن کي سي ايس ايس ۾ ان لائن اسٽائل ٽيگ سان گڏ لکيو آهي:
<!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. انٽرايڪٽو عناصر: شامل انٽرايڪٽو عناصر جيڪو توهان جي سبسڪرائبر جي ڌيان کي پڪڙيندو توهان جي اي ميل مان مصروفيت، فهم، ۽ تبادلي جي شرح وڌائيندو. متحرڪ GIFs، ڳڻپ ٽائمر، وڊيوز، ۽ ٻيا عنصر اسمارٽ فون اي ميل ڪلائنٽ جي اڪثريت جي حمايت ڪن ٿا.
  3. ذاتي ڪرڻ هڪ مخصوص سبسڪرائبر لاءِ سلام ۽ مواد کي ذاتي ڪرڻ خاص طور تي مصروفيت کي وڌائي سگھي ٿو، بس پڪ ڪريو ته توهان ان کي درست ڪيو! مثال. جيڪڏهن پهرين نالي جي فيلڊ ۾ ڪا به ڊيٽا نه هجي ته ناڪام ٿيڻ ضروري آهي.
  4. متحرڪ مواد: مواد جي ورهاست ۽ ڪسٽمائيزيشن توهان جي رڪنيت ختم ڪرڻ جي شرح گهٽائي سگهي ٿي ۽ توهان جي رڪنن کي مصروف رکي سگهي ٿي.
  5. مهم انضمام: اڪثر جديد اي ميل سروس فراهم ڪندڙ کي خودڪار طور تي شامل ڪرڻ جي صلاحيت آهي UTM مهم جا سوال هر لنڪ لاءِ ته جيئن توهان اينالائيٽڪس ۾ هڪ چينل طور اي ميل ڏسي سگهو ٿا.
  6. ترجيحي مرڪز: اي ميل مارڪيٽنگ تمام ضروري آهي صرف اي ميلن لاءِ آپٽ-ان يا آپٽ-آئوٽ طريقي لاءِ. هڪ ترجيحي مرڪز کي شامل ڪرڻ جتي توهان جا سبسڪرائبر تبديل ڪري سگهن ٿا ته اهي ڪيترا ڀيرا اي ميلون وصول ڪن ٿا ۽ انهن لاءِ ڪهڙو مواد اهم آهي مصروف سبسڪرائبرن سان مضبوط اي ميل پروگرام رکڻ جو هڪ بهترين طريقو آهي!
  7. ٽيسٽ، ٽيسٽ، ٽيسٽ: پڪ ڪريو ته توهان جي اي ميل کي ڪيترن ئي ڊوائيسز تي آزمائي يا هڪ ايپليڪيشن استعمال ڪريو اي ميل کلائنٽ ۾ توهان جي اي ميلن جو جائزو وٺو انهي کي يقيني بڻائڻ لاءِ ته اهو سٺو لڳندو آهي ۽ توهان جي موڪلڻ کان اڳ مختلف اسڪرين سائيز ۽ آپريٽنگ سسٽم تي صحيح ڪم ڪري ٿو. Litmus رپورٽ ڪري ٿو ته مٿيون 3 سڀ کان وڌيڪ مشهور موبائيل کليل ماحول ساڳيون جاري آهن: ايپل آئي فون (iOS ميل)، گوگل Android، ايپل iPad (iPadOS ميل). انهي سان گڏ، توهان جي اوپن ۽ ڪلڪ جي شرحن کي بهتر ڪرڻ لاء توهان جي موضوع جي لائينن ۽ مواد جي ٽيسٽ مختلف قسمن کي شامل ڪريو. ڪيترائي اي ميل پليٽ فارمز ھاڻي شامل آھن پاڻمرادو ٽيسٽنگ جيڪي نموني لسٽ ڪندا، ھڪ کٽڻ واري تبديلي کي سڃاڻيندا، ۽ باقي رڪنن کي بھترين اي ميل موڪليندا.

جيڪڏهن توهان جي ڪمپني موبائيل جوابي اي ميلن کي ڊزائين ڪرڻ، جانچڻ، ۽ لاڳو ڪرڻ سان جدوجهد ڪري رهي آهي جيڪي ڊرائيونگ مصروفيت آهن، منهنجي فرم سان رابطو ڪرڻ ۾ سنکوڪ نه ڪريو. DK New Media عملي طور تي هر اي ميل سروس فراهم ڪندڙ جي عمل ۾ تجربو آهي (ايس ايس پي).

Douglas Karr

Douglas Karr جو CMO آهي OpenINSIGHTS ۽ جو باني Martech Zone. ڊگلس ڪيترن ئي ڪامياب MarTech startups جي مدد ڪئي آهي، مارٽيڪ حاصلات ۽ سيڙپڪاري ۾ 5 بلين ڊالر کان وڌيڪ جي محنت ۾ مدد ڪئي آهي، ۽ انهن جي سيلز ۽ مارڪيٽنگ جي حڪمت عملي کي لاڳو ڪرڻ ۽ خودڪار ڪرڻ ۾ ڪمپنين جي مدد ڪرڻ جاري آهي. ڊگلس هڪ بين الاقوامي طور تي تسليم ٿيل ڊجيٽل ٽرانسفارميشن ۽ مار ٽيڪ ماهر ۽ اسپيڪر آهي. ڊگلس هڪ ڊمي جي گائيڊ ۽ ڪاروباري قيادت جي ڪتاب جو شايع ٿيل ليکڪ پڻ آهي.

لاڳاپيل مقالات

مٿي تي ڪلڪ ڪري بٽڻ
بند

Adblock جو پتو لڳايو ويو

Martech Zone توهان کي هي مواد بغير ڪنهن قيمت تي مهيا ڪرڻ جي قابل آهي ڇو ته اسان اسان جي سائيٽ کي اشتهارن جي آمدني، الحاق لنڪس، ۽ اسپانسرشپ ذريعي رقم ڪريون ٿا. اسان جي تعريف ڪنداسين جيڪڏهن توهان پنهنجي اشتهار بلاڪ ڪندڙ کي هٽائي ڇڏيو جيئن توهان اسان جي سائيٽ کي ڏسو.