Optimizing Email HTML for Better Deliverability

Properly optimizing your email HTML can have a significant impact on deliverability rates. By following technical best practices such as maintaining an appropriate code-to-text ratio, using images judiciously, and employing proper formatting techniques, you can increase the likelihood that your emails will reach subscribers' inboxes successfully. In this comprehensive guide, we'll dive deep into the key considerations for crafting clean, well-structured HTML emails that are primed for optimal delivery.

Understanding Email Code-to-Text Ratio

The code-to-text ratio refers to the amount of HTML code in your email compared to the visible text content. It matters far less than your sender reputation and authentication, but an email that is mostly markup (or images) with very little real text looks like spam to content filters and can add to its spam score. Let's explore this concept in more detail.

What is an Optimal Code-to-Text Ratio?

There is no agreed standard or magic number. The practical aim is that your email contains a reasonable amount of real, readable text, with HTML used for structure and formatting rather than bloat.

Tip: Run a test through a content checker such as SpamAssassin before sending; it flags patterns like very little text, image-heavy layouts and malformed HTML.

Strategies for Improving Code-to-Text Ratio

To achieve a favorable code-to-text ratio, consider these techniques:

Use semantic HTML elements like <p>, <ul>, and <ol> instead of relying heavily on <div> and <span> tags
Minimize the use of nested tables for layout; opt for a simpler structure when possible
Keep inline styles lean and avoid repeating the same long style strings on every element
Balance the amount of text content with the HTML used for formatting
Keep the total HTML under about 102KB, because Gmail clips larger messages and hides the rest (including, often, your unsubscribe link)
Send a plain-text version alongside the HTML (a multipart/alternative message)

Example: Improving Code-to-Text Ratio

Consider this HTML snippet:

<div style="font-size: 16px; color: #333333; margin-bottom: 20px;">
  <div style="font-weight: bold;">Welcome to our newsletter!</div>
  <div>Here's the latest news and updates...</div>  
</div>

To improve the code-to-text ratio, we can refactor it like this:

<h1>Welcome to our newsletter!</h1>
<p>Here's the latest news and updates...</p>

Effective Image Usage in Email

Images can greatly enhance the visual appeal and engagement of your emails. However, improper image usage can negatively impact deliverability. Let's look at some best practices for incorporating images effectively.

Image-to-Text Ratio Considerations

Similar to the code-to-text ratio, it's important to maintain a balanced image-to-text ratio in your emails. Excessive use of images with little accompanying text can trigger spam filters, so make sure the text carries your main message even if images are blocked.

Caution: Avoid emails composed entirely of images. Always include sufficient text content to provide context and value to recipients.

Optimizing Images for Email

When including images in your emails, keep these optimization tips in mind:

Compress images to reduce file size without sacrificing quality. Aim for files under 200KB.
Use appropriate image dimensions; avoid unnecessarily large images that may take longer to load.
Provide meaningful alt text for each image to improve accessibility and provide context for recipients with images disabled.
Host images on a reliable server or content delivery network (CDN) to ensure fast loading times.

Image Format	Best Use Cases	Compression Tips
JPEG	Photographs, complex graphics	Use a quality setting of 60-80% for optimal compression
PNG	Logos, illustrations, transparency	Use a PNG optimizer tool to reduce file size
GIF	Simple graphics, animations	Limit the number of colors used to keep file size small

Proper Email Formatting Techniques

Proper formatting is essential for creating emails that render consistently across different email clients and devices. Here are some key techniques to ensure your emails look great everywhere.

Using Tables for Layout

Despite the availability of more modern layout techniques, tables remain the most reliable way to structure email content. Tables provide a consistent rendering experience across a wide range of email clients.

Example: Basic Table Layout

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <!-- Content goes here -->
    </td>
  </tr>
</table>

Keep these table formatting tips in mind:

Use nested tables for more complex layouts, but avoid excessive nesting to maintain a good code-to-text ratio.
Set table widths using percentages rather than fixed pixel values to ensure responsiveness on different screen sizes.
Use the cellpadding and cellspacing attributes to control spacing and padding within table cells.

Inline CSS Styles

While external stylesheets are the preferred method for styling web pages, email clients don't load external CSS. Gmail and most modern clients support a <style> block in the head (which you need for media queries), but some clients and webmail views still drop or limit it, so inline styles remain the safest way to ensure consistent rendering of key styling.

Best Practice: Use a CSS inliner tool to automatically convert your external styles into inline styles before sending your email.

