Simplifying the Complex Concept of Email Rendering

Kevin is the Head of Marketing at EmailMonks, one of the largest Email Templates production company which specializes in converting PSD to email templates. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage and share insights with fellow marketers. Feel free to connect with him on Twitter.

When compared to website rendering, email rendering has a different level of complexity. According to Litmus, emails can have more than 15,000 different renderings that depend on: 

• Email Service Providers

• Operating Systems

• App and web-based email clients

• Screen sizes

• Images enabled or blocked

It is a daunting task to design and code emails in a way that overcomes all this variability and ensures a smooth experience across all devices and email clients. Although it can be taxing to do so, it can improve the performance of your email campaigns and make them look good. 

Breaking it down

If you create well-designed emails, you save the embarrassment of sending a broken email, thereby eliminating the possibility of your emails landing in the spam folder. To avoid such a scenario, let’s take a closer look at how you can simplify the intricacies of email rendering:

Use HTML tables to code emails

Just as <div> tags lead to different rendering across the diverse email clients, <table> tags should be used in emails. Tables offer a consistent experience to the email subscribers without causing any changes in formatting. It’s an excellent quick addition to help get you started on the right foot. 

Pay special attention to your preview text

There are many instances when I have received an email where the preview text is displayed as a code. They will look something like this:

Make it a point to give a relevant preview text that matches your subject line and lets the subscriber know what the email is about. It’s also essential to make sure you’re within the character limit; otherwise, it can lead to some embarrassing text cut-offs.

Always add Alt-text for images in emails

Image suppression poses a significant challenge in email rendering, and many email clients block images by default. To resolve this issue, you must include a suitable alt-text for every image. Doing so will convey the purpose of your email even with images turned off. That way, your emails are more accessible for everyone, including the subscribers who might be using visual aids or voice assistants to access your emails. 

Let’s look at how Crate&Barrel does it. Even if the subscriber views an email like this, they will still get a clear idea about what the images are about. 

Choose Inline CSS and tables over CSS Stylesheets

Emails render differently from websites and many email clients do not support stylesheets. Therefore, it is advisable to use inline styles to ensure flawless rendering. Mailgun has discussed this before when styling email, but it’s an important reminder nonetheless. 

Widths and heights should be specified in pixels rather than a percentage

Percentage values are not considered a valid property by several email clients. The safest bet is to use pixel sizes, especially when you are using larger images in your email designs. 

Write your emails in universally accepted fonts 

Email clients recognize web-safe fonts like Arial, Tahoma, and Courier. Use these fonts to make sure that your emails are readable on every email client. Do not use periods or extra spaces between letters, and it can make your email hard to read depending on the email client. Also note that if your fonts are too large, it can change the HTML coding or display ASCII text which will ultimately render the email useless.

Never design emails with JavaScript

JavaScript in emails trigger spam filters by considering the code as spam. Therefore, refrain from designing emails with JavaScript. 

Design mobile-responsive emails

Many email recipients are using emails on mobile devices; it is ideal to make your emails responsive. For mobile, design your responsive emails with a single column layout so that there are no rendering issues. 

If you need an example of what that looks like, I’ve included an example below. 

Do not add custom bullets 

Custom-designed bullets work better than standard bullets. Design an image of the bulleted list with the right alt-text. This will serve the objective of sending the email even when images are blocked in the email client. 

<BR> is better than “Float” and “Clear”

CSS properties such as Float and clear might lead to broken layout in emails. Consequently, it is better to use hard line breaks like <BR> or other HTML-based hard breaks. 

Background images should not contain any calls-to-action

Owing to the challenges of image suppression, lack of support for background images, and deliverability issues, it is highly recommended that you do not use background images as an important parameter for performance. It is always a good idea to use plain backgrounds that make your emails more readable. Even if you are using background images, do not add any CTAs to it. 

Add HTML text for CTAs

Instead of CTA button as an image, it is advisable to use HTML text that lets the subscriber know about the next action even with blocked images. 

Avoid Gmail clipping by designing emails within 102kb

Gmail likes to truncate emails that exceed the size of 102kb. Also, too large emails might trigger the spam filters. As a result, you should keep the email size within this figure. 

Maintain the text to image ratio at 80:20

To make sure that your email does not end up as spam, you should keep the text to image ratio at 80: 20. This implies that you should not send an image as the entire email as it is a commonly used tactic of spammers. 

One last thing...

Before you send any email, test it first! Testing your emails across different devices and email clients allows you to catch any mistakes ahead of time. If you do notice any rendering issues, be sure to fix them before deploying the email only after it is resolved. 

With these simple and actionable tips, you will certainly be able to create user-friendly emails. When you create better emails, you create a better user experience which encourages opens and clicks, which helps you build a better sender reputation in the long run.