When sending out HTML email newsletters, there are a lot of things to consider, one of which is that your email should be well-created, easy to read, and its layout should be pleasing to the recipients. With HTML coding, achieving this should be easy right? Only if you’re doing it for a webpage. HTML emails, on the other hand, is a different matter altogether. HTML emails render differently than web pages. The following tips should help you improve your HTML email layouts to make sure that your recipients can actually read and appreciate it:

1. Design your emails such that if they don’t render properly in the recipient’s email account, it can still be readable and will not just be useless mumbo jumbo. You can do this by not relying on images to communicate important information. The reason for this is that there are a lot of email clients that turn off images by default. If your recipients have this setting and you have a lot of images on your email, or even just one big one, your message will just appear blank when your recipient opens it.

If you are using a background image in your message, you shouldn’t rely on this image to make your text readable. An example would be having a dark background image and using a white-colored text to contrast the dark background. If your recipient’s email client has the image turned off, it will naturally not display your background image and your white text will now be invisible in a white background. You get the picture, right? You should then take this into consideration when choosing the color of your text, that it should still be readable even without the background image.

Another good idea is to cater to people who have the image turned off or those who have trouble viewing images in their email, would be to provide a link for them to click just in case the image does not display. This link could lead them to your web page where the image will display flawlessly.

You should also consider using ALT tags on IMPORTANT images. Take note of the emphasis on the word “important”. With images disabled, descriptive ALT tags will give the reader an idea of what the image was supposed to be and if they are interested enough, they could temporarily enable images to view your email properly. However, you should be careful in using ALT tags and only use them on images that actually play a vital role in getting your message across. Putting ALT tags on each and every image on your HTML email will only add to the clutter.

2. In HTML email, tables work better than CSS. When using tables, make sure to set all the attributes where possible. This includes cellpadding, cellspacing, border, align, width, and height. It would also make your life easier if you use nested tables. Just make sure that the indentations are correct for an easy-to-read code.

You can also use the background attribute on a table cell to set background images and be aware that background images applied to tables or divs are not supported by Outlook 2007.

3. With your layout set up in table format, you have to make sure that your message will look almost identical in any browser. This can be done by doing the following things:

Use break tags as a replacement for vertical padding and to alter the amount of space they consume, wrap them in span tags and set either a smaller or larger size for your font.

Use inline styles a lot. Even if you apply a font tag to a parent table, it is not an assurance that that attribute will be reflected to all of its children. Make sure that you are setting inline styles on ALL of your HTML elements.

Especially for the benefit of Gmail users, it is best to apply detailed inline styles to your links. You should make sure to set specific styles to all of your links or they will just inherit the default font, size, and color that is set by the recipient’s browser.

Wrap your images in span tags and set font attributes to style your ALT text accordingly. This would allow you to style your ALT text, making them readable even when images are disabled.