ईमेल विपणन आणि ऑटोमेशनमोबाइल आणि टॅब्लेट विपणन

16 मोबाइल फ्रेंडली HTML ईमेल सर्वोत्तम पद्धती जे इनबॉक्स प्लेसमेंट आणि प्रतिबद्धता वाढवतात

2023 मध्ये, ईमेल उघडण्यासाठी प्राथमिक डिव्हाइस म्हणून मोबाइल डेस्कटॉपला मागे टाकण्याची शक्यता आहे. खरं तर, हबस्पॉटला ते आढळले 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. प्रकाश आणि गडद मोड: सर्वात ईमेल क्लायंट प्रकाश आणि गडद मोडला समर्थन देतात 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, Georgeia, 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. प्रतिमांचा इष्टतम वापर: प्रतिमा लोड होण्याची वेळ कमी करू शकतात आणि सर्व मोबाइल डिव्हाइसवर योग्यरित्या प्रदर्शित होऊ शकत नाहीत. प्रतिमा जपून वापरा आणि त्या आकाराच्या आहेत याची खात्री करा संकुचित मोबाइल पाहण्यासाठी. ईमेल क्लायंटने त्यांना ब्लॉक केल्‍याच्‍या इव्‍हेंटमध्‍ये तुमच्‍या प्रतिमांसाठी Alt मजकूर भरण्‍याची खात्री करा. सर्व प्रतिमा संग्रहित केल्या पाहिजेत आणि सुरक्षित वेबसाइटवरून संदर्भित केल्या पाहिजेत (SSL). एचटीएमएल ईमेलमधील प्रतिसादात्मक प्रतिमांचा कोड येथे आहे.
<!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. चाचणी, चाचणी, चाचणी: तुमच्या ईमेलची एकाधिक डिव्हाइसेसवर चाचणी केल्याची खात्री करा किंवा यासाठी अनुप्रयोग वापरा ईमेल क्लायंटवर तुमच्या ईमेलचे पूर्वावलोकन करा तुम्ही पाठवण्यापूर्वी ते चांगले दिसते आणि भिन्न स्क्रीन आकार आणि ऑपरेटिंग सिस्टमवर योग्यरित्या कार्य करते याची खात्री करण्यासाठी. लिटमस अहवाल देतो की शीर्ष 3 सर्वात लोकप्रिय मोबाइल मुक्त वातावरणे समान आहेत: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). तसेच, तुमचे ओपन आणि क्लिक-थ्रू दर सुधारण्यासाठी तुमच्या विषयाच्या ओळी आणि सामग्रीच्या चाचणी फरकांचा समावेश करा. बर्‍याच ईमेल प्लॅटफॉर्मवर आता स्वयंचलित चाचणी समाविष्ट केली जाते जी सूचीचा नमुना करेल, विजयी फरक ओळखेल आणि उर्वरित सदस्यांना सर्वोत्तम ईमेल पाठवेल.

तुमची कंपनी मोबाईल रिस्पॉन्सिव्ह ईमेल डिझाईनिंग, टेस्टिंग आणि अंमलात आणण्यासाठी संघर्ष करत असल्यास, माझ्या फर्मशी संपर्क साधण्यास अजिबात संकोच करू नका. DK New Media अक्षरशः प्रत्येक ईमेल सेवा प्रदात्याच्या अंमलबजावणीचा अनुभव आहे (ESP मध्ये).

Douglas Karr

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

संबंधित लेख

परत शीर्षस्थानी बटण
बंद

अॅडब्लॉक आढळले

Martech Zone तुम्हाला ही सामग्री कोणत्याही खर्चाशिवाय प्रदान करण्यात सक्षम आहे कारण आम्ही आमच्या साइटवर जाहिरात महसूल, संलग्न दुवे आणि प्रायोजकत्वाद्वारे कमाई करतो. तुम्ही आमची साइट पाहता तेव्हा तुमचा अॅड ब्लॉकर काढून टाकल्यास आम्ही कृतज्ञ आहोत.