Design around one communication goal
Decide what the recipient should understand or do before arranging the layout. A clear primary goal produces better hierarchy than a template filled with equally prominent modules.
Put the essential context near the beginning because previews, small screens, and interrupted reading can hide later content.
Create a readable hierarchy
Use a descriptive heading, concise supporting copy, and a visually distinct primary action. Group related information and use spacing to show relationships.
Avoid dense walls of text and excessive decorative elements. Readers should be able to scan the message without losing its meaning.
- One clear main heading
- Short paragraphs
- Descriptive subheadings
- Consistent spacing
- Limited action styles
Build for narrow screens
Use a responsive, single-column foundation for essential content and make controls comfortable to tap. Do not require horizontal scrolling to understand the message.
Treat desktop enhancements as optional. Test long text, large accessibility settings, and translated content that may expand.
Support accessibility
Use semantic structure where email clients support it, sufficient contrast, meaningful link text, and visible focus behavior. Do not communicate critical meaning by color alone.
Add useful alternative text for informative images and empty alt text for purely decorative ones. Keep important copy as live text rather than embedding it in an image.
Plan for blocked images and limited CSS
Many clients block remote images or support only part of modern CSS. The email should remain understandable without background images, web fonts, or advanced layout rules.
Use safe fallbacks, include dimensions where appropriate, and preserve a sensible reading order when styles fail.
Make actions trustworthy
Button labels and links should describe the destination. Avoid vague labels when context may be lost, and ensure the visible destination matches recipient expectations.
Include a plain-text version and a browser-view option when useful. Keep sender identity, preferences, and unsubscribe controls easy to locate.
Test across realistic conditions
Preview representative clients, screen widths, dark appearance settings, and image-blocked states. Test keyboard navigation, links, personalization fallbacks, and the plain-text part.
Maintain a documented component library and retest after template changes. Rendering varies by client, so resilient design matters more than pixel-perfect sameness.
- Mobile and desktop widths
- Light and dark appearances
- Images on and off
- Keyboard and screen-reader checks
- Live links and fallback values