Things To Keep In Mind When Coding HTML Email Templates

Each email service client treats HTML and CSS differently and this can cause many issues when trying to code an HTML template that looks effective for all recipients. With this post I'll point out some main problems you may come across when building an HTML email template and give you some tips avoiding them.

Before you even start designing your template you need to start thinking about how it will work as an email. Your design should be simple. You want an email that is still readable regardless of whether the images are downloaded or not. Your design needs to be structured so it can be built with tables - forget using the 'float' and 'position' CSS styles as these will not work with most email clients.

Try to avoid positioning text on top of pictures when designing your email, as the 'background-image' property also doesn’t work. The only way to get around this would be making the image and text an image – which is not advisable, as too many images in an email can be picked up as spam.

Also don’t go overboard on the width of your email design. It is advised to keep your email width between 440px and 600px to ensure the whole newsletter is visible to all your recipients.

Once you have created your simple email design you can start building your template. A few things to consider when building your template are:

• When building your email template do not use style tags in your header section. You will find a few email clients choose to ignore these when displaying the template. Instead use inline styles (e.g <span style="color: #000000;">) throughout your whole template.
• Make sure you assign width and height to every image you use to ensure that email clients don't set their own dimensions and ruin your layout.
• Build everything in tables. Do not use 'float', instead use the attribute 'align' on your table cells.
• When using padding on your email template stick to using it on table cells only. Many email clients ignore any padding on things such as images and div elements.
• Make sure to set widths, cellpadding and cellspacing on all tables and table cells. If these are not defined some email clients tend to set their own values and will break your design.
• To avoid any unnecessary gaps appearing between images in your template use the style 'display:block' on your images.
• Avoid using short codes in your styles.  (e.g. 'font:' should be replaced with font-style, font-size and font-family).
• Try to avoid using PNG images as some email clients do not support these. Use GIFs and JPEGs instead.
• Make use of ‘alt’ tags for all images. Alt tags allow you to provide a text equivalent for each image so that people who cannot download all of the images can still understand what is in your newsletter. 

Once you have built your html template it’s a good idea to also think about sending a plain text version of your email. This way recipients can select which version they would like to view and if they have any problems with the HTML version, they can still access all the information from the plain text email.

When coding a newsletter it is also a good idea to set up a link to enable recipients to view the newsletter online. This gives your recipients the ability to see the full html email as it is supposed to look online, just in case their layout is not 100% correct when viewing the newsletter via their email client.

Finally, before you start sending out your email make sure you test it thoroughly. Although your email might look great in your own Outlook mail program, it can often look completely different in a webmail client such as Hotmail or Gmail.