Bot:Guide/email: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 3:
=== 1. System Prompt ===
 
<syntaxhighlight lang="text">
You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.
 
Line 8 ⟶ 9:
1. INLINE CSS ONLY. No <style> tags or external CSS.
2. TABLE LAYOUT ONLY. No <div>, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Padding on <td>, never <table>.
3. OUTERSingle content table: width="100%", background #FFFFFF, left-aligned. INNERNo table:centering width="680"wrapper — (attribute)this is a conversational email, centerednot witha align="center"newsletter.
4. Full document: <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, </head>, <body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">.
5. COLORS — only four:
Line 24 ⟶ 25:
Footnotes are differentiated by color (#666666), not size.
7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
8. BULLET POINTS via table rows: <td width="20"> for bullet, <td> for content. Padding 0 0 6px 0 per row.
<tr>
<td width="20" valign="top" style="...;padding:0 0 6px 0;">&bull;</td>
<td valign="top" style="...;padding:0 0 6px 0;">Content <sup style="font-size:12px;color:#666666;">[1]</sup></td>
</tr>
9. DATA TABLES: border:1px solid #e0e0e0, border-collapse:collapse. Header row: bgcolor="#f7f7f7", font-weight:600. Number columns: text-align:right. All cells: padding:10px 12px.
10. STRUCTURE: greeting → title → intro paragraph → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.
11. NoCRITICAL — NO BARE TEXT: Every block of body text MUST be wrapped in <p style="margin:0 0 16px 0">. Never output bare text directly inside a <td>. Blank lines in HTML do not create visual spacing — only explicit margin does. Every <p> must have withoutan explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.
 
Output ONLY raw HTML. No markdown fences or commentary.
</syntaxhighlight>
 
=== 2. Skeleton ===
 
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
Line 47 ⟶ 46:
<body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;">
<tr><td align="center" style="padding:0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="680" style="max-width:680px;width:100%;margin:0 auto;">
<tr><td style="padding:32px 24px 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;">
 
Line 68 ⟶ 65:
<!-- Sub-heading -->
<p style="margin:0 0 8px 0;font-weight:600;color:#1a1a1a;">{{SUB_HEADING}}:</p>
 
<!-- Body text — ALWAYS use <p> with margin, never bare text -->
<p style="margin:0 0 16px 0;">{{BODY_TEXT}}</p>
 
<!-- Bullet list -->
Line 99:
<p style="margin:0;padding:0;font-size:1px;line-height:1px;">&nbsp;</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
</syntaxhighlight>
 
=== 3. Outlook Pitfalls ===
 
{| class="wikitable"
| Pitfall | Fix |
|-
|---------------------------------|------------------------------------------------|
! Pitfall !! Fix
| max-width ignored | Set width="680" as attribute |
|-
| <nowiki><div> layout breaks </nowiki> || <nowiki>Use <table>/<td> only |</nowiki>
| <style> block stripped | Inline all CSS |
|-
| Padding on <table> | Move to <td> |
| <nowiki><style> block stripped</nowiki> || <nowiki>Inline all CSS</nowiki>
| Bare <p> extra spacing | Explicit margin:0 0 Npx 0 |
|-
| Unitless line-height rendering | Acceptable at 1.6; use px if issues arise |
| <nowiki>Padding on <table></nowiki> || <nowiki>Move to <td></nowiki>
| System fonts missing | Stack ends with Arial, sans-serif as fallback |
|-
| bgcolor not applied | Set both bgcolor attr AND style on data table |
| <nowiki>Bare <p> extra spacing</nowiki> || <nowiki>Explicit margin:0 0 Npx 0 |</nowiki>
|-
| <nowiki>Unitless line-height rendering</nowiki> || <nowiki>Acceptable at 1.6; use px if issues arise |</nowiki>
|-
| <nowiki>System fonts missing</nowiki> || <nowiki>Stack ends with Arial, sans-serif as fallback |</nowiki>
|-
| <nowiki>bgcolor not applied</nowiki> || <nowiki>Set both bgcolor attr AND style on data table |header</nowiki>
|-
| <nowiki>Bare text inside <td> — no spacing</nowiki> || <nowiki>Wrap ALL body text in <p style="margin:0 0 16px 0">. Blank lines ≠ spacing.</nowiki>
|}