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 this planet, with over 1.8 billion customers. It’s additionally the second hottest e-mail consumer, 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 loads). In case your HTML e-mail just isn’t displaying correctly in Gmail you could 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 can assist you catch a few of these, however beginning with the appropriate code and a few information about Gmail-specific points will forestall hours of troubleshooting.
When coding for Gmail customers, there are some things to bear in mind
Leap to a piece to search 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 <model> within the <head>
- Gmail removes your complete <model> 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 enable damaging 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 beneath 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 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 a giant drawback (see tip #14).
2. Gmail apps for non-Gmail accounts (GANGA) doesn’t assist embedded types
Each Android and iOS Gmail apps comprise a function for accessing non-Gmail accounts (e.g. Yahoo! Mail, Proton Mail, and so forth.) utilizing POP and IMAP. Sadly, emails accessed by this setup lack assist for embedded types (<model>). As of 2017, each apps added assist for background photos. Nonetheless, background photos nonetheless require a little bit further effort as a result of background-size just isn’t supported.
To work round this, you should use shorthand CSS, which is supported:
background: url(‘picture.jpg’) middle / cowl no-repeat #3ab97d;For those who 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 embrace some other photos, this hyperlink won’t show. Be sure that should you’re utilizing a background picture you additionally embrace 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 measurement exceeds 102kB, Gmail will show the primary 102kB together with a message that reads:
[Message clipped] View complete message
When the subscriber clicks to view your complete message, your e-mail can be displayed in a brand new window.
For those who’re near 102kB, it can save you a number of bytes by eradicating any pointless areas, line breaks, or feedback. You additionally wish 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 occurring. Under are a few examples of particular character encoding.
- Copyright image ©: ©
- N sprint: –
Learn extra about find out how to keep away from e-mail clipping.
4. Gmail solely helps <model> within the <head>
Gmail does assist embedded types (<model>). Nonetheless, Gmail model tags assist is proscribed to the top of your HTML doc. Gmail, Android, and iOS apps don’t assist <model> in any respect when rendering emails retrieved by non-Gmail accounts (GANGA).
5. Gmail removes your complete <model> 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 may end up declaring an ‘@’ inside an ‘@’ – when declaring an online font and when declaring a viewport for Home windows Telephone 8.1. For those who’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 high block.
Instance of an online 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 model block if it exceeds 8192 characters. In case your model block exceeds this character restrict, cut 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 model 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 shocking and baffling, but it surely’s true. The one internet fonts that Gmail helps are Roboto and Google Sans. You possibly can 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 choice 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 greatest 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 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).
Be taught extra about find out how to code hidden preheaders.
8. Gmail doesn’t assist attribute selectors and most pseudo-classes
Gmail CSS not working accurately? Test whether or not you’re utilizing attribute selectors and pseudo-classes in your code. Though attribute selectors (just like the one beneath) enable for extra flexibility when choosing parts 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 consumer. Subsequently, interactive e-mail assist in Gmail could be very restricted or non-existent until 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 awesome possibility if in case you have loads of subscribers who use Gmail, Yahoo!, and Mail.ru.
Take a look at 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 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 might obscure necessary info in your picture. At greatest, it simply appears distracting.
The best resolution 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 forestall Gmail’s picture obtain button in HTML emails.
10. Gmail doesn’t enable damaging CSS margin values
For those who’re making an attempt to overlap web page parts in your HTML e-mail utilizing damaging margin values, you’ll discover Gmail CSS not working as you supposed. Whereas damaging margin values are sometimes utilized in CSS for internet 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’ll be able to attempt utilizing fake absolute positioning, though this technique 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 one more merchandise so as to add to the lengthy record of issues not displaying as supposed 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 can be default blue and underlined, which is actually unhealthy information in case your background is blue. Principally, this auto-linking problem is only a little bit of an eyesore, however it may possibly trigger issues should you’re utilizing pretend domains for the aim of inventive expression (e.g. dabomb.com) or should you merely don’t desire a piece of knowledge to be clickable.
Listed below are three potential fixes, relying on the outcomes you’re after:
Use an HTML entity that Gmail doesn’t acknowledge
For those who 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, comparable to ­. This may hold Gmail from recognizing the textual content as one thing that must 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 tackle like identify@check.com, you’ll be able to add the entity earlier than the interval previous the area kind:
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 tackle and add the entity to the interval previous the area kind. So www.mydomain.com could 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 could be coded as:
http:­//www.mydomain­.com
Insert an anchor tag round your textual content and magnificence it
For those who simply need your textual content to look as if it hasn’t been transformed to a hyperlink, you’ll be able to at all times wrap it in an anchor tag and magnificence it to match the encompassing textual content. For instance:
<a href=“#” model=“colour:#000; text-decoration:none”>identify@check.com</a>It is going to nonetheless be a clickable hyperlink on hover, but it surely received’t appear like a hyperlink and can be a lot much less prone to be clicked on.
Globally model all automated hyperlinks
For those who 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> colour: 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 -->Word: Gmail may also apply the default blue, underlined hyperlink to your button hyperlinks if their types aren’t inlined.
12. Gmail makes use of the HTML5 DOCTYPE
For those who 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 consumer that respects your DOCTYPE. It is because Gmail renders all emails utilizing the HTML5 DOCTYPE.
This is a matter that isn’t 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 greatest to simply persist with the HTML5 DOCTYPE on 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, protecting your code as brief as attainable for the quantity of content material you have to 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 area beneath photos
Gmail’s HTML5 DOCTYPE can create further area beneath your photos. That is particularly problematic should 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 needed may also detract out of your e-mail’s aesthetic and make studying it tougher.
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 ingredient
<img src=“check.jpg” model=“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 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 are usually not working? Find out about 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 gentle coloured textual content to vary to a darkish textual content colour in iOS. So should 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 form 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 may create some severe accessibility and readability points.
Rémi Parmentier wrote a really thorough article about find out how to fight darkish mode inconsistencies in Gmail for Android and iOS utilizing CSS mix modes. His instance code is included beneath:
<!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); 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 proscribed to white textual content solely, but it surely ought to nonetheless be useful if you have to provide you with a workaround for the darkish mode points in iOS.
Be taught extra about darkish mode e-mail growth challenges and find out how to sort out them.
Extra ideas and methods for coding for Gmail
The above are just some examples of the most important points e-mail builders face when coding for Gmail. You possibly can be taught 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 modifications periodically, so if in case you have some other methods or workarounds for Gmail, be happy to share them within the feedback part beneath! Or, should you’re a member of the Electronic mail Geeks Slack channel, you’ll be able to 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 verify it renders accurately 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 show you how to 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 printed in June 2013.
Writer: The Electronic mail on Acid Workforce
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 and marketing.
Writer: The Electronic mail on Acid Workforce
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 and marketing.
