HTML email ऐसा ईमेल बनाता है जो ईमेल क्लाइंट में टिके — वह table-स्ट्रक्चर्ड, inline-स्टाइल की मार्कअप जिसकी पुराने रेंडरर को ज़रूरत है, ईमेल-क्लाइंट चौड़ाई पर जाँची और भेजने के लिए तैयार एक्सपोर्ट की गई. यह उस फ़ॉर्मेट का टेम्पलेट है जहाँ आधुनिक CSS मरने आती है.
ईमेल रन क्या बनाता है
इसे किसी कैम्पेन की तरह ब्रीफ़ करें — "नए टियर के लिए लॉन्च ईमेल: हेडलाइन, तीन फ़ीचर, एक बटन, footer" — और एजेंट ईमेल बनाता है: header, body ब्लॉक, call to action, footer, सब क्लाइंट-सेफ़ मार्कअप में. नतीजा email viewer में खुलता है: ईमेल-क्लाइंट चौड़ाई पर मैसेज, जैसा वह रेंडर होगा.
ईमेल क्लाइंट ब्राउज़र नहीं हैं — Outlook अब भी Word HTML रेंडर करता है, Gmail लंबे ईमेल काटता है, dark mode आपके न सेट किए रंग उलट देता है. टेम्पलेट उसी हक़ीक़त के लिए बनाता है: flexbox के ऊपर tables, stylesheets के ऊपर inline styles, फ़ीचर के ऊपर fallbacks.
HTML email · Devin · e2e · gate PASS
The Launch Email — The announcement email for this very product — one clear CTA, inlined tables, dark-mode safe.
▸ the prompt that made it▾ the prompt that made it
“Design an HTML email: a launch announcement for a desktop design tool — one clear CTA.”
क्लाइंट-चौड़ाई जाँच
व्यूअर मैसेज को उन्हीं चौड़ाइयों पर दिखाता है जो असली क्लाइंट इस्तेमाल करते हैं — संकरा inbox पैन, मोबाइल mail ऐप — ताकि डिज़ाइन उसी साइज़ पर पढ़े जिस पर उसे सच में पढ़ा जाता है. gate ईमेल के नियम जाँचता है: image fallbacks, table स्ट्रक्चर, सेफ़ फ़ॉन्ट.
ईमेल को स्टीयर करना
किसी भी नतीजे जैसी स्टीयरिंग:
- किसी ब्लॉक को ⌥-click करें, ठीक उस जगह कमेंट करें ("बटन भारी महसूस होना चाहिए")
- स्ट्रक्चर के लिए फ़ॉलो-अप ("footer के नीचे PS जोड़ो")
- पैरामीटर के लिए Tweaks — accent रंग, density, इमेज साइज़
- Versions — एक प्रयास hero इमेज के साथ, एक टेक्स्ट-आगे
यह किसमें अच्छा है
- लॉन्च और कैम्पेन ईमेल — वह ऐलान जिसे सही दिखना है
- न्यूज़लेटर — बार-बार का लेआउट, हर क्लाइंट में पढ़ने लायक़
- ट्रांज़ैक्शनल डिज़ाइन — वे रसीदें और welcomes जो ब्रांड ले जाते हैं
- ईमेल टेम्पलेट — कैम्पेन सीरीज़ की बुनियाद
एक्सपोर्ट करना
ईमेल HTML के तौर पर एक्सपोर्ट होते हैं — sender में पेस्ट करने के लिए तैयार क्लाइंट-सेफ़ मार्कअप — और विज़ुअल जाँच या डिज़ाइन डॉक के लिए PNG. फ़ाइलें अगले कैम्पेन या अगले प्रयास के लिए प्रोजेक्ट में रहती हैं.
टिप: ब्रीफ़ में "client-safe" कहें भले ही टेम्पलेट उसे लागू करता है — यह फ़ॉलो-अप को आधुनिक CSS की ओर वापस भटकने से रोकता है, जिसे Outlook रेंडरर वैसे भी काट देगा.