HTML Email Best Practices (With Real Fixes for Outlook & Gmail)

Secret Sauce: The Ingredients for a Sizzling Email Campaign 🌶️

Imagine this: You’ve spent hours designing the perfect email. Beautiful layout, clean buttons, everything looks flawless on your screen. You hit send… feeling proud.

But then reality hits.

One user opens it in Gmail — it looks okay.
Another checks it in Outlook — the layout is broken.
Someone else views it on their phone — text is tiny and buttons are impossible to tap.

Suddenly, your “perfect” email doesn’t feel so perfect anymore.

This is the biggest challenge in email design: every email client behaves differently. Unlike websites, emails don’t follow one standard rulebook. Each platform — whether it’s desktop, mobile, or tablet — can interpret your design in its own way.

That’s why designing email templates isn’t just about making them look good. It’s about making sure they work everywhere.

The goal is simple: no matter where your audience opens your email, it should look clean, readable, and easy to interact with.

In this guide, we’ll walk through simple and practical best practices to help you create responsive email templates — so your emails look great and function smoothly across all devices, from large desktop screens to small smartphones.

Let’s get started

1.Use Table-based layout (Fluid Layout)

Let’s say you designed an email just like a website — using modern CSS, divs, and fancy layouts. It looks perfect in your browser, so you confidently send it out.

Someone opens it in Outlook… and everything is broken. Columns are misplaced, spacing is off, and your design looks nothing like what you created.

Why does this happen?

Unlike web browsers, many email clients (especially Outlook) don’t fully support modern HTML and CSS. They rely on older rendering engines, which means your advanced layouts may simply not work.

This is where table-based layouts come to the rescue.

Think of tables as the “safe option” for email design. While they may feel old-school, they are highly reliable and supported across almost all email clients.

By using tables, you can create structured layouts — like rows and columns — that stay consistent whether your email is opened on a desktop, tablet, or mobile device.

Even better, when you design tables in a fluid way (using percentage widths instead of fixed sizes), your email can automatically adjust to different screen sizes without depending too much on complex media queries.

In simple terms: if you want your email to look stable and work everywhere, tables are your best friend.

Example: Simple Table-Based Email Layout

Let’s look at a simple real-world example. Below is a basic email structure built using tables. This is the safest approach and works across most email clients, including Outlook.

<!-- Full Width Wrapper -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">

      <!-- Main Container -->
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        
        <!-- Header -->
        <tr>
          <td align="center">Your Brand</td>
        </tr>

        <!-- Content -->
        <tr>
          <td>Your content goes here</td>
        </tr>

      </table>

    </td>
  </tr>
</table>

What’s happening here?

• Outer table (100%) → Makes the email stretch across the screen
• Inner table (600px) → Keeps your content centered and readable
• Rows (<tr>) → Divide your email into sections (header, content, footer)
• Cells (<td>) → Hold your actual content

This structure might look simple, but it’s extremely powerful. Almost every professional email you receive follows this pattern behind the scenes.

Tip: Once you understand this basic structure, you can start adding images, buttons, and columns inside these tables to build more advanced designs.

2.Use inline CSS

Imagine you carefully designed your email using a separate CSS file, just like you would for a website. Everything looks clean, organized, and perfect.

You send the email… and then something strange happens.

The colors disappear. Fonts look different. Spacing is completely off.

What went wrong?

The problem is that many email clients (like Gmail and Outlook) don’t fully support external CSS stylesheets. Some even remove them completely when the email is opened.

This means your beautiful design rules might never reach your audience.

That’s why email developers use inline CSS.

Instead of writing styles separately, you place them directly inside each HTML element using the style attribute. It may look a bit old-school, but it ensures your design stays exactly how you intended.

For example, instead of writing styles in a separate file, you write them like this:

<p style="color:#333333; font-size:16px; font-family:Arial;">
  This text will look the same in most email clients.
</p>

It might feel repetitive at first, but this approach gives you maximum control and reliability.

In simple terms: if you want your email to look consistent everywhere, always use inline CSS.

3. Use web-safe fonts

Imagine you found the perfect font for your email — stylish, modern, and exactly matching your brand. You design everything using that font and hit send, feeling confident.

But when your audience opens the email, something feels off.

The font looks completely different. In some cases, it even falls back to a default font that breaks your design.

What happened?

Unlike websites, many email clients don’t support custom fonts. If the font you used isn’t supported, the email client will replace it with something else — and you lose control over how your content looks.

This is why it’s always safer to use web-safe fonts.

Web-safe fonts are fonts that are widely supported across almost all devices and email clients. No matter where your email is opened, these fonts will display consistently.

Some commonly used web-safe fonts include:

• Arial
• Helvetica
• Georgia
• Times New Roman

For example, you can define a safe font like this:

<p style="font-family:Arial, Helvetica, sans-serif;">
  This text will display consistently across most email clients.
</p>

In simple terms: choosing web-safe fonts ensures your email looks clean, readable, and professional — no matter where it’s opened.

Check this blog post on Why Your Fonts Don't Work in Email templates—and How to Fix Them

4. Optimize Images

Imagine opening an email and waiting… and waiting… but the images take forever to load. Or worse — they don’t load at all, leaving empty blank spaces.

Frustrating, right?

This is exactly what your users experience when images are not optimized properly.

In real-world scenarios, many users check emails on mobile data or slow internet connections. If your images are too large, your email becomes heavy and slow, which can lead to users losing interest and closing it.

That’s why it’s important to compress and optimize your images. Smaller image sizes help your email load faster and create a smoother experience for your audience.

But there’s another important problem.

Some email clients block images by default. This means your user might not see your images at all unless they manually enable them.

This is where the alt attribute becomes very useful.

The alt text provides a description of the image, so even if the image doesn’t load, users still understand what it’s about.

Here’s a simple example:

<img src="image.jpg" alt="Special discount offer banner" width="100%" style="display:block;">

In simple terms: optimized images make your email faster, and alt text ensures your message is never lost — even when images fail to load.

5. Limit the Use of Background Images

Imagine you designed a beautiful email with a stylish background image — maybe a gradient, a pattern, or a promotional banner behind your text. It looks amazing on your screen.

You send it out… and then something unexpected happens.

Some users open the email and see the full design. But others? They only see plain text on a blank background — or worse, text that becomes hard to read.

Why does this happen?

Not all email clients support background images properly. Some ignore them completely, while others display them inconsistently.

This means your design might not look the same for everyone.

That’s why it’s important to limit the use of background images in email design.

If you do choose to use them, always make sure your content is still readable without the image. Your text should have enough contrast and should not depend entirely on the background image to be visible.

For example, avoid placing light text on a background image without a fallback color. Instead, use a solid background color as a backup.

<td style="background-color:#ffffff;">
  Your content here
</td>

In simple terms: background images can enhance your design, but your email should still look clean and readable even if they don’t load.

6. Avoid JavaScript

Imagine you want to make your email interactive — maybe add a button that shows a popup, or a dynamic feature that changes content when clicked. So you use JavaScript, just like you would on a website.

You send the email… excited to see it in action.

But when users open it, nothing works.

No interaction. No dynamic behavior. Just a static email.

What went wrong?

The truth is, most email clients completely block JavaScript. This is mainly done for security reasons, to protect users from malicious code.

So even if you include JavaScript in your email, it will simply be ignored — or removed entirely.

That’s why it’s important to avoid using JavaScript in HTML emails.

Instead, focus on simple and reliable alternatives like:

• Clickable buttons using links
• Well-designed layouts using HTML and CSS
• Clear call-to-action (CTA) sections

For example, instead of using JavaScript for a button action, you can use a simple link:

<a href="https://example.com" style="background-color:#007BFF; color:#ffffff; padding:10px 15px; text-decoration:none;">
  Click Here
</a>

In simple terms: JavaScript may work on websites, but in emails, it won’t. Keep your design simple, safe, and compatible across all email clients.

7. Provide a Plain Text Version

Imagine receiving an email, but instead of a nicely designed layout, you only see raw content — no images, no styling, just simple text.

At first, it might feel strange… but for some users, this is completely normal.

Not everyone views emails the same way. Some people prefer plain text emails, and in some cases, certain email clients or security settings may block HTML content entirely.

If your email only has an HTML version, these users might see nothing — or worse, a broken message.

That’s why it’s important to always include a plain text version along with your HTML email.

