HTML email design | Email Marketing Campaign Best Practice

HTML email design best practices

HTML emails are arguably the most effective forms of online marketing. They’re eye catching, engaging and flexible. They provide you with a variety of opportunities to promote your business and achieve marketing success. However, there are many pitfalls to be aware of when designing HTML Emails. In this article we’ll highlight some of these and give you a few tips to help you design effective email campaigns.

HTML tables Back to (old) school

There’s no point denying it – HTML email design is 'old school' web design. This means no Stylesheets, JavaScript or Flash, they just won’t work consistently across the wide and varied range of email clients.

We're talking back to basics, table-based structures, which may to some web designers seem like committing web standards blasphemy. However, when you take into account the number of email clients that either remove or pay no attention to CSS it becomes quite clear going back to basics is the only way to guarantee your email looks the same regardless of which email client is displaying it.

We have found when designing table based layouts using merged cells (indicated by colspan and rowspan in your code), some email clients, especially Lotus Notes will distort any layout with merged cells. Using nested tables instead will work more consistently than merged cells. For example, a two column layout could consist of a base layer of one table with two columns with other tables inserted into each column to give you space to enter your content.

HTML formatting Looking good in any reader

A great deal of formatting can be done using Inline Styles – small snippets of CSS code inserted into either a containing table cell (<td>), in paragraph tags () or span tags ()

Below is an example of an inline style insert into a table cell tag:

This style would then apply to the text contents of that table cell. Other standard HTML formatting tags such as , , etc can be used as well to vary the formatting on top of this base style.

When deciding on a font for your email it’s always best to stick to a font that most, if not all, of your readers will have. Common fonts such as Arial, Verdana, Tahoma, Times New Roman and Georgia should be fine. If you’re willing to take the risk of a slightly lesser-known font it’s good practice to specify a set of backup font faces in your inline style eg.

If a computer does not have a certain font it will look to the next in the list to see if it has that one.

Time warp

When we first got our hands on Microsoft Outlook 2007 we were a bit taken aback with what Microsoft had created, not only locking it down to use only the Word HTML rendering engine (Outlook 2003 will let you choose between normal HTML and Word rendering) but also support for background images had been removed, which meant a real step back with what you can and can’t do to keep your emails looking good.

Those of us hoping for a change of heart with Outlook 2010 were to be sadly dissappointed!

To ensure the most consistent display across the majority of email clients, we tend not to use background images in our designs unless a customer is happy that they will show in some readers but not in Outlook 2007/2010 and Lotus Notes. If they are used then the html shoudl always have a "Plan B" to fall back on, like a plain flat colour fill in place of the background image.

The good things is that armed with the knowledge we have it's still possible for us to keep creating top notch designs and the restrictions only spur us on to be more cunning and crafty!

A final few things...

Although there are literally hundreds of elements to take into consideration when designing a HTML email, here are a few of the most important things to consider:

Create a plain text version of your email to send alongside the HTML version for those who prefer it and for mobile devices and email clients that only accept text only email.
Assign an “alt tag” to each image so if readers have the images turned off they should see some sort of useful information to give them confidence in the email's legitimacy.
Always set height and width attributes on images in your HTML design. Some email clients like Outlook 2003 and 2007 will suppress images in the inbox. Failing to put a height and width will result in your deign be distorted by the security message that is inserted by the email client into the image space.
Use images at the size they are meant to be rather than resizing them with HTML – some email clients will ignore the HTML resize and just display the image at it’s original size.
Keep the width of your email between 600-650px to ensure readability for the maximum amount of email clients.

Whatever you choose to do with your email marketing designs, the most important thing is to test, test and test again. You should always proof your email into the major email clients to ensure it’s rendering correctly and ask a proof group to check for spellings or design issues too. However, just because there are limitations to HTML email design it doesn’t mean you can’t be creative or push the boundaries to see what impacts on delivery, open and click through rates. Remember the aim of any email is to achieve your goal and sometimes being safe with your design isn’t the best option.

If you have any further questions about email design contact us on 0845 612 5544 or via Twitter @NewZapp