Email Rendering Guide for (Email) Marketers

Did you know that every email has 15 000 different rendering previews? According to Litmus, it’s true.

You’ve probably experienced some rendering issues when you sent out your email, such as images not appearing, background not rendering, rounded corners becoming square, columns breaking, and so on.

You must be wondering what went wrong since you used a professional responsive email builder and followed all the best practices on how to create a responsive HTML email.

That’s why you are here reading this. You’ve started digging deeper into understanding the crazy challenges email developers face every day.

You came to the right place because we are going to teach you everything you need to know about email rendering.

You will find out about the most common rendering issues and how email clients render certain elements or features used in an email.

What you should know about HTML email

Let’s go back to the basics. You probably already know the difference between plain text and HTML emails. What you might not know is that almost every email is an HTML email.

It just depends on how much HTML is being used.

The more elements an email has, or features being used in that email (for example, columns, images, text, background images, colors, links), the more HTML will be in the email.

Today, luckily, you don’t need to code an HTML email anymore because there are many responsive email template builders that can do all the coding work for you.

Light HTML email: Plain Text email

Plain text HTML emails use only plain text and maybe a link or two. The HTML code is very light due to the absence of design elements.

 

Heavy HTML email

As you can see from the example below, HTML emails use different types of fonts, colors, background colors, CTA, round corners, columns, images, multiple links, etc.

Source: Chamaileon

Why do emails render differently?

There are 5 main elements that determine how an email renders:

• Email Service Providers or ESP
• Operating Systems
• App and Web-Based Email Clients
• Screen Sizes
• Image Enabled or Blocked

Email Service Providers (ESP)

Depending on which email service provider you use, it’s very likely that they will strip some parts of your HTML code. That’s why even if you use the same email design across different ESPs, the email template and its HTML code will look different when sent out with each ESP.

Source: Chamaileon

Operating Systems

There are different computer operating systems (Windows, Linux, or Apple operating systems) installed on your office or home computer. This is another factor determining how your email will render.

App and Web-Based email clients

Email and web-based clients such as Yahoo, Gmail, Office 365, AOL, and Outlook are different. And each of them displays your HTML email differently. There are no defined standards for how an email client should display the email properties.

Screen sizes

When designing emails, you should keep in mind 3 main screen types and sizes:

• Smartphones
• Desktop and Laptop
• Tablet

Emails are mostly open on smartphones, that is true, but there are hundreds of versions of small screens.

Source: Adobe Consumer Email Survey Report 2017

Images enabled/blocked

Another huge factor is images being enabled or blocked. You have the option to enable and block images in many email clients.

Images blocked

This is my Gmail inbox with the images blocked option on.

 

Images enabled

This is how the email looks when I allow images to be displayed.

Email clients that you need to be careful with

Even if you use the recommended best practices on how to create responsive HTML emails, you will surely experience issues WITH some email clients. Let’s prevent that from happening.

The most important and most used email clients are:

• Apple Mail, with a market share of 40.3%
• Gmail, with a market share of 20%
• Outlook, with a market share of 14%
• Yahoo!Mail, with a market share of 6%

Source: The Litmus Email Client Market Share – May 2019

There is no one-size-fits-all when it comes to email standards. This is mainly due to the different interests, priorities, and policies of the big players in the email industry.

In the upcoming section, we will cover the most common rendering issues with HTML email designs in these biggest email clients, one by one.

Since Apple Mail doesn’t have major email rendering issues, we will skip it.

Desktop email client rendering issues

Outlook email rendering

Here are the main email rendering issues you might face when using Outlook:

• Background images
• Border radius property (round corners)
• Link color
• Margins and paddings
• Custom fonts

Background images in Outlook 2007 and Outlook 2013

Unfortunately, Outlook 2007 – 2013 does not support background images. If you want the background image to show on Outlook, you need to use Vector Markup Language or VML.

You should also always use a fallback background color. This feature is available in responsive email builders such as Chamaileon.