The plain text version is a simplified version of your email. It removes all design elements and keeps only the essential content, making sure your message is still clear and readable.

For example:

Special Offer!

Get 20% off on all products.
Visit: https://example.com

Thank you,
Your Brand

This version may not look fancy, but it ensures that everyone can access your message, no matter how they view their emails.

In simple terms: a plain text version is your backup plan — it guarantees your message is delivered clearly, even when HTML fails.

8. Use Absolute URLs

When adding links, images, or any external resources in your email, always use absolute URLs instead of relative paths.

Email clients do not have the context of your website’s structure. So if you use a relative path like /images/banner.jpg, the email client won’t know where to find that file, and it may not load at all.

Instead, you should always provide the full path to the resource, including the domain.

For example:

<!-- Incorrect (Relative URL) -->
<img src="/images/banner.jpg">

<!-- Correct (Absolute URL) -->
<img src="https://yourwebsite.com/images/banner.jpg">

This ensures that your images, links, and other resources load properly across all email clients, regardless of where the email is opened.

In simple terms: always use the full URL so your content is accessible everywhere.

9. Avoid Forms

Using forms inside emails might seem like a great idea — collecting user input directly without leaving the inbox sounds convenient.

However, in reality, most email clients do not support forms properly. Some completely block them, while others may display them but won’t allow users to submit any data.

This can lead to a confusing experience where users try to interact with your email, but nothing happens.

Instead of relying on forms inside emails, the safer and more effective approach is to redirect users to a web page where the form works reliably.

For example, you can use a clear call-to-action button:

<a href="https://yourwebsite.com/signup" 
   style="background-color:#28a745; color:#ffffff; padding:10px 15px; text-decoration:none;">
   Fill the Form
</a>

This ensures users can complete their action smoothly without any technical issues.

In simple terms: forms may look useful inside emails, but they are unreliable — always guide users to a proper web page instead.

10. Include a Clear Unsubscribe Link

Every email you send should give users an easy way to opt out.

If subscribers find it difficult to unsubscribe, they may take a different route — marking your email as spam. This can negatively impact your deliverability and damage your sender reputation over time.

Email providers and spam filters also look for a visible and working unsubscribe option. Emails without it are more likely to be flagged or blocked.

That’s why it’s important to include a clear and accessible unsubscribe link, usually placed in the footer of your email.

For example:

<p style="font-size:12px; color:#777;">
  If you no longer wish to receive these emails, 
  <a href="https://yourwebsite.com/unsubscribe">unsubscribe here</a>.
</p>

This small addition builds trust with your audience and keeps your email practices compliant with industry standards.

In simple terms: making it easy to unsubscribe protects your reputation and improves the chances of your emails reaching the inbox.

11. Maintain Branding Consistency

Your email should feel like a natural extension of your brand.

When users open your email, they should instantly recognize who it’s from — even before reading the content. This builds familiarity and trust over time.

To achieve this, maintain consistent branding across all your emails. This includes using the same logo, colors, fonts, and overall visual style that you use on your website or app.

For example, if your brand uses a specific color for buttons or headings, make sure the same style is applied in your emails as well.

Here’s a simple example:

<!-- Logo -->
<img src="https://yourwebsite.com/logo.png" alt="Your Brand Logo" width="150">

<!-- Brand Color Button -->
<a href="https://yourwebsite.com" 
   style="background-color:#ff6600; color:#ffffff; padding:10px 15px; text-decoration:none;">
   Visit Website
</a>

Consistent branding not only makes your emails look professional but also helps users quickly identify and trust your communication.

In simple terms: keep your design consistent so your audience always knows it’s you.

12. Use Media Queries

12. Use Media Queries

Not all users open emails on the same device. Some read emails on large desktop screens, while others check them quickly on their mobile phones.

If your email is not optimized for smaller screens, users may have to zoom in, scroll too much, or struggle to click buttons — leading to a poor experience.

This is where media queries help.

Media queries allow you to apply different styles based on the screen size. This means you can adjust layouts, font sizes, and even hide or show certain elements depending on the device.

For example, you can make text larger on mobile or stack columns vertically for better readability.

Here’s a simple example:

