Our Blog

We can't shut up.

You are here: Home Our Blog Email Newsletter Troubleshooting: Volume One
May 6 2010

Email Newsletter Troubleshooting: Volume One

Specific examples of mistakes made when crafting an HTML email newsletter and advice for how to fix them.

I get email newsletters all the time from lots and lots of sources. Makes sense because I head up our email communications program here at Groundwire and I like to stay on top of what people are doing with their designs and their content. This also means that I see when things don't go exactly as planned.

Below is a series of screenshots based on actual emails I've received with various problems and notes on exactly why the problem occurred and what can be done about it. My hope is that you who are in charge of authoring email messages on a regular basis can learn some useful troubleshooting tips.

Image Alignment

An example of an improperly aligned image

Notice how the images in this example isn't allowing for text to wrap. It's left aligned alright but the text begins at the bottom of the image instead of at the top. Here's why.

When we look at the line of HTML used to embed this image, we see the following:
<img src="http://www.mysite.org/images/news/2010/whale.jpg" alt="Whale" width="250" height="200" border="0" style="float: left;margin-right: 15px;margin-bottom: 10px;border: solid 1px black">
The problem stems from the use of the float CSS property:
style="float: left;"
Float is ignored by Outlook 2007 and Lotus Notes. It probably looks fine in other email clients, but in order to ensure a consistent look in all platforms, use the align tag attribute instead. Here's an example:
<img src="http:mysite.org/images/news/2010/whale.jpg" align="left" width="200" height="200" />

So here's a screen shot of the image with the correct HTML alignment property applied.

An example of a nicely left-aligned image, which allows for text wrapping.

More on Image Alignment

So from the above example we see that the align tag attribute is the way to go. I would recommend using only these three alignments for images:

  • align="left" (left aligns the image, text wraps around the right side)
  • align="right" (right aligns the image, text wraps around the left side)
  • align="middle" (Good for placing several images next to each other in a row, or in cases where you don't want any text wrapping)


 Image Size

An example of an image with the size not declared. It renders at the original size, which is too big for this email.


An image similar to this arrived really, really large in my inbox just the other day. The content is squished to a thin column over to the left. What's going on here?

My best advice here is to resize the image and insert it at the size it should be viewed at. If that's not possible you can include a height and width declaration to change the image size in your HTML code. Let's look at how the code for this image was created:

<img hspace="5" align="right" alt="" style="width: 266px; height: 420px;" src="http://mysite.org/images/map.jpg" />

Once again, Outlook 2007 and Lotus Notes aren't playing nice. They ignore the inline CSS which is supposed to give the image a smaller dimension, seen here:

style="width: 266px; height: 420px;"

Instead, use the width and height tag attributes, like this:

<img src="http://mysite.org/images/map.jpg" align="right" width="266" height="420" />

The result is an image which does render correctly in all email clients:

An example of an image which has the proper height and width attribute defined.


One more thing; if you forget to include a height and width at all, some email clients will assume that you meant height=0 and width=0 so the image won't appear at all!


Add Yours…

You can add a comment by filling out the form below. Plain text formatting. Comments are moderated.