White is the new black: The trouble with HTML email

Posted by on 29-03-2012, under New features

Hands up, we had a problem. Every once in a while we’d get a message from a user who couldn’t read our emails. “Red text on a black background is a terrible combination!” the emails would say. We were baffled – our emails are white – are you really talking about our emails?

But last week the complaints increased. And then there were screenshots. Oh dear.

I followed up with as many customers as possible. It turns out that a few combinations of Windows and Internet Explorer were resulting in the incorrect rendering of our HTML email in webmail clients. Gmail, Hotmail and Yahoo Mail all equally affected.

The problem sounds like something that’s easy to fix. A bgcolor= here, inline CSS background-color there. But not so – it was a very stubborn bug. In the end we ditched our old email template completely and set about creating a new one. I’ve been wanting to do this for some time now so that we can create rules to adapt the email layout depending on the device being used. For example, on an iPhone our deal titles were too small to be read easily and there was too much information cluttering up smaller screens.

We based the new deal email on the HTML Email Boilerplate by Sean Powell. Even with this solid start it wasn’t easy getting it looking consistent across all devices and email clients. Yahoo Mail renders the email as if it’s being viewed on a mobile device – even on a desk top, and Hotmail/Live wont show background images, which we use to make sure the email width can be scaled for mobile screens. Our thanks go to the diligent folks at Campaign Monitor for their work on css support for email which proved invaluable in this task.

It’s a work in progress, but the first version of the new templates was rolled out to all users today. Fingers crossed, no more black background.

pagetop