रिस्पॉन्सिव HTML ईमेल टेम्पलेट बनाएं: चरण-दर-चरण शुरुआती गाइड

इस शुरुआती-अनुकूल गाइड में आप सीखेंगे कि एक रिस्पॉन्सिव ईमेल टेम्पलेट कैसे बनाया जाए जो हर डिवाइस पर शानदार दिखे। कोड स्निपेट्स के साथ चरण-दर-चरण निर्देशों का पालन करें।

चरण 1: बेसिक HTML स्ट्रक्चर सेट करें

ईमेल के लिए उपयुक्त DOCTYPE, head और body सेक्शन, और मोबाइल रेंडरिंग के लिए व्यूपोर्ट मेटा टैग:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Email Template</title>
</head>
<body>
  <!-- ईमेल कंटेंट यहाँ जाएगा -->
</body>
</html>

चरण 2: टेबल-आधारित ईमेल स्ट्रक्चर बनाएं

ईमेल क्लाइंट्स में संगतता के लिए टेबल लेआउट उपयोग करें। बाहरी टेबल 100% चौड़ाई, आंतरिक टेबल 600px फिक्स्ड चौड़ाई:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <!-- ईमेल कंटेंट -->
      </table>
    </td>
  </tr>
</table>

चरण 3: कंटेंट और इंलाइन स्टाइल्स जोड़ें

ईमेल क्लाइंट्स CSS को अलग-अलग रेंडर करते हैं, इसलिए इंलाइन स्टाइल्स सुरक्षित हैं। पूरा ईमेल बॉडी उदाहरण:

<body style="font-family: 'Poppins', Arial, sans-serif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table class="content" width="600" border="0" cellspacing="0" cellpadding="0"
           style="border-collapse: collapse; border: 1px solid #cccccc;">
        <!-- Header -->
        <tr>
          <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
            Responsive Email Template
          </td>
        </tr>
        <!-- Body -->
        <tr>
          <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
            Hello, All!<br>
            Lorem ipsum dolor sit amet...
          </td>
        </tr>
        <!-- CTA Button -->
        <tr>
          <td style="padding: 0 40px; text-align: center;">
            <table cellspacing="0" cellpadding="0" style="margin: auto;">
              <tr>
                <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
                  <a href="https://www.yourwebsite.com" target="_blank"
                     style="color: #ffffff; text-decoration: none; font-weight: bold;">
                    Book a Free Consultation
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <!-- Footer -->
        <tr>
          <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
            Copyright &copy; 2024 | Your Brand Name
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

मुख्य एलिमेंट्स का विवरण

• बॉडी टैग और फॉन्ट: font-family: 'Poppins', Arial, sans-serif — फॉलबैक फॉन्ट्स के साथ।
• टेबल स्ट्रक्चर: बाहरी 100% टेबल, आंतरिक 600px .content टेबल सेंटर-अलाइन।
• हेडर: गहरा नीला बैकग्राउंड (#345C72), सफेद टेक्स्ट, 24px फॉन्ट।
• बॉडी कंटेंट: 16px फॉन्ट, 1.6 लाइन-हाइट, लेफ्ट-अलाइन।
• CTA बटन: हेडर से मेल खाता बैकग्राउंड, राउंडेड कॉर्नर (border-radius: 5px), बोल्ड सफेद टेक्स्ट, अंडरलाइन हटाई गई।
• फुटर: गहरा बैकग्राउंड (#333333), 14px फॉन्ट, कॉपीराइट जानकारी।

चरण 4: मीडिया क्वेरीज़ से रिस्पॉन्सिव बनाएं

head में <style> ब्लॉक जोड़ें:

<style>
  @media screen and (max-width: 600px) {
    .content { width: 100% !important; display: block !important; padding: 10px !important; }
    .header, .body, .footer { padding: 20px !important; }
  }
</style>

• max-width: 600px — स्मार्टफोन्स और छोटे टैबलेट्स टार्गेट करता है।
• .content चौड़ाई 100% हो जाती है, पैडिंग घटकर 10px।
• .header, .body, .footer पैडिंग एकसमान 20px।
• !important ईमेल क्लाइंट्स के डिफ़ॉल्ट स्टाइल्स ओवरराइड करने के लिए।

चरण 5: ईमेल क्लाइंट्स में टेस्ट करें

Gmail, Outlook, Apple Mail आदि में टेस्ट करना महत्वपूर्ण है। Litmus या Email on Acid जैसे टूल्स उपयोग करें।

चरण 6: गूगल फॉन्ट (Poppins) जोड़ें

सभी क्लाइंट्स वेब फॉन्ट्स सपोर्ट नहीं करते (Gmail नहीं करता)। इसलिए फॉलबैक ज़रूरी है।

1. Google Fonts से लिंक head में जोड़ें:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap" rel="stylesheet">

2. इंलाइन CSS में लागू करें फॉलबैक के साथ:

<body style="font-family: 'Poppins', Arial, sans-serif;">...

अतिरिक्त टिप्स

• CSS यथासंभव इंलाइन रखें
• वेब-सेफ फॉन्ट्स (Arial, Verdana, Georgia) फॉलबैक के रूप में उपयोग करें
• प्लेन टेक्स्ट वर्जन भी प्रदान करें उन क्लाइंट्स के लिए जो HTML सपोर्ट नहीं करते

निष्कर्ष

यह गाइड आपको एक ठोस रिस्पॉन्सिव ईमेल टेम्पलेट का ढांचा देता है। जैसे-जैसे आप सहज होते जाएं, अधिक जटिल लेआउट और स्टाइल्स के साथ प्रयोग करें।

हैप्पी कोडिंग!