1. Use Table-Based Layouts
- Most email clients still rely on HTML tables for consistent rendering.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="600" cellpadding="20" cellspacing="0" border="0">
<!-- Content here -->
</table>
</td>
</tr>
</table>
✅ 2. Keep CSS Inline
- Use inline CSS for styles. Many email clients strip out
<style>blocks.
<td style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
Hello, world!
</td>
✅ 3. Avoid External CSS/JS
- Don’t link external stylesheets or scripts—most email clients block them.
- Instead, use inline styles and minimal styling.
✅ 4. Use Web-Safe Fonts
- Stick with fonts like
Arial,Verdana,Georgia,Tahoma, etc., to ensure cross-client compatibility.
✅ 5. Use Absolute Image URLs
- Host your images online and use full URLs (e.g.,
https://yourdomain.com/images/logo.png). - Add
altattributes for accessibility.
✅ 6. Responsive Design with Media Queries (Optional)
- Use media queries only if mobile responsiveness is critical, but note limited support in older clients.
<style>
@media only screen and (max-width: 600px) {
.container {
width: 100% !important;
}
}
</style>
✅ 7. Keep Widths ≤ 600px
- For readability on mobile and desktop, limit the main container to 600px wide.
✅ 8. Use Bulletproof Buttons
- Use HTML buttons styled with tables so they render everywhere.
<table cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#007BFF" style="padding: 10px 20px; border-radius: 4px;">
<a href="#" style="color: #fff; text-decoration: none;">Click Me</a>
</td>
</tr>
</table>
✅ 9. Test Across Email Clients
- Use tools like:
To test for Gmail, Outlook, Apple Mail, etc.
✅ 10. Add Fallback Text (Plain-Text Version)
- Include a simple plain-text version of the email for clients that can’t render HTML.
✅ 11. Include Unsubscribe and Footer Info
Unsubscribe link (if it’s a marketing or newsletter email)
Always include:
Company name/address