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

It could be that the software you used modified essential parts of our code. That's why we ask you to contact us via chat or email when you are having a rendering issue.

If you are haven't used any software to send out your emails, it is recommended to use one, for example, Mailchimp which is free.
​

In this article, you will find:

Background images

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

That’s why you always need to use a fallback background color.  If the image won't render, the fallback red color shown in the image below will.

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.

Link color

Blue/purple underline persists when viewed on different email clients. In Chamaileon we managed to overwrite this behavior with some coding hacks so you don't need to worry about that.

Margin, padding

Margin 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 Outlooks default fallback font is Times New Roman and it's hard to overwrite.

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 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, have the email size below 102kb and avoid this behaviour. How will you know that your email doesn't have a size larger than 102kb? In this case, also you have to use ''send test email'' to check if it's clipped in Gmail or not.

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

Same as Outlook, it doesn’t support custom fonts but it supports 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 issue.

Phone numbers and URLs

Gmail automatically converts phone numbers and URLs into links.

Min-device-width and max-device-width

Not supported in Media queries. Yahoo recognizes max-width but not max-device width.

Android

Android 4.4 renders videos but does not play.

Gmail for mobile

Dates and numbers turn blue when sending out.

Outlook for mobile

Turns .com into a blue link.
​

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. 

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. 

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

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

Web-safe fonts, such as Verdana, Times New Roman, and Georgia, are recommended to use in emails because they have the highest compatibility. 

Image display options for popular email clients are different for each, 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, always have some text and always provide a web version of the email in the link.

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

You need to test your email template when completing your email design with the email builder that you are using. After that we strongly recommend to test it with a professional email testing tool such as Litmus or Email on Acid (they have free trial) because it will help you to get a preview of your email in different email clients.
​
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.

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

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.

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 also in more advanced email builders only. Here is how to use it in Chamaileon.

Having rendering issues? Please contact us via chat and we will help!

You can also read the full article here.