न्यूज़लेटर

न्यूज़लेटर डिज़ाइन गाइड

लेआउट सर्वोत्तम अभ्यास, टाइपोग्राफ़ी सुझाव और विज़ुअल रणनीतियों के साथ न्यूज़लेटर डिज़ाइन में महारत हासिल करें। ऐसे ईमेल न्यूज़लेटर बनाएं जो प्रोफेशनल दिखें और एंगेजमेंट बढ़ाएं।

Set Noa
Set Noa
अपडेट किया गया
0 विज़िट · 7 दिन
newsletter design
न्यूज़लेटर डिज़ाइन गाइड?

न्यूज़लेटर डिज़ाइन को पठनीयता, मोबाइल रिस्पॉन्सिवनेस और विज़ुअल सुसंगतता को प्राथमिकता देनी चाहिए। यह गाइड लेआउट रणनीतियों, टाइपोग्राफ़ी, रंग उपयोग, इमेज ऑप्टिमाइज़ेशन और ऐसे न्यूज़लेटर बनाने के लिए डिज़ाइन टूल्स को कवर करती है जिन्हें सब्सक्राइबर्स पढ़ना चाहें।

और जानें

न्यूज़लेटर डिज़ाइन वह अदृश्य संरचना है जो यह तय करती है कि सब्सक्राइबर आपकी सामग्री पढ़ते हैं या उसे डिलीट करते हैं। एक अच्छी तरह से डिज़ाइन किया गया न्यूज़लेटर नज़र को स्वाभाविक रूप से हेडलाइन से सामग्री तक और फिर एक्शन तक ले जाता है। खराब तरीके से डिज़ाइन किया गया न्यूज़लेटर दृश्य अव्यवस्था उत्पन्न करता है जो पाठकों को दूर भगाता है, चाहे सामग्री कितनी भी मूल्यवान क्यों न हो।

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

चार टेम्पलेट, चलते हुए

इस खंड के नीचे जो कुछ है वह लेआउट के बारे में दावा है, और लेआउट के दावे सस्ते होते हैं। तो यह रहे चार न्यूज़लेटर, चलते हुए।

हर एक असली चौड़ाई वाले फ़्रेम में बैठा है और अपना HTML दिखा रहा है। चौड़ाई 375 px कीजिए और देखिए कौन-से कॉलम एक के नीचे एक लगते हैं और कौन-से मना करते हैं। पैनल उसी थीम के साथ चलते हैं जिसमें आप यह पृष्ठ पढ़ रहे हैं: गहरे मोड में आप हर टेम्पलेट का असली गहरा ब्लॉक देखते हैं, उसकी नकल नहीं। स्रोत कोड हर पैनल के नीचे है।

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 Letter उस लेखक के लिए है जिसका पूरा मूल्य पाठ है। एक छवि, 88 px के हाशिये, बटन की जगह पाठ लिंक। निजी चिट्ठी में बटन विज्ञापन जैसा पढ़ा जाता है।
  • The Digest उस संकलन के लिए है जिस पर सरसरी नज़र डाली जाती है। क्रमांकित पंक्तियाँ, हर शीर्षक से पहले पढ़ने का समय, और छह के बजाय नीचे एक ही आह्वान।
  • The Storefront किसी पेशकश के लिए है। यह इकलौता लेआउट है जिसमें छवि से शुरू करना सही है, और फिर भी यह ऐसे बना है कि छवि चूक सकती है।
  • The Brief आँकड़ों के लिए है। बाकी सबसे ऊपर तीन मापक, और PNG के बजाय तालिका कोशिकाओं से बना बार चार्ट।

इनमें साझा वही हिस्सा है जिसे नकल करने लायक है। 600 px का एक कॉलम। कम से कम 16 px का मुख्य पाठ। एक उभार रंग और बाकी सबके लिए स्याही। हर छवि वैकल्पिक पाठ रखती है, और हर लेआउट छवियों के रुके होने पर भी अर्थ रखता है। घोषित रंग योजना और साफ़-साफ़ लिखा गहरा ब्लॉक, क्योंकि गहरे क्लाइंट में तयशुदा व्यवहार यही है कि आपका ईमेल उस एल्गोरिद्म से उलट दिया जाए जिसने आपका ब्रांड कभी देखा ही नहीं।

