Email HTML Design Requirements

1. Optimal Text-to-Image Ratio

Maintaining an appropriate balance between text and images is crucial for deliverability and readability.

• The recommended text-to-image ratio is 60% text and 40% images.
• Avoid using a single large image as the entire email content; many email clients block images by default.
• Ensure that key messages, including CTAs (Call-To-Action), are in text format rather than embedded in images.

2. Usage of Alt-Text

Alt-text (alternative text) is essential for accessibility and ensures message clarity when images do not load.

• Provide descriptive and concise alt-text for all images.
• Avoid using generic terms like "image" or "logo." Instead, use descriptions such as "Company Logo" or "Spring Collection Banner."
• Keep alt-text under 125 characters for readability.
• Use alt-text to reinforce your CTA if the CTA is in an image (e.g., "Click here to shop now").

3. Responsive Design Considerations

Emails should be optimized for various screen sizes and devices.

• Use fluid layouts and media queries for mobile responsiveness.
• Ensure buttons and links are at least 44x44 pixels for easy tapping.
• Use scalable fonts and avoid very small text to enhance readability.

4. Email Client Compatibility

Different email clients render HTML differently.

• Test emails across multiple email clients (Gmail, Outlook, Apple Mail, Yahoo, etc.).
• Avoid CSS properties that are not widely supported, such as background images or custom fonts.
• Use inline CSS rather than external stylesheets for better compatibility.

5. Use of Embedded Media

Embedded media like videos and GIFs are not supported.

• Instead of embedding videos, use a static image with a play button linked to an external video platform.
• Optimize GIF file sizes to prevent slow loading.

6. Call-To-Action (CTA) Optimization

A clear and compelling CTA encourages engagement.

• Use text-based CTAs in addition to button images.
• Make CTA buttons visually distinct with contrasting colors.
• Ensure buttons contain actionable text, such as "Get My Copy", "Shop Now" or "Learn More."

7. Loading Speed Optimization

Fast-loading emails improve user experience and engagement.

• Compress images without compromising quality.
• Use web-safe fonts to prevent slow rendering.
• Minimize the use of unnecessary code and inline unnecessary styles.

8. Accessibility Best Practices

Ensure emails are accessible to all users, including those using screen readers.

• Maintain high color contrast for text readability.
• Avoid using color as the only indicator of information.
• Structure emails with proper headings and hierarchy for better comprehension.

9. Preheader Text Optimization

Preheader text complements the subject line and increases open rates.

• Keep preheader text between 40-100 characters.
• Summarize the key message of the email.
• Ensure it remains readable even when images are disabled.

10. Testing and Validation

Regular testing helps ensure optimal performance across different platforms.

• Use email testing tools like Litmus, Email on Acid, or Mailtrap.
• Conduct A/B testing to optimize elements like CTA placement and subject lines.
• Check spam scores before sending to improve deliverability.

11. Total Email Size

The total email size (including text and images) should not be larger than 100k to avoid clipping in Gmail.

By following these best practices, you can design effective, accessible, and engaging HTML emails that maximize readability, engagement, and conversion rates.

 v. 1.1 - March 14, 2025