Use tables everywhere

And I do mean everywhere, I can’t stress this enough, tables are your friend when it comes to email newsletters. They will ease much suffering, so use them everywhere. The all mighty spacer gif is your next best friend when it comes to table based design, and style=”display:block” is your third best friend. Here’s why.

Margins don’t work in email newsletters!

Margins are one of the most important css styles used today along with padding. Some email clients strip out margins and padding can be very flaky in others, so what are you to do? You can start by not using them at all. Don’t bother trying to style your paragraph tags either, I always stress letting them default to whatever the email client likes to do with them. Forcing them to do what you want will probably look wonky in some mail clients. Leave them alone and don’t bother with margins or padding, it’s less work for you and your email newsletters will look better for it. You will never have the control you have with web pages.

Suppose we want this example below.

In a normal webpage this is a padding div with text and a second div floated right with CSS margins and a paragraph of text  for the caption. In the email world it looks like this.

Red represents an outer table and green represents an inner table. In a real world example of a robust email newsletter you would most likely have far more nested tables then this, but this illustrates our need for tables. Each corner table has a 20×20 pixel, and the inner green table is aligned to the right. A great tool to illustrate this in real time with your own work is the Web Developer Firefox addon by Chris Pederick, which allows you to outline your tables within the browser amongst many other things.

Table based layout tips

Remember that a spacer gif should be a 10×10 pixel by default and then stretched to the desired size even if that size is less than 10×10. A 1×1 pixel will not stretch properly in some versions of Outlook due to a very strange bug.

Each spacer gif should also have an inline style of style=”display:block”. Many email clients like Gmail will leave white space below all your images making your layout look messy. This same rule applies to visual images, especially if the email is image heavy as you will have white lines caused by space below all the images if you forget to add this to all your images.

When using tables don’t forget how fonts work with different email clients. Newer versions Outlook for example will not cascade your fonts properly when used in tables, and clients like Gmail will rip out your embedded styles. The solution to this is to use both methods only once eliminating the need to splash font family and font sizes throughout your email newsletters.

With patience it’s possible to make email newsletters that work in many email clients and are somewhat clean at the same time. Look at email newsletters as yet another exciting challenge to conquer and you might not pull all your hair out. Happy coding.

Since Outlook reads the first few lines of text in your email for it’s preview text, you must have those words at the top. Obviously the top of an email usually doesn’t have anything important in it that would suit being in the AutoPreview. This area is usually reserved for links to the online version and instructional text. The way around this is to put the content you want at the top of your Email Newsletter and then hide it from displaying. The AutoPreview pane will still show it, so now you can have something like “In this summer issue of our fantastic newsletter we talk about Outlook and it’s AutoPreview…” Here’s how you can do it with some simple CSS.

<div style="display:none;">In this summer issue of our fantastic newsletter
we talk about Outlook and it's Auto Preview..."</div>

Below this you can add your view online and sign up for this newsletter links, but the hidden content must appear first. One word of caution, at the time of this writing the hidden text actually appears unhidden in Gmail’s actual email. This is not necessarily a deal breaker if Outlook is a your target audience, and the overall email will still look fine in Gmail.

Here is what the AutoPreview pane will look like.

As you can see the other content below will still show up if there is room, but hopefully you can grab the users attention with the first line. Remember that the email title is still the most important element when trying to engage a reader because that is what most of the readers will see. The AutoPreview is often used just to avoid having content appear that you may not want to show up before the user has viewed the full email.

One other caveat is that this hidden text could possibly look spamy to some mail clients, but I have yet to see a line of hidden text trigger a spam filter and I have tested many email clients using this technique.

After looking everywhere for a way to load a web page within Outlook 2010, I finally checked Microsoft’s site only to find out that this ability had been removed entirely. I started thinking about other ways to get a page into Outlook without using a 3rd party mailer application. That’s when I fired up Internet Explorer and found the Send Page by e-mail option. The good news is after several tests the results seem to be the same. To send the HTML to Outlook I used Internet Explorer 8. I’m not sure if other browsers can do the same, but since this is a proprietary MS format it’s probably best to stick with IE.

In Internet Explorer go to:

File / Send / Page by E-mail…

