We often have clients ask why their creative doesn't look good in their email client, but it did in Dreamweaver and in the browser while they were building it. When I look at their code, most times it looks pretty solid – so I'm sure they're shocked when we report back that the code needs to be restructured for email.

If the code looks good, then why redo it? Because only web browsers understand the code – not email clients. Email clients are from the old school; they like things done a certain way and won't understand all this new "mumbo-jumbo". Kind of sounds like someone's grandfather...

Back in the late 90's and early 2000's, websites were made using tables. This made for painful, frustrating, time wasting creation and maintenance. One could get lost in the sea of td, tr and table tags! Then one grand day, divs and CSS came along and made coding so much easier. We could update an entire website from one file; code became much easier to look at and made for quicker maintenance and ultimately happier designers.

While we've seen web browsers update to handle divs and CSS, email clients didn't jump on the bus. Even with the Email Marketing boom over the last few years, most email clients haven't embraced our lighter and more efficient way to code; in fact, a popular email client - Microsoft Outlook - reverted back even further with Outlook 2007, by eliminating support for some of the most basic CSS attributes. Maybe Microsoft has something against designers since we still have to deal with Internet Explorer 6 (yuck)...but I digress...

We have no choice but to learn the ways of the old school, but it can be difficult to wrap around the concepts because most of us designers and coders have been taught that tables are used for tabular data not for layouts.

These series of posts focuses on the most frequent issues that we address from our clients who like to get dirty with code, whether through evaluations of their code or restructuring the code for them. For this post, we'll be tackling tables, why we have to use them and the best way to use them.

I'm assuming that you understand how to use tables, even if you've only used them to display data – but you have a basic understanding of the tags used and how tables behave - or don't like to behave! Check this link out for a refresher course if you need one.

Why, oh why do we HAVE to use tables?

Just because they're used for email instead of websites now, doesn't mean the piles of table, row and cell tags disappear – it's still complicated! Yeah, it sucks. There's no getting around it because some email clients (like Gmail and Outlook) don't support the CSS float tag.

The float tag allows us to position divs to the left or to the right of its parent container to have better control of the flow and order of divs. These divs then house the content that make up a website, usually in more divs or some other type of block element.

In the Land of Email, cells are divs. Of course, in order for a cell to render properly, it has to be wrapped in a tr and then a table tag; that's just the rules. For a layout like this:

The code that would normally be used is:

While the CSS somewhere would look like this:

But since this is for email, here's what the code needs to look like:

Note that the align attributes used in the td tags sets the alignment of the content inside the cell, not the alignment of the cell itself. The order in which you add cells sets the alignment, so since the Side area is to the left, that cell is set first, then the Main area because it's to the right. The natural flow of cells are just like divs - from left to right, top to bottom.

There's a fun attribute inside the td tag for the header: colspan. This allows a cell that sits above or below a row that contains more than one cell (like the Side and Main area row) to completely span across the cells. Otherwise, the header cell would only be as long as the Side area cell.

Colspans should be used sparingly – they can get confusing after a while if you have multiple rows that will have different amounts of cells in them. We often evaluate code that gets lost somewhere because of colspans and rowspans all over the place. I NEVER use rowspans – they add a whole different level of confusion. To avoid the use of excessive colspans and rowspans altogether, use nested tables.

View nested tables like additional divs inside the Side and Main area cells.

Notice in this example, there is no colspan in the cell for the header. That's because the next row contains a nested table which then has the two cells. Because the nested table is its own separate table, it doesn't affect the main table so it eliminates the need for colspans and rowspans.

Nested tables also take care of another issue we commonly see: spacer gifs. Usually if I see excessive use of spacer gifs, it's an indication that the client has used Photoshop or Fireworks or some other program that can produce HTML based on slices. Using spacer gifs adds unnecessary code and almost always destroys an email creative. Their purpose is to "tighten" up loose ends that the client created while slicing an image but too many of them will make the image to text ratio unbalanced which will affect delivery.

While we're on the subject of using programs to write HTML – here's a tip for that: stop it. These programs (depending on how the image was sliced) can make code so cluttered that it's easier to just start from scratch – which is what I end up doing every time I have to restructure a client's code who has used this method. These programs also add comments to your code, which is also another common issue. We've seen comments sometimes appear in a deployed campaign, so we recommend that you delete all comments before you paste in your code into your ESP providers program.

Another issue that can be corrected using nested tables is empty cell tags. Empty cell tags are often used to create space. While it generally would work, some email clients could collapse the cell if it's empty which would break your creative. Sometimes adding a non-breaking space (&nbsp;) will add something to the cell so it doesn't collapse, but to be on the safe side, I like to use nested tables.

