Best Practices for Email Template Designing – Meritto

Introduction

While creating an HTML of the email, there are a number of points to consider. Not only you must contend to the spam filters examining the HTML design, but also you need to deal with the lack of HTML email standards and support from across 100’s of different email clients.

We have highlighted a few things to keep in mind when designing HTML email campaigns. The viewing technology of a typical email client isn't as up-to-date as a web browser. Web browsers display interactive, dynamic content, and they update often. But interactive elements like Flash, JavaScript, or HTML forms won’t work in most email inboxes.

Best Practices: Design and Development Perspective

Much like with design, there are best practices to follow when coding HTML email:

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

While designing an email, keep in mind that it’s going to be very difficult to achieve “pixel perfection” for every single client. Instead, try to achieve an email that maintains your branding while being easy to read (and click) on all email clients.

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:

o Arial

o Arial Black

o Comic Sans MS

o Courier New

o Georgia

o Impact

o Times New Roman

o Trebuchet MS

o 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 benefit 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 sent any meta tags and doctype when you sending your emails (Email client do for you) means only sent your mailer content. Some supported tags in html for all email clients as:

,<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

Majority of email clients do not supports 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>