इनमें से एक हमने पहली बार में ग़लत बनाया, और उसी का नाम लेना काम का है। The Digest पहले मोबाइल पर लेखों की पंक्तियाँ एक के नीचे एक लगाता था — ठीक वही जो हर रिस्पॉन्सिव ईमेल गाइड सलाह देती है। इस तरह लगने से 112 px के तीन थंबनेल 335 px ऊँची पूरी चौड़ाई की तीन सजावटी छवियों में बदल गए, और छह विषयों का संकलन एक लंबा स्क्रॉल बन गया। अब वह पंक्ति इस समूह का इकलौता दो-कॉलम लेआउट है जो एक के नीचे एक नहीं लगती। एक के नीचे एक लगने के नियम सामग्री के कॉलम पर लागू होते हैं। थंबनेल सामग्री का कॉलम नहीं है।

इनमें से कोई एक Brevo में कैसे बनाएँ

ऊपर के चारों टेम्पलेट में से किसी को जोड़ने के लिए डेवलपर की ज़रूरत नहीं। नीचे की हर स्क्रीन वही टेम्पलेट है, Brevo के खींचो-और-छोड़ो कैनवास पर, एक ब्लॉक चुना हुआ।

मुख्य बटन से शुरू करते हैं, क्योंकि सेटिंग्स सबसे ज़्यादा उसी ब्लॉक में हैं:

Brevo

कैनवास पर The Storefront

Brevo का खींचो-और-छोड़ो ईमेल संपादक, कैनवास पर The Storefront टेम्पलेट, मुख्य बटन चुना हुआ, और दाएँ पैनल में उसके लेबल, लिंक, रंग, कोने की गोलाई और भीतरी जगह की सेटिंग्स
बाईं ओर: वे ब्लॉक जो आप खींचकर लाते हैं। दाईं ओर: चुने हुए ब्लॉक की हर बात। कैनवास पर 680 px चौड़े क्लाइंट के भीतर 600 px चौड़ा ईमेल है — इसीलिए मोबाइल लेआउट नहीं दिखता: ठीक 600 px पर टेम्पलेट का अपना ब्रेकपॉइंट चल पड़ता और आप फ़ोन वाला संस्करण संपादित कर रहे होते, जबकि स्विच कहता डेस्कटॉप।

बाईं ओर का हर ब्लॉक ऊपर के टेम्पलेट की किसी न किसी चीज़ से मेल खाता है। ढाँचे के लिए पाठ, छवि, बटन, विभाजक और खाली जगह। दुकान की पंक्ति के लिए उत्पाद। और जो कुछ संपादक नहीं दर्शाता उसके लिए HTML — The Brief का चार्ट ठीक इसी तरह बना है:

Brevo

ऐसा चार्ट जिसमें एक भी छवि नहीं

Brevo का ईमेल संपादक, कैनवास पर The Brief टेम्पलेट, बार चार्ट चुना हुआ, और दायाँ पैनल दिखाता है कि यह बिना छवि के तालिका कोशिकाओं से बना है
PNG के रूप में निर्यात किया चार्ट अपने आँकड़े छवि रुकने, गहरे मोड के उलटाव और हर स्क्रीन रीडर के आगे खो देता है। रंगीन कोशिका और पाठ लेबल वाली चार तालिका पंक्तियाँ एक भी नहीं खोतीं, और उनका कोई वज़न नहीं।

टाइपोग्राफ़ी भी ऐसे ही चलती है। एक पाठ ब्लॉक चुनिए और पैनल आपको फ़ॉन्ट, आकार, पंक्ति ऊँचाई और भीतरी जगह देता है — यही पूरा औज़ार The Letter को चाहिए:

Brevo

उद्धरण यानी किनारे रेखा वाला एक पाठ ब्लॉक

Brevo का ईमेल संपादक, कैनवास पर The Letter टेम्पलेट और उसका उद्धरण चुना हुआ: 30px पर Georgia 19px, तिरछा, 3px की बाईं रेखा के साथ
कोई विशेष कंपोनेंट नहीं। एक पाठ ब्लॉक, उभार रंग में 3 px की बाईं रेखा, और 20 px की भीतरी जगह। अच्छे न्यूज़लेटर में जो कुछ ख़ास डिज़ाइन जैसा दिखता है, वह अक्सर दो गुण बदला हुआ मानक ब्लॉक ही होता है।

और छवियों का अपना पैनल है, जहाँ वैकल्पिक पाठ सबसे ऊपर है, सेटिंग्स की सूची के अंत में नहीं:

Brevo

वैकल्पिक पाठ एक ख़ाना है, बाद में सूझा ख़याल नहीं

Brevo का ईमेल संपादक, कैनवास पर The Digest और एक लेख का थंबनेल चुना हुआ, जिसमें उसका वैकल्पिक पाठ, 112px प्रदर्शन आकार, 480px स्रोत और 17 KB वज़न दिख रहा है
प्रदर्शन आकार 112 px, स्रोत 480 px — यही 2× अनुपात थंबनेल को रेटिना स्क्रीन पर साफ़ रखता है। वैकल्पिक पाठ पहले है क्योंकि छवि का यही हिस्सा अधिकांश ग्राहकों तक सचमुच पहुँचेगा।

Tajo इस्तेमाल करने वाले व्यवसायों के लिए यही खंड गतिशील रूप से भरे जा सकते हैं: ग्राहकों के व्यवहार से चलने वाली उत्पाद सिफ़ारिशें और वैयक्तिक सामग्री, जो हर भेजाई पर हाथ से चुनने के बजाय आपके यहाँ रखे ब्लॉकों में उतर आती हैं।

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

डिज़ाइन सामग्री की सेवा करता है

न्यूज़लेटर डिज़ाइन का सबसे महत्वपूर्ण सिद्धांत: डिज़ाइन को सामग्री को उपभोग करना आसान बनाना चाहिए, कभी कठिन नहीं। हर डिज़ाइन निर्णय को इस प्रश्न का उत्तर देना चाहिए: क्या यह मेरे पाठक को वह जानकारी खोजने और समझने में मदद करता है जिसके लिए वे आए थे?

अच्छे न्यूज़लेटर डिज़ाइन के संकेत:

  • पाठक 10-15 सेकंड में पूरे न्यूज़लेटर को स्कैन कर सकते हैं
  • सबसे महत्वपूर्ण सामग्री तुरंत दिखाई देती है
  • प्रत्येक सेक्शन का स्पष्ट शुरुआत और अंत होता है
  • CTA बिना परेशान किए अलग दिखता है
  • न्यूज़लेटर जानबूझकर बनाया हुआ लगता है, अकस्मात नहीं

खराब न्यूज़लेटर डिज़ाइन के संकेत:

  • पाठक मुख्य सामग्री जल्दी नहीं खोज पाते
  • कई डिज़ाइन शैलियाँ ध्यान के लिए प्रतिस्पर्धा करती हैं
  • किसी भी डिवाइस पर टेक्स्ट पढ़ना मुश्किल है
  • मोबाइल स्क्रीन पर लेआउट टूट जाता है
  • बिना किसी विज़ुअल ब्रेक के टेक्स्ट के घने ब्लॉक

विज़ुअल हायरार्की का सिद्धांत

विज़ुअल हायरार्की उस क्रम को नियंत्रित करती है जिसमें पाठक जानकारी संसाधित करते हैं। न्यूज़लेटर में, इनके माध्यम से हायरार्की स्थापित करें:

हायरार्की स्तरतत्वडिज़ाइन उपचार
प्राथमिकमुख्य हेडलाइनसबसे बड़ा फ़ॉन्ट, बोल्ड, शीर्ष स्थान
द्वितीयकसेक्शन हेडरमध्यम फ़ॉन्ट, विपरीत रंग
तृतीयकबॉडी सामग्रीमानक फ़ॉन्ट, पठनीय आकार
सहायकमेटाडेटा (तिथियाँ, लेखक)छोटा फ़ॉन्ट, हल्का रंग
एक्शनCTA बटन/लिंकविपरीत रंग, बटन स्टाइलिंग

लेआउट रणनीतियाँ

सिंगल-कॉलम लेआउट

सिंगल-कॉलम लेआउट न्यूज़लेटर के लिए स्वर्ण मानक है और अधिकांश प्रकाशकों के लिए अनुशंसित दृष्टिकोण है।

फायदे:

  • हर डिवाइस और स्क्रीन साइज़ पर परफेक्ट रेंडर होता है
  • ऊपर से नीचे तक प्राकृतिक रीडिंग फ्लो बनाता है
  • डिज़ाइन निर्णयों को सरल बनाता है
  • email क्लाइंट में रेंडरिंग समस्याओं को कम करता है
  • मोबाइल पर लोग जिस तरह पढ़ते हैं उससे मेल खाता है (वर्टिकल स्क्रॉलिंग)

सबसे अच्छा: टेक्स्ट-फोकस्ड न्यूज़लेटर, व्यक्तिगत न्यूज़लेटर, शैक्षिक सामग्री, लंबे-फॉर्म विश्लेषण

संरचना:

  1. हेडर (लोगो, अंक संख्या, तारीख)
  2. परिचय या व्यक्तिगत नोट
  3. मुख्य सामग्री सेक्शन
  4. द्वितीयक सामग्री सेक्शन (डिवाइडर द्वारा अलग)
  5. CTA या एंगेजमेंट प्रॉम्प्ट
  6. फुटर

कार्ड-आधारित लेआउट

सामग्री को अलग-अलग विज़ुअल कार्ड में व्यवस्थित करें, प्रत्येक का अपना बॉर्डर, बैकग्राउंड या शैडो हो।

फायदे:

  • स्पष्ट सामग्री अलगाव
  • क्यूरेटेड सामग्री और लिंक राउंडअप के लिए अच्छा काम करता है
  • प्रत्येक कार्ड का अपना इमेज और CTA हो सकता है
  • बिना अभिभूत किए दृश्य रूप से आकर्षक

सबसे अच्छा: सामग्री राउंडअप, क्यूरेटेड लिंक, उत्पाद शोकेस, मल्टी-टॉपिक न्यूज़लेटर

कार्ड के लिए डिज़ाइन टिप्स:

  • सुसंगत कार्ड आयाम और स्पेसिंग का उपयोग करें
  • प्रति पंक्ति अधिकतम 2 कार्ड रखें (मोबाइल पर 1 पर स्टैक करें)
  • कार्ड को परिभाषित करने के लिए सूक्ष्म बॉर्डर या बैकग्राउंड रंग शामिल करें
  • प्रत्येक कार्ड के अंदर सुसंगत पैडिंग बनाए रखें

हाइब्रिड लेआउट

पूरक सामग्री के लिए एक प्राथमिक कंटेंट कॉलम को एक संकरे साइडबार के साथ मिलाएं।

फायदे:

  • email की लंबाई बढ़ाए बिना अधिक सामग्री फिट करता है
  • प्राथमिक और द्वितीयक दोनों सामग्री वाले न्यूज़लेटर के लिए काम करता है
  • पारंपरिक प्रकाशनों का परिचित प्रारूप

सीमाएं:

  • मोबाइल पर सिंगल कॉलम में ढहना चाहिए
  • बनाना और बनाए रखना अधिक जटिल
  • यदि अच्छी तरह से व्यवस्थित नहीं है तो अव्यवस्थित लग सकता है

सबसे अच्छा: कंपनी न्यूज़लेटर, मीडिया-शैली के प्रकाशन, सामग्री-भारी प्रारूप

न्यूज़लेटर के लिए टाइपोग्राफी

टाइपोग्राफी किसी भी टेक्स्ट-भारी email में सबसे प्रभावशाली डिज़ाइन तत्व है। फ़ॉन्ट सही हो जाएं, और बाकी सब अपने आप सही हो जाता है।

फ़ॉन्ट चयन

email क्लाइंट में सीमित फ़ॉन्ट समर्थन है। अपनी प्राथमिक पसंद के रूप में वेब-सेफ फ़ॉन्ट का उपयोग करें:

फ़ॉन्टशैलीसबसे अच्छा
Arialक्लीन, मॉडर्न sans-serifसामान्य उद्देश्य, व्यवसाय
Helveticaपरिष्कृत sans-serifप्रीमियम ब्रांड
Georgiaसुरुचिपूर्ण serifसंपादकीय, लंबे-फॉर्म
Times New Romanक्लासिक serifपारंपरिक, औपचारिक
Verdanaचौड़ा, पठनीय sans-serifछोटा टेक्स्ट, मोबाइल
Trebuchet MSमॉडर्न sans-serifक्रिएटिव, कैज़ुअल

वेब फ़ॉन्ट: आप वेब-सेफ फॉलबैक के साथ वेब फ़ॉन्ट (जैसे Open Sans या Lato) निर्दिष्ट कर सकते हैं। ये Apple Mail, iOS Mail और कुछ Android क्लाइंट में रेंडर होते हैं, लेकिन Outlook और पुराने Gmail में सेफ विकल्प पर वापस आ जाते हैं।

