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 likely one of the hottest e mail platforms on the earth, 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 crucial leads and income.
Guaranteeing that your HTML emails look nice in Gmail purchasers will be difficult, although. Remembering to check your e mail might help you catch a few of these, however beginning with the appropriate code and a few data about Gmail-specific points will stop hours of troubleshooting.
When coding for Gmail customers, there are some things to bear in mind
Soar to a bit to seek out out extra:
- Gmail has a number of e mail purchasers
- Gmail app for non-Gmail accounts (GANGA) doesn’t assist background pictures
- Gmail clips messages bigger than 102Kb or if there are particular characters
- Gmail solely helps <model> within the <head>
- Gmail removes your whole <model> block if it encounters an error
- Gmail doesn’t assist net 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 massive unlinked pictures
- Gmail doesn’t enable destructive 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 house underneath pictures
- 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)
Probably 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 an enormous drawback (see tip #14).
2. Gmail apps for non-Gmail accounts (GANGA) doesn’t assist embedded kinds
Each Android and iOS Gmail apps include a characteristic for accessing non-Gmail accounts (e.g. Yahoo! Mail, Proton Mail, and so on.) utilizing POP and IMAP. Sadly, emails accessed by way of this setup lack assist for embedded kinds (<model>). As of 2017, each apps added assist for background pictures. Nevertheless, background pictures nonetheless require a bit 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’) heart / cowl no-repeat #3ab97d;In the event 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 might be due to one other little rendering quirk. On each apps, pictures are blocked by default for GANGA emails.
Usually, you will notice a hyperlink to show the blocked pictures, but when your e mail solely makes use of a background picture and doesn’t embody some other pictures, this hyperlink won’t show. Ensure that in the event you’re utilizing a background picture you additionally embody a daily picture in order that the “show pictures” 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 whole message
When the subscriber clicks to view all the message, your e mail will likely be displayed in a brand new window.
In the event you’re near 102kB, it can save you just a few bytes by eradicating any pointless areas, line breaks, or feedback. You additionally wish to keep away from embedded pictures and paperwork when sending HTML emails.
Moreover, if your e mail has particular characters that aren’t correctly encoded, Gmail will clip it. Make certain all particular characters are encoded appropriately to forestall 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 <model> within the <head>
Gmail does assist embedded kinds (<model>). Nevertheless, Gmail model tags assist is restricted to the pinnacle of your HTML doc. Gmail, Android, and iOS apps don’t assist <model> in any respect when rendering emails retrieved by way of non-Gmail accounts (GANGA).
5. Gmail removes your whole <model> block if it encounters an error
Gmail strips HTML formatting completely 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 Telephone 8.1. In the event you’re utilizing these declarations in your code, wrap them in their very own model 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; shade:#3ab97d; } }
Instance of a viewport declaration:
@media solely display and (max-width:320px) { @viewport { width:320px; } }Gmail additionally eliminates your model block if it exceeds 8192 characters. In case your model block exceeds this character restrict, break up it into two components. Gmail will take away the primary block that exceeds the 8192-character threshold and any blocks after it (the character depend consists of your whole model blocks).
6. Gmail doesn’t assist net fonts apart from Roboto and Google Sans
The concept of Google’s personal net fonts not working in Gmail appears stunning and baffling, however it’s true. The one net fonts that Gmail helps are Roboto and Google Sans. You possibly can nonetheless use net fonts in your emails, in fact, simply bear in mind to make use of a font stack to declare fonts so as of desire and to account for various font assist throughout e mail purchasers.
Font stack instance:
model=“font-family: ‘Roboto’, Helvetica, Arial, sans-serif;”Be taught extra about font stacks and the finest fonts for e mail.
Like many fashionable 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 could be 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).
Be taught extra about the way to code hidden preheaders.
8. Gmail doesn’t assist attribute selectors and most pseudo-classes
Gmail CSS not working appropriately? Test whether or not you’re utilizing attribute selectors and pseudo-classes in your code. Though attribute selectors (just like the one under) enable for extra flexibility when deciding on parts in CSS, Gmail doesn’t assist them.
div[class="content"]{ shade: crimson }
Gmail additionally doesn’t assist pseudo-classes like :checked and :energetic and solely helps :hover of their webmail shopper. Subsequently, interactive e mail assist in Gmail could be very restricted or non-existent except you utilize AMP for Electronic 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 possibility when you have quite a lot of subscribers who use Gmail, Yahoo!, and Mail.ru.
Try some examples of interactive emails utilizing AMP for Electronic mail. Then you should use this information from the open supply AMP challenge to get began with AMP emails.
9. Gmail shows a picture obtain icon over massive unlinked pictures
If a picture isn’t wrapped in a URL, Gmail will overlay an icon that lets recipients obtain the picture. At worst, this icon might obscure necessary info in your picture. At finest, it simply seems distracting.
The best answer is to make sure that pictures bigger than 300×150 are wrapped with a hyperlink, however there are a number of different choices you possibly can attempt to stop Gmail’s picture obtain button in HTML emails.
10. Gmail doesn’t enable destructive CSS margin values
In the event you’re making an attempt to overlap web page parts in your HTML e mail utilizing destructive margin values, you’ll discover Gmail CSS not working as you meant. Whereas destructive margin values are sometimes utilized in CSS for net growth, they don’t seem to be supported in most webmail purchasers like Gmail, Outlook.com, or Yahoo! Mail.
To get parts to overlap, you possibly can strive utilizing fake absolute positioning, though this methodology won’t 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 record 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 basically unhealthy information in case your background is blue. Largely, this auto-linking problem is only a little bit of an eyesore, however it may trigger issues in the event you’re utilizing pretend domains for the aim of inventive expression (e.g. dabomb.com) or in the event you merely don’t desire a piece of knowledge 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
In the event 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’d insert this entity earlier than every sprint. So the telephone quantity 212-389-3934 could be coded as:
212­-389­-3934
For an e mail handle like identify@check.com, you possibly can add the entity earlier than the interval previous the area sort:
identify@check­.com
To forestall a URL from being robotically transformed to a hyperlink, you’d code it such as you would an e mail handle and add the entity to the interval previous the area sort. So www.mydomain.com could 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 could be coded as:
http:­//www.mydomain­.com
Insert an anchor tag round your textual content and magnificence it
In the event you simply need your textual content to look as if it hasn’t been transformed to a hyperlink, you possibly can at all times wrap it in an anchor tag and magnificence it to match the encircling textual content. For instance:
<a href=“#” model=“shade:#000; text-decoration:none”>identify@check.com</a>It’s going to nonetheless be a clickable hyperlink on hover, however it received’t appear like a hyperlink and will likely be a lot much less prone to be clicked on.
Globally model all automated hyperlinks
In the event you don’t thoughts that Gmail is robotically making use of hyperlinks, however you’d similar to to vary their look to match your different hyperlinks, you should use the next CSS:
<!-- wp:paragraph -->
<p><br> u+#physique a {<br> shade: inherit !necessary;<br> text-decoration: none !necessary;</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> font-size: inherit !necessary;<br> font-family: inherit !necessary;<br> font-weight: inherit !necessary;<br>line-height: inherit !necessary;<br>}</p>
<!-- /wp:paragraph -->Observe: Gmail may also apply the default blue, underlined hyperlink to your button hyperlinks if their kinds aren’t inlined.
12. Gmail makes use of the HTML5 DOCTYPE
In the event 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 power 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 wish to use, however since most different e mail purchasers assist solely HTML5, it’s finest to only stick to the HTML5 DOCTYPE in your emails.
One other added good thing about utilizing the HTML5 DOCTYPE is that the code is far shorter than HTML4. On the planet of e mail growth, holding your code as quick as attainable for the quantity of content material you could convey is necessary.
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 house underneath pictures
Gmail’s HTML5 DOCTYPE can create further house underneath your pictures. That is particularly problematic in the event you’re utilizing sliced pictures (though it’s most likely finest to keep away from utilizing sliced pictures anyway). Further spacing the place it’s not wished may also detract out of your e mail’s aesthetic and make studying it tougher.
To keep away from this problem, listed here are just a few workarounds (these work in Outlook.com and Yahoo! as properly):
1. Add model show:block to the picture aspect
<img src=“check.jpg” model=“show:block”>
2. Add align absbottom within the picture aspect
<img src=“check.jpg” align=“absbottom”>
3. Add align texttop to the picture aspect
<img src=“check.jpg” align=“texttop”>
4. Add line-height 10px or decrease within the containing TD
<td model=“line-height:10px”>
5. Add font-size 6px or decrease within the containing TD
<td model=“font-size:6px”>
Nonetheless having picture spacing points and the above fixes will not be working? Find out about different workarounds for picture spacing.
14. Gmail has darkish mode inconsistencies between Android and iOS
There are just a few points that Gmail has with darkish mode between Android and iOS. Probably the most troublesome one is that Gmail forces any mild coloured textual content to vary to a darkish textual content shade in iOS. So in the event 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 kind of defeats the aim of darkish mode).
Since Gmail does this not simply with white textual content, however with any mild coloured textual content, this will create some severe 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>
<model>
u + .physique .gmail-blend-screen { background:#000; mix-blend-mode:display; }
u + .physique .gmail-blend-difference { background:#000; mix-blend-mode:distinction; }
</model>
</head>
<physique class="physique">
<div model="background:#639; background-image:linear-gradient(#639,#639); shade:#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 could provide you with a workaround for the darkish mode points in iOS.
Be taught extra about darkish mode e mail growth challenges and the way to deal with them.
Extra ideas and tips for coding for Gmail
The above are just some examples of the largest points e mail builders face when coding for Gmail. You possibly can study extra workarounds and useful hints in our Suggestions and Methods sections for Gmail and Google Apps and the Gmail App.
After all, the panorama of what Gmail does and doesn’t assist modifications periodically, so when you have some other tips or workarounds for Gmail, be happy to share them within the feedback part under! Or, in the event you’re a member of the Electronic mail Geeks Slack channel, you possibly can attain out to our personal e mail dev, Megan Boshuyzen.
Achieve confidence with e mail testing
Irrespective of how skilled you might be in HTML e mail growth, it’s nonetheless necessary to check your e mail to ensure it renders appropriately in Gmail and all different main e mail purchasers.
With Electronic mail on Acid, you’ll get limitless e mail testing and previews on greater than 70 purchasers and gadgets. 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 make it easier to get your emails out the door quicker, with much less stress, and looking out 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 Electronic mail on Acid Staff
The Electronic mail on Acid content material group 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 Electronic mail on Acid Staff
The Electronic mail on Acid content material group 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.
