Whereas Outlook tends to get probably the most criticism for being temperamental, Gmail has its personal share of points that trigger complications for HTML electronic mail builders.
Gmail is among the hottest electronic mail platforms on the planet, with over 1.8 billion customers. It’s additionally the second hottest electronic mail consumer, accounting for 28% of the worldwide market share. Have a look at your electronic mail analytics and see what proportion of the addresses are Gmail (it’s most likely quite a bit). In case your HTML electronic mail isn’t displaying correctly in Gmail you might be dropping out on crucial leads and income.
Making certain that your HTML emails look nice in Gmail shoppers may be tough, although. Remembering to check your electronic mail will help you catch a few of these, however beginning with the best code and a few information about Gmail-specific points will stop hours of troubleshooting.
When coding for Gmail customers, there are some things to bear in mind
Leap to a bit to search out out extra:
- Gmail has a number of electronic mail shoppers
- Gmail app for non-Gmail accounts (GANGA) doesn’t help background photos
- 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 help internet fonts aside from Roboto and Google Sans
- Gmail shows preheader textual content within the electronic mail preview
- Gmail doesn’t help attribute selectors and most pseudo-classes
- Gmail shows a picture obtain icon over massive unlinked photos
- Gmail doesn’t permit unfavourable CSS margin values
- Gmail routinely 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 electronic mail shoppers
Whereas Gmail has simplified its interfaces over time, there are nonetheless a number of totally different electronic mail shoppers with totally different ranges of CSS help and different quirky variations when rendering HTML emails.
- Gmail webmail for desktop
- Gmail webmail for cell
- Gmail for iOS
- Gmail for Android
- (There isn’t a standalone desktop model)
Probably the most problematic one is Gmail’s Android consumer when configured for POP/IMAP entry (see tip #2), however Gmail’s points with darkish mode in iOS are additionally an enormous downside (see tip #14).
2. Gmail apps for non-Gmail accounts (GANGA) doesn’t help embedded types
Each Android and iOS Gmail apps include a function for accessing non-Gmail accounts (e.g. Yahoo! Mail, Proton Mail, and so on.) utilizing POP and IMAP. Sadly, emails accessed by means of this setup lack help for embedded types (<model>). As of 2017, each apps added help for background photos. Nonetheless, background photos nonetheless require a little bit further effort as a result of background-size isn’t supported.
To work round this, you need to 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 electronic mail solely makes use of a background picture and doesn’t embrace another photos, this hyperlink is not going to show. Be sure that for those who’re utilizing a background picture you additionally embrace an everyday 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 electronic mail’s measurement 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 electronic mail can be displayed in a brand new window.
When you’re near 102kB, it can save you a number 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 electronic mail has particular characters that aren’t correctly encoded, Gmail will clip it. Be certain that all particular characters are encoded appropriately to forestall this from taking place. Beneath are a few examples of particular character encoding.
- Copyright image ©: ©
- N sprint: –
Learn extra about the best way to keep away from electronic mail clipping.
4. Gmail solely helps <model> within the <head>
Gmail does help embedded types (<model>). Nonetheless, Gmail model tags help is restricted to the pinnacle of your HTML doc. Gmail, Android, and iOS apps don’t help <model> in any respect when rendering emails retrieved by means 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 may end up declaring an ‘@’ inside an ‘@’ – when declaring an internet font and when declaring a viewport for Home windows Telephone 8.1. When you’re utilizing these declarations in your code, wrap them in their very own model tags and put the types which can 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 screen 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, cut 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 entire model blocks).
6. Gmail doesn’t help internet fonts aside from Roboto and Google Sans
The thought of Google’s personal internet fonts not working in Gmail appears shocking 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, after all, simply bear in mind to make use of a font stack to declare fonts so as of desire and to account for various font help throughout electronic mail shoppers.
Font stack instance:
model=“font-family: ‘Roboto’, Helvetica, Arial, sans-serif;”Study extra about font stacks and the greatest fonts for electronic mail.
Like many fashionable shoppers, the e-mail preheader is routinely proven after the topic in Gmail’s preview textual content with out the recipient having to open the message. Preheader textual content is usually a seen a part of your electronic mail physique or it may be specifically crafted to solely show earlier than the subscriber opens your electronic mail (hidden preheaders).
Study extra about the best way to code hidden preheaders.
8. Gmail doesn’t help 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) permit for extra flexibility when deciding on components in CSS, Gmail doesn’t help them.
div[class="content"]{ shade: purple }
Gmail additionally doesn’t help pseudo-classes like :checked and :energetic and solely helps :hover of their webmail consumer. Due to this fact, interactive electronic mail help in Gmail could be very restricted or non-existent except you employ AMP for E-mail.
Whereas AMP electronic mail has restricted help throughout different shoppers (Gmail, Yahoo!, and Mail.ru help it, however Outlook eliminated help again in 2020), it’s nonetheless an amazing choice you probably have plenty of subscribers who use Gmail, Yahoo!, and Mail.ru.
Try some examples of interactive emails utilizing AMP for E-mail. Then you need to use this information from the open supply AMP venture to get began with AMP emails.
9. Gmail shows a picture obtain icon over massive 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 might obscure vital data in your picture. At greatest, it simply appears 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’ll be able to attempt to stop Gmail’s picture obtain button in HTML emails.
10. Gmail doesn’t permit unfavourable CSS margin values
When you’re attempting to overlap web page components in your HTML electronic mail utilizing unfavourable margin values, you’ll discover Gmail CSS not working as you supposed. Whereas unfavourable margin values are sometimes utilized in CSS for internet improvement, they don’t seem to be supported in most webmail shoppers like Gmail, Outlook.com, or Yahoo! Mail.
To get components to overlap, you’ll be able to strive utilizing fake absolute positioning, though this methodology is not going to work for Gmail apps with non-Gmail accounts (GANGA).
11. Gmail routinely converts telephone numbers, electronic mail addresses, and URLs to hyperlinks
Gmail routinely converts telephone numbers, electronic mail addresses, and URLs into hyperlinks – presumably for the added comfort of electronic mail customers. However for electronic mail builders it’s yet one more merchandise so as to add to the lengthy listing of issues not displaying as supposed in Gmail. For instance, Gmail will convert title@check.com to:
<a href=“mailto:title@check.com”>title@check.com</a>
Worse but, the hyperlinks can be default blue and underlined, which is basically dangerous information in case your background is blue. Principally, this auto-linking problem is only a little bit of an eyesore, however it will probably trigger issues for those who’re utilizing faux domains for the aim of artistic expression (e.g. dabomb.com) or for those who merely don’t need 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 electronic mail to be routinely wrapped in a hyperlink, use an HTML that Gmail doesn’t acknowledge, similar to ­. This can preserve 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 can be coded as:
212­-389­-3934
For an electronic mail deal with like title@check.com, you’ll be able to add the entity earlier than the interval previous the area kind:
title@check­.com
To forestall a URL from being routinely transformed to a hyperlink, you’d code it such as you would an electronic mail deal with and add the entity to the interval previous the area kind. So www.mydomain.com can be written as:
www.mydomain­.com
If utilizing the complete 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 elegance it
When you simply need your textual content to look as if it hasn’t been transformed to a hyperlink, you’ll be able to all the time wrap it in an anchor tag and elegance it to match the encircling textual content. For instance:
<a href=“#” model=“shade:#000; text-decoration:none”>title@check.com</a>It can nonetheless be a clickable hyperlink on hover, however it received’t appear like a hyperlink and can be a lot much less prone to be clicked on.
Globally model all automated hyperlinks
When you don’t thoughts that Gmail is routinely making use of hyperlinks, however you’d identical to to vary their look to match your different hyperlinks, you need to use the next CSS:
<!-- wp:paragraph -->
<p><br> u+#physique a {<br> shade: inherit !vital;<br> text-decoration: none !vital;</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> font-size: inherit !vital;<br> font-family: inherit !vital;<br> font-weight: inherit !vital;<br>line-height: inherit !vital;<br>}</p>
<!-- /wp:paragraph -->Word: Gmail will even apply the default blue, underlined hyperlink to your button hyperlinks if their types aren’t inlined.
12. Gmail makes use of the HTML5 DOCTYPE
When you specify a DOCTYPE aside from HTML5 in your electronic mail, you’ll discover that it received’t render the identical method in Gmail because it does in a browser or in an electronic mail consumer that respects your DOCTYPE. It’s because Gmail renders all emails utilizing the HTML5 DOCTYPE.
This is a matter that isn’t unique to Gmail. Many different electronic mail shoppers pressure HTML5, together with Yahoo! Mail, Outlook.com, and Yandex on Cellular and Desktop Webmail; Inbox and Yahoo! Mail on iOS; and Inbox on Android. Apple Mail and Outlook each help no matter DOCTYPE you need to use, however since most different electronic mail shoppers help solely HTML5, it’s greatest to only keep on with the HTML5 DOCTYPE on your emails.
One other added good thing about utilizing the HTML5 DOCTYPE is that the code is way shorter than HTML4. On this planet of electronic mail improvement, protecting your code as brief as potential for the quantity of content material you might want to convey is vital.
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 for those who’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 can even detract out of your electronic mail’s aesthetic and make studying it harder.
To keep away from this problem, listed below are a number of workarounds (these work in Outlook.com and Yahoo! as effectively):
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 should not working? Study different workarounds for picture spacing.
14. Gmail has darkish mode inconsistencies between Android and iOS
There are a number of 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 for those who created an electronic mail with white textual content on a black background, iOS’s darkish mode will really 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 could create some severe accessibility and readability points.
Rémi Parmentier wrote a really thorough article about the best 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 title="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 screen; }
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 might want to provide you with a workaround for the darkish mode points in iOS.
Study extra about darkish mode electronic mail improvement challenges and the best way to deal with them.
Extra ideas and methods for coding for Gmail
The above are just some examples of the most important points electronic mail builders face when coding for Gmail. You may study extra workarounds and useful hints in our Ideas and Tips sections for Gmail and Google Apps and the Gmail App.
In fact, the panorama of what Gmail does and doesn’t help modifications periodically, so you probably have another methods or workarounds for Gmail, be at liberty to share them within the feedback part under! Or, for those who’re a member of the E-mail Geeks Slack channel, you’ll be able to attain out to our personal electronic mail dev, Megan Boshuyzen.
Achieve confidence with electronic mail testing
Irrespective of how skilled you might be in HTML electronic mail improvement, it’s nonetheless vital to check your electronic mail to verify it renders appropriately in Gmail and all different main electronic mail shoppers.
With E-mail on Acid, you’ll get limitless electronic mail testing and previews on greater than 70 shoppers and gadgets. Our pre-deployment guidelines makes use of an electronic 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 sooner, with much less stress, and searching nice each time.
This put up 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.
Creator: The E-mail on Acid Workforce
The E-mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
Creator: The E-mail on Acid Workforce
The E-mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
