Creative HTML Table Abuse

There’s an old-school ’90s HTML design trick that dates back to the dim and distant past before we had decent layout control in CSS. That’s “slicing” – chopping a large image up into multiple parts, then reassembling them in an HTML table.
If you slice your images in an email and the end user hasn’t loaded images what will they see? They’ll see a rectangular box – either empty or with the image alt text in it. And, if you set the background colour for the table cell, they’ll see that – but only when images are turned off.
If you’re sneaky, you can do clever things with that.
Images off:

The same mail with images on:

Or like this, with images off:

And the same mail with images on:

(There’s more discussion in this reddit thread about it).

Related Posts

Walking the Walk

Last week I mentioned a Smith-Harmon report about how to handle email when going out of business. I mentioned at the end of the post that I was pleasantly surprised at how well done their email program was. Let’s walk through the process.
1) The download process. Clicking on the “download report” page popped up a signup window. They ask for first name, last name, company and and email address, but only require an email address. There is a link to their privacy policy and two unchecked boxes. The first is “I would like to subscribe to Smith-Harmon’s monthly newsletter, which is full of email marketing tips, news and research.” The second is “Please have a representative contact me to discuss how Smith-Harmon can help my company with its email program.”
How does their process incorporate best practices?

Read More

Images in email

It can be very hard to create engaging graphics and layout that work in all email programs. Each has it’s own quirks and weirdness in interpreting the underlying HTML code. Today, while investigating an issue for a client, I learned that some versions of Lotus Notes don’t display images in PNG format. Magilla Marketing addresses the same issue today.

Read More