HTML emails - 9 steps to make them bulletproof

Email marketing is considered one of the most efficient and definitely most popular among all digital marketing channels. Many business owners rely on emails for converting more leads, brand awareness and loyalty, sales growth and so on.

Generally emails can be a great tool to support your marketing activities and your business as a whole. Companies hire agencies and design teams who come up with all sorts of creative email concepts. They want their emails to stand out, be remembered, drag attention.

So once they have that perfect email design they get a web developer to convert into an HTML email markup and happily send that email out to their audience. This is where things may get really nasty. It may turn out that the email looks terribly bad on some of the recipients email clients (programmes) or that text is unreadable or that it takes ages for the email to load. All this will result in lower click through rate, less conversions or even worse, affect the overall business image in a negative way. A recent survey by Litmus (State of email 2018 report, p. 35) shows that 51% of people who unsubscribe from newsletters do it because emails do not display well on their smartphones.

Here we’d like to share some of the most important steps that should be taken to make your HTML email bulletproof and maximize its efficiency in achieving your business goals.

Check email clients compatibility

Above and before everything else, HTML emails are not web pages and you should not just hire any web developer out there to code your beautiful design into an HTML email. Make sure you hire someone who is well experienced particularly in building emails and knows the specifics of the various email clients out there.

Here is a very useful reference by Campaign Monitor about email client support for CSS. Your developer should be very clear with that list and should know what does and what does not work in emails.

Ideally, you should have your developer involved as early as possible in the design stage to avoid having a design that will not render well on emails.

Remember the mobile specific layout and content

Nowadays, most email clients support responsive content which means your email can have mobile-specific code that lets you display your content in the best possible way on users smartphone screens.

As a simple example, you could have a nice landscape hero image for your desktop readers and for those using smartphones you could have a mobile optimized portrait version of that same image instead.

On the left – desktop image, on the right the same email on a smartphone where we use a mobile specific image.

If your design is well thought, you could even keep your copy as live text where possible. The below is a good example for both using specific images for desktop and mobile and keeping the live text. More about benefits of live text usage will be discussed later.

First image is desktop and the second is the same email on a smartphone where we use a mobile specific image.

Also it is a good idea that mobile specific images should be twice as wide as the user device width. The reason is in the common retina displays on mobile devices nowadays – you need a higher quality image for retina displays unless you want them look blurry. Yet, be careful with image file size.

Keep as much ‘live text’ as possible

Above we showed you a design that combines copy with an image on a green background. Thanks to the well thought design we have a solid green background colour coded in the email and we put live copy on top plus image on the right hand side. Having live text gives us many advantages – not only we can quickly edit that text if needed but if your email programme blocks your images you will still be able to read that title. If that whole section was one nice looking image, once blocked by Outlook for example, your readers would not be able to see anything.

Prepare for Outlook

You may have a great email, well rendering in all browsers and email apps. And then it comes Outlook. Its Windows versions for desktop computers are a whole different story. Unlike most other email clients, Outlook has limited support for modern CSS. There are some technical workarounds but it is good to know all those limitations. So if you want to deliver a good looking email to your Outlook users (you can see its overall usage share here) you should check if your developers know how to insert Outlook specific code and also make sure they let the designer know what elements may render differently in Outlook compared to the design.

A very basic example of such a discrepancy would be a shape that has rounded corners in design but in Outlook it will display as a rectangle with straight corners.

Avoid ‘Custom’ Fonts

Your designers can come up with awesome fonts for your email titles and copy. However, you should know it will not be likely that custom fonts will render properly in email clients. The good approach here would be to put fallback system fonts in your email code. System fonts are fonts that are default to your operating system. This way you will avoid the risk of letting the user machine choose which font to use for displaying the email – instead you keep control on fonts even if you have a limited choice of system fonts. This means you will be able to choose if you want your fallback font to be a serif or sans-serif font.

The below is just an example of missing fallback font (this is a demo just for the purpose of this article and was not implemented in the actual email):

