How to Make Your Email Code Work on Every Platform

Author markupfox
Markupfox
Email Code Compatibility July 20, 2025 15 min read
feature-website

Crafting the perfect email is only half the job. Making sure it renders perfectly across Gmail, Outlook, Apple Mail, and mobile apps is what separates good from great. Here's how we handle it.

Understand Email Client Rendering Differences

Every email client has its own rendering engine:

  • Outlook uses Microsoft Word’s rendering engine.
  • Gmail strips tags in some cases.
  • Apple Mail has great support for modern CSS.
  • Yahoo/Thunderbird behave unpredictably with newer CSS features.

Use Table-Based Layouts

Avoid div-based layouts. Stick to table, tr, and td for structural consistency.

<table width="100%" cellpadding="0" cellspacing="0" border="0"> 
<tr>
<td align="center" style="padding: 20px;">
<p style="font-size: 16px;">Welcome to our newsletter!</p> </td> </tr> </table>

Works On: Outlook, Gmail, Yahoo, Apple Mail, Thunderbird

Inline All CSS Styles

Many clients strip out tags. Always use inline styles.


<td style="font-family: Arial, sans-serif; color: #333333; padding: 10px;">
  Thank you for subscribing!
</td>

How to Improve Your JavaScript Skills by Writing Your Own Web Development Framework

Avoid External Fonts & Background Images

  • Gmail and Outlook often block them.
  • Use web-safe fonts like Arial, Verdana, Georgia.
  • For backgrounds, use solid colors or fallback options.
<td style="background-color: #f2f2f2; color: #000;">
  Simple background, always visible.
</td>

Use Fixed Widths and Responsive Media Queries Carefully


<style>
  @media screen and (max-width: 600px) {
    .mobile {
      width: 100% !important;
      display: block !important;
    }
  }
</style>

✅ Responsive Support: Gmail App, Apple Mail, iOS Mail

⚠️ Limited Support: Outlook desktop (media queries often ignored)

Alt Text for All Images

Images may not load by default. Always use alt attributes.


<img src="email-banner.jpg" alt="Welcome banner" width="600" style="display:block;" />

Test on All Major Platforms

We use tools like:

  • Litmus
  • Email on Acid
  • Manual testing on devices and apps

Conclusion

Coding emails for one platform is easy — but building for all of them takes strategy. From using tables and inline CSS to testing across clients, we make sure your emailers perform everywhere.

💡 Tip:
<!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;"> <v:fill type="tile" src="bg.jpg" color="#f2f2f2" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> Your content here </div> <!--[if mso]> </v:textbox> </v:rect> <![endif]-->