Overview

Best Practices for Email Template Designing help create effective HTML emails while considering spam filters and varying email client support.

• Spam Filter Compliance: Design emails to avoid triggering spam filters.

• Email Client Compatibility: Ensure readability across different email platforms.

• Limited Interactive Elements: Avoid Flash, JavaScript, and HTML forms for better inbox compatibility.

Following these guidelines ensures well-structured, accessible, and functional email templates.

Plan & Permissions

To design and manage email templates in Meritto, ensure that you have:

• Access to the Communications Module within Meritto CRM.

• Permissions to create, edit, and send emails (granted by an Admin or a user with relevant access rights).

• Proper CNAME mapping to maintain sender domain reputation and prevent email deliverability issues.

Feature Utilization for Problem-Solving

Meritto’s Email Template Designer enables you to:

1. Create mobile-responsive email templates using a single-column layout for better readability.
   
2. Test and preview emails to ensure proper rendering across different email clients.
   
3. Optimize content for better deliverability by balancing text and images.
   
4. Apply inline CSS styling to maintain design consistency across email clients.
   
5. Set up CNAME mapping for improved email authentication and domain reputation.

Recommended Configurations

1. Use Single Column Design

• Keep the email design simple - A single column design is sufficient for most emails and they look great, no matter what device they’re on.

2. Set 600px to 800px as the Default Width

•  We recommend that you keep your email’s width close to 600px and maximum up to 800px.
•  This width will give you sufficient space for content and will fit nicely on most web and desktop clients.

3.  Keep Mobile Users in Mind

• Think First! Whether to design it on desktop and then adapting it for mobile or design the email with mobile clients primarily in mind, and then make sure it also look good on desktop as well. With the rise in popularity of mobile devices, email designers have incorporated “mobile first” design approach.

4. Every Email Client is Different

• Think First! Whether to design it on desktop and then adapting it for mobile or design the email with mobile clients primarily in mind, and then make sure it also look good on desktop as well. With the rise in popularity of mobile devices, email designers have incorporated “mobile first” design approach.

5. Sending Test Emails

•  Send test emails to yourself before launching an automation flow or bulk communication. This will help you to visualize how the email is actually looking in the mailbox.

6. Text and Image Ratio in Email

• The most common guideline you’ll hear is no more than 40% image coverage and a minimum of 60% text. While there are exceptions, this rule will generally keep you out of any deliverability issues. DO NOT SEND EMAILS WITH THE ONLY IMAGE IN THE BODY, doing this will definitely affect the email domain reputation.

7. CNAME mapping

• CNAME of the email domain is a must. CNAME records can be used to alias one name to another. CNAME stands for Canonical Name.
• A common example is when you have both example.com and www.example.com pointing to the same application and hosted by the same server. In this case, to avoid maintaining two different records, it’s common to create:
  
  A record for example.com pointing to the server IP address
  A CNAME record for www.example.com pointing to example.com
• As a result, example.com points to the server IP address, and www.example.com points to the same address via example.com. Should the IP address change, you only need to update it in one place: just edit the A record for example.com, and www.example.com automatically inherits the changes.

8. Plan for Missing or Blocked Images

• Some of the email clients will block images by default, and some users will change their settings to block images so that they consume less data. If you entirely rely on images to communicate your message, your subscribers may miss out if images aren’t downloaded. This is why it’s important to include descriptive alt text for your images. If a subscriber has turned on image blocking, your whole message will be lost. If you use text in an image then you must use HTML text wherever possible, instead.

9. Use Email-Safe Fonts

• If you use google font, you may find that many clients don’t support them. For this reason, it’s important to have a good fall-back font. Your fall-back font ensures your design still looks good without custom web fonts. Some of the fonts that are supported universally include:

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Vardana

10. Use Tables When Possible

• Forget divs and floats. Better to use tables which are the most reliable way to achieve a consistent layout. Tables also allow you to replicate something that many email clients otherwise don’t allow: floats (okay, not really CSS floats). With tables, you can take advantage of the align attribute, which was the predecessor of modern CSS floats.

