7 Common HTML Email Template Mistakes to Avoid

7 Common HTML Email Template Mistakes to Avoid

Any HTML email communication that looks downright okay on your PC might appear completely different on the recipient's end. It’s solely because the graphics, the fonts, the CSS files they all reside locally on your system. When one is busy creating a new mail using HTML editors like Dreamweaver and MS Publisher, it is vital to know that one is designing for emails and not for a website. When looking to design the email as a web page, it might fail to display everything correctly and in order pertaining to a different webmail client that your intended recipient uses. In this post, we run over 7 such common HTML email templates that one needs to avoid right from the start. Let’s begin! 

Referencing external CSS files

A majority of email clients don’t reference external files since it interferes directly with their CSS code. Hence, it’s always a wise call to use in-line CSS and ensure to test for multiple email clients to figure out inconsistencies and mistakes. Also, putting CSS styles right in the email head and then calling the same in the body never works.

Ensure the email design is not too wide

The primary idea is to score a design for email that seamlessly fits within the viewing area for a majority of email clients. 650 pixels wide is the accepted width that works for most commonly used email client windows. When in doubt, a good way is to create a couple of free accounts with several email clients like Gmail, Yahoo, Hotmail and then test send an email to see how it works (the images, the colours, the links and just about everything else).

Removing all junk codes from HTML

Have you been using MS publisher or Frontpage to design emails? Well, chances are your template has all sorts of junk codes that can contribute to breaking the layout, causing further problems. Even worse, when such junk code gets your email being filtered and sent over to “Spam” folders. Hence, it is increasingly important that you clean all unwanted and unnecessary attributes and empty tags along with comments and any other junk stuff before you upload the same.

A lot of stuff doesn’t work for an HTML email

You might know well how to build an email list but what you won’t know is that a lot of stuff does not work for an HTML email. That includes JavaScript, Flash, ActiveX and embedded video and audio files. Sure, these things make an email look way better than standard, but your recipient’s antivirus might block such things. Hence, it would be a good idea to save the video and audio files to be used in your landing pages and throw a link to the same from the email instead.

Blocking Javascript is nothing more than a standard security measure adopted by a majority of email applications. So, any JavaScript across things like pre-loaders for images, popup, submit buttons, widgets are most likely to be scrapped out. In case you are planning to copy the HTML code from another web page that already exists, always clean the JavaScript first. Before you go live, always test your campaign to see it displays everything correctly.

Always avoid Form code

If possible at all, avoid using form codes as it is most likely to be scrapped out by most email clients, if not all. Also, avoid using iframes as they have fallen into disuse and are quite obsolete for modern-day email clients.

Avoid using one single large image

It’s quite common for email programs to block images by default. So, if you are using one giant graphic, it is apparent that your intended recipient would see a black screen at the first instant. Delivery issues are quite common when one shoots emails containing image only. The general guideline is to maintain a ratio of 80:20 (Text: Image) for any campaign whatsoever. However, it’s not uncommon for spam filters to make use of different criteria to achieve a healthy balance of image and text for a mail. In case your campaign needs to be built using one single piece of graphic, choose to add text to the footer, like Link to unsubscribe or the physical address of the organization to balance the Text: Image ratio right.

Email Html Mistakes - Avoid Large Images

Spammy Content does no good

We all receive Spam. A typical spam mail is one which has the subject line is in caps and is either highlighted in blue or red and exclamation points being used sporadically throughout. Oh! and not to forget the use of action phrases at random like, “Hottest”, “Top”, “Best”, “Click Now” and more. Now, that’s what you need to avoid. You see, content plays a great role no matter what type of email campaign you are looking to design, and the above should give you a clear perspective of what spammy content looks like. The trick is to keep your subject lines as brief as possible with relevant content. Also, try to steer away from using outright gimmicky phrases.

Wrap up

Well, that was it. Now that you know of the common mistakes to avoid while designing your email, it’s time to put these thoughts into action and score the best for your campaign. Do write us back if you have followed our tips and have been able to better your HTML email templates for business. We always love to hear back from our readers. Till then, Ciao!

This could interest you

Become a more social person