Good HTML emails

July 30, 2016   Ohsik Park

HTMLemail

When I got involved with HTML email projects at FabFitFun, where you can find awesome products for women, I had the chance to think about how people use emails nowadays. After spending some time researching and looking at many different email campaigns from different companies, I was surprised to see how many are still using emails that only contain images as the main content.

I started to think about what makes a HTML email good and came to the conclusion that it’s one that delivers the message effectively. In order to do that, people need to see the content(main message of the email) first. If not, they could miss what might be awesome content, and then it becomes useless, failing to serve the purpose of being sent out in the first place.

Here are some tips to enhance and increase engagement on your email campaigns.

Balance between graphics and text

A good HTML email should have a good balance between text and visual content that renders beautifully on the different of email clients.
Major email clients tend to block images in HTML email without account owner’s approval. This is critical when you reach out to the potential customer who’s never received email from you before. Also, some people turn off the automatic image load option to save their data usage on their phones. Good HTML emails are designed and developed in a way that they still delivers the content even if the images are blocked.

See below examples. What do you see on these emails when the images are blocked? One does not really show any content at all. On the other hand, Lyft’s email still shows the main content and clearly gives a direction to people by putting a button that stands out from rest of content.

bad-examples
[ Bad: When images are not loaded, people don’t get the message ]
good-examples
[ Good: HTML email still delivers the message ]

We all know that a picture is worth a thousand words and a great picture is worth even more. Use your amazing graphics in your email, but keep the main message as text to ensure it gets delivered to more people, and prompts them to load images if they are blocked. As seen in the example, it is highly beneficial to have a call to action button as text. This will tell your clients where to click or what to do even before they click their “Load All Images” button.

Reach out to more people with your HTML email

This might not sound like a big deal compared to all the other factors you are dealing with. However, think about all those people you are not reaching just because of the potential images being blocked in your beautiful email campaigns. It’s an easy fix and can potentially promote your business significantly.

Check out my HTML email template if you are not sure where to start. It’s not perfect(work in progress) and there are still many things I have to do to make it render better on different email clients(e.g. inlining all CSS and etc). However, it is a good starting point for you to start building your awesome HTML emails.
Simple HTML email template

Also check out MailChips starting guide before you jump into your HTML email project.

As always, I would love to get any feedback and comments on the article and HTML template as I continue to improve.

Leave a Reply

Your email address will not be published. Required fields are marked *