Whereas Outlook tends to get essentially the most criticism for being temperamental, Gmail has its personal share of points that trigger complications for HTML e mail builders.
Gmail is without doubt one of the hottest e mail platforms on the planet, with over 1.8 billion customers. It’s additionally the second hottest e mail shopper, accounting for 28% of the worldwide market share. Take a look at your e mail analytics and see what share of the addresses are Gmail (it’s most likely lots). In case your HTML e mail shouldn’t be displaying correctly in Gmail you might be dropping out on essential leads and income.
Guaranteeing that your HTML emails look nice in Gmail purchasers might be difficult, although. Remembering to check your e mail may also help you catch a few of these, however beginning with the appropriate code and a few data about Gmail-specific points will forestall hours of troubleshooting.
When coding for Gmail customers, there are some things to remember
Soar to a piece to seek out out extra:
- Gmail has a number of e mail purchasers
- Gmail app for non-Gmail accounts (GANGA) doesn’t assist background photos
- Gmail clips messages bigger than 102Kb or if there are particular characters
- Gmail solely helps <type> within the <head>
- Gmail removes your total <type> block if it encounters an error
- Gmail doesn’t assist internet fonts apart from Roboto and Google Sans
- Gmail shows preheader textual content within the e mail preview
- Gmail doesn’t assist attribute selectors and most pseudo-classes
- Gmail shows a picture obtain icon over giant unlinked photos
- Gmail doesn’t permit unfavorable CSS margin values
- Gmail robotically converts telephone numbers, emails, and URLs to hyperlinks
- Gmail makes use of the HTML5 DOCTYPE
- Gmail’s DOCTYPE can create further area below photos
- Gmail has darkish mode inconsistencies between Android and iOS
1. Gmail has a number of e mail purchasers
Whereas Gmail has simplified its interfaces through the years, there are nonetheless a number of totally different e mail purchasers with totally different ranges of CSS assist and different quirky variations when rendering HTML emails.
- Gmail webmail for desktop
- Gmail webmail for cellular
- Gmail for iOS
- Gmail for Android
- (There isn’t any standalone desktop model)
Essentially the most problematic one is Gmail’s Android shopper when configured for POP/IMAP entry (see tip #2), however Gmail’s points with darkish mode in iOS are additionally a giant drawback (see tip #14).
2. Gmail apps for non-Gmail accounts (GANGA) doesn’t assist embedded kinds
Each Android and iOS Gmail apps comprise a characteristic for accessing non-Gmail accounts (e.g. Yahoo! Mail, Proton Mail, and many others.) utilizing POP and IMAP. Sadly, emails accessed via this setup lack assist for embedded kinds (<type>). As of 2017, each apps added assist for background photos. Nevertheless, background photos nonetheless require a bit of further effort as a result of background-size shouldn’t be supported.
To work round this, you should use shorthand CSS, which is supported:
background: url(‘picture.jpg’) middle / cowl no-repeat #3ab97d;When you check this and see that your background picture remains to be not rendering for GANGA emails in Gmail’s Android or iOS app, it could be due to one other little rendering quirk. On each apps, photos are blocked by default for GANGA emails.
Usually, you will note a hyperlink to show the blocked photos, but when your e mail solely makes use of a background picture and doesn’t embody some other photos, this hyperlink is not going to show. Be sure that in case you’re utilizing a background picture you additionally embody a daily picture in order that the “show photos” hyperlink will seem.
3. Gmail clips messages bigger than 102kB or if there are particular characters
In case your e mail’s dimension exceeds 102kB, Gmail will show the primary 102kB together with a message that reads:
[Message clipped] View total message
When the subscriber clicks to view all the message, your e mail will likely be displayed in a brand new window.
When you’re near 102kB, it can save you a couple of bytes by eradicating any pointless areas, line breaks, or feedback. You additionally need to keep away from embedded photos and paperwork when sending HTML emails.
Moreover, if your e mail has particular characters that aren’t correctly encoded, Gmail will clip it. Ensure that all particular characters are encoded accurately to stop this from taking place. Under are a few examples of particular character encoding.
- Copyright image ©: ©
- N sprint: –
Learn extra about the way to keep away from e mail clipping.
4. Gmail solely helps <type> within the <head>
Gmail does assist embedded kinds (<type>). Nevertheless, Gmail type tags assist is restricted to the pinnacle of your HTML doc. Gmail, Android, and iOS apps don’t assist <type> in any respect when rendering emails retrieved via non-Gmail accounts (GANGA).
5. Gmail removes your total <type> block if it encounters an error
Gmail strips HTML formatting fully if it encounters even one error. For instance, Gmail doesn’t like an ‘@’ declaration inside an ‘@’ declaration. There are a few conditions the place you would possibly end up declaring an ‘@’ inside an ‘@’ – when declaring an internet font and when declaring a viewport for Home windows Cellphone 8.1. When you’re utilizing these declarations in your code, wrap them in their very own type tags and put the kinds which might be Gmail-safe within the prime block.
Instance of an internet font declaration:
@media { @font-face {font-family: 'Roboto'; src: url('roboto-regular-webfont.woff') format('woff'), url('roboto-regular-webfont.ttf') format('truetype'); font-weight: regular; font-style: regular; colour:#3ab97d; } }
Instance of a viewport declaration:
@media solely display and (max-width:320px) { @viewport { width:320px; } }Gmail additionally eliminates your type block if it exceeds 8192 characters. In case your type block exceeds this character restrict, break up it into two elements. Gmail will take away the primary block that exceeds the 8192-character threshold and any blocks after it (the character depend consists of all your type blocks).
6. Gmail doesn’t assist internet fonts apart from Roboto and Google Sans
The concept of Google’s personal internet fonts not working in Gmail appears stunning and baffling, however it’s true. The one internet fonts that Gmail helps are Roboto and Google Sans. You may nonetheless use internet fonts in your emails, in fact, simply bear in mind to make use of a font stack to declare fonts so as of choice and to account for various font assist throughout e mail purchasers.
Font stack instance:
type=“font-family: ‘Roboto’, Helvetica, Arial, sans-serif;”Study extra about font stacks and the greatest fonts for e mail.
Like many trendy purchasers, the e-mail preheader is robotically proven after the topic in Gmail’s preview textual content with out the recipient having to open the message. Preheader textual content generally is a seen a part of your e mail physique or it may be specifically crafted to solely show earlier than the subscriber opens your e mail (hidden preheaders).
Study extra about the way to code hidden preheaders.
8. Gmail doesn’t assist attribute selectors and most pseudo-classes
Gmail CSS not working accurately? Examine whether or not you’re utilizing attribute selectors and pseudo-classes in your code. Though attribute selectors (just like the one under) permit for extra flexibility when choosing components in CSS, Gmail doesn’t assist them.
div[class="content"]{ colour: purple }
Gmail additionally doesn’t assist pseudo-classes like :checked and :energetic and solely helps :hover of their webmail shopper. Due to this fact, interactive e mail assist in Gmail may be very restricted or non-existent until you utilize AMP for E mail.
Whereas AMP e mail has restricted assist throughout different purchasers (Gmail, Yahoo!, and Mail.ru assist it, however Outlook eliminated assist again in 2020), it’s nonetheless an important choice if in case you have quite a lot of subscribers who use Gmail, Yahoo!, and Mail.ru.
Try some examples of interactive emails utilizing AMP for E mail. Then you should use this information from the open supply AMP venture to get began with AMP emails.
9. Gmail shows a picture obtain icon over giant unlinked photos
If a picture isn’t wrapped in a URL, Gmail will overlay an icon that lets recipients obtain the picture. At worst, this icon may obscure essential info in your picture. At greatest, it simply appears to be like distracting.
The best answer is to make sure that photos bigger than 300×150 are wrapped with a hyperlink, however there are a number of different choices you may attempt to forestall Gmail’s picture obtain button in HTML emails.
10. Gmail doesn’t permit unfavorable CSS margin values
When you’re making an attempt to overlap web page components in your HTML e mail utilizing unfavorable margin values, you’ll discover Gmail CSS not working as you meant. Whereas unfavorable margin values are sometimes utilized in CSS for internet growth, they aren’t supported in most webmail purchasers like Gmail, Outlook.com, or Yahoo! Mail.
To get components to overlap, you may attempt utilizing fake absolute positioning, though this methodology is not going to work for Gmail apps with non-Gmail accounts (GANGA).
11. Gmail robotically converts telephone numbers, e mail addresses, and URLs to hyperlinks
Gmail robotically converts telephone numbers, e mail addresses, and URLs into hyperlinks – presumably for the added comfort of e mail customers. However for e mail builders it’s yet one more merchandise so as to add to the lengthy listing of issues not displaying as meant in Gmail. For instance, Gmail will convert identify@check.com to:
<a href=“mailto:identify@check.com”>identify@check.com</a>
Worse but, the hyperlinks will likely be default blue and underlined, which is de facto unhealthy information in case your background is blue. Principally, this auto-linking difficulty is only a little bit of an eyesore, however it may well trigger issues in case you’re utilizing faux domains for the aim of inventive expression (e.g. dabomb.com) or in case you merely don’t desire a piece of data to be clickable.
Listed here are three potential fixes, relying on the outcomes you’re after:
Use an HTML entity that Gmail doesn’t acknowledge
When you don’t need sure telephone numbers, emails, or URLs in your e mail to be robotically wrapped in a hyperlink, use an HTML that Gmail doesn’t acknowledge, resembling ­. It will maintain Gmail from recognizing the textual content as one thing that needs to be auto-linked.
For telephone numbers, you’ll insert this entity earlier than every sprint. So the telephone quantity 212-389-3934 can be coded as:
212­-389­-3934
For an e mail deal with like identify@check.com, you may add the entity earlier than the interval previous the area sort:
identify@check­.com
To stop a URL from being robotically transformed to a hyperlink, you’ll code it such as you would an e mail deal with and add the entity to the interval previous the area sort. So www.mydomain.com can be written as:
www.mydomain­.com
If utilizing the total url with http or https, additionally add the entity after the http: or https:. So http://www.mydomain.com can be coded as:
http:­//www.mydomain­.com
Insert an anchor tag round your textual content and magnificence it
When you simply need your textual content to look as if it hasn’t been transformed to a hyperlink, you may all the time wrap it in an anchor tag and magnificence it to match the encircling textual content. For instance:
<a href=“#” type=“colour:#000; text-decoration:none”>identify@check.com</a>It’ll nonetheless be a clickable hyperlink on hover, however it received’t appear to be a hyperlink and will likely be a lot much less more likely to be clicked on.
Globally type all automated hyperlinks
When you don’t thoughts that Gmail is robotically making use of hyperlinks, however you’d similar to to alter their look to match your different hyperlinks, you should use the next CSS:
<!-- wp:paragraph -->
<p><br> u+#physique a {<br> colour: inherit !essential;<br> text-decoration: none !essential;</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> font-size: inherit !essential;<br> font-family: inherit !essential;<br> font-weight: inherit !essential;<br>line-height: inherit !essential;<br>}</p>
<!-- /wp:paragraph -->Notice: Gmail may even apply the default blue, underlined hyperlink to your button hyperlinks if their kinds aren’t inlined.
12. Gmail makes use of the HTML5 DOCTYPE
When you specify a DOCTYPE apart from HTML5 in your e mail, you’ll discover that it received’t render the identical method in Gmail because it does in a browser or in an e mail shopper that respects your DOCTYPE. It’s because Gmail renders all emails utilizing the HTML5 DOCTYPE.
This is a matter that’s not unique to Gmail. Many different e mail purchasers drive HTML5, together with Yahoo! Mail, Outlook.com, and Yandex on Cell and Desktop Webmail; Inbox and Yahoo! Mail on iOS; and Inbox on Android. Apple Mail and Outlook each assist no matter DOCTYPE you need to use, however since most different e mail purchasers assist solely HTML5, it’s greatest to only stick to the HTML5 DOCTYPE on your emails.
One other added advantage of utilizing the HTML5 DOCTYPE is that the code is far shorter than HTML4. On the earth of e mail growth, conserving your code as quick as potential for the quantity of content material you must convey is essential.
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5:
<!DOCTYPE html>
13. Gmail’s DOCTYPE can create further area below photos
Gmail’s HTML5 DOCTYPE can create further area below your photos. That is particularly problematic in case you’re utilizing sliced photos (though it’s most likely greatest to keep away from utilizing sliced photos anyway). Additional spacing the place it’s not wished may detract out of your e mail’s aesthetic and make studying it tougher.
To keep away from this difficulty, listed here are a couple of workarounds (these work in Outlook.com and Yahoo! as properly):
1. Add type show:block to the picture ingredient
<img src=“check.jpg” type=“show:block”>
2. Add align absbottom within the picture ingredient
<img src=“check.jpg” align=“absbottom”>
3. Add align texttop to the picture ingredient
<img src=“check.jpg” align=“texttop”>
4. Add line-height 10px or decrease within the containing TD
<td type=“line-height:10px”>
5. Add font-size 6px or decrease within the containing TD
<td type=“font-size:6px”>
Nonetheless having picture spacing points and the above fixes should not working? Find out about different workarounds for picture spacing.
14. Gmail has darkish mode inconsistencies between Android and iOS
There are a couple of points that Gmail has with darkish mode between Android and iOS. Essentially the most troublesome one is that Gmail forces any gentle coloured textual content to alter to a darkish textual content colour in iOS. So in case you created an e mail with white textual content on a black background, iOS’s darkish mode will truly flip it to black textual content on a white background (which type of defeats the aim of darkish mode).
Since Gmail does this not simply with white textual content, however with any gentle coloured textual content, this could create some critical accessibility and readability points.
Rémi Parmentier wrote a really thorough article about the way to fight darkish mode inconsistencies in Gmail for Android and iOS utilizing CSS mix modes. His instance code is included under:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>Fixing Gmail’s darkish mode points with CSS Mix Modes</title>
<type>
u + .physique .gmail-blend-screen { background:#000; mix-blend-mode:display; }
u + .physique .gmail-blend-difference { background:#000; mix-blend-mode:distinction; }
</type>
</head>
<physique class="physique">
<div type="background:#639; background-image:linear-gradient(#639,#639); colour:#fff;">
<div class="gmail-blend-screen">
<div class="gmail-blend-difference">
<!-- Your content material begins right here -->
Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
<!-- Your content material ends right here -->
</div>
</div>
</div>
</physique>
</html>
The answer is restricted to white textual content solely, however it ought to nonetheless be useful if you must provide you with a workaround for the darkish mode points in iOS.
Study extra about darkish mode e mail growth challenges and the way to deal with them.
Extra suggestions and methods for coding for Gmail
The above are only a few examples of the largest points e mail builders face when coding for Gmail. You may study extra workarounds and useful hints in our Ideas and Methods sections for Gmail and Google Apps and the Gmail App.
In fact, the panorama of what Gmail does and doesn’t assist adjustments periodically, so if in case you have some other methods or workarounds for Gmail, be happy to share them within the feedback part under! Or, in case you’re a member of the E mail Geeks Slack channel, you may attain out to our personal e mail dev, Megan Boshuyzen.
Achieve confidence with e mail testing
Regardless of how skilled you might be in HTML e mail growth, it’s nonetheless essential to check your e mail to verify it renders accurately in Gmail and all different main e mail purchasers.
With E mail on Acid, you’ll get limitless e mail testing and previews on greater than 70 purchasers and units. Our pre-deployment guidelines makes use of an e mail readiness workflow that covers end-to-end content material checks, deliverability, and previews to streamline your testing course of and aid you get your emails out the door quicker, with much less stress, and searching nice each time.
This submit was up to date on March 23, 2022. It was additionally up to date in April 2018 and March 2017. It was initially revealed in June 2013.
Writer: The E mail on Acid Group
The E mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising.
Writer: The E mail on Acid Group
The E mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising.
