What guidelines for HTML email design are there?

html

email-design

css-limits

html-email

byNikita Barsukov·Mar 10, 2025

When creating HTML emails, stick to tables for layout and inline CSS for styles, evading complex CSS that might break. Make your emails responsive with media queries, setting width to 100% for mobile displays, and always make sure to provide a plaintext version for text-email users. To spark some inspiration, below is a blueprint for crafting a universally-compatible email:

<!DOCTYPE html>
<html>
<head>
  <style>
    .email-wrapper { 
      width:100%; 
      margin:0; 
      padding:0; 
      -webkit-text-size-adjust:100%; 
      -ms-text-size-adjust:100%; // Don't mess with my size, bro!
    }
    .email-content { 
      width:600px; // Size matters 😎
    }
    @media only screen and (max-width: 600px) {
      .email-content { width:100%; } // Mobile-friendly sizing
    }
  </style>
</head>
<body>
  <table width="100%" class="email-wrapper">
    <tr>
      <td align="center">
        <table class="email-content">
           <!-- Your main content goes here! -->
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

The template takes into account the essential factors for universal compatibility and a fluid layout for varying screen sizes.

Digging deep into email clients

While every email client has its nuances, Outlook and Gmail deserve special attention. Be familiar with the HTML and CSS limitations these clients pose. Outlook uses the Word rendering engine, known for its restrictions, and Gmail, while more forgiving, also has its issues. As a result, keep your layout simple and avoid complex CSS or HTML structures.

Mastering images and hyperlinks

Images and hyperlinks require extra care for a smooth user experience.

For images:

Use alt text to deliver the message when images are blocked or fail to load.
Opt for actual text over embedded text in images for better accessibility and searchability with images disabled.

For hyperlinks:

Make them clear and recognizable to prevent being flagged as phishing attempts.
Consider using URL shorteners for lengthy URLs, enhancing readability and trust.
To cater to text-only email clients and for better transparency, provide a plain URL along with linked text.

Polishing with CSS and table usage

CSS and tables are invaluable tools in HTML email design, acting as the pillars and walls of your construction.

Build your layout with tables, which have broad support across email clients.
Directly inline CSS styles onto elements to prevent stripping by email clients, which ensures consistent appearance.
Use web-safe fonts and limit your use of CSS3 properties, as they may not be fully supported across different email clients, especially in Outlook.

The art of testing

Thorough testing is a crucial stage before sending your HTML email into the wild:

Use email testing tools, like Litmus or Email on Acid, to preview your email in various clients.
Take into account how spam filters might interpret your content, links, and images. Be vigilant and proactive about ensuring your emails make the cut, not the spam folder.

explain-codes / Html / What guidelines for HTML email design are there?

Linked

Best practices for styling HTML emails



Best Practices & Considerations when Writing HTML Emails



Styling HTML email for Gmail



When creating HTML emails, should we use html, head, body tags?



What is Data URI support like in major email client software?

