Creating effective HTML emails involves close attention to several key elements to ensure that your emails look attractive, function correctly, and display robustly across different email clients and devices.
Here are the detailed best practices for HTML email design given below,
1. Use tables for layout
Why: Tables provide a good way to organize your email content, guaranteeing relevant display across different email clients.
How: Use <table>, <tr>, and <td> tags to create grid layouts. Avoid using CSS-based layouts as they may not be supported by all email clients.
2. Inline CSS
Why: Some email clients don’t accept external CSS, hence inline styles ensure that your styles are applied.
How: Apply styles using style attributes directly within HTML (inline CSS) tags.
<td style="padding: 10px; font-family: Arial, sans-serif; color: #333333;">3. Limit the width
Why: A width of around 600px ensures readability and prevents horizontal scrolling on most devices.
How: Set the main container width to 600px of the table.
<table width="600" cellpadding="0" cellspacing="0">4. Responsive design
Why: To provide a clear view experience on both mobile and desktop devices.
How: To make your email page responsive, use media queries (@media) and viewport meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (max-width: 600px) {
.main { width: 100% !important; }
}
</style>5. Use web-safe fonts
Why: Web-safe fonts ensure your text looks relevant across different email clients.
How: To apply the common fonts like Arial, Verdana, and Georgia and provide a fallback font.
<p style="font-family: Arial, sans-serif;">Your text here</p>6. Alt text for images
Why: Alt text ensures that your message is communicated even when images are loading failed or blocked on the email page.
How: Add the alt attribute in the image tag so the alt text can be displayed when the image fails to load.
<img src="logo.png" alt="Company logo" style="display: block; width: 100%;">7. Simple and clear design
Why: Keeping a simple and clear design helps focus the recipient's attention on your main message and call to action.
How: Avoid clutter, use whitespace effectively, and prioritize main content.
8. Bulletproof buttons
Why: HTML/CSS buttons ensure that buttons render correctly even when images are disabled.
How: Use <a> tags styled with CSS instead of images for buttons. Don’t use images for buttons.
<a href="https://example.com" style="background-color: #28a745; color: white; padding: 10px 20px; text-decoration: none; display: inline-block; border-radius: 5px;">Click me</a>9. Test thoroughly
Why: Email clients show HTML in different ways, hence testing helps ensure your email looks good everywhere.
How: Use testing tools like Litmus or Email on Acid, or send test emails to different accounts like Gmail, Outlook, and Yahoo to see how they render.
10. Avoid JavaScript and Flash
Why: Most email clients don’t support JavaScript or Flash, and including them can trigger spam filters.
How: Don’t use JavaScript or Flash in your HTML emails.
11. Minimize the use of images
Why: Some email clients block images by default, so your email should be understandable even without images.
How: Use images sparingly and make sure the email content is effective even without them.
12. Unsubscribe link
Why: Giving an easy way to unsubscribe is not only a best practice but also a legal requirement in many authorities.
How: Include a clear and prominent unsubscribe link
<p>If you don't want to further receive these emails, you can <a href="https://example.com/unsubscribe" style="color: #007BFF;">Unsubscribe here</a>.</p>13. Proper use of headings
Why: Using the proper headings to improve readability and accessibility, helping screen readers navigate the content.
How: Using proper heading tags such as <h1>, <h2>, etc.
<h1 style="font-family: Arial, sans-serif; font-size: 24px; color: #333333;">Welcome to our newsletter</h1>
By following these guidelines, you can create HTML emails that are visually attractive, functional, and compatible with a variety of email clients and devices, ensuring a positive experience for your recipients.
Example template
Here's a basic HTML email template that incorporates these best practices:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Define the character set and viewport for responsive design -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Template</title>
<style>
*, root{
font-family: system-ui, Arial, Helvetica, sans-serif;
font-size: large;
}
p { margin: 0.3rem auto; }
/* Reset margin and padding for body */
body { margin: 0; padding: 0; }
/* Reset table border spacing */
table { border-spacing: 0; }
/* Reset padding for table cells */
td { padding: 0; color: #333333; }
.main table td { padding: 20px; padding-top: 0px; }
/* Wrapper for the entire email */
.wrapper { width: 100%; table-layout: fixed; }
/* Main container for the email content */
.main { background-color: #ffffff; margin: 0 auto; width: 100%; max-width: 600px; }
/* Style for the button */
.btn { background-color: #28a745; color: white; padding: 10px 20px; text-decoration: none; display: inline-block; border-radius: 5px; }
/*Style for an image in email*/
img{ max-width: 100%; height: auto;}
/*Style for a link in table*/
a{color: #007BFF; text-decoration: none;}
a:hover{color: #007BFF; text-decoration: underline;}
/* Responsive adjustments */
@media only screen and (max-width: 600px) {
.main { width: 100% !important; }
}
</style>
</head>
<body>
<!-- Center the wrapper in the email client -->
<center class="wrapper">
<!-- Main table for email content -->
<table class="main" width="100%">
<tr>
<td>
<!-- Hidden preheader text for email preview -->
<div style="display: none; max-height: 0; overflow: hidden;">This is your preheader text.</div>
<!-- Inner table for email content with padding -->
<table width="100%">
<tr>
<!-- Padding for content and defining font styles -->
<td style="padding: 20px; font-family: Arial, sans-serif; color: #333333;">
<!--Add an image in email page-->
<p>
<img width="50%" src="https://media.istockphoto.com/id/1340404865/vector/cyber-attack-data-phishing-with-fishing-hook-laptop-internet-security-vector-stock.jpg?s=612x612&w=0&k=20&c=pHNhhSuz8_HSp9LG_eVw9fir7BYj7piKiFpBg1pGXlo=" align="welcome message" style=""/>
</p>
<!-- Main heading of the email -->
<h1 style="font-size: 24px;">Welcome to Our Newsletter</h1>
<!-- Paragraph with a welcome message -->
<p>Thank you for subscribing to our newsletter. We hope you enjoy our content.</p>
<!-- Button linking to the website -->
<a href="https://training.mindstick.com/" class="btn">Visit Our Website</a>
</td>
</tr>
<tr>
<!-- Padding for content and defining font styles -->
<td style="padding: 20px; font-family: Arial, sans-serif; color: #333333;">
<p >Thank you,</p>
<p >MindStick</p>
<p >
<a href="https://training.mindstick.com/">https://training.mindstick.com</a>
</p>
</td>
</tr>
<tr>
<td> <!-- Unsubscribe link for the email --> <hr/> <p>If you no longer wish to receive these emails, you can <a href="https://example.com/unsubscribe" style="color: #007BFF;">unsubscribe here</a>.</p> </td> </tr> </table> </td> </tr> </table> </center> </body> </html>Output :
Leave Comment