Email Design Patterns

Helps you design responsive, accessible HTML emails that render correctly across all major email clients.

Usage

Ask for help with email layout, cross-client compatibility, dark mode support, or accessibility.

Examples

• "Create a responsive two-column email layout"
• "How do I support dark mode in HTML emails?"
• "Make my email template accessible for screen readers"

Guidelines

• Use table-based layouts for maximum email client compatibility
• Inline CSS styles as many clients strip the head style block
• Always include alt text for images and a plain text version
• Test across Outlook, Gmail, Apple Mail, and mobile clients
• Keep email width at 600px for optimal rendering on all devices