In the world of email marketing, I think it’s fair to say, that far too many people fail to take into consideration the importance of good design and perfect cross-compatibility within email clients. I receive emails which ‘break’ in my chosen client, or have missing links much too frequently - a bad email has exactly the same impact as any other bad marketing; it lowers the values of that company in the eyes of the recipient.

A friend of mine started this blog recently titled Email Fail which perfectly illustrates the lack of attention-to-detail in this area.

In this post I’m not going to do a step-by-step guide to creating an email from scratch (it assumes you already have basic knowledge), instead I will give you a few pointers to overcome some of the most common and annoying problems that you face when designing and building for the most popular clients: Hotmail, Gmail, and Outlook 2007.

Before we get started I’ll quickly outline the problems that each one of these clients cause:

  • Hotmail (or Windows Live as it’s now known) frequently ‘breaks’ the layout of image heavy emails, misaligning table cells and causing big gaps all over the place.
  • Gmail insists on removing all CSS from the <head> and hence you cannot style a:hover or anything similar. (Now as far as I know there isn’t actually a way to stop this, you simply have to cater for it).
  • Finally, Outlook 2007 ignores various styles such as line-height and uses the Microsoft Word rendering engine, rather than IE or any other option that might be considered logical.

So, what do we do to avoid these issues?

No Spacers!

If you are using Photoshop to slice up your designs and export them to HTML, if you aren’t careful you will end up with transparent GIF spacers all over the place. This is the biggest contributor to designs breaking apart in Hotmail as well as various other clients. Due to the ‘Save for Web’ function in Photoshop it is far too easy to become lazy when building emails - it basically does it all for you! But you must make sure that you stick to a perfect grid system and don’t have any misaligned vertical slices.

If you have a reasonably long design, then it is perfectly acceptable to split it up into smaller sections and create more than one table. When you come to build it, simply take each section and sit them on top of each other in the final HTML file - if you do it right then the joins won’t be visible.

Inline styles

Various clients, particularly Gmail strip out all <head> styles, and it is therefore imperative that you style all of your text, links, and images with INLINE styles. This might seem like a pain in the backside, but it’s got to be done. Firstly style the <body>, then style your main <table>, and finally style any <td> that has either plain text, a hyperlink, or an image in it.

  • For your plain text you need to include all font and colour information, as well as spanning styles such as ‘bold’ or ‘italic’ across the appropriate words. If you remove an image to replace it with ‘live’ text then you also need to include the width and height of the table cell, as well as the background colour.
  • For your hyperlinks you need to include the same information as the plain text, but substitute the colours and font-style or text-decoration accordingly.
  • For your images you need to add “border:0;” to each one, and most importantly “DISPLAY:BLOCK;”. By adding display:block to every image you eliminate the final factor which contributes to the cells breaking apart in Hotmail. Once you’ve done this you shouldn’t ever come across this problem - unless you’ve ignored one of my other points in this post, of course!

Line Height

Now, a few email clients do listen if you define line-height on paragraphs of text, however some don’t, particularly Outlook 2007. If you aren’t careful when inserting text into cells surrounded by images, you can begin to ‘push’ the tables apart and once again make a mess of your design.

The best precautions that you can take are:

  • Get all of the copy sorted while you are still in the design phase. This way you can insert the text and see how much room it is going to take up.
  • Make sure you leave the line-height in Photoshop (or your preferred design software) as default for whatever font you’re using, and also turn off anti-aliasing.
  • Finally, add just a little more space above and below the text than you normally would. This allows you to make your slice a little bigger, and therefore cater for the way that different browsers and clients render text. (Some are slightly bolder than others etc.).

So, there you have it, if you stick to these rules and put that little extra effort in you can be sure that your beautiful designs display perfectly for everyone, no matter what email client they use…

Shortlink:

By Chris Skelton