In the example above, there are two small empty cells on either side of the larger cell that would house content. You can simplify the code and get rid of the two cells with nested tables.

With this method, the shorter width nested table with the align="center" attribute in the table tag "floats" inside the longer width cell so it automatically creates the space on either side without the need to actually code the space!

I've got plenty more tips when it comes to tables but they involve the use of CSS and styling your tables. So in my next post, we'll pick apart inline CSS – why we use it, what works, what doesn't and some tips to make inline CSS not so irritating!

Are your emails hitting a Junk Folder even though you're a reputable whitelisted sender? Optimizing email creatives for inbox delivery can be frustrating and time consuming; use this Optimization Checklist as a guide to pinpoint strategies to turn your delivery around.

Specify & use the same font face throughout your entire email creative.

Avoid bolding everything. Use bolding style very minimally, if at all.

Avoid using the % and $ sign within the copy.

Avoid highlight copy.

Copy to Image Ratio 1:1

Make certain your subject line is clean of spam word(s), concise and directly relates to the intent of the message. Adding the long date variable at the end of your subject lines adds relevance and helps with delivery. Ex. Do Your Flip-Flops flop? June 1, 2009

Creative Optimization is a best practice guideline with an emphasis on developing friendly email creatives that are aesthetically appealing, render across all ISP’s and mail clients, pass spam filters and don’t contain blacklisted links. Blacklist Lookup

This 3 part series will cover Creative Optimization Tips, the benefits of Report Abuse links and Testing Options/Advice.

Creative Design Tips

The following tips are intended to better optimize email creatives in effort to pass major Spam Filters and achieve greater ISP rendering consistency.

As a basic rule of thumb: if it sounds like a sales pitch, it will be treated as such. Avoid words like profitability and profitable.

Your text version should match your HTML version pretty much exactly with one exception: do not include links that may hurt delivery. Instead, use [Link_TrblView] to open the offer in a Web Browser. If only 5% of your database blocks HTML, why hurt delivery to the other 95% of your database?

Do not use <p> tags. If you would like to specify line breaks, do so using <br />

Specify & use the same font face throughout your entire email creative.

Brand your emails in effort to create familiarity between the recipient and your campaign. If you acquire your data from different sources then you will want to make sure your campaigns are branded like the source of acquisition and targeted to the appropriate recipients.

Include copy, having only a few words on an image heavy email will not only cause it to be routed the bulk folder, but will also encourage the recipient to report it as spam. For truly optimized creatives, the Copy to Image weight should have a 1:1 ratio.

Make certain your subject line is clean of spam word(s), concise and directly relates to the intent of the message. Adding the long date variable at the end of your subject lines adds relevance and helps with delivery. Ex. Do Your Flip-Flops flop? June 1, 2009

Now that your creative is ready and you've followed all the guidelines for optimal email creative design you have some work to do before sending it out. TESTING!!! Testing is the most important part of the creative building process. Yet its often skipped because marketers are rushed and in an effort to get a campaign out as quickly as possible they forgo the 5 minute testing process. Testing your creative is not only going to show you how its rendering but it will also ensure your links and images are loading properly.

If you’ve used the EmailDirect interface to build your creative there are a couple fantastic tools to make the testing process even easier. Within any of the creative building options (EZ Designer, WYSIWYG or HTML paste) there is a tool set titled HTML Tools offering 3 important tools.

Validate Links – With a click of the button the system will scan ALL links in your creative to ensure they are not broken. It will prompt a window confirming your links validation or displaying a red X if the link is broken.

Validate Images – Also with a click of the button the system will scan ALL images in your creative to ensure the image path is not broken, therefore ensuring your images will display properly upon delivery. We’ve all received emails with a RED X where the image was supposed to display, the Validate Images tool will help you avoid that embarrassment!

Domain Reputation – Domain reputation can single handidly kill deliverability. If you are sending an email with links to a domain that is on a blacklist the delivery will suffer. EmailDirect masks links but very savvy Spam software will detect those masks. If you have a link referencing a domain with poor, or blacklisted, reputation you may want to replace the link or remove it all together.

These tools ease the testing process but your creatives should still be tested prior to sending. Send them to as many accounts as possible (outlook, yahoo, aol, etc.) to see how it looks across the board because creatives don’t always render the same everywhere. And if you are an EmailDirect client and need help, always feel free to give us a call! Your Email Marketing Consultant can help you with all of this.