<style>
  @media only screen and (max-width: 600px) {
    .container {
      width: 100% !important;
    }
    .two-column {
      display: block !important;
      width: 100% !important;
    }
    .text {
      font-size: 18px !important;
    }
  }
</style>

This ensures your email adapts smoothly when viewed on smaller screens.

In simple terms: media queries help your email look good on both desktop and mobile by adjusting the design based on screen size.

13. Use Scalable Images

Images play a big role in making your emails visually appealing, but they need to adapt to different screen sizes.

If you use images with fixed widths, they may look fine on desktop but become too large or break the layout on smaller screens like mobile devices.

To avoid this, use scalable images that adjust automatically based on the screen size.

This can be done by setting the image width to 100% and allowing the height to scale proportionally. This way, the image fits perfectly within its container without stretching or overflowing.

Here’s a simple example:

<img src="https://yourwebsite.com/image.jpg" 
     alt="Promotional banner" 
     style="width:100%; max-width:600px; height:auto; display:block;">

In this example, the image will resize smoothly across different devices while maintaining its original proportions.

In simple terms: scalable images ensure your design stays clean and responsive, no matter what screen your email is viewed on.

14. Use Large and Tappable CTAs

Your call-to-action (CTA) is one of the most important parts of your email — it’s where you want users to click and take action.

But if your button is too small or placed too close to other elements, users on mobile devices may struggle to tap it correctly.

On touchscreen devices, precision is limited. A small button can lead to missed clicks or frustration, which may cause users to abandon the email altogether.

To avoid this, make sure your CTAs are large, clearly visible, and well-spaced.

Use enough padding to increase the clickable area and leave space around the button so it’s easy to tap without accidentally clicking something else.

Here’s a simple example:

<a href="https://yourwebsite.com" 
   style="display:inline-block; padding:15px 25px; 
          background-color:#007BFF; color:#ffffff; 
          text-decoration:none; font-size:16px;">
   Shop Now
</a>

This creates a button that is easy to tap and works well across both desktop and mobile devices.

In simple terms: bigger and well-spaced buttons make it easier for users to take action, especially on mobile.

15. Minimize Image Dependence

Images can make your email look attractive, but they shouldn’t carry your entire message.

Many email clients block images by default, which means users might open your email and see empty spaces instead of important content.

If your message is only inside images, users may miss it completely.

That’s why it’s important to ensure your core message is always visible as text, not just inside images.

Use images to support your content, not replace it. Also, always include alt text so users can understand what the image represents if it doesn’t load.

For example:

<p>Get 20% off on all products this weekend!</p>

<img src="https://yourwebsite.com/offer.jpg" 
     alt="20% discount on all products">

In this case, even if the image doesn’t load, the user still understands the offer.

In simple terms: don’t rely only on images — make sure your message is clear even without them.

16. Use a Single Column Design

When it comes to email design, simplicity works best — especially on mobile devices.

Many users read emails on their phones, where screen space is limited. Complex layouts with multiple columns can become hard to read, requiring users to zoom in or scroll sideways.

This is why a single column layout is a safe and effective choice.

A single column design stacks content vertically, making it easy to read from top to bottom without any confusion. It also adapts naturally to smaller screens without breaking the layout.

Using too many columns or deeply nested tables can create rendering issues in some email clients, leading to broken designs.

Here’s a simple example:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding:20px;">
      <h2>Welcome!</h2>
      <p>This is a simple single-column email layout.</p>
    </td>
  </tr>
</table>

This structure keeps everything clean and easy to follow across all devices.

In simple terms: a single column layout improves readability and ensures your email looks good on both desktop and mobile.

17. Use Proper Font Size and Line Spacing

Good design isn’t just about colors and images — readability plays a huge role in how users interact with your email.

If your text is too small, users may struggle to read it, especially on mobile devices. If the lines are too close together, the content can feel cramped and hard to follow.

To create a comfortable reading experience, it’s important to use appropriate font sizes and line spacing.

A font size between 14px and 16px is generally ideal for body text. For line spacing, a slightly higher value helps improve readability and makes the content feel less crowded.

Here’s a simple example:

<p style="font-size:16px; line-height:1.5; font-family:Arial, sans-serif;">
  This text is easy to read on both desktop and mobile devices.
</p>

