dragoon0x Email Design
Email Design Constraints
- Table-based layout (CSS grid/flexbox not universally supported).
- Inline CSS (many clients strip tags).
- Max width: 600px.
- Images: hosted externally, alt text required (images blocked by default).
- Fonts: web fonts unreliable. Use web-safe stacks.
Structure
- Pre-header text (preview in inbox, 40-130 chars).
- Header (logo, minimal navigation).
- Hero (primary message/image).
- Body (content blocks, alternating layout).
- CTA (primary action button, min 44px height).
- Footer (unsubscribe link required by law, contact info).
Button Design
- HTML buttons, not image buttons (images may be blocked).
- Minimum 44px height, full-width on mobile.
- High contrast, rounded corners via border-radius.
- Bulletproof button technique for Outlook.
Testing
- Test in: Gmail, Outlook, Apple Mail, Yahoo Mail, mobile clients.
- Dark mode: test color rendering.
- Images-off: ensure content is readable.
- Links: test every link.