ईमेल विपणन और स्वचालनमोबाइल और टैबलेट मार्केटिंग

16 मोबाइल के अनुकूल HTML ईमेल सर्वोत्तम अभ्यास जो इनबॉक्स प्लेसमेंट और सहभागिता को अधिकतम करते हैं

2023 में, यह संभव है कि मोबाइल ईमेल खोलने के प्राथमिक उपकरण के रूप में डेस्कटॉप को पीछे छोड़ देगा। वास्तव में, हबस्पॉट ने पाया 46 प्रतिशत सभी ईमेल ओपन अब मोबाइल पर होते हैं। यदि आप मोबाइल के लिए ईमेल डिज़ाइन नहीं कर रहे हैं, तो आप टेबल पर बहुत अधिक जुड़ाव और पैसा छोड़ रहे हैं।

  1. ईमेल प्रमाणीकरण: अपने को सुनिश्चित करना ईमेल प्रमाणित हैं भेजने वाले डोमेन के लिए और IP पता इनबॉक्स में जाने के लिए महत्वपूर्ण है और जंक या स्पैम फ़ोल्डर में नहीं भेजा जाता है। बेशक, यह भी आवश्यक है कि आप एक ऐसे प्लेटफ़ॉर्म का उपयोग करके ईमेल से बाहर निकलने का साधन प्रदान करें जिसमें एक सदस्यता समाप्त लिंक शामिल हो।
  2. प्रभावी डिजाइन: RSI एचटीएमएल ईमेल होना चाहिए उत्तरदायी होने के लिए डिज़ाइन किया गया, जिसका अर्थ है कि यह उस डिवाइस के स्क्रीन आकार में समायोजित हो सकता है जिस पर इसे देखा जा रहा है। यह सुनिश्चित करता है कि ईमेल डेस्कटॉप और मोबाइल डिवाइस दोनों पर अच्छा दिखता है।
  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 का उपयोग करके स्तंभों को एकल-स्तंभ लेआउट में व्यवस्थित रूप से व्यवस्थित किया जा सकता है।

यहाँ एक है एचटीएमएल ईमेल लेआउट वह डेस्कटॉप पर 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>

यहाँ एक है एचटीएमएल ईमेल लेआउट वह डेस्कटॉप पर 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 के फ़ॉन्ट आकार का उपयोग करें और छोटे स्क्रीन पर पढ़ने में मुश्किल होने वाले फ़ॉन्ट का उपयोग करने से बचें। सामान्य रूप से उपयोग किए जाने वाले फोंट में विभिन्न ईमेल क्लाइंटों में लगातार रेंडरिंग की उच्च संभावना होती है, इसलिए एरियल, हेल्वेटिका, टाइम्स न्यू रोमन, जॉर्जिया, वर्दाना, ताहोमा और ट्रेबुचेट एमएस का उपयोग करना आम तौर पर सुरक्षित फोंट हैं। यदि आप एक कस्टम फ़ॉन्ट का उपयोग करते हैं, तो सुनिश्चित करें कि आपके 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. छवियों का इष्टतम उपयोग: छवियाँ लोड समय को धीमा कर सकती हैं और सभी मोबाइल उपकरणों पर ठीक से प्रदर्शित नहीं हो सकती हैं। छवियों का संयम से उपयोग करें, और सुनिश्चित करें कि वे आकार में हैं और संकुचित मोबाइल देखने के लिए। ईमेल क्लाइंट द्वारा उन्हें ब्लॉक किए जाने की स्थिति में अपनी छवियों के लिए ऑल्ट टेक्स्ट भरना सुनिश्चित करें। सभी छवियों को संग्रहीत किया जाना चाहिए और एक सुरक्षित वेबसाइट से संदर्भित किया जाना चाहिए (एसएसएल). यहां एक 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. इंटरएक्टिव तत्व: शामिल इंटरैक्टिव तत्वों जो आपके सब्सक्राइबर का ध्यान आकर्षित करता है, आपके ईमेल से जुड़ाव, समझ और रूपांतरण दरों को बढ़ाएगा। एनिमेटेड GIF, काउंटडाउन टाइमर, वीडियो और अन्य तत्व अधिकांश स्मार्टफोन ईमेल क्लाइंट द्वारा समर्थित हैं।
  3. निजीकरण: किसी विशिष्ट ग्राहक के लिए अभिवादन और सामग्री को वैयक्तिकृत करने से जुड़ाव महत्वपूर्ण रूप से बढ़ सकता है, बस सुनिश्चित करें कि आप इसे ठीक से प्राप्त करें! उदा. यदि प्रथम नाम फ़ील्ड में कोई डेटा नहीं है, तो फ़ॉलबैक होना महत्वपूर्ण है।
  4. गतिशील सामग्री: सामग्री का विभाजन और अनुकूलन आपकी सदस्यता समाप्त दरों को कम कर सकता है और आपके ग्राहकों को जोड़े रख सकता है।
  5. अभियान एकीकरण: अधिकांश आधुनिक ईमेल सेवा प्रदाताओं के पास स्वचालित रूप से संलग्न करने की क्षमता होती है UTM अभियान क्वेरीस्ट्रिंग्स प्रत्येक लिंक के लिए ताकि आप ईमेल को विश्लेषिकी में एक चैनल के रूप में देख सकें।
  6. वरीयता केंद्र: ईमेल के लिए ऑप्ट-इन या ऑप्ट-आउट दृष्टिकोण के लिए ईमेल मार्केटिंग बहुत महत्वपूर्ण है। एक वरीयता केंद्र शामिल करना जहां आपके ग्राहक बदल सकते हैं कि वे कितनी बार ईमेल प्राप्त करते हैं और उनके लिए कौन सी सामग्री महत्वपूर्ण है, व्यस्त ग्राहकों के साथ एक मजबूत ईमेल प्रोग्राम रखने का एक शानदार तरीका है!
  7. टेस्ट, टेस्ट, टेस्ट: एकाधिक उपकरणों पर अपने ईमेल का परीक्षण करना या किसी एप्लिकेशन का उपयोग करना सुनिश्चित करें ईमेल क्लाइंट में अपने ईमेल का पूर्वावलोकन करें भेजने से पहले यह सुनिश्चित करने के लिए कि यह अच्छा दिखता है और विभिन्न स्क्रीन आकारों और ऑपरेटिंग सिस्टम पर ठीक से काम करता है। लिटमस रिपोर्ट करती है कि शीर्ष 3 सबसे लोकप्रिय मोबाइल खुले वातावरण समान बने हुए हैं: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail)। साथ ही, अपनी खुली और क्लिक-थ्रू दरों को बेहतर बनाने के लिए अपनी विषय पंक्तियों और सामग्री के परीक्षण रूपांतरों को शामिल करें। कई ईमेल प्लेटफ़ॉर्म अब स्वचालित परीक्षण को शामिल करते हैं जो सूची का नमूना लेगा, एक विजेता भिन्नता की पहचान करेगा और शेष ग्राहकों को सर्वश्रेष्ठ ईमेल भेजेगा।

यदि आपकी कंपनी सहभागिता बढ़ाने वाले मोबाइल उत्तरदायी ईमेल को डिज़ाइन करने, परीक्षण करने और कार्यान्वित करने में संघर्ष कर रही है, तो मेरी फर्म से संपर्क करने में संकोच न करें। DK New Media लगभग हर ईमेल सेवा प्रदाता के कार्यान्वयन में अनुभव है (ESP).

Douglas Karr

Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

संबंधित आलेख

शीर्ष पर वापस करने के लिए बटन
समापन

पता लगाया गया

Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।