This combination ensures that your content is clear and comfortable to read across different screen sizes.

In simple terms: use readable font sizes and proper spacing so your audience can easily understand your message without effort.

18. Include Proper Footer Information

The footer of your email might seem like a small section, but it plays an important role in building trust and credibility.

Users often scroll to the bottom to verify who the email is from. Missing or unclear information can make your email look less trustworthy.

That’s why it’s important to include essential details in your footer.

This typically includes your company name, physical address, contact information, and links to policies like privacy or terms of service.

Providing this information not only builds transparency but also helps you stay compliant with email regulations.

Here’s a simple example:

<p style="font-size:12px; color:#777;">
  Your Company Name<br>
  123 Business Street, City, Country<br>
  Email: support@yourwebsite.com<br>
  <a href="https://yourwebsite.com/privacy">Privacy Policy</a> | 
  <a href="https://yourwebsite.com/terms">Terms of Service</a>
</p>

This ensures your email looks professional and provides users with all necessary information.

In simple terms: a clear footer builds trust and makes your email more reliable and compliant.

19. Keep It Simple and Compatible

When designing emails, simpler is almost always better.

Unlike modern websites, email clients have many limitations. Advanced CSS, complex layouts, and interactive features may not work consistently across different platforms.

If your design is too complicated, it increases the chances of something breaking — especially in clients like Outlook.

That’s why it’s best to stick with basic HTML structures and widely supported styling techniques.

Use simple layouts, avoid unnecessary complexity, and focus on delivering your message clearly.

For example, instead of using advanced CSS techniques, rely on simple table structures and inline styles:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding:20px; font-family:Arial, sans-serif;">
      Simple and reliable content
    </td>
  </tr>
</table>

This approach ensures your email works consistently across most email clients without unexpected issues.

In simple terms: keep your design simple so it works everywhere without breaking.

20. Optimize Subject Line and Preheader Text

Your subject line and preheader text are the first things users see — even before opening your email.

If they are unclear, too long, or look like spam, users may ignore your email or delete it immediately.

That’s why it’s important to keep them clear, concise, and meaningful.

The subject line should quickly tell users what the email is about, while the preheader text adds a bit more context and encourages them to open it.

Avoid using excessive CAPITAL LETTERS, too many exclamation marks, or spam-like words, as these can trigger spam filters and reduce your email’s deliverability.

Here’s a simple example:

Subject: Get 20% Off Your Next Purchase

Preheader: Limited-time offer on your favorite products. Don’t miss out!

This combination is clear, professional, and gives users a reason to open the email.

In simple terms: a good subject line grabs attention, and a strong preheader supports it — together, they improve your open rates.

21. Test Before Sending

No matter how well you design your email, it’s always important to test it before sending.

An email might look perfect in your editor, but it can appear very different when opened in various email clients or devices.

Small issues like broken layouts, missing images, or incorrect links can affect the overall user experience.

That’s why you should test your email with real content across multiple devices and email clients to ensure everything works as expected.

Check for things like:

• Layout consistency
• Image loading
• Link functionality
• Mobile responsiveness

Testing helps you catch and fix issues before your audience sees them.

Also, keep in mind that email design is always evolving. Different email clients update their support and behavior over time.

So it’s important to stay up-to-date with the latest best practices and continuously improve your templates.

In simple terms: always test your email before sending to make sure it looks and works perfectly for everyone.

Remember to stay up-to-date with the latest best practices and guidelines, as email client capabilities and standards may change over time.

"Paint your emails with the hues of captivating tales, leaving your subscribers eagerly awaiting your next chapter"

Final Thoughts

Designing HTML emails that work across all email clients might feel challenging at first — but once you understand the fundamentals, it becomes much easier.

The key is not to chase complex designs, but to focus on reliability, readability, and consistency. A simple, well-structured email that works everywhere is far more effective than a complex design that breaks in different clients.

By following these best practices — from using table-based layouts and inline CSS to optimizing images and testing your emails — you are already ahead of many beginners.

Remember, email design is not just about how it looks, but how it performs and delivers your message to every user, on every device.

Start simple, keep improving, and over time you’ll build email templates that are both professional and highly effective.

Now it’s your turn — try building your own email template using these best practices and see the difference 🚀