Designing HTML Email for Better User Experience and Deliverability

When creating an HTML email for a newsletter, email designers have to consider a lot of things. First of all, they should think about rendering across different email clients and applications.

Fortunately, most email users read email messages only in a few email clients. The recent Litmus report provides statistics on email client usage where you can see that there are only a few major email clients like Microsoft Outlook and Apple and web-based clients such as Gmail, Outlook.com and YahooMail stand out.

Secondly, they have to remember about spam filters that will scrutinize the HTML design and render their verdict whether or not the email looks like spam.

Okay, so what should we be aware of to design an HTML email in compliance with different email clients’ standards and spam filters’ rules?

Let’s start with the list of elements you should avoid in your HTML email design:

1. Background images and externally linked CSS.

After the release of Outlook 2007 and a number of web-based email applications, background images, and CSS to call background images have stopped working in email messages.

If you are certain that the email clients of your recipients are still rendering background images, then you can use them, but as a general rule, it’s recommended to avoid using background images in email templates and newsletters.

On the similar note, while some email clients may still be able to render the external CSS, most web-based applications will either strip it out or ignore it.

2. Too few text and too many images.

It must be tempting to create a nice email with a lot of illustrations. If you can add a good portion of text to balance the image-to-text ratio, then do it. Otherwise, consider reducing the number of images in order to not trigger anti-spam filters.

On the similar note, do not use a single image for your entire message. Anti-spam filters are aware of this trick, plus your message size could end up too big.

3. Too many links.

If a message contains too many links, maybe ten or more, it is also a red flag for spam filters.

Try to keep 2-3 most important links in the email. Or upload your content with a lot of links to a website and create a short email copy with one call-to-action to visit the page.

4. Phishing links.

It’s the case when you use different domains in the visible URL and the URL you link to. Sometimes it happens if you use email tracking in your email service provider which converts your links into tracking links on their domain.

Here is an example:

Spam filters see this behavior as a phishing attempt and increase the likelihood of spam for the message.

To be sure that your email will not be flagged as spam because of links, use the same domain in the visible URL and linked URL or use an anchor text linked to a web page.

If the issue is caused by tracking links, consider using an email tracking service like G-Lock Analytics that allows branding tracking links with your own domain to avoid discrepancy.

5. Link around a block element.

It is not a valid HTML if you’re enclosing a block level element (for example, < table >…< /table >) within an inline one (for example, < a >…< /a >). In HTML5, you can wrap a link around a block element (which a < table > is), but in email, you are stuck with HTML4, and a very limited subset of it.

So, if you want to use a linked table in an email, you have two options:

1 Save the table as an image and wrap the link tag around it. The downside of this approach is that your text won’t be visible when the images are turned off.

2 Make all text in the table clickable, i.e. repeat the < a > tag around all the bits of text. The downside of this option is that any empty space (i.e. areas with no text or images) won’t be clickable.

When you’re designing an HTML email template, keep in mind that you’re designing an email, not a web page. Web browsers are much more sophisticated in rendering HTML. If for example, you define the layout of your HTML message using the < DIV > tags, your recipients can see a completely broken design when they receive your newsletter.

So what HTML should you use for your email newsletters?

Here are a few best practices for creating an HTML email layout that will work in different email applications:

1. Define the layout with nested tables.

It may seem like an old-fashioned practice for web designers, but considering that HTML standards for email don’t advance as fast as HTML standards for the web, using nested tables to define the layout of the email message is the right thing.

2. Use a MIME format.

HTML-only messages may not be seen by some recipients who have their email clients configured to not display HTML. Plus, some anti-spam filters may send HTML-only emails to the spam folder instead of the Inbox. Thus, it is important that you send the email in the MIME format including both an HTML and plain text version.

EasyMail7 makes it easy and automatically creates and sends a plain text part with your HTML email.

3. Use standard HTML attributes and inline styles.

Styling in your HTML email should be defined using inline styles and standard HTML attributes such as width and height for images, font styles etc. If you use CSS, these elements should still be defined within HTML tags.

4. Optimize images.

Whether you choose to use local or remote images in your HTML email is a personal preference. If you choose to embed the images, make sure they are optimized. You can use an image optimization tool like TinyPNG or Compressor.io to compress your images before embedding them into an email.

If you choose to use remote images, make sure you upload them to a trusted web site, ideally your own web site. EasyMail7 allows you to upload the images used in the mail to the web site using the built-in FTP client.

5. Clean up your HTML.

Use an HTML validator or checker to test your HTML code before sending the email. The GlockApps template builder allows you to check and clean up your HTML.

Copy-paste HTML, clean it up and download the corrected code.

Test, test, and test.

The more tests you’ll do, the better idea you’ll have about what elements in the email can make it be sent to spam or blocked. It can be links, it can be images, it can be the footer added by an email service provider, it can be the entire email template, it can be your physical (postal) address in the email, it can be… anything – spam filters are getting smarter. You never know what makes a spam placement until you test.

The GlockApps spam checker will test your message across dozens of ISPs and provide a detailed report about where your email is landed (Inbox, Promotions or Spam), what elements in your email add to the spam score and what you can do (actionable tips) to improve deliverability.

Learn more about How to Use G-Lock Email Analytics to Track Email Campaigns.