If you have Outlook 2010 as your default mail client it should automatically load with the page embedded into an email message. Now one would think that by now all you would have to do is save the email as an OFT and be done with it, but for some reason every time I tried this the resulting OFT was a blank file. The trick is to email the message to yourself and then save it as an OFT. Don’t forget to change the subject title to whatever you would like the OFT to read.

In Outlook 2010 go to:

File / Save As

Select Outlook Template under Save as type:

Now you should have an OFT that will work just as 2007 templates worked. Remember when creating OFT files there are many limitations, and tables and spacer GIFs are a must for any remotely complex layouts. Check out the related posts below for more Outlook tips and tricks.

Lotus Notes sometimes extends table width to 100%

I had an email campaign where the email took up 100% of the client window even though I had a width specified in the main table containing all other tables. The fix was quite easy to implement, but still very annoying. It turns out that lower versions of Lotus Notes need a width on every table. Often I will use a single main table to contain my other tables and then just use spacer gifs to set the widths of the tables within. Any table without a width specified is assumed to be 100% regardless of the parent, so the fix is to put a width into every single table you use. It’s also better to use the HTML width attribute and not inline CSS. Once again non-standard engines take us back to the dark ages. I hope this saves some hair pulling for someone.

Keeping code clean in the messy world of email newsletters

Obviously putting the font-family in the table or a surrounding div should do the trick, and it does for everything except Outlook 2007, for some reasons font-family declarations do not cascade. One easy but tedious way to fix this issue is to put inline styles all over the place. I don’t like this method, it makes it easy to forget sections of copy and it messy. I always especially avoid using inline styles on paragraph tags. You have have almost no control on the p tags anyway. Put everything you need in your td tags and leave your p tags clean.

So you might be thinking well then I’ll just add font-family declarations to all my td tags. Again this is slightly less messy, but still messy and our newsletters markup are awfully messy as it is. This is a place where you can use an embedded style. I know there are blanket rules like never user anything but inline styles, but this is not always the case, and blanket rules never benefit anyone. There are places for embedded styles, and they are even required in some cases for optimal cross client compatibility as I wrote about in “Outlook 2007, inline styles, and links“. The thing you must always remember when using embedded styles is that other email clients like Gmail are going to ignore them completely, so build in redundancies.

Style the table data

The fix is simple, you only need to declare your font-family twice. Use an inline style once in your table.

<table border="0" cellspacing="0" cellpadding="0" style="font-family:font-family:Verdana, Geneva, sans-serif;">

At the top of your page add this to your embedded style.

<style media="all" type="text/css">
td {
     font-family:Verdana, Geneva, sans-serif;
}
</style>

Now you have made Outlook 2007 happy and given every td in your email newsletter a font-family. When the embedded style is stripped in other clients like Gmail you are still keeping the client happy, because other clients won’t ignore the font-family in the table tag and it will actually cascade throughout the document.

First, when someone is viewing a newsletter their attention span is probably extremely short. They probably want to get onto their next email, but something has triggered their interest in your newsletter. Why waste that interest on jumping them further down the email, this is your chance to grab their attention and hook them into your website. It may be your last chance before they click onto their next email and your website is probably a much richer web experience anyway.

The second reason is anchor links are just another thing that often goes wrong in email newsletters. They act unpredictable, and at the time of this writing, don’t even work properly in Gmail. I also remember a time when an anchor link would show a blank screen in Yahoo! Mail, although this has since been fixed.

Despite these reasons, using an anchor links in an email is usually not my decision to make, so I have to try and find a way to make it work. A regular anchor link like the one below will not work in Gmail.

<a href="#section1">Section One</a>

However this will work.

<a href="#section1"><span>Section One</span></a>

Like many email newsletter hacks and tricks it’s a simple one, but can be frustrating and time consuming when trouble shooting it for the first time.

Styling the paragraph tags

Luckily at least with my tests you don’t need inline styles, so you can use an embedded style sheet at the top of the newsletter. If you have worked with email newsletters for awhile you probably already know that most styles should be made inline, but inlining paragraph tags can be tedious depending how man you have. This fix should work either embedded or inline, so it’s up to you which method you choose.

p {
      margin-bottom:1em;
}

Option 2:

<p style="margin-bottom:1em;">Your paragraph</p>

This should fix your Yahoo mail paragraph woes, at least until they break change something else.

Why do I care? It works in the email clients I tested!

