Every year, on the Tuesday following Thanksgiving, the world, celebrates Giving Tuesday. A global day meant to inspire goodness and...

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.
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.
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.
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
There are 5 main elements that determine how an email renders:
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
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.
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.
When designing emails, you should keep in mind 3 main screen types and sizes:
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
Another huge factor is images being enabled or blocked. You have the option to enable and block images in many email clients.
This is my Gmail inbox with the images blocked option on.
This is how the email looks when I allow images to be displayed.
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:
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.
Here are the main email rendering issues you might face when using Outlook:
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.
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.
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 padding only render well if you use a table layout. It is best practice to build an HTML email in a table layout.
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.
Here are the main email rendering issues you might face when using Gmail:
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.
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
Make sure you always have a fallback background color behind the background image, because it won’t render in Gmail.
Just like Outlook, Gmail doesn’t support custom fonts. However, it does support a lot of web fonts, not just web safe-fonts.
Blue/purple underline persists when viewed on different email clients. In Chamaileon, luckily, we managed to overwrite this behavior.
Gmail automatically converts phone numbers and URLs into links.
Min-device-width and max-device-width are not supported in Media queries. Yahoo recognizes max-width but not max-device-width.
Android 4.4 renders videos but does not play them.
Dates and numbers turn blue when sending out HTML emails on Gmail for Mobile.
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!
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:
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.
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.
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.
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.
Here are some tips on how to avoid HTML email rendering issues:
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.
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.
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.
To avoid your email content being hidden behind a ‘’view email message entirely’’ link, keep your email templates weight below 102kB.
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 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.
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.
Most email clients will automatically block any JavaScript that is found in emails because it is seen as a security risk.
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.
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.
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.
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.