• When using align=”left”, tables will stack on top of each other on smaller screens. This technique is the basis of responsive and fluid design. It works like this: You have two tables that are each 300px wide with align=”left” inside the same container. If the screen is 600 or more pixels wide (as it would be for most desktop clients) then the tables will appear side by side. If the screen is only 400px wide, then the two tables will stack on top of each other.

• Nested tables are totally safe, so feel free to nest away. You can also use colspan and rowspan, as long as you count your columns and rows carefully. Also do not send any meta tags and doctype when you send your emails (Email client do for you) means only send your mailer content. Some supported tags in html for all email clients as:

<a>,<b>,<br>,<div>,<font>,<h1>,<h6>,<hr>,<img>,<label>,<ul>,<li>,<ol>,<p>,<span>,<strong>,<table>,<tr>,<th>,<td>,<u>

• Also Use Nested tables to create your mailer layout

11. Keep Email File Size Under 100kb

• Keeping an email size under 100 KB is the key to avoiding getting caught in spam filters. Apart, keeping your email under 102kb will also prevent Gmail from “clipping” your email.

12. Avoid JavaScript, Flash, Forms and other Complex CSS/HTML

• The majority of email clients do not support JavaScript and Flash, so better don’t use them at all. Even newer codes, such as HTML5 and CSS3 have limited support.

13. Avoid Shorthand CSS when Possible

• If you see problems with a client interpreting your CSS, check to make sure you’re not using a shorthand declaration. For example, “margin-top: 5px” may work where “margin: 5px 0 0 0;” does not. It’s important to also avoid three-digit hex codes. Some clients will not recognize these, so you’ll want to make sure you always use the full six- digit hex code.

14. Use Absolute Addresses for Images

• You may be using local image references for your testing, but when you do your final send absolute images reference are a must! Also don’t use images path which are uploaded like google drive.

15. Get Rid of Strange Spacing Around an Image

• This is a doctype issue. Use display:block and it will usually remove this extra spacing.

16. Don’t use Background Images

• Some email clients can’t support background images in mailers, so avoid background images as much as possible.

17. Use Inline Styles only

• Use only inline style like “<p style=”font-size:10px”></p>”, because external & embedded style are not supported in mailer. So make sure when sending emails all style converted into inline as shown below:

18. Bulletproof CTA Buttons

• It’s painful trying to achieve the perfect cross client button. As mentioned above you should be using tables and table cells for everything like below: 

<table border="0" cellspacing="0" cellpadding="0" style="border- collapse:separate;width:auto; padding-bottom: 15px; margin-left: auto; margin-right: auto;">

<tr>

<td align="center" valign="top" style="vertical-align: top; text-align: center;

background: #1271db;">

<a href="#" style="color: #ffffff; text-decoration: none; cursor: pointer; display: inline- block; font-size: 14px; font-weight: bold; text-transform: capitalize; background: #1271db;

margin: 0; padding: 12px 25px; border: 1px solid #1271db;">Click Here</a>

</td>

</tr>

</table>

Expected Outcomes & Benefits

1. Higher email deliverability – Avoid spam filters and ensure emails land in the inbox.
   
2. ​Better mobile compatibility – Responsive designs make emails more readable on all devices.
   
3. ​Improved engagement rates – Clear CTAs and optimized layouts enhance user interaction.
   
4. ​Consistent branding – Proper styling and fallback fonts maintain design consistency across email clients.
   
5. ​Fewer rendering issues – Table-based layouts and inline styles prevent design breakage.
   

Case Study: A University’s Successful Email Optimization

A leading university using Meritto’s CRM noticed that 40% of their bulk emails were landing in spam due to excessive images and improper email formatting. After implementing Meritto’s best practices—including text-to-image balance, inline styles, and CNAME setup—their email open rates improved by 35%, and click-through rates increased by 20% within three months.

Conclusion

Designing effective email templates requires a structured, mobile-friendly approach with proper coding techniques. By following Meritto’s best practices, you can enhance readability, maintain consistent branding, and ensure high deliverability across all email clients. Adopting a text-to-image balance, bulletproof CTA buttons, and inline styles will result in better user engagement and conversion rates.