ਈਮੇਲ ਮਾਰਕੀਟਿੰਗ ਅਤੇ ਆਟੋਮੇਸ਼ਨਮੋਬਾਈਲ ਅਤੇ ਟੈਬਲੇਟ ਮਾਰਕੀਟਿੰਗ

16 ਮੋਬਾਈਲ ਦੋਸਤਾਨਾ HTML ਈਮੇਲ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਜੋ ਇਨਬਾਕਸ ਪਲੇਸਮੈਂਟ ਅਤੇ ਸ਼ਮੂਲੀਅਤ ਨੂੰ ਵੱਧ ਤੋਂ ਵੱਧ ਬਣਾਉਂਦੇ ਹਨ

2023 ਵਿੱਚ, ਇਹ ਸੰਭਾਵਨਾ ਹੈ ਕਿ ਮੋਬਾਈਲ ਈਮੇਲ ਖੋਲ੍ਹਣ ਲਈ ਪ੍ਰਾਇਮਰੀ ਡਿਵਾਈਸ ਵਜੋਂ ਡੈਸਕਟੌਪ ਨੂੰ ਪਿੱਛੇ ਛੱਡ ਦੇਵੇਗਾ। ਅਸਲ ਵਿੱਚ, ਹੱਬਸਪੌਟ ਨੇ ਇਹ ਪਾਇਆ 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 ਫੌਂਟ ਸਾਈਜ਼ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਫੌਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਬਚੋ ਜੋ ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਪੜ੍ਹਨ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹਨ। ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ ਫੌਂਟਾਂ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਈਮੇਲ ਕਲਾਇੰਟਸ ਵਿੱਚ ਲਗਾਤਾਰ ਰੈਂਡਰ ਹੋਣ ਦੀ ਉੱਚ ਸੰਭਾਵਨਾ ਹੁੰਦੀ ਹੈ, ਇਸਲਈ ਏਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਟਾਈਮਜ਼ ਨਿਊ ਰੋਮਨ, ਜਾਰਜੀਆ, ਵਰਡਾਨਾ, ਟਾਹੋਮਾ, ਅਤੇ ਟ੍ਰੇਬੂਚੇਟ 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 ਟੈਕਸਟ ਨੂੰ ਭਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਸਟੋਰ ਕੀਤੀਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਅਤੇ ਇੱਕ ਸੁਰੱਖਿਅਤ ਵੈੱਬਸਾਈਟ ਤੋਂ ਰੈਫਰ ਕੀਤੀਆਂ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ (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. ਇੰਟਰਐਕਟਿਵ ਤੱਤ: ਸ਼ਾਮਲ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਜੋ ਤੁਹਾਡੇ ਗਾਹਕਾਂ ਦਾ ਧਿਆਨ ਖਿੱਚਦਾ ਹੈ, ਤੁਹਾਡੀ ਈਮੇਲ ਤੋਂ ਰੁਝੇਵੇਂ, ਸਮਝ ਅਤੇ ਪਰਿਵਰਤਨ ਦਰਾਂ ਨੂੰ ਵਧਾਏਗਾ। ਐਨੀਮੇਟਡ ਜੀ.ਆਈ.ਐਫ., ਕਾਊਂਟਡਾਊਨ ਟਾਈਮਰ, ਵੀਡੀਓ, ਅਤੇ ਹੋਰ ਤੱਤ ਜ਼ਿਆਦਾਤਰ ਸਮਾਰਟਫੋਨ ਈਮੇਲ ਕਲਾਇੰਟਸ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹਨ।
  3. ਨਿੱਜੀਕਰਨ: ਕਿਸੇ ਖਾਸ ਗਾਹਕ ਲਈ ਸਲਾਮ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਵਿਅਕਤੀਗਤ ਬਣਾਉਣਾ ਮਹੱਤਵਪੂਰਨ ਤੌਰ 'ਤੇ ਰੁਝੇਵੇਂ ਨੂੰ ਵਧਾ ਸਕਦਾ ਹੈ, ਬੱਸ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇਸਨੂੰ ਸਹੀ ਕਰ ਲਿਆ ਹੈ! ਉਦਾ. ਜੇਕਰ ਕਿਸੇ ਪਹਿਲੇ ਨਾਮ ਖੇਤਰ ਵਿੱਚ ਕੋਈ ਡਾਟਾ ਨਹੀਂ ਹੈ ਤਾਂ ਫਾਲਬੈਕ ਹੋਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ।
  4. ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ: ਸਮੱਗਰੀ ਦਾ ਵਿਭਾਜਨ ਅਤੇ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਤੁਹਾਡੀਆਂ ਗਾਹਕੀ ਦਰਾਂ ਨੂੰ ਘਟਾ ਸਕਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਗਾਹਕਾਂ ਨੂੰ ਰੁਝੇ ਰੱਖ ਸਕਦਾ ਹੈ।
  5. ਮੁਹਿੰਮ ਏਕੀਕਰਣ: ਜ਼ਿਆਦਾਤਰ ਆਧੁਨਿਕ ਈਮੇਲ ਸੇਵਾ ਪ੍ਰਦਾਤਾਵਾਂ ਕੋਲ ਆਪਣੇ ਆਪ ਜੋੜਨ ਦੀ ਸਮਰੱਥਾ ਹੁੰਦੀ ਹੈ UTM ਮੁਹਿੰਮ ਦੀ ਪੁੱਛਗਿੱਛ ਹਰੇਕ ਲਿੰਕ ਲਈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਵਿਸ਼ਲੇਸ਼ਣ ਵਿੱਚ ਇੱਕ ਚੈਨਲ ਵਜੋਂ ਈਮੇਲ ਦੇਖ ਸਕੋ।
  6. ਤਰਜੀਹ ਕੇਂਦਰ: ਈਮੇਲਾਂ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਔਪਟ-ਇਨ ਜਾਂ ਔਪਟ-ਆਊਟ ਪਹੁੰਚ ਲਈ ਈਮੇਲ ਮਾਰਕੀਟਿੰਗ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇੱਕ ਤਰਜੀਹ ਕੇਂਦਰ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਜਿੱਥੇ ਤੁਹਾਡੇ ਗਾਹਕ ਇਹ ਬਦਲ ਸਕਦੇ ਹਨ ਕਿ ਉਹ ਕਿੰਨੀ ਵਾਰ ਈਮੇਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਲਈ ਕਿਹੜੀ ਸਮੱਗਰੀ ਮਹੱਤਵਪੂਰਨ ਹੈ ਰੁੱਝੇ ਹੋਏ ਗਾਹਕਾਂ ਨਾਲ ਇੱਕ ਮਜ਼ਬੂਤ ​​ਈਮੇਲ ਪ੍ਰੋਗਰਾਮ ਰੱਖਣ ਦਾ ਇੱਕ ਸ਼ਾਨਦਾਰ ਤਰੀਕਾ ਹੈ!
  7. ਟੈਸਟ, ਟੈਸਟ, ਟੈਸਟ: ਕਈ ਡਿਵਾਈਸਾਂ 'ਤੇ ਆਪਣੀ ਈਮੇਲ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਜਾਂ ਕਿਸੇ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਈਮੇਲ ਕਲਾਇੰਟਸ ਵਿੱਚ ਤੁਹਾਡੀਆਂ ਈਮੇਲਾਂ ਦਾ ਪੂਰਵਦਰਸ਼ਨ ਕਰੋ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਇਹ ਤੁਹਾਡੇ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਆਕਾਰਾਂ ਅਤੇ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ 'ਤੇ ਵਧੀਆ ਦਿਖਦਾ ਹੈ ਅਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਲਿਟਮਸ ਰਿਪੋਰਟ ਕਰਦਾ ਹੈ ਕਿ ਸਿਖਰ ਦੇ 3 ਸਭ ਤੋਂ ਵੱਧ ਪ੍ਰਸਿੱਧ ਮੋਬਾਈਲ ਓਪਨ ਵਾਤਾਵਰਨ ਇੱਕੋ ਜਿਹੇ ਬਣੇ ਰਹਿੰਦੇ ਹਨ: Apple iPhone (iOS ਮੇਲ), Google Android, Apple iPad (iPadOS Mail). ਨਾਲ ਹੀ, ਤੁਹਾਡੀਆਂ ਖੁੱਲੀਆਂ ਅਤੇ ਕਲਿਕ-ਥਰੂ ਦਰਾਂ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਤੁਹਾਡੀਆਂ ਵਿਸ਼ਾ ਲਾਈਨਾਂ ਅਤੇ ਸਮੱਗਰੀ ਦੇ ਟੈਸਟ ਭਿੰਨਤਾਵਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। ਬਹੁਤ ਸਾਰੇ ਈਮੇਲ ਪਲੇਟਫਾਰਮਾਂ ਵਿੱਚ ਹੁਣ ਸਵੈਚਲਿਤ ਟੈਸਟਿੰਗ ਸ਼ਾਮਲ ਹੈ ਜੋ ਸੂਚੀ ਦਾ ਨਮੂਨਾ ਦੇਵੇਗੀ, ਇੱਕ ਜੇਤੂ ਪਰਿਵਰਤਨ ਦੀ ਪਛਾਣ ਕਰੇਗੀ, ਅਤੇ ਬਾਕੀ ਬਚੇ ਗਾਹਕਾਂ ਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਈਮੇਲ ਭੇਜੇਗੀ।

ਜੇਕਰ ਤੁਹਾਡੀ ਕੰਪਨੀ ਮੋਬਾਈਲ ਜਵਾਬਦੇਹ ਈਮੇਲਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ, ਟੈਸਟ ਕਰਨ ਅਤੇ ਲਾਗੂ ਕਰਨ ਦੇ ਨਾਲ ਸੰਘਰਸ਼ ਕਰ ਰਹੀ ਹੈ ਜੋ ਰੁਝੇਵਿਆਂ ਨੂੰ ਵਧਾ ਰਹੀਆਂ ਹਨ, ਤਾਂ ਮੇਰੀ ਫਰਮ ਨਾਲ ਸੰਪਰਕ ਕਰਨ ਤੋਂ ਝਿਜਕੋ ਨਾ। DK New Media ਲਗਭਗ ਹਰੇਕ ਈਮੇਲ ਸੇਵਾ ਪ੍ਰਦਾਤਾ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦਾ ਤਜਰਬਾ ਹੈ (ESP).

Douglas Karr

Douglas Karr ਦਾ CMO ਹੈ ਓਪਨ ਇਨਸਾਈਟਸ ਅਤੇ ਦੇ ਸੰਸਥਾਪਕ Martech Zone. ਡਗਲਸ ਨੇ ਦਰਜਨਾਂ ਸਫਲ MarTech ਸਟਾਰਟਅੱਪਸ ਦੀ ਮਦਦ ਕੀਤੀ ਹੈ, ਮਾਰਟੇਕ ਐਕਵਾਇਰਿੰਗ ਅਤੇ ਨਿਵੇਸ਼ਾਂ ਵਿੱਚ $5 ਬਿਲੀਅਨ ਤੋਂ ਵੱਧ ਦੀ ਉਚਿਤ ਮਿਹਨਤ ਵਿੱਚ ਸਹਾਇਤਾ ਕੀਤੀ ਹੈ, ਅਤੇ ਕੰਪਨੀਆਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਵਿਕਰੀ ਅਤੇ ਮਾਰਕੀਟਿੰਗ ਰਣਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਅਤੇ ਸਵੈਚਲਿਤ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਨਾ ਜਾਰੀ ਰੱਖਿਆ ਹੈ। ਡਗਲਸ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀ ਪੱਧਰ 'ਤੇ ਮਾਨਤਾ ਪ੍ਰਾਪਤ ਡਿਜੀਟਲ ਪਰਿਵਰਤਨ ਅਤੇ ਮਾਰਟੈਕ ਮਾਹਰ ਅਤੇ ਸਪੀਕਰ ਹੈ। ਡਗਲਸ ਇੱਕ ਡਮੀ ਦੀ ਗਾਈਡ ਅਤੇ ਇੱਕ ਕਾਰੋਬਾਰੀ ਲੀਡਰਸ਼ਿਪ ਕਿਤਾਬ ਦਾ ਪ੍ਰਕਾਸ਼ਿਤ ਲੇਖਕ ਵੀ ਹੈ।

ਸੰਬੰਧਿਤ ਲੇਖ

ਸਿਖਰ ਤੇ ਵਾਪਸ ਜਾਓ
ਬੰਦ ਕਰੋ

ਐਡਬਲਾਕ ਖੋਜਿਆ ਗਿਆ

Martech Zone ਤੁਹਾਨੂੰ ਇਹ ਸਮੱਗਰੀ ਬਿਨਾਂ ਕਿਸੇ ਕੀਮਤ ਦੇ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਯੋਗ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਵਿਗਿਆਪਨ ਆਮਦਨ, ਐਫੀਲੀਏਟ ਲਿੰਕਾਂ, ਅਤੇ ਸਪਾਂਸਰਸ਼ਿਪਾਂ ਰਾਹੀਂ ਸਾਡੀ ਸਾਈਟ ਦਾ ਮੁਦਰੀਕਰਨ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ ਪ੍ਰਸ਼ੰਸਾ ਕਰਾਂਗੇ ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੀ ਸਾਈਟ ਨੂੰ ਦੇਖਦੇ ਹੋਏ ਆਪਣੇ ਵਿਗਿਆਪਨ ਬਲੌਕਰ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹੋ।