AI سے HTML ای میلز ڈیزائن کریں

HTML email ایسی ای میل بناتا ہے جو ای میل کلائنٹس میں بچ نکلے — وہ table-structured، inline-styled مارک اپ جو پرانے رینڈررز چاہتے ہیں، ای میل کلائنٹ چوڑائیوں پر چیک شدہ اور بھیجنے کے لیے تیار ایکسپورٹ شدہ۔ یہ اس فارمیٹ کا ٹیمپلیٹ ہے جہاں جدید CSS مرنے آتی ہے۔

ای میل رن کیا بناتا ہے

اسے کسی مہم کی طرح بریف کریں — "نئے ٹئیر کے لیے لانچ ای میل: سرخی، تین فیچرز، ایک بٹن، فوٹر" — اور ایجنٹ ای میل بناتا ہے: ہیڈر، باڈی بلاکس، کال ٹو ایکشن، فوٹر، سب کلائنٹ سیف مارک اپ میں۔ نتیجہ email viewer میں کھلتا ہے: پیغام ای میل کلائنٹ چوڑائی پر، جیسا رینڈر ہو گا۔

ای میل ویور — کلائنٹ چوڑائی پر پیغام، جیسا رینڈر ہو گا

ای میل کلائنٹس براؤزرز نہیں — Outlook ابھی Word HTML رینڈر کرتا ہے، Gmail لمبی ای میلز clip کرتا ہے، dark mode آپ کے بغیر سیٹ کیے رنگ الٹ دیتا ہے۔ ٹیمپلیٹ اسی حقیقت کے لیے بناتا ہے: flexbox کے بجائے tables، stylesheets کے بجائے inline styles، features کے بجائے fallbacks۔

demos/launch-email/index.html Open full

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

“Design an HTML email: a launch announcement for a desktop design tool — one clear CTA.”

کلائنٹ چوڑائی کی جانچ

ویور پیغام کو انھی چوڑائیوں پر دکھاتا ہے جو اصلی کلائنٹس استعمال کرتے ہیں — تنگ ان باکس پین، موبائل میل ایپ — تاکہ ڈیزائن اسی سائز پر پڑھا جائے جس پر واقعی پڑھا جاتا ہے۔ گیٹ ای میل کے اصول چیک کرتی ہے: امیج fallbacks، table ساخت، محفوظ فونٹس۔

ای میل کو سٹیئر کرنا

کسی بھی نتیجے کی سی سٹیئرنگ:

  • کسی بلاک پر ⌥-click کریں، بالکل اس جگہ پر کمنٹ کریں ("بٹن وزنی محسوس ہونا چاہیے")
  • بناوٹ کے لیے follow-ups ("فوٹر کے نیچے PS ڈالیں")
  • پیرامیٹرز کے لیے Tweaks — accent رنگ، density، امیج سائز
  • Versions — ایک ٹیک ہیرو امیج کے ساتھ، ایک متن آگے

یہ کن چیزوں میں اچھا ہے

  • لانچ اور مہم ای میلز — وہ اعلان جسے ٹھیک لگنا ہے
  • نیوز لیٹرز — وہ بار بار آنے والا لے آؤٹ جو ہر کلائنٹ میں پڑھا جائے
  • ٹرانزیکشنل ڈیزائن — وہ رسیدیں اور welcome جو برانڈ اٹھاتے ہیں
  • ای میل ٹیمپلیٹس — مہم سیریز کے لیے بنیاد

ایکسپورٹ کرنا

ای میلز HTML میں ایکسپورٹ ہوتی ہیں — کلائنٹ سیف مارک اپ کسی sender میں پیسٹ کرنے کے لیے تیار — اور بصری جانچ یا ڈیزائن ڈاک کے لیے PNG میں۔ فائلیں اگلی مہم یا اگلے ٹیک کے لیے پروجیکٹ میں رہتی ہیں۔

مشورہ: بریف میں "client-safe" کہیں خواہ ٹیمپلیٹ اسے ویسے بھی نافذ کرتا ہے — یہ فالو اپس کو جدید CSS کی طرف واپس بہنے سے روکتا ہے جسے کوئی Outlook رینڈرر ویسے بھی کاٹ دے گا۔

متعلقہ صفحات