फ़ॉन्ट साइज़िंग

तत्वन्यूनतम साइज़अनुशंसित साइज़
बॉडी टेक्स्ट14px16px
सेक्शन हेडर20px22-24px
मुख्य हेडलाइन24px28-32px
कैप्शन/मेटाडेटा12px13-14px
CTA बटन टेक्स्ट14px16px
प्रीहेडर टेक्स्ट12px14px

लाइन स्पेसिंग और पठनीयता

  • लाइन हाइट: बॉडी टेक्स्ट के लिए 1.4-1.6 (16px फ़ॉन्ट साइज़ पर 24-26px)
  • पैराग्राफ स्पेसिंग: पैराग्राफ के बीच 16-24px
  • लाइन लंबाई: प्रति पंक्ति 50-75 अक्षर (आंखों की थकान रोकता है)
  • लेटर स्पेसिंग: बॉडी टेक्स्ट के लिए डिफ़ॉल्ट, छोटे टेक्स्ट के लिए थोड़ा बढ़ाया

टेक्स्ट फॉर्मेटिंग

  • Bold: मुख्य वाक्यांशों और ज़ोर के लिए उपयोग करें, पूरे पैराग्राफ के लिए नहीं
  • Italic: उद्धरण, शीर्षक या सूक्ष्म ज़ोर के लिए संयम से उपयोग करें
  • Underline: केवल लिंक के लिए आरक्षित करें (गैर-लिंक टेक्स्ट को अंडरलाइन करने से पाठक भ्रमित होते हैं)
  • ALL CAPS: केवल छोटे लेबल या बटन के लिए उपयोग करें, कभी बॉडी टेक्स्ट के लिए नहीं
  • Color: लिंक के लिए एक एक्सेंट रंग का उपयोग करें, बॉडी टेक्स्ट को गहरा ग्रे (#333) या लगभग-काला रखें

रंग रणनीति

न्यूज़लेटर कलर पैलेट बनाना

अपने न्यूज़लेटर को 3-4 रंगों तक सीमित करें:

रंग भूमिकाउपयोगउदाहरण
प्राथमिकहेडर, CTA बटन, एक्सेंटब्रांड ब्लू
टेक्स्टबॉडी कॉपी, सबहेडरगहरा ग्रे (#333333)
बैकग्राउंडemail बॉडीसफेद (#FFFFFF) या हल्का ग्रे (#F5F5F5)
एक्सेंटलिंक, हाइलाइट, द्वितीयक CTAब्रांड द्वितीयक रंग

रंग पहुँच

  • टेक्स्ट और बैकग्राउंड के बीच न्यूनतम 4.5:1 कंट्रास्ट अनुपात बनाए रखें
  • जानकारी व्यक्त करने के लिए केवल रंग पर निर्भर न रहें
  • कलर ब्लाइंडनेस सिमुलेटर से अपने पैलेट का परीक्षण करें
  • सुनिश्चित करें कि लिंक नियमित टेक्स्ट से अलग दिखें (अंडरलाइन का उपयोग करें, केवल रंग नहीं)

डार्क मोड विचार

अब कई email क्लाइंट डिफ़ॉल्ट रूप से डार्क मोड में हैं। डार्क मोड को ध्यान में रखकर डिज़ाइन करें:

  • शुद्ध सफेद (#FFFFFF) बैकग्राउंड से बचें — हल्के ऑफ-व्हाइट (#FAFAFA) का उपयोग करें
  • डार्क तत्वों के साथ पारदर्शी PNG का उपयोग न करें (वे डार्क मोड में गायब हो जाते हैं)
  • लोगो को हल्के और डार्क दोनों बैकग्राउंड पर टेस्ट करें
  • डार्क मोड कलर स्कीम समर्थन के लिए meta टैग जोड़ें
  • डार्क इमेज पर बॉर्डर या आउटलाइन का उपयोग करें ताकि वे दिखाई दें

न्यूज़लेटर में इमेज का उपयोग

इमेज कब उपयोग करें

इमेज को वह मूल्य जोड़ना चाहिए जो केवल टेक्स्ट प्रदान नहीं कर सकता:

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

इमेज ऑप्टिमाइज़ेशन

विनिर्देशअनुशंसा
फॉर्मेटफोटो के लिए JPEG, ग्राफिक्स के लिए PNG
चौड़ाई600px मानक, रेटिना के लिए 1200px
फ़ाइल साइज़प्रति इमेज 200KB से कम
कुल email साइज़इमेज को छोड़कर 100KB से कम
Alt टेक्स्टवर्णनात्मक, 125 अक्षर या कम
आस्पेक्ट अनुपातहीरो इमेज के लिए 2:1, थंबनेल के लिए 1:1

इमेज-से-टेक्स्ट अनुपात

स्पैम फिल्टर से बचने और पठनीयता सुनिश्चित करने के लिए स्वस्थ टेक्स्ट-से-इमेज अनुपात बनाए रखें:

  • 60:40 टेक्स्ट से इमेज अनुशंसित अनुपात है
  • जो email मुख्य रूप से इमेज हैं (केवल-इमेज email) में स्पैम दर अधिक होती है
  • हमेशा मुख्य जानकारी के टेक्स्ट संस्करण शामिल करें, केवल इमेज में नहीं
  • इमेज-ब्लॉक्ड क्लाइंट के लिए डिज़ाइन करें: इमेज के बिना आपका न्यूज़लेटर समझ में आना चाहिए

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

मोबाइल डिज़ाइन आवश्यकताएं

मोबाइल डिवाइस पर 60% से अधिक न्यूज़लेटर ओपन के साथ, मोबाइल डिज़ाइन वैकल्पिक नहीं है।

मोबाइल लेआउट नियम:

  • अधिकतम सामग्री चौड़ाई: 600px (सभी डिवाइस पर अच्छी तरह से प्रदर्शित होती है)
  • न्यूनतम टैप टार्गेट: बटन और लिंक के लिए 44x44 पिक्सेल
  • न्यूनतम फ़ॉन्ट साइज़: मोबाइल पर बॉडी टेक्स्ट के लिए 16px
  • सिंगल कॉलम लेआउट जो स्वाभाविक रूप से स्टैक होता है
  • मोबाइल पर फुल-विड्थ CTA बटन
  • क्लिक करने योग्य तत्वों के बीच पर्याप्त स्पेसिंग (गलती से टैप रोकें)

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

तकनीकडेस्कटॉपमोबाइल
मल्टी-कॉलम सेक्शनसाइड बाय साइडवर्टिकली स्टैक्ड
इमेजसामग्री के भीतर साइज़फुल विड्थ, स्केल्ड
नेविगेशन लिंकहॉरिजॉन्टलस्टैक्ड या छुपे
CTA बटनइनलाइन या राइट-अलाइन्डफुल विड्थ
फ़ॉन्ट साइज़मानकथोड़े बड़े
पैडिंग20-40px15-20px

मोबाइल रेंडरिंग टेस्टिंग

अपने न्यूज़लेटर डिज़ाइन का परीक्षण इन पर करें:

  • iPhone (Safari/Mail)
  • Android (Gmail app)
  • iPad
  • Gmail (web)
  • Outlook (desktop और web)
  • Apple Mail (desktop)

90+ email क्लाइंट में स्वचालित रेंडरिंग परीक्षण के लिए Litmus या Email on Acid जैसे टूल का उपयोग करें।

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

हेडर

आपका हेडर पहचान स्थापित करता है और अपेक्षाएं निर्धारित करता है:

  • Logo: उचित आकार में (बहुत बड़ा नहीं, आमतौर पर 150-200px चौड़ा)
  • अंक पहचानकर्ता: अंक संख्या, तारीख या संस्करण नाम
  • ऑनलाइन देखें लिंक: उन सब्सक्राइबर के लिए जिन्हें रेंडरिंग समस्याएं हैं
  • इसे संक्षिप्त रखें: हेडर को सामग्री को फोल्ड के नीचे नहीं धकेलना चाहिए

सेक्शन डिवाइडर

सामग्री सेक्शन के बीच स्पष्ट डिवाइडर पाठकों को स्कैन करने में मदद करते हैं:

  • हॉरिजॉन्टल रूल: तटस्थ रंग में सरल, पतली रेखाएं (1-2px)
  • बैकग्राउंड रंग परिवर्तन: सफेद और हल्के ग्रे सेक्शन के बीच वैकल्पिक करें
  • अतिरिक्त स्पेसिंग: सेक्शन के बीच 30-40px की पैडिंग
  • सेक्शन हेडर: सुसंगत स्टाइलिंग के साथ बोल्ड, बड़ा टेक्स्ट

फुटर

अच्छी तरह से डिज़ाइन किया गया फुटर अनुभव को पूरा करता है:

  • अनसब्सक्राइब लिंक (कानूनी रूप से आवश्यक, इसे खोजना आसान रखें)
  • सोशल मीडिया लिंक
  • भौतिक मेलिंग पता (CAN-SPAM आवश्यकता)
  • ब्राउज़र में देखें लिंक
  • किसी मित्र को अग्रेषित करें विकल्प
  • संक्षिप्त ब्रांड टैगलाइन या मिशन स्टेटमेंट

न्यूज़लेटर डिज़ाइन टूल

प्लेटफ़ॉर्म एडिटर

अधिकांश न्यूज़लेटर प्लेटफ़ॉर्म में बिल्ट-इन डिज़ाइन एडिटर शामिल हैं:

प्लेटफ़ॉर्मएडिटर प्रकारडिज़ाइन लचीलापनटेम्पलेट लाइब्रेरी
Brevoड्रैग-एंड-ड्रॉपउच्च40+ टेम्पलेट
Mailchimpड्रैग-एंड-ड्रॉपउच्च100+ टेम्पलेट
ConvertKitसरलीकृत एडिटरमध्यमसीमित
Substackटेक्स्ट-फोकस्डकमन्यूनतम

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

डिज़ाइन संसाधन

  • Canva: न्यूज़लेटर हेडर इमेज, सोशल ग्राफिक्स और इलस्ट्रेशन बनाएं
  • Unsplash/Pexels: मुफ़्त स्टॉक फोटोग्राफी
  • Really Good Emails: अच्छी तरह से डिज़ाइन किए गए email की प्रेरणा गैलरी
  • MJML: कस्टम डिज़ाइन के लिए ओपन-सोर्स email फ्रेमवर्क
  • Figma: email प्लगइन एक्सपोर्ट के साथ कस्टम न्यूज़लेटर टेम्पलेट डिज़ाइन करें

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

कोई भी न्यूज़लेटर भेजने से पहले, सत्यापित करें:

लेआउट:

  • सिंगल-कॉलम लेआउट या उचित रूप से रिस्पॉन्सिव मल्टी-कॉलम
  • सामग्री चौड़ाई 600px या कम है
  • हेडर से फुटर तक स्पष्ट विज़ुअल हायरार्की
  • सेक्शन स्पष्ट रूप से अलग हैं

टाइपोग्राफी:

  • बॉडी टेक्स्ट 16px या बड़ा है
  • लाइन हाइट 1.4-1.6 है
  • हेडर स्पष्ट सामग्री संरचना बनाते हैं
  • लिंक टेक्स्ट वर्णनात्मक है (“यहाँ क्लिक करें” नहीं)

इमेज:

  • सभी इमेज में alt टेक्स्ट है
  • इमेज फ़ाइल साइज़ के लिए ऑप्टिमाइज़ की गई हैं
  • न्यूज़लेटर इमेज के बिना पठनीय है
  • हाई-DPI डिस्प्ले के लिए रेटिना इमेज प्रदान की गई हैं

मोबाइल:

  • iPhone और Android पर टेस्ट किया गया
  • CTA बटन मोबाइल पर फुल विड्थ हैं
  • फ़ॉन्ट साइज़ छोटी स्क्रीन पर पठनीय हैं
  • टैप टार्गेट न्यूनतम 44px हैं

पहुँच:

  • रंग कंट्रास्ट 4.5:1 अनुपात पूरा करता है
  • सामग्री उचित हेडिंग के साथ संरचित है
  • कोई जानकारी केवल रंग से नहीं बताई गई
  • स्क्रीन रीडर संगत

ब्रांड:

  • रंग ब्रांड पैलेट से मेल खाते हैं
  • Logo सही ढंग से साइज़ और स्थित है
  • टोन और आवाज़ ब्रांड के अनुरूप है
  • फुटर में सभी आवश्यक कानूनी तत्व शामिल हैं

अपने न्यूज़लेटर डिज़ाइन को विकसित करना

न्यूज़लेटर डिज़ाइन एक बार का प्रोजेक्ट नहीं है। प्रदर्शन डेटा और सब्सक्राइबर फीडबैक के आधार पर अपने डिज़ाइन को विकसित करें:

  • स्क्रॉल डेप्थ ट्रैक करें: क्या पाठक आपके न्यूज़लेटर के नीचे तक पहुंच रहे हैं?
  • क्लिक मैप मॉनिटर करें: कौन से सेक्शन को सबसे अधिक क्लिक मिलते हैं? समान सामग्री को बढ़ावा दें।
  • सब्सक्राइबर का सर्वे करें: वार्षिक डिज़ाइन प्राथमिकताओं के बारे में पूछें
  • A/B टेस्ट लेआउट: कार्ड बनाम लीनियर लेआउट, इमेज प्लेसमेंट और CTA शैलियों की तुलना करें
  • प्रतिस्पर्धियों की समीक्षा करें: अपनी जगह में सफल न्यूज़लेटर में जो काम करता है उसका अध्ययन करें

सबसे अच्छे न्यूज़लेटर डिज़ाइन अदृश्य होते हैं। सब्सक्राइबर डिज़ाइन पर ध्यान नहीं देते, वे सामग्री पर ध्यान देते हैं। इसका मतलब है कि डिज़ाइन अपना काम परफेक्टली कर रहा है: घर्षण हटाना, ध्यान निर्देशित करना और पढ़ने के अनुभव को सहज बनाना।

सरल शुरू करें, सुसंगत रहें और डेटा के आधार पर परिष्कृत करें। आपका न्यूज़लेटर डिज़ाइन आपके दर्शकों के साथ विकसित होना चाहिए, उनसे आगे नहीं।

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

एक अच्छा न्यूज़लेटर डिज़ाइन किससे बनता है?
अच्छा न्यूज़लेटर डिज़ाइन स्पष्ट विज़ुअल पदानुक्रम, सुसंगत ब्रांडिंग, पठनीय टाइपोग्राफ़ी (न्यूनतम 16px), मोबाइल संगतता के लिए सिंगल-कॉलम लेआउट, और व्हाइट स्पेस के रणनीतिक उपयोग का उपयोग करता है। यह पाठक की नज़र को हेडलाइन से कंटेंट और फिर कॉल-टू-एक्शन तक ले जाता है।
क्या न्यूज़लेटर टेक्स्ट-प्रधान होने चाहिए या इमेज-प्रधान?
आदर्श संतुलन आपके कंटेंट प्रकार पर निर्भर करता है, लेकिन अधिकांश न्यूज़लेटर 60/40 टेक्स्ट-टू-इमेज अनुपात के साथ सबसे अच्छा प्रदर्शन करते हैं। टेक्स्ट-प्रथम डिज़ाइन इमेज ब्लॉक होने पर पठनीयता सुनिश्चित करते हैं और डिलीवरेबिलिटी बेहतर करते हैं। इमेज का उपयोग कंटेंट को सहारा देने के लिए करें, उसे बदलने के लिए नहीं।
सबसे अच्छा न्यूज़लेटर लेआउट क्या है?
सिंगल-कॉलम लेआउट न्यूज़लेटर के लिए सबसे प्रभावी है क्योंकि यह सभी डिवाइस पर काम करता है, स्कैन करना आसान है, और रैखिक प्रवाह में ध्यान निर्देशित करता है। सिंगल कॉलम के भीतर कंटेंट व्यवस्थित करने के लिए स्पष्ट सेक्शन डिवाइडर और सुसंगत फॉर्मेटिंग का उपयोग करें।
यह लेख साझा करें:
सभी लेखों पर वापस जाएँ

अर्ली एक्सेस का अनुरोध करें

अपना नाम और ईमेल या फ़ोन नंबर दर्ज करें. हम Tajo एक्सेस की जानकारी के साथ आपसे संपर्क करेंगे.

ऑटो डिटेक्ट

संबंधित लेख

newsletter

ईमेल न्यूज़लेटर: असरदार न्यूज़लेटर बनाने की पूरी गाइड

newsletter

फ्री न्यूज़लेटर टेम्प्लेट्स

newsletter

न्यूज़लेटर साइनअप ऑप्टिमाइज़ेशन

wordpress

WordPress न्यूज़लेटर गाइड: प्लगइन, साइनअप फ़ॉर्म, सेंडिंग, ऑटोमेशन और डिलीवरेबिलिटी (2026)

business-tools

Brevo के विकल्प: 8 प्लेटफ़ॉर्म की ईमानदार तुलना

business-tools

Brevo API: डेवलपर के लिए एक व्यावहारिक गाइड

Brevo प्राप्त करें