Gmail Breaking Email Templates? The Fix

Typically I don’t like to post on ‘technical’ topics relating to Internet marketing, but after a long day of the team doing trial and error, researching the web and a few head bangs and random curse words shout-outs, I felt this quick-win technical fix will save a number of developers who build email templates frustrations and sensitivity to their co-workers ears.

A few months Gmail made some changes to how its Gmail accounts render HTML email templates. The result, frustration among many email developers trying to understand how and why their email templates are breaking when building the template layouts using tables. These changes by Googles Gmail team adversely affected how images are displaying in browsers, and how the clients browser renders table rows and column spans (HTML geek talk). And its not just Gmail who did this…Hotmail as well (though Live and MSN is unconfirmed).

Below are a few quick tips and answers that describe the background changes to Gmail, and some simple solutions to fix the display issue.
Gmail changes:
Gmail (and Hotmail) now add a few extra pixels of horizontal white space when a certain style reference is removed. While a general rule of thumb when building email templates is to avoid CSS and keep it simple with HTML tables, a times some CSS styles will work and can help tremendously with template layout and overall style. In this case, its highly noticeable with the rendering of images in Gmail that are stacked vertically (like image slices) or for images displayed on a non-white background.

The Fix:
Add an in-line style reference to control the image display. I had eluded earlier the issue may be with the how Gmail renders the table rows, but this solution applied to the images seems to have solved the problem. And remember, lik e many other ISP email clients, they don’t support cascading styles which are those referenced in the head or style tags at the top of the HTML. The style sheet must be in-line. Example below:

PROBLEM CODE:

img xsrc=”http://www.mydomain.com/images/worldcup.jpg” mce_src=”http://www.mydomain.com/images/worldcup.jpg” height=”100″ width=”100″

SOLUTION:

img xsrc=”http://www.mydomain.com/images/worldcup.jpg” mce_src=”http://www.mydomain.com/images/worldcup.jpg” height=”100″ width=”100″ style=”display:block”

Browsers affected?

We have observed this rendering issue in FireFox, I.E. 8, and various Webkit browsers such as Chrome, Safari, and some mobile devices.

Other points:

The practice of using the display:block style for images is a best practice because Windows Live webmail (Hotmail, MSN, Live) also adds this white space to images if you don’t use the fix. Remember, use this style inline the code.

Although Google Chrome and Safari are the biggest browsers using the Webkit rendering engine, it’s important to note that Webkit is an open source project which means it is used by any number of HTML rendering tools; not just popular web browsers. Other notables include desktop email clients like Apple Mail and Entourage 2008 (also Apple) and numerous mobile. See here for a comprehensive list of applications that use Webkit.

A special shout out to Return Path for saving our teams sanity.