If the image doesn’t render, the fallback red color shown in the image below will.

Note: Outlook 2016 and Office 365 Outlook (also known as OWA) support background images.

Border-radius property

Like background images, Outlook 2007 – 2013 also doesn’t support round corners.

Here you can see the background image and round corners not rendering. In this case, we haven’t used fallback background color.

 

Link color

Blue/purple underlines persist when viewed on different email clients. In Chamaileon, we managed to overwrite this behavior with some coding hacks.

You can see it in the footer section under the ”Unsubscribe” link. The link color stayed the same in Outlook 2010.

Margins and Paddings

Margins and padding only render well if you use a table layout. It is best practice to build an HTML email in a table layout.

Custom Fonts

Outlook doesn’t support custom fonts and older Outlook’s default fallback font is Times New Roman — a feature that’s very hard to overwrite.

Gmail email rendering

Here are the main email rendering issues you might face when using Gmail:

• Show/hide on mobile and show/hide on desktop
• Email clipping
• Background images for non-Google accounts
• Custom fonts
• Link color
• Phone numbers and URLs

Show on Mobile/ Desktop feature

If you copy-paste your HTML email design directly to Gmail, without using an email service provider, and you’ve used show on mobile or desktop feature for some of the parts of your email, it will show both.

Therefore, you need to use an ESP in order for this feature to work in Gmail.

Also, if you forward that email, it falls apart as well.

Tip: never use forward to review your emails, always use “send test email” option to check your emails.

Email clipping

If you have an email template with a size larger than 102kB, Gmail will not display the content and it will hide it behind a “View entire message” link.

To avoid this, keep the email HTML weight below 102kB.

How will you know that your email is less than 102kB? Use ”send test email” to check the size.

Source: Litmus

Background Images for Non – Google Accounts

Make sure you always have a fallback background color behind the background image, because it won’t render in Gmail.

Custom fonts

Just like Outlook, Gmail doesn’t support custom fonts. However, it does support a lot of web fonts, not just web safe-fonts.

Link color

Blue/purple underline persists when viewed on different email clients. In Chamaileon, luckily, we managed to overwrite this behavior.

Phone numbers and URLs

Gmail automatically converts phone numbers and URLs into links.

Yahoo

Min-device-width and max-device-width are not supported in Media queries. Yahoo recognizes max-width but not max-device-width.

Mobile clients

Android

Video

Android 4.4 renders videos but does not play them.

Gmail for Mobile

Dates and numbers

Dates and numbers turn blue when sending out HTML emails on Gmail for Mobile.

Outlook for Mobile

Blue link

Outlook for Mobile turns .com into a blue link.

If there are other rendering issues that you experienced and you believe are very common, please comment below and we will test them and add them to the article!

Testing Your Email Preview

Sending out email campaigns is always stressful. Making sure that you don’t send out broken emails is a big part of that stress.

Here’s how you can make sure that your HTML email template renders perfectly on all email clients and devices:

1. Preview your email template throughout the email design process using an email builder.
2. Send test emails to visualize your email design in your email client and in different devices.
3. Test your HTML email with a professional email testing tool that allows you to preview your email in different email clients and devices.

We’ve compiled a list of the best email testing tools online.

You can start development from scratch in these tools, or you can copy-paste your email HTML code to their editors. We have our HTML ready so we can paste it as follows.

Test HTML Emails with Litmus

Litmus is the biggest name in email rendering tests. They have a really good service but offer a very short free trial period of 3 days only.

Currently, they have 43 email clients in which you can preview your email.

Test HTML Code with Email on Acid

Email on Acid also has quite a powerful preview tool, where you can render your email templates in less popular email clients like Yandex.ru or Orange.fr.

Their trial period is limited to 7 days.

Live previews guarantee the option to test in most of the significant environment setups of browsers, email clients, and operating systems. It’s also possible in both email testing services to share the outcomes with your colleagues using a sharing link. We can now compare and contrast the results of the two testing service.

