Outlook ’07 changed how it renders emails. Instead of using IE to render, it uses Microsoft Word. Since this is the case, how we design and build emails has and will drastically change.

Problems with designing newsletters in Outlook ’07:

1. You are now very limited on background images. You cannot position or set a specific repeat on background images (repeat-y, repeat-x). I've only been successful using a tiled background.
   
2. Background colors are not easily supported. The key is that you can specify a background color in a div or table, but as soon as you add another div or table inside, the color goes away.
   
3. No more Animated Gifs or Flash files
   
4. No floats or positions are allowed. You will have to build with tables and inline styles.
   
   

How can we design newsletters that will work? Here are some tips:

1. You can design your layout to not use any background colors or images. A cool thing you can do is create borders or backgrounds that blend into the layout.

Outlook has no problems with regular images so if you create a three column layout, try adding a fade on the two sides to give the illusion of a border. This subtle shading on the sides helps to give it a very modern look.

2. You can use a tiled background but you have to put it into the body tag and specify the image path like this:

<style type="text/css" media="screen">
    body {
        margin: 0px;
        padding: 0px;
        color: #666;
        background: #5a200e url("http://www.creativeleak.com/images/nl1/bg_Tile.gif")  }  
</style>

Here's an example of how it looks in Outlook:

3. Background colors can be used in a table or a div, but only if there's not another table or div inside of it.

Since this is the case, you can give more depth to your background by adding a table that stretches across the top with a 100% width. Inside, insert your header image and center it. After that, you can create a table outside of the first and center that as well so that it falls right below.

Here's an example of code:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td bgcolor="#5a200e"><div align="center"><img src="http://www.creativeleak.com/images/nl3/top.gif" alt="&quot;&quot;" width="537" height="135" /></div></td></tr></table>

<table width="537" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF"><tr><td>content</td></tr><tr></tr>
</table>

This is what is looks like in Outlook:

4. Last, try adding these elements to your email designs but remember, the key to any good looking design is what the content looks like.

If you take advantage of your fonts, rows and columns, background colors, and pictures it will look nice without having to use your Outlook workarounds.

Here are a few helpful related articles and links:

1. Microsoft takes email design back 5 years
2. Outlook 2007 and HTML email design: a summary
3. 30 free email templates to get you started
4. Outlook HTML and CSS Validator
5. How to code HTML emails
6. HTML email coding tips for Web Designers