ईमेल न्यूज़लेटर डिज़ाइन प्लेबुक: लेआउट, टेम्पलेट, मोबाइल QA और उदाहरण (2026)

लेआउट, पदानुक्रम, टेम्पलेट, मोबाइल रेंडरिंग, सुलभता, डार्क मोड, टेस्टिंग और ईकॉमर्स वैयक्तिकरण के व्यावहारिक मार्गदर्शन के साथ ईमेल न्यूज़लेटर डिज़ाइन करें.

Set Noa

अपडेट किया गया 7 अग॰ 2026

0 विज़िट · 7 दिन

email newsletter

ईमेल न्यूज़लेटर डिज़ाइन प्लेबुक?

मज़बूत न्यूज़लेटर डिज़ाइन एक दोहराने लायक उत्पादन व्यवस्था है: साफ़ पदानुक्रम, मोबाइल-फ़र्स्ट लेआउट, सुलभ टाइपोग्राफ़ी और कंट्रास्ट, अनुकूलित तस्वीरें, एक मुख्य CTA, टेस्ट की गई रेंडरिंग, नियमों के अनुरूप फ़ुटर जानकारी, और भरोसेमंद ग्राहक डेटा से किया गया सुरक्षित वैयक्तिकरण.

और जानें

ईमेल न्यूज़लेटर आज भी काम करते हैं, क्योंकि वे ब्रांड, प्रकाशकों, क्रिएटर्स और ईकॉमर्स टीमों को उन सब्सक्राइबर तक सीधा पहुंचने का रास्ता देते हैं जिनसे संपर्क की अनुमति उनके पास है. डिज़ाइन तय करता है कि वह संदेश पढ़ने लायक, भरोसेमंद, कार्रवाई योग्य और अलग-अलग ईमेल क्लाइंट पर काम करने लायक है या नहीं.

यह गाइड मूल संरचना बरकरार रखती है: विज़ुअल पदानुक्रम, ब्रांड निरंतरता, लेआउट के प्रकार, मोबाइल अनुकूलन, टाइपोग्राफ़ी, रंग, सुलभता, CTA डिज़ाइन, उदाहरण, टूल, गलतियां, Tajo और Brevo का संदर्भ, सवाल-जवाब तथा संबंधित लेख. इस अपडेट में बिना आधार वाले बेंचमार्क दावे हटाए गए हैं और पेज को 2026 की व्यावहारिक न्यूज़लेटर डिज़ाइन प्लेबुक बनाया गया है.

ईमेल न्यूज़लेटर डिज़ाइन क्यों मायने रखता है

तकनीकों में जाने से पहले यह समझ लें कि न्यूज़लेटर की सफलता में डिज़ाइन की भूमिका इतनी अहम क्यों है.

पहली स्क्रीन की परीक्षा

सब्सक्राइबर आमतौर पर न्यूज़लेटर को ऊपर से नीचे तक नहीं पढ़ते. वे भेजने वाले, सब्जेक्ट लाइन, प्रिव्यू टेक्स्ट, हेडर, पहली सुर्ख़ी, तस्वीरों और पहले CTA को देखकर तय करते हैं कि संदेश और ध्यान देने लायक है या नहीं.

एक अच्छी पहली स्क्रीन चार सवालों के जवाब तुरंत देती है:

यह किसने भेजा है?
मुझे यह क्यों मिल रहा है?
मुख्य मूल्य क्या है?
अगला क़दम क्या है?

डिज़ाइन असल में किस पर असर डालता है

बिना आधार वाले दावों से बचें, जैसे कि इस डिज़ाइन बदलाव से क्लिक में दहाई अंकों की बढ़त होगी, जब तक आपके पास अपना नियंत्रित टेस्ट न हो. न्यूज़लेटर डिज़ाइन प्रदर्शन को व्यावहारिक तरीक़ों से प्रभावित करता है:

डिज़ाइन कारक	यह क्या बेहतर करता है	क्या जांचें
साफ़ पदानुक्रम	तेज़ी से स्कैन करना और समझना	क्या पाठक एक नज़र में मुख्य संदेश पहचान सकता है?
मोबाइल लेआउट	छोटी स्क्रीन पर उपयोगिता	क्या लेआउट बिना क्षैतिज स्क्रॉल के साफ़ तरीक़े से जमता है?
इमेज रणनीति	संदर्भ और दृश्य दिलचस्पी	क्या तस्वीरें ब्लॉक होने पर भी ईमेल समझ में आता है?
सुलभ कंट्रास्ट	ज़्यादा सब्सक्राइबर के लिए पठनीयता	क्या टेक्स्ट और बटन कंट्रास्ट की शर्तें पूरी करते हैं?
CTA की स्पष्टता	कार्रवाई का भरोसा	क्या एक मुख्य कार्रवाई और वर्णनात्मक बटन टेक्स्ट है?
ब्रांड निरंतरता	पहचान और भरोसा	क्या डिज़ाइन साइट, प्रोडक्ट और दूसरे चैनलों से मेल खाता है?
रेंडरिंग QA	अलग-अलग क्लाइंट पर भरोसेमंदी	क्या लॉन्च से पहले संदेश टेस्ट किया गया है?

आपका न्यूज़लेटर डिज़ाइन ओपन से क्लिक तक के व्यवहार, कन्वर्शन की गुणवत्ता, अनसब्सक्राइब, शिकायतों और सब्सक्राइबर के भरोसे पर असर डालता है. सटीक बढ़त आपकी लिस्ट, संदेश, ऑफ़र और टेस्टिंग अनुशासन पर निर्भर करती है.

Tajo टेम्पलेट

चार लेआउट, चलते हुए

नीचे का हर पैनल टेम्पलेट का असली ईमेल HTML है, असली चौड़ाई वाले फ़्रेम में। चौड़ाई को 375 px तक खींचिए और देखिए कि कॉलम कैसे एक के नीचे एक लगते हैं।

आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।

The Letter का HTML पढ़िए 6 KB, बिना बिल्ड के

<!DOCTYPE html>
<html lang="hi" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">जो उद्धरण आप अपने नोट्स ऐप में सहेजते हैं, वह आपके कंटेंट कैलेंडर से ज़्यादा मेहनत करता है।</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Meridian Press का शीर्ष चित्र: संकेंद्री नीली चापें, एक तिरछी पट्टी से कटी हुईं" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Meridian Press · अंक 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:'Nirmala UI',Mangal,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">संग्रह ही उत्पाद है</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">तीन हफ़्ते पहले मैंने 2019 में लिखा एक पाठ खोजा और नहीं मिला। न साइट पर, न निर्यात में, न प्लेटफ़ॉर्म की अपनी खोज में। बारह सौ अंक, और काम करने वाली इकलौती अनुक्रमणिका मेरी स्मृति थी।</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">छह साल न्यूज़लेटर चलाने के बारे में यही हिस्सा कोई नहीं बताता। भेजना आसान है। सहेजना नहीं।</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:'Nirmala UI',Mangal,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">आप जो भी प्रकाशित करते हैं वह एक जमा है। निकासी लगभग कोई नहीं बनाता।</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:'Nirmala UI',Mangal,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">तो इस हफ़्ते मैंने पुराने अंकों को सचमुच का संग्रह बनाकर फिर से खड़ा किया: टैग, पूर्ण-पाठ खोज और स्थायी पतों के साथ। नौ दिन लगे। ग्राहकों की संख्या नहीं हिली। साइट पर बिताया समय तीन गुना हो गया।</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">पूरा ब्योरा नीचे है, उन हिस्सों समेत जो काम नहीं आए।</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">पूरा अंक पढ़िए &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">हर गुरुवार हाथ से लिखा जाता है। उत्तर दीजिए, मैं पढ़ता हूँ।</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">सदस्यता छोड़ें</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।

The Digest का HTML पढ़िए 10 KB, बिना बिल्ड के

<!DOCTYPE html>
<html lang="hi" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Digest</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#131313 !important; }
    .d-card { background-color:#1b1b1b !important; }
    .d-ink { color:#f3f3f3 !important; }
    .d-mute { color:#a5a5a5 !important; }
    .d-rule { border-color:#333333 !important; }
    .d-chip { background-color:#10352f !important; color:#7fd8c6 !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f4f3f0;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">छह चीज़ें जो आपके मंगलवार के लायक हैं। दो कीमत तय करने के बारे में हैं।</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f4f3f0;">
  <tr><td align="center" style="padding:28px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">

      <tr><td class="gutter" style="padding:30px 32px 22px 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td valign="middle" style="font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-ink" style="margin:0;font-size:20px;line-height:26px;font-weight:800;color:#141414;">The Tuesday Digest</p>
              <p class="d-mute" style="margin:4px 0 0 0;font-size:14px;line-height:20px;color:#6b6b6b;">26 अगस्त 2026 · 6 विषय · 9 मिनट</p>
            </td>
            <td valign="middle" align="right" class="hide-sm">
              <span class="d-chip" style="display:inline-block;background:#e2f4ef;color:#00614f;border-radius:999px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">अंक 212</span>
            </td>
          </tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:2px solid #141414;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:0 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
          <tr>
            <td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
              <img src="/_astro/digest-1.gDWNYw1C.png" width="112" height="112" alt="अमूर्त फ़िरोज़ी चापें, एक तिरछी पट्टी से कटी हुईं" style="width:112px;height:112px;border-radius:4px;">
            </td>
            <td valign="top" style="font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">01 &middot; मूल्य निर्धारण</p>
              <p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
                <a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">तीन कंपनियाँ उपयोग-आधारित मूल्य पर गईं और दो वापस लौट आईं</a>
              </p>
              <p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">लौटने वाली दोनों एक ही बात कहती हैं: सहायता का बोझ राजस्व से पहले बढ़ गया।</p>
            </td>
          </tr>
        </table>
      </td></tr>
      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:0 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
          <tr>
            <td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
              <img src="/_astro/digest-2.ch7Avmad.png" width="112" height="112" alt="अमूर्त फ़िरोज़ी छल्ले, खिसके हुए केंद्र बिंदु के साथ" style="width:112px;height:112px;border-radius:4px;">
            </td>
            <td valign="top" style="font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">02 &middot; वितरण-क्षमता</p>
              <p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
                <a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">बड़े प्रेषकों के लिए Gmail के नियम एक साल पुराने हो गए। असल में यह बदला है</a>
              </p>
              <p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">शिकायत दर वही इकलौती सीमा है जिसके पास कोई पहुँचा। बाकी सब पहले से ही अनिवार्य था।</p>
            </td>
          </tr>
        </table>
      </td></tr>
      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:0 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
          <tr>
            <td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
              <img src="/_astro/digest-3.DP0eG3wj.png" width="112" height="112" alt="हल्के सफ़ेद पर अमूर्त संकेंद्री फ़िरोज़ी चापें" style="width:112px;height:112px;border-radius:4px;">
            </td>
            <td valign="top" style="font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;color:#007d6a;">03 &middot; कारीगरी</p>
              <p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
                <a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">न्यूज़लेटर का संग्रह एक खोज उत्पाद है, लिंक की सूची नहीं</a>
              </p>
              <p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">नौ दिन का काम, ग्राहकों में शून्य वृद्धि, साइट पर तीन गुना समय। दिलचस्प तो यही अदला-बदली है।</p>
            </td>
          </tr>
        </table>
      </td></tr>
      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:24px 32px 34px 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">नीचे तीन और हैं, उनमें वह भी जो बिलिंग पर है और जिसका जवाब सब देते हैं।</p>
        <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#007d6a" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#007d6a;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">छहों पढ़िए</a>
<!--[if mso]></td></tr></table><![endif]-->
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #eceae6;"></td></tr>
      <tr><td class="gutter" style="padding:20px 32px 30px 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">The Tuesday Digest, 9 Fitzroy Street, Manchester M1 2AL<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">सदस्यता छोड़ें</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">पसंद प्रबंधित करें</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।

The Storefront का HTML पढ़िए 12 KB, बिना बिल्ड के

<!DOCTYPE html>
<html lang="hi" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Storefront</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#141210 !important; }
    .d-card { background-color:#1d1a18 !important; }
    .d-ink { color:#f5f2ef !important; }
    .d-mute { color:#aaa39d !important; }
    .d-rule { border-color:#38322d !important; }
    .d-tile { background-color:#241f1c !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#efece8;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">चार नए प्रिंट। बंदरगाह वाला 40 प्रतियों में है और हफ़्ता नहीं निकालेगा।</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#efece8;">
  <tr><td align="center" style="padding:24px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td class="gutter" style="padding:22px 24px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
          <td class="d-ink" style="font-size:17px;line-height:22px;font-weight:800;color:#141414;">Northlight</td>
          <td align="right" class="d-mute hide-sm" style="font-family:'Nirmala UI',Mangal,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">शरद पेशकश · 04</td>
        </tr></table>
      </td></tr>

      <tr><td style="padding:0;">
        <img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="चार नए Northlight प्रिंट: गर्म हल्के सफ़ेद पर एक-दूसरे पर चढ़ती जंग-लाल चापें" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">चार प्रिंट। हर एक की चालीस प्रतियाँ।</h1>
        <p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">इस पेशकश का हर प्रिंट हाथ से खींचा गया, क्रमांकित है, और ख़त्म होते ही ख़त्म। यहाँ कुछ दोबारा नहीं छपता।</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">पेशकश देखिए</a>
<!--[if mso]></td></tr></table><![endif]-->
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px 8px 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-1.B7Z7OyM8.png" width="272" height="272" alt="Harbour, जंग-लाल रंग का अमूर्त प्रिंट" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Harbour</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm &middot; सूती काग़ज़ पर जिक्ले</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-2.CMBKLJ38.png" width="272" height="272" alt="Dusk, अंबर रंग का अमूर्त प्रिंट" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Dusk</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm &middot; सूती काग़ज़ पर जिक्ले</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>
          </tr>
          <tr>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-3.C9XLoBz6.png" width="272" height="272" alt="Tide, बैंगनी रंग का अमूर्त प्रिंट" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Tide</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm &middot; सूती काग़ज़ पर जिक्ले</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-4.jL_6WDwF.png" width="272" height="272" alt="Quarry, गहरे हरे रंग का अमूर्त प्रिंट" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Quarry</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm &middot; सूती काग़ज़ पर जिक्ले</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">टोकरी में डालें</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>
          </tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:6px 40px 30px 40px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#faf9f7;border-radius:4px;">
          <tr><td style="padding:16px 20px;font-family:'Nirmala UI',Mangal,sans-serif;">
            <p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>यूनाइटेड किंगडम में 75 £ से ऊपर मुफ़्त शिपिंग।</strong> फ़्रेम के विकल्प भुगतान के समय। बिना फ़्रेम वालों की वापसी 30 दिन के भीतर।</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 40px;border-top:1px solid #ebe7e2;"></td></tr>
      <tr><td class="gutter" style="padding:20px 40px 30px 40px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Northlight Print Co., Unit 4 Wharf Road, Leeds LS10 1JQ<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">सदस्यता छोड़ें</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

आपकी थीम के अनुसार चलता है — दूसरी देखने के लिए ऊपर से बदलिए।

The Brief का HTML पढ़िए 11 KB, बिना बिल्ड के

<!DOCTYPE html>
<html lang="hi" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Brief</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#121212 !important; }
    .d-card { background-color:#1a1a1a !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a6a6a6 !important; }
    .d-rule { border-color:#333333 !important; }
    .d-tile { background-color:#232323 !important; }
    .d-track { background-color:#2c2c2c !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f1f0f4;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">उत्तर दर 4 अंक बढ़ी है और हमें अब भी कारण नहीं पता। सबसे अच्छा अनुमान भीतर है।</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
  <tr><td align="center" style="padding:26px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">

      <tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
        <img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Ledger Weekly का शीर्ष: लगभग काले पर बैंगनी चापें" style="width:100%;height:auto;max-width:600px;border-radius:6px 6px 0 0;">
      </td></tr>

      <tr><td class="gutter" style="padding:26px 32px 18px 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p style="margin:0 0 4px 0;font-size:12px;line-height:16px;color:#8f83ff;">Ledger Weekly · सप्ताह 35</p>
        <h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">उत्तर दर हिली और किसी ने कुछ जारी नहीं किया</h1>
      </td></tr>

      <tr><td class="gutter" style="padding:0 26px 8px 26px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>

          <td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
              <tr><td style="padding:18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
                <p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">31.4%</p>
                <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">खुलने की दर</p>
                <p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">&#9650; 1.2 अंक</p>
              </td></tr>
            </table>
          </td>

          <td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
              <tr><td style="padding:18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
                <p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">8.9%</p>
                <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">क्लिक दर</p>
                <p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">&#9660; 0.4 अंक</p>
              </td></tr>
            </table>
          </td>

          <td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
              <tr><td style="padding:18px 16px;font-family:'Nirmala UI',Mangal,sans-serif;">
                <p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">6.1%</p>
                <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">उत्तर दर</p>
                <p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">&#9650; 4.0 अंक</p>
              </td></tr>
            </table>
          </td>
        </tr></table>
      </td></tr>

      <tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">भेजने में कुछ नहीं बदला। वही सूची, वही गुरुवार, वही टेम्पलेट। इकलौता चर जो हमें मिला: विषय पंक्ति ने ग्यारह अंकों में पहली बार सवाल पूछा।</p>
        <p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;color:#6b6b6b;">खंड के अनुसार उत्तर</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px 22px 32px;">
        <table role="presentation" class="chart" width="100%" cellpadding="0" cellspacing="0" border="0">

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">सशुल्क ग्राहक</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="100%" style="width:100%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">11.2%</td>
          </tr>

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">निःशुल्क, 90 दिन सक्रिय</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="57%" style="width:57%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">6.4%</td>
          </tr>

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">निःशुल्क, निष्क्रिय</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
          </tr>

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:15px;line-height:20px;color:#242424;">परीक्षण</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="44%" style="width:44%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Nirmala UI',Mangal,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">4.9%</td>
          </tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px 28px 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#141414" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#141414;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Nirmala UI',Mangal,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">पूरा विश्लेषण पढ़िए</a>
<!--[if mso]></td></tr></table><![endif]-->
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #e9e7ee;"></td></tr>
      <tr><td class="gutter" style="padding:20px 32px 28px 32px;font-family:'Nirmala UI',Mangal,sans-serif;">
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Ledger Weekly, 2 Cathedral Square, Edinburgh EH1 2QN<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">सदस्यता छोड़ें</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ब्राउज़र में देखें</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

ईमेल न्यूज़लेटर डिज़ाइन के मुख्य सिद्धांत

1. विज़ुअल पदानुक्रम

विज़ुअल पदानुक्रम पाठकों को आपके कंटेंट में उसी क्रम से ले जाता है जो आप चाहते हैं. इसके बिना सब्सक्राइबर बेतरतीब स्कैन करते हैं और अहम संदेश चूक जाते हैं.

असरदार विज़ुअल पदानुक्रम बनाना

आकार: बड़े तत्व सबसे पहले ध्यान खींचते हैं. आपकी सुर्ख़ी बॉडी टेक्स्ट से काफ़ी बड़ी होनी चाहिए, और CTA साफ़ तौर पर अलग दिखने चाहिए.

रंग: गहरे या विपरीत रंग ध्यान के केंद्र बनाते हैं. मुख्य CTA और अहम तत्वों के लिए अपने ब्रांड का एक्सेंट रंग इस्तेमाल करें.

जगह: सफ़ेद जगह (या ख़ाली जगह) तत्वों को अलग करती है और आंखों को ठहरने की जगह देती है. भरे-भरे डिज़ाइन बोझिल लगते हैं, खुले डिज़ाइन प्रीमियम लगते हैं.

स्थिति: आई-ट्रैकिंग अध्ययन बताते हैं कि पाठक स्वाभाविक रूप से F-पैटर्न या Z-पैटर्न में स्कैन करते हैं. अपना सबसे अहम कंटेंट इन्हीं रास्तों पर रखें.

विज़ुअल पदानुक्रम का उदाहरण

[लोगो]                                    [ब्राउज़र में देखें]


          बड़ी सुर्ख़ी (पहला ध्यान)
    ज़्यादा ब्योरे के साथ सहायक उप-सुर्ख़ी

                 [हीरो इमेज]

बॉडी टेक्स्ट जो पाठक को संदर्भ और मूल्य देता है.
पैराग्राफ़ छोटे और स्कैन करने लायक रखें.

            [मुख्य CTA बटन]


   [गौण कंटेंट]        [गौण कंटेंट]

                [फ़ुटर]

2. ब्रांड निरंतरता

आपका न्यूज़लेटर देखते ही पहचान में आ जाना चाहिए कि वह आपके ब्रांड से आया है. निरंतरता भरोसा बनाती है और हर बार भेजने पर ब्रांड की पहचान मज़बूत करती है.

बनाए रखने लायक ब्रांड तत्व

लोगो की जगह - हर ईमेल में एक ही जगह (आमतौर पर ऊपर बाएं या बीच में)
रंग पैलेट - 2 से 3 ब्रांड रंग लगातार इस्तेमाल करें
टाइपोग्राफ़ी - 1 से 2 फ़ॉन्ट परिवार तक सीमित रहें
इमेज शैली - फ़ोटोग्राफ़ी या चित्रण का एक जैसा तरीक़ा
आवाज़ और लहजा - अपनी वेबसाइट और दूसरे संवाद से मेल खाता हुआ

ब्रांड निरंतरता चेकलिस्ट

तत्व	दिशानिर्देश
मुख्य रंग	CTA और एक्सेंट के लिए इस्तेमाल करें
गौण रंग	सेक्शन और विभाजक रेखाओं के लिए इस्तेमाल करें
लोगो	हेडर में रखें, फ़ुटर में वैकल्पिक
फ़ॉन्ट	ज़्यादा से ज़्यादा 2 परिवार (हेडिंग और बॉडी)
इमेज शैली	एक जैसे फ़िल्टर, क्रॉपिंग और संयोजन

3. उल्टे पिरामिड का मॉडल

अपने न्यूज़लेटर कंटेंट को उल्टे पिरामिड की तरह रखें: सबसे अहम जानकारी सबसे ऊपर, सहायक ब्योरा नीचे.

                  सबसे अहम
            (सुर्ख़ी, मुख्य संदेश, हीरो)

              सहायक जानकारी
           (संदर्भ, फ़ायदे, ब्योरा)

                 कॉल टू एक्शन
            (साफ़ अगला क़दम)

यह संरचना पक्का करती है कि जो सब्सक्राइबर स्क्रॉल नहीं करते, उन्हें भी आपका मूल संदेश मिल जाए.

4. एक-तिहाई का नियम

फ़ोटोग्राफ़ी और ग्राफ़िक डिज़ाइन से लिया गया एक-तिहाई का नियम संतुलित और देखने में आकर्षक लेआउट बनाता है.

अपने ईमेल को तीन-गुणा-तीन ग्रिड में बांटें और अहम तत्व ग्रिड रेखाओं पर या उनके कटान बिंदुओं पर रखें. इससे स्वाभाविक संतुलन बनता है और रणनीतिक जगहों पर ध्यान जाता है.

5. ख़ाली जगह आपकी दोस्त है

ख़ाली जगह, यानी तत्वों के बीच की जगह, सबसे ताक़तवर डिज़ाइन टूल में से एक है. यह:

टेक्स्ट को भीड़ने से रोककर पठनीयता बेहतर करती है
अहम तत्वों को अलग करके ध्यान केंद्रित करती है
गुणवत्ता का एहसास देती है (प्रीमियम ब्रांड खुली जगह का इस्तेमाल करते हैं)
पाठकों पर मानसिक बोझ घटाती है

सुझाव: बड़े सेक्शन के बीच कम से कम 20px और सेक्शन के अंदर तत्वों के बीच 10 से 15px जगह रखें.

ईमेल न्यूज़लेटर लेआउट के प्रकार

अलग-अलग न्यूज़लेटर मक़सद के लिए अलग-अलग लेआउट चाहिए. यहां सबसे असरदार संरचनाएं दी गई हैं.

1. एक कॉलम वाला लेआउट

किसके लिए सबसे अच्छा: मोबाइल-फ़र्स्ट ऑडियंस, कहानी आधारित कंटेंट, न्यूनतम शैली वाले ब्रांड

             [हेडर]

           [हीरो इमेज]

           [सुर्ख़ी]
          [बॉडी टेक्स्ट]
            [CTA]

        [गौण कंटेंट]

             [फ़ुटर]

फ़ायदे:

मोबाइल पर बेहतरीन रेस्पॉन्सिवनेस
स्कैन करने और पढ़ने में आसान
डिज़ाइन और कोड करने में सरल
कंटेंट का स्वाभाविक प्रवाह

बेहतरीन तरीक़े:

ज़्यादा से ज़्यादा चौड़ाई: 600px
लाइन की लंबाई: 50 से 75 अक्षर
हर सेक्शन में एक मुख्य CTA

2. दो कॉलम वाला लेआउट

किसके लिए सबसे अच्छा: ईकॉमर्स प्रदर्शन, कंटेंट राउंडअप, आमने-सामने तुलना

             [हेडर]

           [हीरो सेक्शन]

   [प्रोडक्ट 1]       [प्रोडक्ट 2]
    [इमेज]             [इमेज]
    [टेक्स्ट]           [टेक्स्ट]
    [CTA]              [CTA]

             [फ़ुटर]

फ़ायदे:

कई चीज़ें कारगर तरीक़े से दिखाता है
दृश्य दिलचस्पी पैदा करता है
तुलना वाले कंटेंट के लिए अच्छा

बेहतरीन तरीक़े:

मोबाइल पर एक कॉलम में बदलें
संतुलन के लिए कॉलम की चौड़ाई बराबर रखें
कम से कम कॉलम चौड़ाई: 280px

3. मिश्रित या मॉड्यूलर लेआउट

किसके लिए सबसे अच्छा: कंटेंट से भरे न्यूज़लेटर, ख़बरों के डाइजेस्ट, कई विषयों वाले संदेश

             [हेडर]

          [मुख्य कहानी]

   [कहानी 2]         [कहानी 3]

         [पूरी चौड़ाई का CTA]

 [आइटम 1]  [आइटम 2]    [आइटम 3]

             [फ़ुटर]

फ़ायदे:

बहुत लचीला
अलग-अलग तरह के कंटेंट को समेटता है
दृश्य लय बनाता है

बेहतरीन तरीक़े:

सेक्शन के बीच साफ़ अलगाव रखें
कंटेंट का पदानुक्रम दिखाने के लिए दृश्य संकेत इस्तेमाल करें
मोबाइल रेंडरिंग ध्यान से टेस्ट करें

4. Z-पैटर्न लेआउट

किसके लिए सबसे अच्छा: प्रचार ईमेल, घोषणा वाले न्यूज़लेटर

Z-पैटर्न पेज पर आंखों की स्वाभाविक गति का अनुसरण करता है: बाएं से दाएं, फिर तिरछे नीचे, फिर दोबारा बाएं से दाएं.

  [लोगो]  [नेविगेशन]        पहला क्षैतिज स्कैन

                                        तिरछी गति

  [कंटेंट]  [CTA]        दूसरा क्षैतिज स्कैन

बेहतरीन तरीक़े:

लोगो और नेविगेशन पहली क्षैतिज रेखा पर रखें
अहम दृश्य बीच के तिरछे रास्ते पर रखें
CTA क्षैतिज स्कैन रेखाओं के अंत में रखें

5. F-पैटर्न लेआउट

किसके लिए सबसे अच्छा: ज़्यादा टेक्स्ट वाले न्यूज़लेटर, शैक्षिक कंटेंट

ज़्यादा टेक्स्ट वाला कंटेंट मिलने पर पाठक F-पैटर्न में स्कैन करते हैं: दो क्षैतिज झाड़ू, फिर बाईं ओर से नीचे की तरफ़ एक लंबवत स्कैन.

        पहला क्षैतिज स्कैन
        दूसरा क्षैतिज स्कैन

                                        लंबवत स्कैन

बेहतरीन तरीक़े:

अहम जानकारी पहली दो पंक्तियों में रखें
पैराग्राफ़ की शुरुआत अहम शब्दों से करें
आसान स्कैनिंग के लिए टेक्स्ट बाएं संरेखित रखें

मोबाइल-फ़र्स्ट ईमेल डिज़ाइन

मोबाइल की हिस्सेदारी ऑडियंस, उद्योग और कैम्पेन के प्रकार से बदलती है, लेकिन ज़्यादातर न्यूज़लेटर को छोटी स्क्रीन पर काम करना ही होता है. अनुमान लगाने से पहले अपनी रिपोर्टिंग देखें, फिर टेम्पलेट इस तरह डिज़ाइन करें कि मुख्य संदेश, CTA और फ़ुटर मोबाइल पर काम के बने रहें.

मोबाइल डिज़ाइन की ज़रूरतें

टच के अनुकूल लक्ष्य

कम से कम बटन आकार: 44x44 पिक्सल
टैप लक्ष्यों के बीच जगह: क्लिक होने वाले तत्वों के बीच कम से कम 10px
CTA की जगह: बीच में और अंगूठे से आसानी से पहुंचने लायक

मोबाइल के लिए टाइपोग्राफ़ी

तत्व	डेस्कटॉप आकार	मोबाइल आकार
सुर्ख़ियां	28 से 36px	22 से 28px
उप-सुर्ख़ियां	20 से 24px	18 से 22px
बॉडी टेक्स्ट	16 से 18px	कम से कम 16px
CTA	16 से 18px	16 से 18px

एक कॉलम को प्राथमिकता

दो कॉलम वाले लेआउट मोबाइल पर सलीक़े से एक के नीचे एक जमने चाहिए:

डेस्कटॉप:                    मोबाइल:

 कॉलम 1   कॉलम 2              कॉलम 1

                                कॉलम 2

मोबाइल अनुकूलन चेकलिस्ट

एक कॉलम या रेस्पॉन्सिव बहु-कॉलम लेआउट
बिना ज़ूम किए पढ़ने लायक फ़ॉन्ट आकार (बॉडी में 16px या ज़्यादा)
टैप करने लायक बड़े बटन (कम से कम 44px)
तस्वीरें सही तरह से आकार बदलती हैं
क्षैतिज स्क्रॉल की ज़रूरत नहीं
अहम कंटेंट बिना स्क्रॉल किए दिखता है
प्रिव्यू टेक्स्ट मोबाइल इनबॉक्स के लिए अनुकूलित
तस्वीरें और कुल फ़ाइल वज़न मोबाइल कनेक्शन के लिए हल्का रखा गया

रेस्पॉन्सिव डिज़ाइन की तकनीकें

अपना डिज़ाइन ढालने के लिए CSS मीडिया क्वेरी इस्तेमाल करें:

/* Desktop styles */
.content-wrapper {
  width: 600px;
}

/* Mobile styles */
@media only screen and (max-width: 480px) {
  .content-wrapper {
    width: 100% !important;
  }

  .column {
    display: block !important;
    width: 100% !important;
  }

  .mobile-center {
    text-align: center !important;
  }
}

ध्यान दें: कई ईमेल क्लाइंट में CSS सपोर्ट सीमित होता है. मुख्य तरीक़े के रूप में इनलाइन स्टाइल इस्तेमाल करें और मीडिया क्वेरी को सुधार के लिए रखें.

टाइपोग्राफ़ी के बेहतरीन तरीक़े

टाइपोग्राफ़ी आपके न्यूज़लेटर की पठनीयता और ब्रांड की छवि बना या बिगाड़ सकती है.

फ़ॉन्ट का चुनाव

वेब-सेफ़ फ़ॉन्ट

ये फ़ॉन्ट सभी ईमेल क्लाइंट पर एक जैसे दिखते हैं:

सैन्स-सेरिफ़: Arial, Helvetica, Verdana, Trebuchet MS
सेरिफ़: Georgia, Times New Roman, Palatino

ईमेल में वेब फ़ॉन्ट

आधुनिक ईमेल क्लाइंट @font-face या Google Fonts के ज़रिए वेब फ़ॉन्ट सपोर्ट करते हैं. फ़ॉलबैक हमेशा शामिल करें:

font-family: 'Open Sans', Arial, sans-serif;

सुझाव: वेब फ़ॉन्ट अलग-अलग क्लाइंट पर टेस्ट करें. Gmail, Apple Mail और iOS Mail इन्हें सपोर्ट करते हैं, Outlook नहीं करता.

टाइपोग्राफ़ी के दिशानिर्देश

लाइन की लंबाई

सबसे अच्छी: प्रति पंक्ति 50 से 75 अक्षर
ज़्यादा से ज़्यादा: 80 अक्षर
600px चौड़ाई के लिए: आदर्श लाइन लंबाई के लिए 16 से 18px फ़ॉन्ट इस्तेमाल करें

लाइन की ऊंचाई

बॉडी टेक्स्ट: फ़ॉन्ट आकार का 1.5 से 1.7 गुना
सुर्ख़ियां: फ़ॉन्ट आकार का 1.2 से 1.3 गुना

फ़ॉन्ट का मेल

पदानुक्रम बनाने के लिए कंट्रास्ट का इस्तेमाल करें:

उपयोग	उदाहरण जोड़ी
क्लासिक	Georgia (हेडर) और Arial (बॉडी)
आधुनिक	Montserrat (हेडर) और Open Sans (बॉडी)
पेशेवर	Roboto Slab (हेडर) और Roboto (बॉडी)
सुरुचिपूर्ण	Playfair Display (हेडर) और Lato (बॉडी)

टेक्स्ट फ़ॉर्मैटिंग के सुझाव

ज़ोर देने के लिए बोल्ड इस्तेमाल करें, अंडरलाइन नहीं (जो लिंक का संकेत देती है)
सभी अक्षर बड़े करने को छोटी सुर्ख़ियों या CTA तक सीमित रखें
आसान पढ़ने के लिए बॉडी टेक्स्ट बाएं संरेखित रखें
दृश्य संतुलन के लिए सुर्ख़ियां बीच में रखें
जस्टिफ़ाइड टेक्स्ट से बचें, इससे जगह असमान हो जाती है

ईमेल के लिए इमेज अनुकूलन

तस्वीरें न्यूज़लेटर को बेहतर बनाती हैं, लेकिन प्रदर्शन और सुलभता के लिए उनका ध्यान से अनुकूलन ज़रूरी है.

इमेज के प्रकार और उपयोग

इमेज का प्रकार	किसके लिए सबसे अच्छा	फ़ॉर्मैट
हीरो या बैनर	मुख्य दृश्य केंद्र	JPEG या WebP
प्रोडक्ट तस्वीरें	ईकॉमर्स प्रदर्शन	JPEG
आइकन और ग्राफ़िक	CTA, बुलेट पॉइंट	PNG या SVG
लोगो	ब्रांड की पहचान	PNG (पारदर्शी)
एनिमेटेड	ध्यान खींचने के लिए	GIF

इमेज आकार के दिशानिर्देश

ज़्यादा से ज़्यादा चौड़ाई: 600px (ईमेल की चौड़ाई के बराबर)
हीरो इमेज: 600px x 300 से 400px
प्रोडक्ट इमेज: 280 से 300px चौड़ाई
थंबनेल इमेज: 100 से 150px चौड़ाई

इमेज फ़ाइल आकार का अनुकूलन

बड़ी तस्वीरें लोडिंग धीमी करती हैं और स्पैम फ़ोल्डर में जाने की आशंका बढ़ाती हैं.

लक्षित फ़ाइल आकार:

हीरो इमेज: 200KB से कम
प्रोडक्ट इमेज: 100KB से कम
आइकन: 10KB से कम
पूरे ईमेल का आकार: 1MB से कम

अनुकूलन की तकनीकें:

फ़ोटोग्राफ़ के लिए JPEG इस्तेमाल करें (80 से 85 प्रतिशत गुणवत्ता)
पारदर्शिता वाले ग्राफ़िक के लिए PNG इस्तेमाल करें
TinyPNG या ImageOptim जैसे टूल से तस्वीरें कम्प्रेस करें
सपोर्ट करने वाले क्लाइंट के लिए WebP फ़ॉर्मैट पर विचार करें

Alt टेक्स्ट के बेहतरीन तरीक़े

सुलभता के लिए और जब तस्वीरें लोड न हों, तब alt टेक्स्ट बेहद अहम होता है:

अच्छा alt टेक्स्ट:

<img src="hero.jpg" alt="Woman wearing our new Spring Collection blue linen dress, standing in a garden">

ख़राब alt टेक्स्ट:

<img src="hero.jpg" alt="image" />
<img src="hero.jpg" alt="" />
<img src="hero.jpg" alt="hero-image-spring-2025-v2-final.jpg" />

Alt टेक्स्ट के दिशानिर्देश:

बताएं कि तस्वीर में क्या दिख रहा है
प्रासंगिक कीवर्ड स्वाभाविक रूप से शामिल करें
125 अक्षरों से कम रखें
इसे अर्थपूर्ण बनाएं, सिर्फ़ तस्वीर का नाम न लिखें

रेटिना डिस्प्ले का अनुकूलन

ज़्यादा रिज़ॉल्यूशन वाली स्क्रीन पर साफ़ तस्वीरों के लिए, दिखाए जाने वाले आकार से 2 गुना बड़ी तस्वीरें इस्तेमाल करें:

दिखाया जाने वाला आकार: 300px चौड़ाई
इमेज फ़ाइल: 600px चौड़ाई
HTML में स्पष्ट चौड़ाई तय करें

<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

रंगों का मनोविज्ञान और उपयोग

रंग भावनाओं को प्रभावित करते हैं, ध्यान की दिशा तय करते हैं, और ब्रांड की पहचान मज़बूत करते हैं.

ईमेल में रंगों का मनोविज्ञान

रंग	जुड़ाव	किसके लिए सबसे अच्छा
नीला	भरोसा, स्थिरता, शांति	वित्त, तकनीक, स्वास्थ्य सेवा
लाल	तात्कालिकता, उत्साह, जोश	सेल, CTA, तात्कालिकता
हरा	वृद्धि, स्वास्थ्य, प्रकृति	टिकाऊपन, स्वास्थ्य, सफलता
नारंगी	ऊर्जा, रचनात्मकता, गर्मजोशी	CTA, युवाओं पर केंद्रित ब्रांड
बैंगनी	विलासिता, रचनात्मकता, समझ	प्रीमियम ब्रांड, सौंदर्य
पीला	आशावाद, स्पष्टता, गर्मजोशी	हाइलाइट, ध्यान खींचना
काला	परिष्कार, विलासिता	प्रीमियम, फ़ैशन
सफ़ेद	साफ़, न्यूनतम, शुद्ध	जगह, बैकग्राउंड

रंग अनुपात के दिशानिर्देश

60-30-10 का नियम अपनाएं:

60 प्रतिशत: मुख्य या बैकग्राउंड रंग
30 प्रतिशत: गौण रंग
10 प्रतिशत: एक्सेंट रंग (CTA, हाइलाइट)

सुलभता के लिए रंग कंट्रास्ट

टेक्स्ट और बैकग्राउंड के बीच पर्याप्त कंट्रास्ट रखें:

सामान्य टेक्स्ट: कम से कम 4.5:1 कंट्रास्ट अनुपात
बड़ा टेक्स्ट (18px या ज़्यादा): कम से कम 3:1 कंट्रास्ट अनुपात
टूल इस्तेमाल करें: WebAIM Contrast Checker

ऊंचे कंट्रास्ट के उदाहरण:

सफ़ेद (#FFFFFF) पर काला (#000000) - 21:1
सफ़ेद पर गहरा नीला (#003366) - 12.6:1
गहरे बैंगनी (#4A154B) पर सफ़ेद - 10.8:1

CTA बटन के रंग

आपके कॉल-टू-एक्शन बटन तुरंत अलग दिखने चाहिए:

अपना सबसे ऊंचे कंट्रास्ट वाला एक्सेंट रंग इस्तेमाल करें
सभी ईमेल में निरंतरता बनाए रखें
प्रदर्शन बेहतर करने के लिए अलग-अलग रंगों का A/B टेस्ट करें
पक्का करें कि यह रंग बॉडी टेक्स्ट के लिंक से अलग हो

ईमेल सुलभता

सुलभ ईमेल डिज़ाइन पक्का करता है कि सभी सब्सक्राइबर आपके कंटेंट से जुड़ सकें, उनमें वे भी जो सहायक तकनीकों का इस्तेमाल करते हैं.

ईमेल के लिए WCAG दिशानिर्देश

वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) ईमेल पर भी लागू होती हैं:

1. बोधगम्य

तस्वीरों के लिए टेक्स्ट विकल्प दें (alt टेक्स्ट)
जानकारी देने के लिए सिर्फ़ रंग पर निर्भर न रहें
पर्याप्त रंग कंट्रास्ट रखें
टेक्स्ट का आकार बदलने पर लेआउट न टूटे

2. संचालन योग्य

सारी कार्यक्षमता कीबोर्ड से उपलब्ध हो
यूज़र को कंटेंट पढ़ने के लिए पर्याप्त समय दें
ऐसा चमकता कंटेंट इस्तेमाल न करें जो दौरे का कारण बन सके

3. समझने योग्य

साफ़ और सरल भाषा इस्तेमाल करें
नेविगेशन एक जैसा रखें
साफ़ त्रुटि संदेश दें

4. मज़बूत

मान्य HTML इस्तेमाल करें
अलग-अलग ईमेल क्लाइंट पर टेस्ट करें
सहायक तकनीकों के साथ अनुकूलता पक्की करें

सुलभ ईमेल चेकलिस्ट

सभी तस्वीरों पर वर्णनात्मक alt टेक्स्ट है
रंग कंट्रास्ट WCAG AA मानक (4.5:1) पूरा करता है
लिंक वर्णनात्मक हैं (हमारी गाइड पढ़ें, न कि यहां क्लिक करें)
फ़ॉन्ट आकार कम से कम 14px है (16px बेहतर)
ईमेल में पढ़ने का तार्किक क्रम है
टेबल सिर्फ़ लेआउट के लिए इस्तेमाल हुए हैं, डेटा के लिए नहीं (या उनमें सही हेडर हैं)
HTML में भाषा घोषित की गई है
इंटरैक्टिव तत्वों के लिए फ़ोकस संकेतक दिखते हैं

स्क्रीन रीडर से जुड़ी बातें

अपने ईमेल को स्क्रीन रीडर इस्तेमाल करने वालों के लिए संरचित करें:

जहां संभव हो सिमैंटिक HTML इस्तेमाल करें (h1, h2, p वग़ैरह)
एक प्लेन-टेक्स्ट संस्करण दें
ब्राउज़र में देखने का लिंक शामिल करें
सिर्फ़ तस्वीरों वाले ईमेल से बचें
VoiceOver, NVDA या JAWS से टेस्ट करें

असरदार CTA डिज़ाइन

आपका कॉल-टू-एक्शन वह जगह है जहां डिज़ाइन कन्वर्शन से मिलता है. इसे सही रखें.

CTA बटन के बेहतरीन तरीक़े

आकार और आकृति

कम से कम आकार: 44px ऊंचाई, 120px चौड़ाई
पैडिंग: कम से कम 12 से 16px लंबवत, 24 से 32px क्षैतिज
आकृति: ऐसा बटन आकार इस्तेमाल करें जो ब्रांड से मेल खाता हो और पहचानने में आसान रहे

रंग और कंट्रास्ट

ऐसा ब्रांड एक्सेंट रंग इस्तेमाल करें जो आसपास के सेक्शन से अलग दिखे
बैकग्राउंड से ऊंचा कंट्रास्ट पक्का करें
बटन का टेक्स्ट आसानी से पढ़ने लायक हो

टेक्स्ट के दिशानिर्देश

कार्रवाई वाले क्रिया शब्द इस्तेमाल करें: अभी ख़रीदें, शुरू करें, डाउनलोड करें
जहां सही हो, तात्कालिकता बनाएं: अपनी छूट पाएं
छोटा रखें: 2 से 5 शब्द
आम टेक्स्ट से बचें: यहां क्लिक करें, सबमिट, और जानें

CTA की जगह

मुख्य CTA: ऊपरी हिस्से में (बिना स्क्रॉल किए दिखे)
गौण CTA: सहायक कंटेंट के बाद
हर ईमेल में एक मुख्य CTA (निर्णय की उलझन से बचें)

CTA टेक्स्ट के उदाहरण

उद्योग	असरदार CTA
ईकॉमर्स	सेल में ख़रीदें
SaaS	मुफ़्त ट्रायल शुरू करें
कंटेंट	पूरी गाइड पढ़ें
इवेंट	मेरी जगह बुक करें
न्यूज़लेटर	हफ़्तेवार सुझाव पाएं

बटन बनाम टेक्स्ट लिंक

मुख्य कार्रवाइयों के लिए बटन और गौण कार्रवाइयों के लिए टेक्स्ट लिंक इस्तेमाल करें:

[अभी ख़रीदें]   मुख्य बटन (ज़्यादा दृश्य वज़न)

या हमारे नए प्रोडक्ट देखें    गौण टेक्स्ट लिंक

उद्योग के हिसाब से ईमेल न्यूज़लेटर के उदाहरण

आइए अलग-अलग उद्योगों में असरदार न्यूज़लेटर डिज़ाइन देखें.

ईकॉमर्स न्यूज़लेटर डिज़ाइन

मुख्य तत्व:

अच्छी गुणवत्ता वाली प्रोडक्ट फ़ोटोग्राफ़ी
साफ़ कीमत प्रदर्शन
कई प्रोडक्ट की प्रस्तुति
दमदार प्रचार संदेश
आसानी से टैप होने वाले ख़रीदारी बटन

लेआउट सुझाव: प्रोडक्ट कार्ड के साथ मॉड्यूलर ग्रिड

         सेल बैनर

        [हीरो प्रोडक्ट]
         30% छूट
       [अभी ख़रीदें]

  [प्रोडक्ट 1]        [प्रोडक्ट 2]
   $49.99              $79.99

     $75 से ऊपर मुफ़्त शिपिंग

SaaS और तकनीक न्यूज़लेटर डिज़ाइन

मुख्य तत्व:

साफ़, न्यूनतम शैली
आइकन के साथ फ़ीचर की झलक
शैक्षिक कंटेंट पर ध्यान
साफ़ मूल्य प्रस्ताव
पेशेवर तस्वीरें

लेआउट सुझाव: फ़ीचर ब्लॉक के साथ एक कॉलम

      नए फ़ीचर की घोषणा

        [फ़ीचर स्क्रीनशॉट]

  पहला फ़ायदा
  दूसरा फ़ायदा
  तीसरा फ़ायदा

         [अभी आज़माएं]

मीडिया और प्रकाशन न्यूज़लेटर डिज़ाइन

मुख्य तत्व:

मज़बूत टाइपोग्राफ़ी पदानुक्रम
तस्वीरों के साथ लेखों की झलक
श्रेणी के हिसाब से व्यवस्था
लेखकों के नाम
पढ़ने के समय का संकेत

लेआउट सुझाव: कार्ड आधारित कंटेंट ग्रिड

        मुख्य कहानी
   [बड़ी इमेज]
   यहां सुर्ख़ी का टेक्स्ट
   छोटा अंश...

  [कहानी 2]      [कहानी 3]
   सुर्ख़ी          सुर्ख़ी

         और कहानियां

B2B और पेशेवर सेवाओं का न्यूज़लेटर डिज़ाइन

मुख्य तत्व:

संयमित, पेशेवर डिज़ाइन
विचार नेतृत्व वाला कंटेंट
केस स्टडी और डेटा
इवेंट का प्रचार
संसाधनों के डाउनलोड

लेआउट सुझाव: पेशेवर एक कॉलम

      [कंपनी का लोगो]

    इस महीने की जानकारी

   उद्योग रिपोर्ट
     हमारे नवीनतम बाज़ार विश्लेषण
     के मुख्य निष्कर्ष...
          [और पढ़ें]

   आने वाला वेबिनार
     15 मार्च, दोपहर 2 बजे EST
         [रजिस्टर करें]

ईमेल डिज़ाइन के टूल और संसाधन

डिज़ाइन प्लेटफ़ॉर्म

ड्रैग-एंड-ड्रॉप बिल्डर:

Brevo (पहले Sendinblue) - Tajo के साथ इंटीग्रेटेड
Mailchimp
Klaviyo
Campaign Monitor

पेशेवर डिज़ाइन टूल:

Figma (डिज़ाइन और प्रोटोटाइपिंग)
Adobe XD
Sketch

टेम्पलेट संसाधन

मुफ़्त टेम्पलेट:

Brevo टेम्पलेट लाइब्रेरी
Litmus Community टेम्पलेट
Email on Acid टेम्पलेट

प्रीमियम टेम्पलेट:

ThemeForest ईमेल टेम्पलेट
Envato Elements
Creative Market

टेस्टिंग टूल

Litmus - 90 से ज़्यादा क्लाइंट पर ईमेल प्रिव्यू
Email on Acid - अलग-अलग क्लाइंट पर टेस्टिंग
Mail Tester - स्पैम स्कोर जांच
Accessible Email - सुलभता की जांच

ईमेल डिज़ाइन की आम गलतियां जिनसे बचें

1. तस्वीरों से भरे ईमेल

समस्या: कुछ ईमेल क्लाइंट डिफ़ॉल्ट रूप से तस्वीरें ब्लॉक कर देते हैं. सिर्फ़ तस्वीरों वाले ईमेल ख़ाली दिखते हैं.

समाधान: हमेशा असली टेक्स्ट शामिल करें. तस्वीरों का इस्तेमाल कंटेंट को बेहतर करने के लिए करें, उसकी जगह लेने के लिए नहीं.

2. बहुत ज़्यादा CTA

समस्या: आपस में टकराते कई CTA निर्णय की उलझन पैदा करते हैं.

समाधान: हर ईमेल में एक मुख्य CTA. गौण कार्रवाइयों के लिए टेक्स्ट लिंक इस्तेमाल करें.

3. मोबाइल को नज़रअंदाज़ करना

समस्या: जो डिज़ाइन डेस्कटॉप पर शानदार दिखते हैं, वे मोबाइल पर नाकाम हो जाते हैं.

समाधान: मोबाइल-फ़र्स्ट डिज़ाइन करें. भेजने से पहले कई डिवाइस पर टेस्ट करें.

4. ख़राब कंट्रास्ट

समस्या: कम कंट्रास्ट वाला टेक्स्ट पढ़ना मुश्किल होता है और सुलभता मानकों पर खरा नहीं उतरता.

समाधान: कंट्रास्ट जांचने वाले टूल इस्तेमाल करें. कम से कम 4.5:1 अनुपात रखें.

5. भरे-भरे लेआउट

समस्या: घने डिज़ाइन पाठकों को बोझिल लगते हैं और एंगेजमेंट घटाते हैं.

समाधान: ख़ाली जगह अपनाएं. कम लेकिन बेहतर गुणवत्ता वाले कंटेंट पर ध्यान दें.

6. असंगत ब्रांडिंग

समस्या: जो ईमेल आपकी वेबसाइट से मेल नहीं खाते, वे सब्सक्राइबर को उलझन में डालते हैं.

समाधान: ईमेल के लिए ब्रांड दिशानिर्देश बनाएं. निरंतरता बनाए रखने के लिए टेम्पलेट इस्तेमाल करें.

7. धीरे लोड होने वाले ईमेल

समस्या: बड़ी फ़ाइलें लोड होने में बहुत समय लेती हैं, ख़ासकर मोबाइल पर.

समाधान: तस्वीरें कम्प्रेस करें. पूरे ईमेल का आकार 1MB से कम रखें.

Brevo और Tajo के साथ न्यूज़लेटर डिज़ाइन बनाना

Brevo न्यूज़लेटर उत्पादन की परत संभालता है: टेम्पलेट, ड्रैग-एंड-ड्रॉप एडिटर, कैम्पेन सेटअप, कॉन्टैक्ट फ़ील्ड, वैयक्तिकरण, ऑटोमेशन, SMS, WhatsApp और रिपोर्टिंग, जो प्लान और कॉन्फ़िगरेशन के अनुसार बदलती है.

Tajo, Brevo इस्तेमाल करने वाली Shopify टीमों के लिए ग्राहक डेटा की परत संभालता है. यह ग्राहक, ऑर्डर, प्रोडक्ट, सहमति, लॉयल्टी और एंगेजमेंट संदर्भ सिंक करता है ताकि न्यूज़लेटर बेहतर सेगमेंट और सुरक्षित डायनामिक कंटेंट इस्तेमाल कर सकें.

व्यावहारिक वर्कफ़्लो

Brevo में दोबारा इस्तेमाल होने वाला न्यूज़लेटर टेम्पलेट बनाएं.
वैयक्तिकरण और सेगमेंटेशन के लिए ज़रूरी डेटा फ़ील्ड तय करें.
Brevo वर्कफ़्लो के लिए Shopify का ग्राहक, ऑर्डर, प्रोडक्ट और सहमति डेटा उपलब्ध रखने के लिए Tajo का इस्तेमाल करें.
ऐसे सेगमेंट बनाएं जैसे पहली बार ख़रीदने वाले, VIP ग्राहक, श्रेणी विशेष के ख़रीदार, निष्क्रिय ग्राहक, और हाल के ख़रीदार जिन्हें छूट वाले ईमेल से बाहर रखना है.
डायनामिक ब्लॉक तभी जोड़ें जब फ़ॉलबैक कंटेंट तय हो.
लॉन्च से पहले मोबाइल रेंडरिंग, डार्क मोड व्यवहार, लिंक, वैयक्तिकरण, अनसब्सक्राइब और प्रोडक्ट डेटा टेस्ट करें.

डायनामिक कंटेंट के नियम

वैयक्तिकरण न्यूज़लेटर को तभी बेहतर करता है जब डेटा सही हो और फ़ॉलबैक सुरक्षित हो.

डायनामिक कंटेंट इनके लिए इस्तेमाल करें:

हाल की ख़रीद या श्रेणियों के आधार पर प्रोडक्ट सिफ़ारिशें.
सत्यापित प्रोग्राम डेटा के आधार पर लॉयल्टी की याद.
जब सब्सक्राइबर का डेटा भरोसेमंद हो, तब जगह या भाषा के अलग रूप.
ग्राहक लाइफ़साइकल ब्लॉक, जैसे पहली ख़रीद, दोबारा ख़रीद, या निष्क्रिय ग्राहक.

डायनामिक कंटेंट से बचें जब:

स्रोत फ़ील्ड अधूरा हो.
प्रोडक्ट की उपलब्धता पुरानी पड़ सकती हो.
फ़ॉलबैक टूटा हुआ दिखे.
सहमति या पसंद का डेटा साफ़ न हो.

निष्कर्ष

ईमेल न्यूज़लेटर डिज़ाइन कला भी है और विज्ञान भी. इस गाइड में शामिल सिद्धांत, यानी विज़ुअल पदानुक्रम, मोबाइल अनुकूलन, सुलभता, टाइपोग्राफ़ी और रणनीतिक CTA स्थान, ऐसे न्यूज़लेटर की नींव बनाते हैं जो जोड़ते भी हैं और कन्वर्ट भी करते हैं.

ये मुख्य बातें याद रखें:

पहले मोबाइल के लिए डिज़ाइन करें - आपकी अपनी रिपोर्टिंग अलग हो सकती है, लेकिन छोटी स्क्रीन पर उपयोगिता सुरक्षित होनी चाहिए
स्पष्टता को प्राथमिकता दें - हर तत्व का कोई मक़सद होना चाहिए
ब्रांड निरंतरता बनाए रखें - हर बार भेजने पर पहचान मज़बूत करें
लगातार टेस्ट करें - छोटे सुधार समय के साथ जुड़ते जाते हैं
सुलभता पर ध्यान दें - सिर्फ़ ज़्यादातर के लिए नहीं, सभी सब्सक्राइबर के लिए डिज़ाइन करें

बेहतरीन न्यूज़लेटर डिज़ाइन हर ट्रेंड का पीछा करने का नाम नहीं है. यह ऐसे साफ़, दिलचस्प और ब्रांड के अनुरूप संदेश बनाने की बात है जो आपके सब्सक्राइबर के समय और ध्यान का सम्मान करें.

Brevo में अपने Shopify न्यूज़लेटर बेहतर करने के लिए तैयार हैं? Tajo के साथ शुरू करें और ग्राहक, ऑर्डर, प्रोडक्ट, सहमति, लॉयल्टी तथा एंगेजमेंट डेटा को Brevo वर्कफ़्लो में सिंक करें, ताकि आपके डिज़ाइन बेहतर सेगमेंट और सुरक्षित वैयक्तिकरण इस्तेमाल कर सकें.

अक्सर पूछे जाने वाले प्रश्न

मैं ईमेल न्यूज़लेटर कैसे शुरू करूं?

एक प्लेटफ़ॉर्म चुनें, न्यूज़लेटर का वादा तय करें, सहमति आधारित साइनअप फ़ॉर्म बनाएं, एक सादा मोबाइल-फ़र्स्ट टेम्पलेट तैयार करें, टेस्ट कैम्पेन भेजें, और जटिल लेआउट या वैयक्तिकरण जोड़ने से पहले एंगेजमेंट की समीक्षा करें.

मुझे न्यूज़लेटर कितनी बार भेजना चाहिए?

सबके लिए एक जैसी सबसे अच्छी फ़्रीक्वेंसी नहीं होती. ऐसी लय से शुरू करें जिसे आप निभा सकें, जैसे हफ़्तेवार, हर दो हफ़्ते या मासिक, और फिर एंगेजमेंट, अनसब्सक्राइब, शिकायतों, कंटेंट की गुणवत्ता और सब्सक्राइबर की अपेक्षाओं के आधार पर उसे बदलें.

मुझे अपने न्यूज़लेटर में क्या शामिल करना चाहिए?

एक साफ़ मुख्य संदेश, उपयोगी कंटेंट, आसानी से स्कैन होने वाली संरचना, असली टेक्स्ट, alt टेक्स्ट के साथ सुलभ तस्वीरें, एक साफ़ CTA, अनसब्सक्राइब और भेजने वाले की जानकारी शामिल करें. डायनामिक प्रोडक्ट या ग्राहक कंटेंट तभी जोड़ें जब डेटा भरोसेमंद हो.

ईमेल न्यूज़लेटर की आदर्श चौड़ाई कितनी होती है?

ईमेल न्यूज़लेटर के लिए मानक और सुझाई गई चौड़ाई **600 पिक्सल** है. यह चौड़ाई ज़्यादातर ईमेल क्लाइंट और डिवाइस पर अच्छी तरह काम करती है और कंटेंट के लिए पर्याप्त जगह देती है. मोबाइल के लिए ईमेल रेस्पॉन्सिव होने चाहिए और स्क्रीन की चौड़ाई के हिसाब से ढलने चाहिए, जिसमें कई कॉलम वाले लेआउट आमतौर पर एक कॉलम में बदल जाते हैं.

मुझे अपने न्यूज़लेटर में कितनी तस्वीरें रखनी चाहिए?

तस्वीरों की कोई तय संख्या नहीं है. संदेश को सहारा देने लायक तस्वीरें रखें, लेकिन ईमेल तब भी समझ में आना चाहिए जब तस्वीरें ब्लॉक हों. ज़्यादातर न्यूज़लेटर में ज़रूरी बातों के लिए असली टेक्स्ट, अर्थपूर्ण तस्वीरों के लिए वर्णनात्मक alt टेक्स्ट, कम आकार वाली फ़ाइलें और एक प्लेन-टेक्स्ट विकल्प होना चाहिए. सिर्फ़ तस्वीरों वाले न्यूज़लेटर से बचें.

ईमेल न्यूज़लेटर के लिए कौन से फ़ॉन्ट सबसे अच्छे रहते हैं?

**Arial, Helvetica, Georgia और Verdana** जैसे वेब-सेफ़ फ़ॉन्ट सभी ईमेल क्लाइंट पर एक जैसे दिखते हैं. आप सही फ़ॉलबैक के साथ वेब फ़ॉन्ट (Google Fonts, Adobe Fonts) इस्तेमाल कर सकते हैं, लेकिन ध्यान रखें कि Outlook जैसे कुछ क्लाइंट फ़ॉलबैक फ़ॉन्ट ही दिखाएंगे. साफ़ और पेशेवर डिज़ाइन के लिए ज़्यादा से ज़्यादा 1 से 2 फ़ॉन्ट परिवार तक सीमित रहें.

मैं अपने ईमेल को सुलभ कैसे बनाऊं?

सुलभता के मुख्य तरीक़े ये हैं: सभी तस्वीरों पर **alt टेक्स्ट** दें, टेक्स्ट के लिए **4.5:1 रंग कंट्रास्ट** बनाए रखें, **वर्णनात्मक लिंक टेक्स्ट** इस्तेमाल करें (यहां क्लिक करें जैसा नहीं), **कम से कम 14 से 16px फ़ॉन्ट आकार** रखें, एक **प्लेन-टेक्स्ट संस्करण** दें, और कंटेंट को **सही हेडिंग पदानुक्रम** में रखें. जहां संभव हो, स्क्रीन रीडर से टेस्ट करें.

क्या मुझे न्यूज़लेटर के लिए डार्क मोड डिज़ाइन करना चाहिए?

हां, आपको डार्क मोड पर ज़रूर विचार करना चाहिए, क्योंकि बड़े ईमेल क्लाइंट रंगों को अलग-अलग तरीक़ों से बदल सकते हैं. डिज़ाइन सुझाव: सिर्फ़ बैकग्राउंड रंग पर निर्भर न रहें, ज़रूरत पड़ने पर लोगो के अलग रूप दें, पारदर्शी PNG सावधानी से इस्तेमाल करें, दोनों मोड में कंट्रास्ट जांचें, और अहम टेम्पलेट उन क्लाइंट पर टेस्ट करें जिन्हें आपकी ऑडियंस वाकई इस्तेमाल करती है.

ईमेल के लिए सबसे अच्छा इमेज फ़ॉर्मैट कौन सा है?

फ़ोटोग्राफ़ और कई रंगों वाली जटिल तस्वीरों के लिए **JPEG** सबसे अच्छा है. पारदर्शिता वाले ग्राफ़िक, लोगो और टेक्स्ट वाली तस्वीरों के लिए **PNG** आदर्श है. सादे एनिमेशन के लिए **GIF** काम करता है. **WebP** बेहतर कम्प्रेशन देता है लेकिन ईमेल क्लाइंट में इसका सपोर्ट सीमित है, इसलिए हमेशा फ़ॉलबैक दें. मुख्य तस्वीरों की फ़ाइल 200KB से कम रखें और पूरे ईमेल का आकार 1MB से कम रखने का लक्ष्य रखें.

मैं अपने ईमेल न्यूज़लेटर का क्लिक रेट कैसे बेहतर करूं?

क्लिक रेट सुधारने के लिए: मुख्य CTA आसानी से दिखने वाला बनाएं, वर्णनात्मक बटन टेक्स्ट इस्तेमाल करें, मोबाइल के लिए टैप करने की जगह पर्याप्त बड़ी रखें, आपस में टकराने वाली कार्रवाइयां घटाएं, ऐसा संदेश लिखें जो सब्सक्राइबर की मंशा से मेल खाता हो, और एक बार में एक ही अर्थपूर्ण डिज़ाइन या कॉपी बदलकर टेस्ट करें. ओपन और क्लिक को नैदानिक संकेत मानें, और जहां संभव हो अहम न्यूज़लेटर को कन्वर्शन या राजस्व के नतीजों से जोड़ें.

मुझे अपना न्यूज़लेटर डिज़ाइन कितनी बार बदलना चाहिए?

पहचान बनाए रखने के लिए **एक जैसी ब्रांडिंग** रखें, और प्रदर्शन डेटा के आधार पर **छोटे सुधार लगातार** करते रहें. डिज़ाइन ट्रेंड के साथ बने रहने के लिए हर 12 से 18 महीने में **बड़े डिज़ाइन बदलाव** पर विचार करें. बड़े बदलाव पूरी लिस्ट पर लागू करने से पहले हमेशा A/B टेस्ट करें. मौसमी बदलाव और विशेष संस्करण डिज़ाइन ब्रांड की निरंतरता खोए बिना विविधता ला सकते हैं.

यह लेख साझा करें:

सभी लेखों पर वापस जाएँ

business-tools

CRM के साथ ईमेल मार्केटिंग: आपको दोनों की आवश्यकता क्यों है (और उन्हें कैसे जोड़ें)

1 मई 2026

email-marketing

शुरुआती लोगों के लिए ईमेल मार्केटिंग: पूर्ण चरण-दर-चरण गाइड (2026)

1 मई 2026