Do your email newsletters look right in Gmail?

The world of email clients is constantly changing, especially when it comes to webmail. Google recently updated Gmail and it’s pretty cool. The UI is super clean, and you can set themes which have different backgrounds. I’m a huge fan of Gmail as a user, but it’s not always fun to build email newsletters for it. The newest issue is due to the semi transparent background which allows users to set backgrounds. It looks great, and really allows us to customize our email experience, but it can leave you email newsletters looking a bit odd if you have not taken the right steps.

Here is an example: sorry to pick on Questrade, it’s only one of the many culprits out there. In particular, notice the green bullets with a white background box. Obviously the assumption here was that this email will be displayed on a solid white background, bad assumption, as you can see, that’s not the case in Gmail. The top gradient also looks a bit odd as it fades from grey to solid white.

Don’t assume your background will be white, it will turn your otherwise great looking email into a less professional looking communication. Luckily by now the fix for this should be quite obvious, although I still see emails coming through without it, as illustrated above. This tip is more about awareness, since it’s really easy to forget something you can’t see in most email clients. A lot of newsletters suffer from this and the fix is so incredibly simple and it’s a best practice anyway to set the background colour.

You can use style=”background:#fff” on your main table. Remember to add this inline style to your top level table as Gmail currently strips out embedded styles. This will instantly make your email look better, although depending on the design it might feel cramped at the edges. When designing new email newsletters or refactoring your current ones, adding a bit of padding around the most outer table will fix this. I recommend doing this with multiple table cells/rows and spacer gifs as I am paranoid about my emails rendering exactly how I want in all email clients. If time is tight, you can probably get away with CSS padding in most clients though.