Bot:Guide/email: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
Line 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.
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 28:
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 → 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.
12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.
Line 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 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 67 ⟶ 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 98 ⟶ 99:
<p style="margin:0;padding:0;font-size:1px;line-height:1px;"> </p>
</td></tr>
</table>
</body>
Line 111 ⟶ 110:
! Pitfall !! Fix
|-
| <nowiki><div> layout breaks</nowiki> || <nowiki>Use <table>/<td> only</nowiki>▼
|-
| <nowiki><style> block stripped</nowiki> || <nowiki>Inline all CSS</nowiki>▼
▲| <div> layout breaks || Use <table>/<td> only
|-
| <nowiki>Padding on <table></nowiki> || <nowiki>Move to <td></nowiki>▼
▲| <style> block stripped || Inline all CSS
|-
| <nowiki>Bare <p> extra spacing</nowiki> || <nowiki>Explicit margin:0 0 Npx 0</nowiki>▼
▲| Padding on <table> || Move to <td>
|-
| <nowiki>Unitless line-height rendering</nowiki> || <nowiki>Acceptable at 1.6; use px if issues arise</nowiki>▼
▲| Bare <p> extra spacing || Explicit margin:0 0 Npx 0
|-
| <nowiki>System fonts missing</nowiki> || <nowiki>Stack ends with Arial, sans-serif as fallback</nowiki>▼
▲| Unitless line-height rendering || Acceptable at 1.6; use px if issues arise
|-
| <nowiki>bgcolor not applied</nowiki> || <nowiki>Set both bgcolor attr AND style on data table header</nowiki>▼
▲| System fonts missing || Stack ends with Arial, sans-serif as fallback
|-
| <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>
▲| bgcolor not applied || Set both bgcolor attr AND style on data table header
|}
| |||