12 Thumb Rules to code your HTML Emailers

HTML Emailers are still a favorite among publishers and are considered as one of the best means of online communications. With options for tracking everything from email opens, forwards and clickthroughs, HTML email newsletters allow publishers to gauge customer response for their products/services.

HTML Emailers are useful in directing potential customers to your web pages. However, all said and done, HTML Emailers can be tricky on different email software – the display can be erroneous or haphazard depending on your reader’s email clients.

Below are a set of 12 thumb rules to help you code your HTML Emailers in the most appropriate way suitable for every possible email client:

• Keep everything simple. Nail down your message in the simplest possible way. Avoid complexity in content/design/coding.
• Post all images on your publicly accessible web server. This will reduce the size of the emailer and also decrease the risk of it being labeled as spam mailer as spammers embed images into emails.
• Avoid images for important content – headlines, prominent links or call to action texts. Even if you use images, specify a relevant ALT tag so that if the image is not displayed the user can have an idea of what the emailer contains.
• Add height and width to your images to avoid blank placeholders from throwing your design out.
• Images and text has to be in right proportion to avoid being blacklisted as spammer.
• Use tables. They provide consistency in layout and positioning. But do not nest tables within tables as a few older email clients may not support such complexities.
• Apply only fixed pixel sizes for font sizes and height/width.
• Use inline styles to create the desired creative effect and also to reduce cross browser issues. For instance,
• It is better to use span tags with inline styles instead of p and header tags as most browsers apply natural padding and margin to these tags.
• Never use shorthand in coding. Some email clients tend to replace shorthand with longhand and several issues pop up due to this. To avoid such issues, use longhand always.
• Instead of using CSS, use table background attribute to apply background images. However, note that Outlook 2007 does not support background images.
• Avoid JavaScript and Forms. They are not supported by all email clients and hence it is better to avoid them.

An emailer comes alive only when tested. Test all HTML Emailers you send with every possible email client. Also, add a link to the web version of your design at the top of your emailer. In case of any technical hiccups caused due to email clients, your reader can always view your web version.