The ability to reach thousands of people who have previously shown interest in the products or services you provide is a very powerful thing, and so email marketing is one of the most effective kinds of marketing there is. This modern equivalent of mass mailers is not only cheaper than sending physical letters, but far more effective and appealing with the ability to track clicks, opens and sales.

 Sending one specific email to this vast number of people puts a lot of pressure on the aesthetics and functionality. If it is presented in a confusing or broken way the recipient is likely to delete or ignore the email altogether, while also pushing them to unsubscribe. And if an email client cannot render it correctly, it is likely to end up in the junk or spam mail folder. So, how can we prevent this from happening, how can we ensure the email is aesthetically pleasing, readable, usable and cross-client compatible? These five tips show the way in which HTML emails can be tailored to fit in with the needs of you, your recipients and email clients.

Tables, tables, tables…

Usually a sin of web design, tabular layout is the key to optimising HTML emails for the intention of them being opened in many different email clients. In fact, using a usually disastrous method of nested tables gives more flexibility when it comes to a more complex layout. Essentially using tables is the best way of rendering emails consistently across email clients despite the fact it is considered good practice to never use them for layout in HTML for web browsers. Relying on your typical CSS based layout will simply not work with email clients as they strip out most of these styles. HTML tables should be used to not only give the base layout of your email, but should be used for presentation too.

I find the key thing to remember when creating emails is that it’s email design, not website design. It is coding HTML without applying the web standards we developers religiously abide by. And so, we encounter issues that cannot, and should not, be dealt with in the same way you would on a normal website.

Watch your CSS

Again, we need to break another one of our web development rules - separating CSS from HTML completely. In an email environment we should always have our CSS inline, rather than linking to a CSS file from the HTML, as several email clients ignore links within the header. Using style tags allow you to add more expendable styles – however some clients will also ignore these. This produces a major lack of positioning support, even when you use the usual web standard procedures for placing elements on the page.

Responsive Email Design

With over half of emails now being opened on a mobile device we want to give subscribers a pleasant experience, not a few minutes of frustration powered by constant zooming and sideward scrolling. However the implementation of a fully responsive and cross client compatible email is more difficult than it sounds.

Flexible layout, flexible images and the use of media queries are the three fundamentals for creating responsive emails. Implementation of these, in an email environment, is very different from usual responsive web design.

A responsive layout can be achieved by giving the main table container a width, of say 700 pixels and a class for targeting, then giving any tables within that a percentage width. This will constrain the email size to the main container, while also allowing us to use media queries for appropriate sizing. Email clients will fit this container to the size of the device, while the percentages will give flexibility to the content.

Flexible images can be attained by display the image block, adding a percentage width and an auto height with the dreaded “!important” to give these styles priority over those added by clients. All within a media query for mobile size. The “block” counteracts the “line-height fix” email clients regularly add, while the width and height will give the image an appropriate size.

Media queries, as with a lot of other CSS elements, are not supported in all email clients, and more importantly, mobile email clients. Those that can support media queries will be shown a tailored version for the device size and a graceful fall back to a non-responsive version would be shown to email clients that do not support this technique.

Images and Backgrounds

While giving an aesthetic advantage to boring, plain text emails, images are also a relatively easy element to include in HTML emails. Many clients will only download images when permission has been granted by the user which is a slight downfall for first impressions. Adding alt tags to all images used within the layout will neaten the mess users are first presented with in this instance, and in return make it less confusing.

Background images on the other hand are more complicated to implement. Almost all email clients render them in different ways and work better with code that meets their preference.

Some email clients prefer the inline way of giving a background, and some prefer the styles to be added within a style tag. It is good practice to use both to ensure cross-client compatibility. However, there are some clients whom like neither. For example, Microsoft Outlook 2010 does not support the inline background or the style tag. This means you are left with one option - use VML to add the background image and style it, with fall-backs, within there:

Testing

After taking all these tips on board, the final step to ensure your email works exactly how you want it to when it arrives in your recipients’ inbox, is to test it as thoroughly as possible. A broken layout or broken links within your email can be the difference between a successful conversion and a trip to someone’s junk mail folder.

While we all have our personal preferences when it comes to email clients and email addresses, everyone is different. Testing your email and sending it to as many email addresses we can, and checking them on as many email clients as we can, will allow forward and proactive thinking when it comes to bugs or visual anomalies.

Putsmail is a great testing tool that allows you to send the email directly to your own email address, or several email addresses, letting you to check the functionality thoroughly.

So, before filling subscribers email accounts with newsletters and first time previews of bargain deals, make sure you clog up your own inboxes until your email gleams with perfection…because chances are, if they can’t understand the email on a first impression- it will end up in the trash.