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 being square, columns breaking, and so on.

That’s why you are here reading this.

Congrats to you, you've started digging deeper into understanding the crazy challenges email developers face every day.

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.

Well, 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 differently render certain elements or features used in an email.

Why do emails render differently?

These are the 5 biggest factors that determine how an email renders:

Email service providers (ESPs)

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 you can use the same email design, but the email template and its HTML code will look different when sent out with those ESPs.

Source: Chamaileon

Operating systems

There are different computer systems (Windows, Linux, or Apple operating systems) installed in offices or at home. 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

There are just 4 screen size categories that are important and those are smartphone, desktop, laptop, tablet. Emails are mostly open on smartphones, that is true, but there are hundreds of versions of small screens.

Source: Email Monday

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.

What you should know about HTML email

You 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 or so-called plain text email

Uses literally only plain text and maybe a link or two.

Heavy HTML email

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

Source: Chamaileon

Email clients that you need to be careful with

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

The Litmus Email Client Market Share published that Apple Mail (40.3%), followed by Gmail (20%), Outlook (14%), and Yahoo! Mail (6%) are the most commonly used email clients as of May 2019.

Source: Litmus

The first thing that you need to know is that there are no email standards. This is because of different interests, priorities, and policies of the big players in the email industry.

Let’s go through some current most common rendering issues with HTML email designs in these biggest email clients.

Since Apple Mail doesn’t have any bigger email rendering issues, we will focus only on the ones that do have.

Desktop Email clients

Outlook

Background images

Unfortunately, Outlook 2007-2013 does not support background images.  If you want the background image to show in those email clients, you need to use VML.

That’s why you always need to 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.

Source: Chamaileon

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 a fallback background color.

Source: Chamaileon

Link color

Blue/purple underline persists when viewed on different email clients. In Chamaileon we managed to overwrite this behavior with some coding hacks. You can see in in the footer section under the ''Unsubscribe'' link. The link color stayed the same in Outlook 2010.

Source: Chamaileon

Margin, padding

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

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.

Message 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 size 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

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.

Gmail for mobile

  • Dates and numbers

Dates and numbers turn blue when sending out.

Outlook for mobile

  • Blue link

Turns .com into a blue link.

Source: Litmus

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

First, what you need to do is test your email template when completing your email design with the email builder that you are using. After that, we strongly recommend testing it with a professional email testing tool because it will help you to get a preview of your email in different email clients.

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

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

Test with Litmus

Litmus is the biggest name in email rendering tests. The upside of it is that they have a really good service, but offer a very short free trial — only 3 days. This short period of time might be helpful to you, or you can subscribe to one of their paid packages.

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

Test with Email on Acid

Email on Acid also has a quite powerful preview tool, where you can even check out your email templates in some really exotic email clients like Yandex.ru or Orange.fr.

Their trial period is limited to 7 days.

The 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 services to share the outcomes with a sharing link. We can now compare and contrast the results of the two testing service.

Checking the compatibility list

Make sure to check the compatibility list of the tool you are using to design your emails with. Not all email design tools have the same compatibility list.

Source: Chamaileon

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 rendering issues

Always use an email service provider

Use a good email service provider when sending out your emails. There are many email service providers today that you can use for free. 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 which 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 already 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.

600px email width

As we said earlier, 600px width is the one that you should use when designing your email 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.

Email size below 102kB

To avoid your email content being hidden behind a ‘’view email message entirely’’ link, keep your email templates 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.

Have web safe fonts

Web-safe fonts, such as Verdana, Times New Roman, and Georgia, are recommended to be used in emails 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.

Images

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

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

Source: Campaign Monitor

Never use Javascript

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

GIF instead of a video

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 video in your emails. We’ve created a video tutorial where you can learn how to create and add a GIFs to your email.

Don’t use flash

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.

Be careful with columns

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.

Lucia Pascuttini

Lucia Pascuttini

Read more posts by this author.

Read More