Russ' Do It Yourself Home Workshop

Finding Fixes to Just About Anything and Everything

Making an HTML Email Look Good in Outlook 2007

Posted by Russell Wright on January 18, 2010

There have been numerous posts about the lack of HTML and CSS standards support in Outlook 2007.  Basically, Microsoft gutted the rendering engine in Outlook 2007 and replaced it with the (very) limited rendering engine in Word.  They took a fully functional product and moved it back in time when “the only thing that existed were Troglodytes.”  And I thought we were moving out of the stone age.  Oh well…

I inherited a program that was sending out very plain emails to subscribers on an externally facing SharePoint site and thought it would be better to “spiff it up” a little when a change to the HARD-CODED EMAIL (ugh!) was requested.  So, I converted it into an HTML email.  It instantly looked better, but now I was on a quest to give it some branding to make it match the site.  Oh, the giant sucking sound I heard from the artistically limited side of my brain…

I started with a background image but, of course, background images are not supported in Outlook 2007.  So, I resorted to slicing an image.  I have an old version of Ulead PhotoImpact that makes it pretty easy to slice an image into components that can be placed in table cells using IMG tags.  I know Photo Shop and other image editing tools have this same capability.  You can see the slices I made.  I did this a couple of times and opted for this layout with the cell at the bottom in the middle because it can be pushed down using the VALIGN property.  You can see some of the shifting problems I ended up with in Outlook 2007.

image

On a couple of my tests I ended up with shifts in Outlook 2007, while the rendering in other fully functional clients looked fine.  The first image is a right side shift.  This was from my first slicing that was done with three rows and a center cell for the text content.  I could never seem to find the right alignment commands to reliably put it in position (for Outlook).

image  

The second shift was from slicing job #2 (shown above).  This slicing job fixed the left and right sides so I only had to fix the bottom alignment.

image

To fix the bottom alignment problem, I enclosed the first (inner) table in another (outer) table.  The outer table has one cell.  The bottom cell of the inner table is VALIGNed to the bottom, thus forcing it back in to position.   The IMG is also bottom aligned for good measure.  So far, so good!

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD width="661" height="844">
    <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
    <TR>
        <TD ROWSPAN="3"><IMG SRC=
Images/Left1.jpg BORDER="0"></TD>
        <TD><IMG SRC="
Images/Top1.jpg" BORDER="0"></TD>
        <TD ROWSPAN="3"><IMG SRC="
Images/Right1.jpg" BORDER="0"></TD>
    </TR>
    <TR>
        <TD width="661" height="422">Your text goes here!</TD>
    </TR>
    <TR>
    <TD valign="bottom"><IMG SRC="
Images/Bottom1.jpg" BORDER="0" align="bottom"></TD>
</TR>
</TABLE>
</TD></TR></TABLE>

It’s amazing how much time you can waste trying to make a retro product function like it’s the 21st century!

Advertisements

3 Responses to “Making an HTML Email Look Good in Outlook 2007”

  1. AvreaFoster said

    I was experiencing the same problem, when I pasted the HTML into an Outlook 2007 message, the images looked off, and didn’t align properly. After an unsuccessful hour of trying to make adjustments (setting vert. & horiz. align, defining widths in all table cells, using spacer gifs, deleting all of the   in the code) to try to make the images align properly, I decided to (as a last ditch effort) go ahead and send a test email even though the images appeared incorrect in the message body field. Guess what? The email came through and looked perfect. Go figure.

    I’ll never get that hour back, but at least I know to try and send a test first.

    Thank you Bill G. & the MS team!

  2. Brianne said

    Hi Russell!

    Two questions for you –

    1 – With Outlook on PCs, have you ever had trouble making sure a cell full of text stays at a fixed spot on the page? I keep running into a problem where it will still be centered within a row, but it expands the size of the row, distorting the layout’s alignment.

    2 – I was also wondering where you got the awesome ribbon graphic from – or did you create it yourself? Either way it looks great!

    Thanks!

    Brianne

    • Russell Wright said

      Brianne–

      Not sure that I’ve ever had the problem in #1. I had to experiment a bunch to get it to quit distorting. I also found out the only way to test it was to send the email. I used SharePoint Designer and it wouldn’t show me the real WYSIWYG results that I saw in Outlook.

      The awesome ribbon graphic was created by my friend Kelly Taylor, who is an AWESOME freelance graphic design artist. http://www.linkedin.com/in/kellytaylordesigns and http://www.kellytaylordesigns.com (coming soon).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: