I was recently working on an email application where users are sent emails on an automatic basis from the main web platform. There are many pitfalls to bulk email sending, and one of the oldest is how the email content will actually render in the users email client. Usually this is simply a case of people turning off images, or active scripting so they lose the majority of the design and layout.

Often people will include a 'Click here to view this online' link at the top of the email as a substitute, as it's much easier to control the how the content of a web page displays than an email.

A new pitfall (for me!) is Gmail. I found that sending exactly the same content to a hotmail account and a Gmail account resulted in two different displays!

The email is a three column layout, with both of the side columns being coloured to provide a bordered edging. In Hotmail it displayed as designed and tested, but in Gmail the third column was gone, and the central column had lost its shape and was overlapping the right area!

I eventually tracked down the error to an extra set of ending tags:

I spent a few hours looking for them at this point, but couldn't find them anywhere. After backtracking and examining the rest of the email (it is made of several component blocks) I discovered that there was a small table layout error in the code. This was causing G mail to attempt to fix it itself! It was reading through the code and interpreting the error and trying to correct it. It was writing in the end tags above itself, so I was never going to find them in a template!

So one to note for the future, G mail is strict about the code it renders, and will happily rewrite anything it doesn't like.