Building HTML Emails


When I got the dreaded nod from the account handlers that a client has requested an HTML email, we developers tend to toss a coin to decide which one of us gets the unenviable job of building it – a pain felt by many developers. I recently experienced the ‘losing of the coin toss’ when I was asked to build an HTML email for a client. The design looked easy enough and I thought “piece of cake”, but oh boy was I in for a shock!

The first thing I did was research online ‘how to build HTML emails’ but nothing can quite prepare you for how much of your learning of HTML and CSS you have to abandon in order to get an HTML email to work across many email clients.

After learning that an HTML email is essentially a series of tables within tables, an inline CSS was the way to go (I know, the horror!) so I set about building the design I had been given. All was going well, I had it looking exactly like the design I had been given when viewing it in a browser. It responded well to different screen sizes, even without the use of media queries as some email clients, such as Gmail and Outlook, do not support media queries so I had to build this with fixed width table elements.

Next, I packaged up the HTML and the images into Campaign Monitor and gave it a test. Out of all the email clients I tested, Outlook was by far the worst! The font displayed was Times New Roman, the images weren’t aligned and it bared no resemblance to what I saw in the browser. The best of the bunch was AOL, which rendered almost exactly the same as the browser. Gmail was a little funny with image alignment, but it wasn’t so bad. I went back to Google to find out why Outlook was so dramatically different to what I was expecting.

After many searches and failed fixes, I discovered that to force Outlook to render the font I wanted, I had to wrap the text in the HTML 4 ‘font’ element and, low & behold, it worked!

The next issue to overcome was why Outlook would not align the images using the ‘text align’ command, but in other email clients it worked fine. This was eventually fixed by adding ‘blank’ images at a fixed size – this makes me shiver, even now, to think that I had to do something like this to align an image.

In conclusion, building my first HTML email is not an experience I want to repeat as the process to get it to work made me feel dirty. Unfortunately, clients seem to love HTML emails, so as developers we can’t get away from them. I was fortunate enough to find lots of great tutorials and advice online from other poor souls who have suffered & documented their torture for the rest of us and for this I am eternally grateful!