Email Design Tip of the Week: Gmail takes two steps forward and one step back

Posted by: Tim Siukola
Friday, July 10, 2009
GmailThe benefits of continued testing should never be forgotten. While testing a number of email campaigns in Gmail we discovered that support has been recently added for the CSS background-repeat property and the HTML cellpadding and cellspacing attributes. While this doesn’t amount to a fundamental shift in standards support, it is still a step in the right direction. Sadly, it’s not all sunshine and rainbows since Gmail appears to be suffering from the same lack of support for paragraph tags that affects Yahoo Mail.

Let’s begin with the good news.

Support for the CSS background-repeat property arrives
Previously, any background images that were included in your email would always repeat (tile) in both the horizontal and vertical directions. This happened even if you used the CSS background-repeat property to restrict the image repetition in just the horizontal/vertical direction or specified the background image not to repeat at all.

Thankfully, support for the background-repeat property has been added. The previous workaround to combat this issue was to create background images that were much taller than their container elements. This resulted in increased file sizes for images and led you to hope that the content placed in your email would never exceed the height of the image and expose the repetition. The support for this property will allow you to be more efficient when cropping background images, reducing file size and unpredictability.

Please Note: The “background-image” CSS property is still not supported in Gmail, so the HTML “background” attribute must be used to assign a background image.

Code Sample
<td background=”bgimage.jpg” style=”background-repeat: no-repeat;”>
<td background=”bgimage.jpg” style=”background-repeat: repeat-x;”>
<td background=”bgimage.jpg” style=”background-repeat: repeat-y;”> 

Support for HTML cellpadding and cellspacing returns
When the Newer version of Gmail was released, support for HTML cellpadding and cellspacing went out the window. While this change didn’t affect everyone, it still caused spacing problems for email marketers using these traditional HTML techniques. This situation has improved and the Newer version has joined the Older in supporting these foundational HTML attributes.

Now for the bad news…

Support for HTML paragraph tags is lacking
The Newer version of Gmail does not support the use of HTML paragraph tags <p>. Paragraph tags are used primarily to create space between sections of text. If two sections of text are each contained within paragraph tags the space that normally appears between the paragraphs will be removed. In order to avoid this, break tags <br> can be used. Two break tags in a row will create approximately the same amount of space between text sections as a paragraph tag.

Code Sample

This:
First section of text.<br><br>Second section of text.

Will produce the same result as this:
<p>First section of text.</p>
<p>Second section of text.</p>

This week Google officially removed the “beta” distinction from Gmail. While this may signal that Gmail is ready for prime time, don’t expect email rendering to stay the same. As time passes, support for various HTML attributes and CSS properties will constantly change. Remember to stay vigilant in your testing efforts. We promise to do the same and we’ll let you know when the next shift occurs in the email rendering landscape.

Looking for an efficient way in ExactTarget to test the display and rendering of your emails across a multitude of email clients?
Try Inbox Preview powered by Pivotal Veracity. This tool allows you to preview emails in multiple desktop, web, and mobile email clients prior to sending your message. Learn More.


Tim Siukola
Manager, Campaign Solutions
ExactTarget Campaign Solutions Team

Comments for Email Design Tip of the Week: Gmail takes two steps forward and one step back

blog comments powered by Disqus

Comments for Email Design Tip of the Week: Gmail takes two steps forward and one step back

Thursday, July 16, 2009 by Dan Blows:
Can you go into more detail about the 'p' tags - I just tested Gmail and the space appeared as normal with space between the two paragraphs. I didn't try manually setting padding, margin or line-height. Personally, I always use BRs anyway as it's more consistent, but just wondered exactly what your results showed.
Friday, July 17, 2009 by Jason Showalter:
I'm not seeing any change with my 'p' tags in Google. Will this effect any syles applied to 'p' tags as well? Can you tell me where you got this information?
Monday, July 20, 2009 by Cherie Ansari :
As any HTML coder knows, trying to get your emails to look and perform consistently across multiple email clients can be a painstaking task. That’s why these types of articles are so helpful in learning about what works and doesn’t work. With the new Gmail changes, you gain control over the way your table and background image behaves. Although the paragraph tag is no longer supported, at least there is an easy work around. Just use the tags instead. One comment I would add to the article is that after you modify your code, don’t forget to see how your email message looks in other email clients, as you may experience unexpected rendering results.
Monday, July 20, 2009 by Tim Siukola:
Thanks for letting me know that you weren’t seeing the issue with the ‘p’ tags. I went ahead and ran our test again and it appears the issue has been resolved. Paragraph tags in Gmail are displaying with the proper spacing. This helps to re-emphasize the importance of continued testing. It becomes especially important with web-based email clients since updates can occur without much fanfare. Dan – When the problem was occurring the ~18px that would normally appear between sections of text contained within ‘p’ tags was not present. Instead, the text behaved as if a single ‘BR’ was used. Jason – Most inline styles that are applied to the paragraph tags should work just fine (font-family, font-size, color, etc). Please note that Gmail doesn't support embedded or external CSS, so sticking to inline styles is the way to go. We discovered these changes through first hand testing. Many times, while working on projects for our customers we discover display issues in a particular email client during our QA process. Once we notice a rendering issue we dig into the HTML code to try to pinpoint the cause. We then perform some more targeted testing that isolates a particular coding technique to ensure that it is, in fact, the source of the problem.