Apr 22, 2005

How not to do bullets in HTML Email

BrokenimagesYou probably already know that Microsoft Outlook 2003 (like most email apps these days) automatically hides all images in HTML email. Instead of images, you see generic placeholders where every graphic should be, whose "alt text" says something like, "to help protect your privacy, Outlook prevented the download of these images…blah blah"

But you might not have known that if you don’t specify width and height dimensions for your images, Outlook will insert a GIGANTIC placeholder instead of your image. And if you’re not careful, this giant placeholder can get in the way of your content.

Read on for examples…


I got an email newsletter from Expedia.com, with travel offers
highlighted by little gold bulletpoint graphics. But since they didn’t
specify width and height tags, the email looked like this when I first opened it:

(Click here for Screenshot)

Looks broken and sloppy, doesn’t it? I got a couple of these and
threw them away, because I thought they simply screwed up my offers. What I didn’t realize was that the offers were all the way to the right, off my screen!

It wasn’t
until a couple more of these came when I finally clicked on "View Images" and saw what it was supposed to look like:

(Click here for Screenshot).

So why does any of this matter? Some recipients (like me) don’t always turn images on instantly. I actually like to briefly skim the content to decide whether or not the email is "friend or foe" before I click "View Images." And if the content isn’t there to evaluate in the blink of an eye, it gets deleted. To their credit, it looks like they fixed the issue
after about 3 or 4 sends.

So be sure to always specify width and height tags in HTML email.

Oh, and make sure your image ALT TEXT tags are appropriate for Mozilla Thunderbird, too.