Email marketing is still one of the most effective digital channels for ROI.

Many businesses rely on it to build brand awareness, communicate with prospects and customers and promote their services and products.

And yet, it is one of those areas that is very often disregarded by companies (link to bad, ugly, good), specially when they want to be original in their email marketing efforts instead of using basic Email Templates.

Want to get a free HTML Email Template today?

Table of contents:

1. Learn specific html email coding techniques
2. Design with 'mobile first' in mind
3. Use live text on your key messages instead of having them as images
4. Learn the tricks to succeed with Outlook
5. Use safe web fonts as a fallback font if you use 'custom' fonts
6. Include fallback colours for your background images
7. Optimize your images
8. Using animated GIFs
9. Test your HTML Email thoroughly

  

HTML emails are not web pages. If you thought there were too many browsers out there, things get even more grim in the email world.

The amount of email client programs makes what initially seems an easy job a daunting task. Outlook, for example, has many versions available for desktop, webmail and mobile environments. And, as you will discover, all these “Outlooks” do not render the same.

via GIPHY

This is a whole new game. To create a successful HTML Email Template for your original marketing campaign, there are 9 points to consider:

1. You need specific HTML email coding knowledge

You wouldn't hire a print designer to design a website unless he/she is experienced in digital design and UX. Likewise, the design of an HTML Email requires specific knowledge of email client apps and rendering issues to maximize your marketing campaign reach.

Our recommendation: your designer and your programmer should speak as early as possible in the project to agree on the correct approach for your email design.

Your programmer needs to be experienced with what works and what doesn't for HTML emailsOtherwise, you may get an HTML template that looks good in a web browser but that renders bad in emails. 

2. DESIGN WITH MOBILE FIRST IN MIND

Mobile remains the most popular reading environment for HTML emails.

Mobile remains the most popular reading environment for HTML emails. (Litmus)
(source: litmus)

It is not a surprise then that 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.

Luckily, most email clients support responsive content nowadays. This allows you to include specific code for different screens in your email, optimizing the experience for mobile users..

If your design is well thought, you should 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. Later on we'll discuss more about benefits of live text usage.

  • Desktop image
  • Mobile specific image

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

As a final recommendation, create your mobile specific images twice as wide as the user device width, so they don't look blurry on retina displays.

3. Keep as much ‘live text’ as possible

In the previous section you could see an html email design that combines copy with an image on a green background.

This example is a well thought design because the solid green colour allows us to code that section as two blocks: one with a background colour and live text above it, followed by an image block, making the responsive html email look good across devices.

Why should you use live text on your HTML email design? 

1. You can edit that text if needed
2. If your email client blocks your images you will still be able to read the text.

If that whole section was one single image, your audience with email programs blocking images would not be able to see anything.

4. BE PrepareD for Outlook

Unlike most other email clients, Outlook (Windows versions for desktop) has limited support for modern CSS.

via GIPHY

There are technical workarounds that you can implement to make your email render properly on the various Outlook versions.

But it is recommended that your designer gets familiar with what elements may render in a different way in Outlook compared to the design.

For example, a call-to-action that has rounded corners in your design will display in Outlook as a rectangle with straight corners.

5. BEWARE OF the ‘Custom’ Fonts

It is not uncommon that designers not experienced with the world of HTML emails, try to stay on-brand and design their emails using the same typography that they use for the website and other materials.

But watch out, as custom fonts might not render well in your customers' email programs.

How to overcome this? Always put a fallback web safe font (for example Arial) in your email code. Web safe fonts are the default fonts found across the majority of different operating systems and devices.

Below is an example of how an email without a fallback font might look like:

  • Corbel Custom Font
  • Times New Roman as a system default font

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 to keep the font looking closer to the original font.

6. Use fallback colour for background images

Let’s face it, designers love using backgrounds of all kinds, everywhere. It is a powerful visual element that makes your messages to stand out on top, and we all agree that it makes the whole thing more attractive and appealing.

However, one of the biggest pains with HTML emails is the partial lack of support for background images

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. If your copy was white in the design. you'll end up with that section completely invisible or hard to read.

To resolve this, always consider to include a fallback colour. This will be shown if the background image isn’t loaded, and behind images that have transparency.

  • Water image with background image
  • Water image with background image blocked

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 keep the readability.

7. Reduce your assets size

Designers usually include photos in hi-res in their HTML email design.  

You should resize and optimize these images before integrating them in your HTML email template, so your final HTML email is as light as possible and it can be downloaded quicker on your users' devices.

The same way page load time affects websites conversion rates, bigger latency will considerably decrease conversion rates of your email.

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

8. SHOULD YOU USE Animated GIFs?

In 2018, 56.6% of email marketers said that they’re using animated GIFs at least sometimes in their marketing emails (source: litmus).

GIF animations are great to introduce humor and trigger the reader's interest, but also to show and explain your products and services, making complex concepts easy to understand.

Although it is an attractive approach, there are some things to consider:

1. Animated GIFs are usually heavy in file size and can be slow to load and play, specially for users checking the email on their data plans. 

CPU Cook Animated GIF

2. The GIF animation will increase your CPU load, which can harm your device performance and make your email app unresponsive due to the CPU load.

3. Animated GIFs are not supported by all email clients. 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 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.

  • Animated GiF inserted in an Email
  • Non-Animated GIF on Widows Outlook

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.

9. Test your emails

Before sending your email campaign you need to test your email to be sure that it will be rendered properly across most, if not all, email client applications.

The main tools to help you on this task are Litmus and EmailOnAcid  - both will give you previews of how your HTML email will look like across popular email clients for browsers, desktop and mobile apps.

Additionally, do not forget to send and check your tests on the real devices and programs that you normally use.

IS that all?

No! This list includes some of the most important steps you should take to build a solid, good looking HTML email.

However, there are many more tricks and tweaks that are usually needed in the professional world of HTML emails - like handling long URLs which could break your mobile layout, use of gradient colour, etc.

overwhelmed?  To help you get started with HTML Emails we have created a list of FREE  Templates that you can download here. Download a FREE template!