HTML email tips and tricks for Gmail app
For Gmail app 6 and 6+, here are some coding tips.
1. How to write a "display" property for Gmail?
If the value of the inline display attribute is set to “none,” Gmail does not support it.
style="display:none"
Each of the other display property values is supported.
It's important to note that if the value is set to "none !important;" as seen below, Gmail will support the inline display feature.
style="display:none !important;"
2. How to fix vertical spacing in Gmail?
Gmail converts this:
<td style="height: 20px;"></td>
In response to this:
<td style="min-height: 20px;"></td>
In TDs, the min-height property has a different effect than the “height” attribute. This appears to have the same impact across all browsers. It addresses the problem by inserting a space or an inside the empty cell.
<td style="min-height: 20px;"> </td>
3. How to know embedded CSS isn't supported in Gmail?
One method to get around this is to use our CSS conversion tool in the "Developer Tools" menu in each test result to change your embedded CSS to inline.
Gmail changes your Body tag to a DIV, which gets past the issue for things like font, font colour, and font size. This can actually work in your favour because you can utilise any inline CSS properties that would normally be supported by a DIV within your BODY. It's vital to remember that some clients don't support the BODY tag, so you'll need to include the same declarations in your embedded CSS as well. Also, because BODY characteristics like "bgcolor" aren't available within a DIV, you can't rely on them.
<head>
<style type="text/css">
/*This is for all clients except Gmail,
Gmail gets the same declarations from the body tag */
table, tr, td, p, span {
font-family:Arial, Helvetica, sans-serif;
color:#333; font-size:11px;
}
</style>
</head>
<body style="margin:0; padding:0; font-family:Arial,
Helvetica, sans-serif; color:#333; font-size:11px;">
Content
</body>
4. How to fix background images in Gmail?
Your entire declaration will be ignored in Gmail if your background style includes any reference to a URL.
Consider the following scenario:
background: #000; /*This will be accepted */
background: #000 url(https://www.test.com/test.jpg); /* This entire line will be ignored */
With that in mind, if you ever wish to add a colour to your background picture, make sure to do so in a separate inline CSS declaration.
Consider the following scenario:
<td style=" background: #000; background: #000 url(https://www.test.com/test.jpg);">
You might also utilise the "background" attribute in your TDs.
<td background="http://www.test.com/test.jpg" bgcolor="#eeeeee">
5. How to fix margins and padding negative values in Gmail?
If the value is negative, Gmail ignores the entire margin or padding declaration.
margin:-40px 10px 0 0
margin:40px -10px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px
Gmail allows negative padding values in the generic padding attribute; however, this is not recommended because Yahoo New and Classic do not allow negative padding values.
6. How to fix line spacing in Gmail?
Because of the Gmail DOCTYPE, instead of using a font or span, try putting your font inside a paragraph tag. Another option is to set a line-height and/or font-size in the TD that contains the TD.
7. How to apply CSS position property in Gmail?
“position:relative” and “position:absolute,” as well as “left:,” “top:,” and other positioning code, are stripped from inline CSS in Gmail. This is due to the fact that positioning may cause components of the email to stray outside of the viewing window.
8. How to stop addresses converting in to links in Gmail?
Yes, if you don't have a link for a URL or email address, Gmail will add one for you. Within this text, for example, [email protected] will be changed to:
<a href="mailto:[email protected]"> name@test.com</a>
Here are two options for resolving the issue:
1.) Use an HTML entity that Gmail doesn't understand, such as:
Â
So, instead of [email protected], use:
name@testÂ.com
www.mydomain.com should be replaced with:
www.mydomainÂ.com
Replace http://www.mydomain.com with http://www.mydomain.com.
http:Â//www.mydomainÂ.com
2.) Wrap the URL or email address in an anchor and format it like the rest of your content. Consider the following scenario:
<a href='#' style="color:#000; text-decoration:none"> test@test.com</a>
9. How to stop phone number converting in to links in Gmail?
Gmail now includes an anchor link around phone numbers in both the desktop and mobile versions. The link launches Google's new voice/chat console, which is shown along the right column of the Gmail interface in the desktop version. To prevent this, use an HTML entity that Gmail doesn't recognize in your phone number, such as ""
Â212-389-3934
This entity was put before each dash in the preceding example.
10. How to fix Images showing in Gmail?
Spaces are not allowed in image paths in Gmail. Use underscores or dashes whenever possible.
If it doesn't work, double-check that you're utilizing absolute image references.
If it doesn't work, Gmail might be having issues with your Hypertext Transfer Protocol Secure (https://) references. If this is the case, consider switching to HTTP.
11. How to fix email clipping in Gmail?
If your email is longer than 102K characters, Gmail will show the first 102K characters along with the message:
[Message cut off] View the whole message
Your email will open in a new window when the user clicks to view the complete message.
If you're near to 102K, remove any superfluous spaces, carriage returns, or comments to save a few bytes.
When sending HTML emails, we recommend avoiding embedding images or documents.
12. How to fix the small space under all images in Gmail?
The Yahoo! DOCTYPE is to blame for this empty space. Here are a couple workarounds (which also apply to Gmail and Outlook.com):
1) To the image element, apply the display:block style.
<img src="test.jpg" style="display:block">
2) In the image element, add align=absbottom.
<img src="test.jpg" align="absbottom">
3) To the picture element, add align=texttop.
<img src="test.jpg" align=" texttop ">
4) To the containing TD, add line-height:10px or lower.
<td style="line-height:10px">
5) To the containing TD, add font-size:6px or lower.
<td style="font-size:6px">