Emails & Newsletters

Do This First

1. Lead with the message. Make the subject line, preheader, and opening heading clearly explain what the email is about and what action is needed.
2. Build with resilient content. Use live HTML text for the key message, descriptive buttons, and alt text for every meaningful image.
3. Test fallback states. Check the email with blocked images, dark mode, mobile width, keyboard navigation, and screen reader reading order.

Content

• Use plain language and short paragraphs so readers can skim quickly.
• Make every button and link state its destination or action clearly.
• Repeat essential text that appears inside hero images as real HTML text.

Layout

• Prefer a single-column structure with a logical source order.
• Use tables only when email-client support requires them, and keep them simple.
• Avoid hover-only interactions or content that depends on animation to make sense.

Testing

• Confirm body text reaches 4.5:1 contrast and controls meet 3:1 non-text contrast.
• Check that linked images still make sense when images are off.
• Review any auto-generated caption or transcript links if video is promoted in the message.

Common Problems to Catch

• Sending an image-only flyer as the email body.
• Using two or more complex columns that collapse into a confusing mobile order.
• Relying on color alone to show urgency, status, or discount information.
• Writing vague calls to action such as 'read more' or 'learn more' without context.