Jan 16, 2006

Nice “ALT TEXT” Hack for HTML Email

ShowimagesI got a couple email newsletters today that I had to highlight here for our MailChimp users. The first was from Network Solutions. You know, one of those typical, "your domain name is going to expire in 50 years, so you better renew right now" messages. Those guys really believe in early warnings. The other was from Victoria’s Secret. Yeah, say what you will about the last one. But Victoria’s Secret has got some pretty crafty HTML email coders, (yes, that’s why I subscribe—to read the HTML, and pass what I’ve learned on to you).

Anyways, you know how some email applications block images in HTML email? It’s a nice security feature that protects your privacy and all, but it can be really annoying for legitimate email marketers who send email with images and photos of their products.

Well, Network Solutions and Victoria’s Secret did some pretty neat stuff with their  HTML email code, and it’s worth a post…

Normally, when you send an HTML email with graphics, most email applications block the graphics from displaying. If you trust the sender, you press a "Show Images" button to un-hide the graphics.

In Mozilla Thunderbird (which is a great, free email app, by the way), images are blocked, and if they have any "ALT Text" assigned to them, it gets displayed (instead of a big, "broken image" icon, like Microsoft’s Outlook 2003 does).

This can actually be kind of annoying, because people might not realize your logo graphic is even missing when they see your alt text there instead (here’s an example from a previous post).

But two email campaigns I just received did a great job using this issue in Thunderbird to their advantage…

The first I want to highlight is Victoria’s Secret. I received their email for their 2006 Bikini Line (remember, I’m reading this stuff for research here), and I noticed that with images blocked, they had a few lines of text at the top of the message…


But when I clicked the "Show Images" button in Thunderbird, the "ALT Text" disappeared:


That line of text at the top of the email ("sexy new bikinis…") is actually the "ALT Text" for a transparent, invisible little "shim.gif". Neat-o.

For those of you who aren’t that experienced with HTML, "Shim Gifs" are
transparent graphic files, commonly used by web designers, as a way to
force table cells to be a specific width. They’re totally invisible.  And "ALT Text" is just some
text that you can assign to a web page image, which will display in
case the image won’t download. Google ’em for more info.

That’s a pretty nice hack for HTML email, if you ask me. Kudos to those VS email people. I don’t know how they get any work done around there.

Okay, on to the next example…

Network Solutions sent me this email, and again, Mozilla Thunderbird blocked all the images in it. But NetSol used CSS on that logo graphic to assign it a huge font-size, making the ALT Text nice and big in Thunderbird…



Click here if you want to see what the NetSol email looked like after pressing "Show Images."

I decided to give this a try myself. I constructed my own HTML email where I placed a transparent shim.gif at the top, with an "intro paragraph" as my alt text. I also placed  our MailChimp logo, with the alt text set to say, "MailChimp."

Then I used CSS to assign BIG font sizes (and even colors) to the alt text.

First, here’s what my HTML email looks like without any CSS assigned to the logo file, and without any shim.gif at the top. You can see how it just says, "MailChimp" in really plain, black text, instead of my beautiful chimp logo.

Then I applied some CSS to the alt text:

Here’s what the email looked like in Thunderbird with images blocked.

And here it is with images displayed. Note how I got the logo’s alt text to be our MailChimp gold color, and
how the shim.gif’s alt text is ginormous and brown (um, I don’t
recommend this for any real campaigns).

Here’s the email’s HTML code if you want to view the source (opens a new window, then right-click, "view source" in your browser).

Pretty nifty, huh? There’s probably a lot more you can do with CSS and alt-text and shim.gifs, but keep in mind this stuff won’t work on all email applications. So you shouldn’t spend too much time coding CSS for alt-text, when you could just do it to the actual CONTENT of your message. But if you have an HTML email that’s mostly graphics, you can use these tricks to at least get the Mozilla users to click that "Show Images" button.