HTML Emails

HTML Email Best Practices

Industry Standards for Designing Effective Email Campaigns

Email remains one of the highest-ROI digital marketing channels—but only when it’s done correctly. This guide outlines industry best practices for HTML email creation, including design, images, subject lines, pre-text, and technical considerations to ensure emails display properly, load quickly, and perform well across devices and inbox providers.

1. General Principles of HTML Email Design

HTML emails are not the same as web pages. Email clients (Gmail, Outlook, Apple Mail, Yahoo, etc.) have strict limitations.

Best practices:

• Use table-based layouts (not divs or CSS grid)
• Inline CSS whenever possible
• Avoid JavaScript (not supported in email)
• Keep code simple and predictable
• Design mobile-first whenever possible

Industry rule of thumb: If it works everywhere, it’s probably simple.

2. Image Hosting & Image Size Requirements

Images Must Be Hosted Externally

• Images should never be embedded as attachments
• Images must be hosted on a publicly accessible server (HTTPS)
• Email platforms load images via URL, not from the email itself

Why this matters:

• Embedded images increase spam risk
• Attachments are often blocked
• Large files slow load time and hurt deliverability

Image Size & Optimization Guidelines

Recommended standards:

• Individual image file size: Under 200 KB (ideal: 50–100 KB)
• Total email image weight: Under 1 MB

• Width: 600–800 px max

  Use compressed formats:

  • JPG for photos
  • PNG only when transparency is required
  • WebP only if supported by your email platform

Always include ALT text so the message is still readable if images are blocked.

Example:

ALT="Register now for our Summer Camp Guide"

3. Text-to-Image Ratio (Very Important)

Emails that are mostly images are more likely to:

• Be flagged as spam
• Fail accessibility checks
• Render poorly on slow connections

Best practice:

• At least 60% text / 40% images
• All key messaging should appear as text—not inside an image
• Buttons should be HTML buttons, not image-only buttons

4. Subject Lines & Pre-Header (Pre-Text)

Subject Lines

Your subject line determines whether your email gets opened.

Best practices:

• 30–50 characters
• Clear > clever
• Avoid spam trigger words (FREE!!!, ACT NOW, $$$)
• Set clear expectations

Good examples:

• “Summer Camp Guide Is Live”
• “3 Family Events This Weekend”
• “Last Chance to Be in Our Back-to-School Issue”

Pre-Header (Pre-Text)

Pre-header text appears next to or below the subject line in most inboxes and is often overlooked—but extremely important.

Best practices:

• 40–90 characters
• Expand on the subject line
• Do not repeat the subject line
• Avoid default text like “View this email in your browser”

Example:

• Subject: Family Events This Weekend
• Pre-Header: Don’t miss these kid-friendly activities near you

5. Email Width & Mobile Optimization

Industry standard width:

• 600 px desktop
• Responsive for mobile (single-column preferred)

Mobile best practices:

• Font size:
  • Body text: 14–16 px

  • Headlines: 22–28 px

    Buttons:

  • Minimum height: 44 px
  • Clear spacing for thumbs
• Avoid tiny text or multiple columns on mobile

Over 60% of emails are opened on mobile devices.

6. Fonts & Typography

Safe fonts only (email clients do not support custom fonts reliably):

• Arial
• Helvetica
• Georgia
• Times New Roman
• Verdana

If brand fonts are required, they should be used sparingly and backed up with safe fonts.

Example:

font-family: Arial, Helvetica, sans-serif;

7. Accessibility Best Practices

Accessible emails perform better and reach more people.

Checklist:

• ALT text for all images
• Sufficient color contrast
• Logical reading order
• Clickable buttons (not just linked text)
• Avoid text baked into images

Accessibility is not just best practice—it’s increasingly expected.

8. Links, Tracking & CTAs

Best practices:

• Use clear calls-to-action (CTAs)
• Avoid “click here”
• Link text should describe the destination

Good CTA examples:

• “View the Camp Guide”
• “Reserve Your Ad Space”
• “Register for the Event”

Avoid overloading emails with too many CTAs. One primary action per email performs best.

9. Testing Before Sending

Every email should be tested before delivery.

At minimum:

• Desktop and mobile preview
• Gmail, Outlook, and Apple Mail
• Links tested
• Images load correctly
• Subject line + pre-header verified

10. Trusted Third-Party Resources & Examples

For deeper technical examples and inspiration, these industry resources are widely used and trusted:

• Litmus – Email rendering, testing, and best practices

  https://www.litmus.com/resources

• Campaign Monitor – Email design guides & templates

  https://www.campaignmonitor.com/resources

• Mailchimp Email Design Guide

  https://mailchimp.com/resources/email-design-guide

• Really Good Emails – Real-world email examples

  https://reallygoodemails.com

These resources show live examples of high-performing HTML emails across industries.

Final Notes

Following these standards ensures:

• Better deliverability
• Faster load times
• Higher open and click-through rates
• Fewer display issues across devices
• A more professional brand experience

If you have questions about preparing email creative for Family Resource Group Inc., our team is happy to help review or advise before deployment.