The following diagram illustrates the process of converting external CSS to inline styles:

The CSS inlining process: write styles in one stylesheet, run a CSS inliner that copies each rule onto the matching elements, keep media queries in a style block in the head because they cannot be inlined, then test the result in major email clients. — Turning a stylesheet into inline styles before sending

Responsive Email Design

With the prevalence of mobile devices, it's crucial to design emails that adapt and look great on any screen size. Responsive email design techniques allow your content to adjust and reflow based on the recipient's viewport.

Key techniques for responsive email design include:

Using fluid table structures with percentage-based widths
Employing media queries to apply different styles based on screen size
Providing fallbacks for mobile-unfriendly elements like videos or interactive content
Optimizing font sizes and button sizes for easy readability and touchability on small screens

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" style="padding: 20px;">
      <!-- Column 1 content -->
    </td>
    <td width="50%" style="padding: 20px;">
      <!-- Column 2 content -->  
    </td>
  </tr>
</table>

Add a media query in the head that sets each cell to display: block; width: 100% below a certain screen width, and the columns will stack vertically on smaller screens. Clients that ignore media queries will keep the columns side by side, so make sure that layout still reads well.

Optimizing Email Content

In addition to technical considerations, the actual content of your emails plays a significant role in deliverability and engagement. Let's explore some best practices for crafting compelling email content.

Crafting Engaging Subject Lines

Your subject line is the first impression recipients have of your email. It should be concise, compelling, and accurately reflect the content of your message. Consider these tips:

Keep subject lines under 60 characters to avoid truncation on mobile devices
Use actionable language and create a sense of urgency or curiosity
Personalize subject lines with the recipient's name or other relevant information
A/B test different subject lines to see what resonates best with your audience

Tip: Avoid using excessive punctuation, all caps, or spammy words like "FREE" or "GUARANTEED" in your subject lines, as they can trigger spam filters.

Optimizing Preheader Text

The preheader text is the brief summary that appears next to or below the subject line in most email clients. It provides an opportunity to further entice recipients to open your email.

Best practices for preheader text include:

Keeping it concise, typically between 50-100 characters
Treating it as an extension of your subject line, providing additional context or value proposition
Including a clear call-to-action or benefit statement
Avoiding repetition of the subject line content

Designing Clear Call-to-Actions

Your emails should have a clear purpose and guide recipients towards taking a specific action, whether it's making a purchase, signing up for an event, or reading more content. Designing prominent, compelling call-to-action (CTA) buttons is crucial for driving engagement.

Consider these CTA design tips:

Use contrasting colors that stand out from the surrounding content
Employ actionable, benefit-oriented text that clearly communicates the desired action
Provide ample whitespace around the CTA to improve clickability
Test different placement options, such as above the fold or at the end of the email

Example: CTA Button Code

<table cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: #ff5722; padding: 12px 24px; border-radius: 4px;">
      <a href="https://example.com" style="color: #ffffff; text-decoration: none; font-weight: bold;">Shop Now</a>
    </td>  
  </tr>
</table>

Conclusion and Actionable Next Steps

Optimizing your email HTML for better deliverability requires a combination of technical best practices and strategic content decisions. By focusing on maintaining a good code-to-text ratio, using images effectively, employing proper formatting techniques, and crafting engaging content, you can significantly improve the chances of your emails reaching and resonating with your audience.

To put these principles into action, consider the following next steps:

Audit your existing email templates and identify areas for improvement in terms of code structure and content optimization.
Implement the technical best practices discussed in this guide, such as using semantic HTML, optimizing images, and employing responsive design techniques.
Review and refine your email content strategy, focusing on crafting compelling subject lines, preheader text, and clear call-to-actions.
Continuously monitor your email deliverability metrics and make data-driven adjustments to your approach as needed.

Key Takeaway: By prioritizing email HTML optimization and following industry best practices, you can significantly improve your email deliverability rates and overall marketing performance.

Before you send, run through these checks:

A checklist for deliverable email HTML: real text alongside images, alt text, compressed images with sizes set, simple table layouts with inline CSS, a plain-text version and valid markup; avoid image-only emails and scripts or forms. — Checks for email HTML before you send

Remember, email optimization is an ongoing process. Stay up-to-date with the latest industry trends, continuously test and refine your approach, and always prioritize the recipient experience. By putting these principles into practice, you'll be well on your way to achieving email marketing success.

Check your own email in a minute. Send one email to a test address and see your SPF, DKIM, DMARC and spam score.

Test your email