On the first image – Corbel custom font, on the second one – Times New Roman as a system default font on a device that does not have Corbel font. You should put a sans-serif fallback font like Arial instead to keep the font looking closer to the original font.

Use fallback colour for background images

Probably one of the biggest pains with HTML emails is the partial lack of support for background images. And let’s face it, designers love using backgrounds of all kinds – whether it will be a colourful beach image, a blue sky gradient, a pattern of floor tiles or a spread of confetti, all these are backgrounds which support your message on top.

However, backgrounds will not display on some email clients. Instead you may end up having a blank white area and your important message on top of it. Now think if your copy is white. It will be completely invisible or hard to read.

If you want to build a solid email you should design it in a way that it can work as good even without background images. Don’t get it wrong – feel free to use background images but make sure you add a fallback colour that will serve as a background for your message so it still stands out.

On the first image – water image in the background with live text on top. On the second image, same content with background image blocked. We are using a fallback blue colour to keep the brand colours and also to improve the readability.

Reduce your assets size

A common issue with many email designs is that they come with huge images. You may want to display your images in the best possible quality or maybe your designer just provided these super hi-res photos for your email, 5MBs each.

It may sound like a good idea to directly use these images in your email but actually make sure you resize and optimize them instead. Otherwise you risk to present your readers with the awful experience of waiting those big images to load or even worse – just abandon your email. Just like page load time affects websites conversion rates, bigger latency will considerably decrease conversion rate of your email.

A good idea is to resize images to no more than 1200px width (this is for full width images) and then run them through an image optimizer like TinyPNG. This will give you the right balance between image quality and file size.

Animated GIFs

Some creative ideas bring to work impressive GIF animations embedded in the email. Although it is an attractive approach it may be a sensible decision. Animated GIFs are usually heavy in file size which leads to the above mentioned latency problem. But there is more than one extra catch here.

The GIF animation will higher your CPU load – this may result in glitches in the overall performance of your device and of course in reading your email. For example, you may have issues scrolling down the email having your email client unresponsive due to the CPU load.

Another issue is GIF support. Outlook for example will render the very first frame of your GIF animation. You should think of inserting a fallback image for Outlook with your most desired animation frame. To give you an example of why this is important, think of a GIF that has an animation ending with a text message on the last frame. Outlook users will not see that message unless you go for the fallback approach.

First image – animated gif inserted in the email. The second image is what Windows Outlook users would see unless you put an Outlook specific fallback image with your animation frame of choice.

Test your emails

It is essential that you thoroughly test your email before sending your campaign. And while it is nearly impossible to test on your own if you want to cover all email clients and scenarios there are great tools to help in this.

Check Litmus and EmailOnAcid – these offer testing in all popular email clients for browsers, desktop and mobile apps. If you work with a developer or an agency, testing should be part of their job and it is a good idea to check if they have an account with any of those services as well as if they use real devices and software inhouse to do the testing.

To summarize:

  • Emails are a different universe. It may seem that having a good email design converted into an HTML email is all you need to start sending. However, there are many technical constraints with the email HTML build and it is key that you get an experienced person or agency to help.

  • Above we have listed some of the most important steps you should take to build a solid, good looking email.Of course, there are many more tricks and tweaks you should be aware of – like handling super long URLs which can break your mobile layout, putting proper ALT tags on your images, use of gradient colour, etc.

So it is essential to make sure your email developer is aware of the above considerations or to hire an experienced agency that is specialized in building solid HTML emails.

Need help with your email build?

Get in touch:

Featured posts

How to make the most of your web design team

The key here is to make clear by each reference what exactly you point at - what specific features appeal to you. Take a look around and get inspired by sites and apps across the web - don’t restrict yourself only to your competitors.

Read more

Images - Assets and Style Guide

Image application often depends on the layout rules, so remember that when choosing images the web designer will take this into consideration and pick images not only by content and other criteria, but also ...

Read more