HTML Email Templates

Table Layout की बुनियादी बातें

Flexbox या Grid जैसे मॉडर्न CSS लेआउट्स ईमेल क्लाइंट्स में भरोसेमंद तरीके से काम नहीं करते। एक मज़बूत ईमेल स्ट्रक्चर बनाने के लिए जो टूटे नहीं, आपको अपने कंटेंट के कॉलम्स और रो को व्यवस्थित करने के लिए नेस्टेड HTML tables का उपयोग करना होगा।

उदाहरण: Table Layout Basics

<table width="600" style="margin: 0 auto;">
  <tr>
    <td>Email content</td>
  </tr>
</table>

Inline CSS स्टाइलिंग

यूज़र की प्राइवेसी की सुरक्षा के लिए कई ईमेल क्लाइंट्स head के style टैग्स हटा देते हैं और बाहरी स्टाइलशीट्स को पूरी तरह इग्नोर कर देते हैं। यह सुनिश्चित करने के लिए कि आपके डिज़ाइन्स सही से लोड हों, आपको अपनी सभी CSS स्टाइल्स हर टैग के अंदर inline लिखनी होंगी।

उदाहरण: Inline CSS Styling

<p style="color: #333333; font-size: 16px;">Inline styled email text</p>

रिस्पॉन्सिव ईमेल्स

ईमेल लेआउट्स को स्मार्टफोन्स में फिट होने के लिए बिना टेक्स्ट को सिकोड़े या हॉरिज़ॉन्टल स्क्रॉलिंग किए स्मूदली स्केल डाउन होना चाहिए। फ्लुइड, रिस्पॉन्सिव ईमेल कंटेनर्स बनाने के लिए relative पर्सेंटेज widths और CSS max-width नियमों का उपयोग करें।

उदाहरण: Responsive Emails

<table style="width: 100%; max-width: 600px;">
  <tr>
    <td>Responsive content</td>
  </tr>
</table>

सुरक्षित सिस्टम फॉन्ट्स का उपयोग

कस्टम वेब फॉन्ट्स (जैसे Google Fonts) ज़्यादातर ईमेल क्लाइंट्स में सपोर्टेड नहीं हैं, और अगर वे लोड होने में असफल होते हैं तो डिफ़ॉल्ट serif विकल्पों पर फॉलबैक कर जाएँगे। अपनी ब्रांडिंग को साफ-सुथरा रखने के लिए, हमेशा व्यापक रूप से सपोर्टेड सिस्टम फॉन्ट्स का उपयोग करें।

उदाहरण: Using Safe System Fonts

<p style="font-family: Arial, Helvetica, sans-serif;">Safe font text</p>

Alternate Text और Image Blockers

कई ईमेल क्लाइंट्स मोबाइल डेटा बचाने और यूज़र ट्रैकिंग रोकने के लिए डिफ़ॉल्ट रूप से इमेज लोडिंग डिसेबल कर देते हैं।

इसका मतलब है कि आपके विज़िटर्स को आपके लोगो के बजाय खाली बॉक्सेस दिखेंगे। इमेजेज़ ब्लॉक होने पर यूज़र्स को गाइड करने के लिए विवरणात्मक alt text लिखना ज़रूरी है।

उदाहरण: Alternate Text and Image Blockers

<img src="logo.png" alt="Company Logo" style="display: block;">

ईमेल क्लाइंट कंपैटिबिलिटी समस्याएँ

Outlook, Gmail, और Apple Mail जैसे ईमेल क्लाइंट्स हर एक बेहद अलग रेंडरिंग इंजन इस्तेमाल करते हैं, कुछ तो Microsoft Word के पुराने रेंडरिंग कोड को ही दोबारा इस्तेमाल करते हैं, जिसका मतलब है कि flexbox या grid जैसे मॉडर्न CSS फीचर्स अक्सर पूरी तरह अनसपोर्टेड होते हैं।

यही ठीक वह वजह है कि ईमेल HTML आज भी पुराने ढंग के table लेआउट्स और inline स्टाइल्स पर निर्भर करता है, जिन्हें साधारण वेबसाइट्स के लिए एक दशक से भी पहले पुराने माना जाने लगा था।

उदाहरण: Email Client Compatibility Issues

<table cellpadding="0" cellspacing="0" style="width: 600px;">
  <tr>
    <td>Works across Outlook, Gmail, and Apple Mail</td>
  </tr>
</table>