10 Common HTML Email Mistakes to Avoid

Nabeel John

Ready for your monthly dose of design tips? Here are 10 common HTML email mistakes and how you can avoid them.

1. Avoid Non-Web Safe Fonts

Stick to web-safe fonts whenever possible. You can use Google fonts but be very cautious as many email clients don’t support them and they simply strip them out. Some email clients just don’t like font stacking and ignore all next in line fonts and default to ‘Times New Roman.’

Eg: font-family: ‘My Custom Font’, Arial, san-serif;

In some cases text would default to ‘Times New Roman’ if your custom font is not found.

2. Avoid Javascript, Flash, Forms and Other Complex HTML/CSS Elements

Javascript, Flash and Web forms are completely unsupported in most email clients, so do not use them at all. The new HTML 5 in conjunction with CSS 3 does give out a little bit of flexibility but always be very cautious with advanced HTML/CSS elements and test thoroughly.

3. Avoid Entirely Image Based Emails

Make sure your mailing contains a good balance of images and text. If image blocking is active on your subscriber’s email client, your carefully crafted email will not communicate efficiently if it is only in image format.

4. Avoid Images Without ALT text

Some email clients block images by default and there are few that don’t even support them. It’s always a good idea to provide an alternative text for your images. Good news! You can style this text in the style tag you add to the image.

Eg: <img src=”http://www.myDomain.com/myimage.jpg” alt=”Image Description” style=”font-family:Arial; font-size:10pt;” />

5. Avoid Background Images

Avoid using background images. Some of the major email clients strip them out. If the usage is absolutely required, make sure you back it up with a background color.

6. Avoid Shorthand CSS when Possible

Using a shorthand CSS declaration is not recommended in HTML emails, not all email clients recognize them and therefore have trouble interpreting your CSS. Especially avoid the three-digit HEX color code, use the full six-digit code instead.

7. Avoid DIV tags to Create a Layout

Even though DIV tags can be used for styling up your email message, they don’t render consistently when they are used to create multi-column layouts or design that require the ‘position’ CSS property. Therefore, it is recommended to stick with HTML tables.

8. Avoid Exceeding the Overall Width of 650px

Keep the width of your entire email around 600-650px. This would ensure that in most cases your subscribers can view your email as intended without having to scroll left or right.

9. Avoid Spam Trigger Words and Phishing Phrases

Unfortunately, there is no guarantee to keep your email out of spam folder, the key thing is to avoid words that can support spam or phishing. Basically, the functionality behind the spam filter is that it tries to remove commercial advertisements and promotions, so generally, words of that nature should be avoided. On the other hand, phishing emails are designed to steal your identity by getting you click on a fraudulent link. You should also avoid phrases that are common to phishing attacks.

Common examples are: ‘Click Here’, ‘Last Chance to Win’, ‘Why Pay More?’ etc.

10. Avoid Local/Relative URLs for Images

You may use local image references or relative URLs for your testing. Before you do your final send make sure you replace all of those with absolute image references or absolute URLs.

Eg: Relative Image Reference

<img src=”/images/myimage.gif” alt=”My Image” />

Absolute Image Reference

<img src=”http://www.myDomain.com/images/myimage.gif” alt=”My Image” />

Are you guilty of any of the above html email mistakes? If so, now is your chance to fix them and make sure your emails look great on all email clients. Check out more email design tips here.

About the Author
Nabeel John

Nabeel John is a Digital Marketing Designer at Informz. Outside of work, Nabeel enjoys photography, graphic design and web development.