You've diligently designed your HTML email campaign and previewed it in Gmail – only to find that it's completely messed up. Gmail has a handful of quirks that cause your HTML emails to display incorrectly. Here are the most common Gmail HTML coding quirks to avoid (and tips to avoid them). (Shameless product plug: Pinpointe includes a free html email previewer, so you can easily see your campaigns in 30+ email clients and easily debug html email designs.)
Why aren’t Images Displaying in Gmail?
Gmail does not support spaces within image names, so always use underscores or dashes. We see this all the time in Pinpointe customer accounts. On your desktop it's perfectly OK to save your image with a filename like: "My Fave Image.jpg". But Gmail will ignore this one. Try renaming to: "my-fave-image.jpg' or myfaveimage.jpg.
Another common mistake is not using fully qualified (absolute) URL paths instead of relative paths. (e.g: use http://www.myserver.com/myfaveimage.jpg instead of /myfaveimage.jpg)
If that still doesn't fix the issue – check to see if you're using a secure link like: https://www.mysite.com/image.jpg. Gmail (and other clients) sometimes time out when accessing via https://. Try accessing as http://…
Gmail Clips my Email
If your email is bigger than 102K, Gmail will display the first 102K along with a message that reads:
[Message clipped] View entire message
We recommend that you avoid embed images or documents when sending HTML emails.
Gmail Ignores Backgrounds (So Does Outlook 2007+)
This is a common html campaign design issue too. When designing for the web – it's common to overlay text on top of images by using an image as a table background. Unfortunately that doesn't work too well in email. Outlook ignores background images entirely and Gmail only kind of works.
If you include any reference to a URL, your entire declaration will be ignored.
For example:
background #000; /*This will be accepted */
background #000 url(http://www.test.com/test.jpg) /* The whole line is ignored */
Now – if you want to provide an alternate color to display, do it within a different inline CSS declaration. For example:
<td style=”background: #000; background: #000 url(http://www.site.com/myimage.jpg);”>
You can also use the “background” attribute within your TDs.
<td background=“https://www.pinpointe.com/myimage.jpg” bgcolor=”#eeeeee”>
Gmail Ignores Padding and Margin Declations (Sometimes)
If you happen to have *any* negative values in your margin and padding declarations, Gmail will happily just ignore them all! Check out the code sectio below – this block will be entirely ignored because of the negatively defined values:
margin: -20px 10px 0 0
margin: 20px -5px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px
Gmail Makes All Links Underlined and Blue
Color code #1155CC is the default color for Gmail links. You can overwrite this color using inline CSS, just don't set the color to black using any of these variations: #000, #000000, and “black” values – Gmail ignores these. For example, the following will render as red:
<a href=“https://www.pinpointe.com/hello” style=“color:#C00;”>Booyah!</a>
This will be rendered as the default blue color (hex code represented as #1155CC):
<a href=“https://www.pinpointe.com/hello” style=“color:#000000;”>Booyah again!</a>
To fix this use a different hex value that is close to black:
<a href=“https://www.pinpointe.com/hello” style=“color:#040400;”>Booyah</a>
Underlines. Links in Gmail are underlined by default. You can overwrite this style using inline CSS with the attribute 'text-decoration'. Here's how to create a link without an underline:
<a href=“http://www.pinpointe.com” style="text-decoration: none;">Booyah!</a>
#1 Annoying Gmail Issue: Gmail Ignores Embedded CSS Stylesheets
Other email clients ignore CSS style sheets too but Gmail completely filters out your embedded CSS stylesheet. (Gmail also strips anything between the <head> </head> tags too.)
The way to get around this is to finish your design with an embedded CSS stylesheet, then run it thorugh our automatic CSS inline tool, which will inline all styles.
If trying to get your design to work right in Gmail (or any of the other top 40+ email clients) is driving you nuts, you can save a bunch of time by using Pinpointe 'Pre-Flight'. That's our combination email design previewer and spam checker. We preview your email design in 30+ emai clients and tell you exactly what is causing problems so you can avoid them. It's included free with Pinpointe's email marketing service.