That’s fine and dandy, but your audience may be using a client you haven’t tested, one like say Outlook for web. I dealt with an issue like this recently where Outlook was truncating the body copy after the first comma appeared. It was a mailto confirming attendance to an event, so losing the copy was not very helpful for for the end user or the organizer trying to get responses. Now granted a web form would have been a better option, but time restraints resulted in using a simple mailto.

Lets quickly go over some of the mailto syntax.

Subject

mailto:me@myaddress.com?subject=Hello

Body

mailto:me@myaddress.com?body=I will be attending the party, it should be a blast

Subject and Body

mailto:me@myaddress.com?Hello&body=I will be attending the party, it should be a blast.

There  are also CC and BCC values that you can drop into your mailto string.

These examples will work fine in most email clients, but not all. First if you want valid XHTML syntax your ampersands should be &. This should not affect your mailto functionality either way, but having valid markup is always a good thing. Second you should use hexadecimal values for your spaces and commas. Here’s an example of a safer mailto.

Subject and Body

mailto:me@myaddress.com?Hello&body=I%20will%20be%20attending%20the%20party%2c%20it%20should%20be%20a%20blast%2E

The only difference with this example is %20 for spaces and %2c for commas and 2E for a period. This example is much more bullet proof than the first example although you probably don’t need it for the period, but then again I thought the comma would be safe.

Another character you may need is a line break. %0A will give you a line break. Using two will give you a paragraph space.

mailto:me@myaddress.com?Hello&body=I%20will%20be%20attending%20the%20party%2c%20it%20should%20be%20a%20blast%2E%0A%0AI will be bringing a guest too%21%2E

If you are ever unsure of a character just drop it’s hex value in place of it. Most of the characters should work fine, but some like the comma will not. Others like spacing must be added if breaks are needed. You can easily find hexadecimal code lists all over the web, just remember to add the percent (%) symbol in front of the hex.

If you have been making email newsletters that work in the majority of email clients out there you already know this; if you want your work to display the way you intended in web based and stand alone email clients then you have to use inline styles and tables, and a lot of them. You would also be wise to ignore any modern CSS, because most of it won’t work. Inline styles work well for email clients that strip out all the embedded styles like Hotmail (also a Microsoft product). Hotmail has come a long way over the past 4 years, but unfortunately Outlook took several steps back when someone came up with the brilliant idea of using Word as the email render engine. Previous versions of Outlook are much easier to support. 

I’ve done everything right, why are my links turning purple when clicked!

So you have your inline styles set up everywhere including on your links, but when you send out your deployment the links turn purple when clicked in Outlook 2007. This is Outlook ignoring your inline styles and applying the default link colour for visited links. If you have an embedded style at the top of the page, it will respect those. I had stopped using embedded styles all together since inline styles were much more reliable. The fix for this is to add your link styles back in the embedded style at the top of the page inside the head of your markup.

<style media="all" type="text/css">
a:link, a:visited {
     color:#64698c;
     text-decoration:none;
}
.sideBar a:link, .sideBar a:visited {
     color:#893d00;
     text-decoration:underline;
}
</style>

In this example all link styles are set to a specific colour and the second style sets a different set of colours for links within a sidebar class. All you really need to fix your Outlook link woes is the a:visited declaration, but it can’t hurt to add the links in there too.

Inline styles are still king with email

Remember, dont’ get rid of your inline styles. One of the reasons I got rid of my embedded styles is because I could not tell when I was missing an inline style. This is a real pain for links, because using this fix will show your links as the right colour while working on the email. If you or others use editors to work on your HTML they will not add inline styles, so you must always remember to add them after. Again, the down side with this fix is now you cannot see which links you have missed. At the time of writing Gmail still strips out the embedded link styles and I’m sure a few other clients still do this too.

Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.

As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.

Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.

And here is how it’s supposed to look after the fix. No white border / padding.

And the fix?

table td {
    border-collapse: collapse;
}

I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.

Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Outlook 2007 Test</title>
  <style media="all" type="text/css">
  table td {
    border-collapse: collapse;
  }
  </style>
  </head>
<body>
  <table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
  <tr>
  <td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
  <td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
  plain text.</td>
  </tr>
  </table>
</body>
</html>

You may also want to check out my other entries on this topic.

• Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs
• Email html design and deployment quick tips