Checking the Compatibility List of Your HTML Email Builder

If you are using a drag and drop email builder to design your emails, make sure to check their compatibility list. Not all email design tools have the same compatibility list

Our email design builder, Chamaileon, has a long compatibility list. We are going to list them here below so you can see which email clients your email will render perfectly in.

How to Avoid Email Rendering Issues

Here are some tips on how to avoid HTML email rendering issues:

• Always use an Email Service Provider
• Design your emails with a professional email design tool
• Make sure your email width is around 600px.
• Your HTML email size shouldn’t exceed 102kb.
• Use a fallback background color
• Use web safe fonts
• Study image display rules in every email client
• Never use Javascript to code HTML emails.
• Don’t use Flash to design your emails
• Be careful with columns in emails
• Use GIFs instead of videos in your emails.

Always use an email service provider

Use a good email service provider when sending out your emails.

There are many email service providers that you can use for free, like Mailchimp or Bronto. If you copy and paste your HTML code to Gmail or Outlook only, without using an email service provider, that will surely mess up the code and render your emails badly. We have a list of email service providers that you can integrate with. Check out our integrations list here.

Design your emails with a professional email design tool

Using an email builder will help you create a responsive email within minutes. It automatically optimizes the sizes of the images and email width to 600px, has fallback fonts in case your custom font won’t render properly, and fallback background image colors in case your background image doesn’t render.

Make sure your email width is 600px

When designing your email you should use a 600px width because it’s responsive in most email clients. You can read more about it in our detailed article about the limitation of HTML width and size.

Your HTML email size shouldn’t exceed 102kb.

To avoid your email content being hidden behind a ‘’view email message entirely’’ link, keep your email templates weight below 102kB.

Use a fallback background color

Since Outlook doesn’t support background images, we recommend always using a fallback background color in case your background image doesn’t appear. In advanced email builders such as Chamaileon, you can use that feature. Here is a list of email clients that support background images.

Use web safe fonts

Use web-safe fonts in your emails, such as Verdana, Times New Roman, and Georgia, because they have the highest compatibility. You can also read a more in-depth article on how to choose the right fonts for your email design.

Study image display rules in every email client

Image display options for popular email clients are different for each email client, and you can check all of those in the table below.

Source: Campaign Monitor

Firewall rules can block image hosting domains. In this case, the receiver of the email needs to enable firewall rules to be able to see images.

Things that you can do to help you with this issue is to not create emails that depend only on images displayed in the email, but always have some text and always provide a web version of the email in the link.

Never use Javascript to code HTML emails.

Most email clients will automatically block any JavaScript that is found in emails because it is seen as a security risk.

Don’t use Flash to design your emails

Similar to JavaScript, Flash is typically reserved for browsers and can be suspicious when found in emails. It is blocked by most email clients because it can allow hackers to gain control of your computer because it is not secure.

Use GIFs instead of videos in your emails.

All email marketers know that they can boost conversion with videos. Unfortunately, email clients are lagging behind in supporting our efforts for more exciting marketing emails. This can be solved by using GIF images instead of videos in your emails. We’ve created a video tutorial where you can learn how to create and add a GIFs to your email.

Be careful with columns in emails

Columns can sometimes break under each other in Outlook and other email clients. You can use the ”Reorder on mobile” option switched off in this case. This feature is supported in more advanced email builders only, like Chamaileon.

Summing up

Follow all the best practices on how to create a responsive HTML email and our tips from the article on how to avoid the most common rendering issues in the biggest email clients.

Do not import your HTML email directly to Gmail and Outlook without using a proper Email Service Provider, because in almost all cases it will ruin the HTML code. If you don’t know how to import your HTML-coded template to your Email Service Provider, we have a detailed guide on how to import the code.

Professional email builders will help you to create responsive HTML email templates faster since they already use some HTML email optimization best practices (such as 600px width, table layout, etc), but you still need to test your emails and check their previews on various clients using email testing tools such as Litmus and Email on Acid.