I am building an email template and I am wondering if it is possible to target specific email clients (for example Gmail) to display content only when the email is viewed using those specific clients.
For example, is there a way to display this only to email viewed in gmail?
<div class="gmailOnly">This text will be displayed in Gmail only</div>
Thank you!
It's possible to target Gmail and Inbox for the moment. You need to take advantage of the fact that the HTML is modified before it would hit the rendering engine (as in most email clients) and in these email clients the message body will start with <u></u> tags.
This:
<!DOCTYPE html>
<html><head>
<style>
u + .body .gmail{
display:block !important;
}
</style>
</head>
<body class="body">
<div class="gmail" style="display:none;">
THIS IS GMAIL OR INBOX
</div>
</html>
will get converted to this:
<u></u>
<div class="m_-4764228206553811341body">
<div class="m_-4764228206553811341gmail" style="display:none">
THIS IS GMAIL OR INBOX
</div>
<div class="yj6qo"></div>
<div class="adL"></div>
</div>
The <u> tags are specific to Inbox and Gmail clients. The divs from the original template therefore will only show in those these clients.
No, unfortunately there isn't anyway of targeting gmail clients only, like you can do with <!--[if gte mso 9]> for Microsoft.
Outlook App (iOS/Android)
To hide an element from the Outlook app we can use the below snippet of CSS. The attribute [data-outlook-cycle] is added to the element of all emails in these apps. We can then target elements with a class, such as .outlookhide in the below example:
<head>
<style>
body[data-outlook-cycle] .outlookhide {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<td class="outlookhide">Content hidden from Outlook app on Android and iOS</td>
</tr>
</table>
</body>
Outlook Webmail (outlook.com)
To target Outlook webmail we take advantage of the way it adds x_ to all classes we use in our HTML. The CSS target attribute can be used to target any class containing x_[your class] by adding the operator ~ . In the example below we use the class “hideoutlookweb”.
<head>
<style>
[class~="x_hideoutlookweb"] {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<td class="hideoutlookweb">Content hidden from Outlook.com</td>
</tr>
</table>
</body>
Also there is few other ways to hide on outlook as :
<!--[if !mso]>
CONTENT
<!--<![endif]-->
You can also target specific versions of outlook as:
<!--[if gte mso 9]>
CONTENT (versions greater or equal to mso 9)
<!--<![endif]-->
To hide from outlook desktop or windows mail (not web or mobile app) there is also this way:
<span style="mso-element:field-begin;"></span>
Content to hide from Outlook
<span style="mso-element:field-end;"></span>
Gmail
Hide content from Gmail – This CSS works due to Gmail converting the tag to so adding class=”body” to your tag and then targeting the elements you want to hide from Gmail with a class, in the example below called “nogmail” and using display:none; to hide the content, make it not clickable, hidden from site, take up no space and not be seen by screen readers. Adding a media query around this CSS could choose to hide the content only on mobile screens.
<!DOCTYPE html>
<head>
<style>
u + .body .nogmail {display:none!important;}
</style>
</head>
<body class="body">
<table>
<tr>
<td class="nogmail">Content hidden from Gmail</td>
</tr>
</table>
</body>
</html>
Yahoo and AOL
Yahoo and AOL fairly recently started to use the same rendering engine and therefore can be targeted together using the below CSS snippet. A wrapping div is added with the class .& so we can target specific elements by chaining the classes together:
<head>
<style>
.& .yahooaol {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<td class="yahooaol">Content hidden from Yahoo and AOL</td>
</tr>
</table>
</body>
To target just Yahoo you can add a div around the element with a unicode id name – aol strips that style, so it will only affect Yahoo.
<head>
<style>
.& #★ .hideyahoo {display:none!important;}
</style>
</head>
<body>
<table>
<tr>
<div id="★">
<td class="hideyahoo">Content hidden from Yahoo only</td>
</div>
</tr>
</table>
</body>
These tips were found in this great blog on how to hide elements for some specific email providers as outlook, gmail, yahoo.
Related
I'm trying to make an email with two links, I want to show one in Gmail only, and the second one in outlook only.
I did some search and I found that I need to use mso-hide in Outlook and display none it's enough on Gmail. none of those work. display none hide my element in outlook and Gmail and mso-hide didn't affect.
My try is:
<!--[if !mso 9]><!-->
<div style="mso-hide:all">
Content 02
</div>
<!--<![endif]-->
<div style='display: none;'>
Content 03
</div>
is there a solution to hide an element only on Outlook and the same with Gmail?
Dylan Smith has written an excellent 'How to Target Email Clients' page that goes through all known techniques for different email clients. https://howtotarget.email/
Using that, we can get the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
u + .body .gmailshow {
display:block!important;
}
</style>
</head>
<body class="body">
<div>CONTENT EVERYWHERE</div>
<!--[if mso | ie]>
<div>
Content OUTLOOK only
</div>
<![endif]-->
<div class="gmailshow" style="display: none;">
Content GMAIL ONLY
</div>
</body>
</html>
Notes:
The body, since it gets turned into a div, requires a class (here, body)
There was something wrong with your Outlook if statement, make sure you check that
There is no known way to get the Gmail targetting to target Gmail IMAP, since it does not regard <style> blocks (this is but one version of Gmail - standard Gmail apps and Gmail webmail work with this technique)
I'm trying to make a responsive email template that works with outlook. The outlook HTML works fine and the responsive HTML also works fine.
I've made use of media queries for the responsive portion, but now whenever an email is sent to Outlook the content is duplicated.
My HTML is set up as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<style> //Media Queries are here </style>
</head>
<body>
<!--[if gte mso 12]>
//All of the Outlook HTML is held here
<![endif]-->
<!--[if gte mso 12]>
<div style="width:0px; height:0px; overflow:hidden; display:none;
visibility:hidden; mso-hide:all;">
<![endif]-->
//All of the none Outlook HTML is held here
<!--[if gte mso 12]></div><![endif]-->
</body>
</html>
What I want to happen is that the top portion will run whenever an email is sent to outlook and if it's any other client to use the other portion of HTML.
I know this isn't the best way to do this as really I should just show and hide portions of the code instead of the whole thing, but this was easier to put together.
Interestingly this only started occurring when I started making use of media queries instead of stating the same VW for all resolutions.
Any help would be appreciated.
So my solution to this problem was to add style="mso-hide:all" onto every tag that was held within the second block.
Use mso-hide:all in portion you want to hide for outlook, which makes the portion hidden for Outlook specific client.
I know the title of this post sounds strange, but it's exactly what's happening. While testing an email template with Email and Acid and Litmus I found that Outlook.com, in all browsers, was migrating styling from one DOM element to another. I thought at first it was an unescaped tag or other common issue with email, but that wasn't the case. I also thought it could be the button markup, which was pulled from Litmus's own Bullet Proof Buttons post. But after trying all four options, plus others I found online, it didn't make a difference.
To discreetly troubleshoot this I crafted an email template with only the bare minimum needed to reproduce the what's happening.
Email Template: https://codepen.io/anon/pen/bOQmzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width" name="viewport">
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- BUTTON -->
<table>
<tbody>
<tr>
<td style="padding: 10px;">
<a style="background-color: #800080; border: 25px solid #EB7035;" href="#" >Button Label</a>
</td>
</tr>
</tbody>
</table>
<!-- TEXT -->
<table>
<tbody>
<tr>
<td style="padding: 50px;">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I sent a test email from Litmus to an Outlook.com account I have access to and pulled the actual markup it's generating. Here it is.
<table>
<tbody>
<tr>
<td style="padding:10px">Button Label</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="background-color:#800080; border:25px solid #EB7035; padding:50px">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
As you can see it's taking the styling from TD > A and applying it to the following TD. In the original email template I had, this happened multiple times throughout. See the examples below
Original Template: Each blue sections is broken
Testing Template: Outlook.com in multiple browsers
Testing Template: Examples of other email clients
This feels more like an Outlooks.com bug than an Outlook.com quirk. Can anyone explain what's happening and suggest ways to resolve this?
After writing this all up I realized it was also stripping the A tag. And that this was probably because it wasn't a resolvable URL. In the original template I had ESP codes {campaign-ID...etc} and it probably wasn't resolving those either. So it just stripped them for security reasons, cool. But then for some reason, it takes the styling of that A link, strips it, and applies it to an element further down in the DOM. WTF were they thinking!
Hope this saves someone else the trouble from having to go down the same rabbit hole.
tl;dr This is only an issue when testing links with unresolvable URLs as outlook removes them for security reasons, but then fumbles and applies the styling on the removed A link to another DOM element.
So I am using #font-face in my emails and Outlook 2007, 2011 and 2013 were giving me trouble. So I wrapped the #font-face CSS in conditional < !--[if !mso] > tags and this works great for CSS specific styles in outlook (desktop client) but this Completely breaks my emails in outlook.com. They come through blank as in no content! A completely white nothingness!
I've tried various forms of the outlook conditional tags such as < !--[if !mso] >
Below is my current code:
<!--[if gte mso 9]>
<style type="text/css">
#import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
</style>
<![endif]-->
Also below is a litmus test so you can see the results:
https://litmus.com/pub/a49f7b4/screenshots
Any reason why these emails are completely empty in outlook.com?
------UPDATE:2/18/2014 MY SOLUTION ------
This seemed to work perfectly across all platforms. Once I removed all HTML from comment tags everything worked great.
<!--[if !mso]><!-->
<style type="text/css">
#import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
</style>
<!--<![endif]-->
Recently, I ran into an issue with blank emails for outlook.com (#hotmail and #live) email accounts. The issue we experienced had to do with CSS comments in our inline stylesheets. Basically, what fixed the blank email experience for me was changing CSS comments to server-side comments (or deleting them entirely). If I had CSS comments like /* comment */ in our CSS, outlook.com would render blank emails.
View possible solutions here
In addition, I personally don't think its good practice to use external stylesheets in HTML emails (or email in general). It is best to add your CSS via <style></style> tags in the <head> of your template/email, or to go further and inline that same CSS to each HTML element in the email. Here's some background on why you shouldn't include external stylesheets in email:
Can you link to a CSS file from an email?
http://beaker.mailchimp.com/inline-css (manual inline tool)
http://www.benchmarkemail.com/help-FAQ/answer/Common-HTML-Email-Coding-Mistakes
Update
As #digitalmc pointed out in the comments, it seems the issue is related to having HTML in your client side comments.
Hi I have written a Perl cgi script that prints a calendar. It works fine in IE10, Firefox and Chrome but not in IE8 and also not in IE Tab+ pulgin of Firefox. The page is displayed partially and the rest is clipped off...
The webpage also has embedded Javascript in it.
Has anyone faced this problem before? Any solutions??
I can't put the screen shots but I can say that I have 5 columns in my table, two and half columns are displayed, the java script attached to those cells work but the rest 2 and half columns are missing.
*this may not be pretty but this reproduces the problem.
*I tried this example in jsfiddle, there i saw that the two columns were overlapping over one other.
<html>
<style>
#today
{
color:red;
}
table
{
table-layout: fixed;
text-align:center;
width: 800px;
height: 500px;
}
td
{
padding : 0px 0px;
width: 80px;
height: 80px;
text-align:center;
font-size: 20px;
}
</style>
<body bgcolor="#COCOCO">
<h1>my blah blah blah Calendar</h1>
<table>
<t><td>
<table color="black" bgcolor="white" border="1px">
<tr>
xfgvfsd
</tr>
<tr>
<td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
</table>
</td>
<td colsize="5">
edsafsdg
</td></tr>
</table>
</body>
</html>
If your document does not have a doctype or has blank space before the doctype, it will render in compatibility or quirks mode. This will cause the browser to use an older rendering engine with all the weird layout bugs included.
To verify this, press F12 to open your MSIE Developer Console and check the browser rendering mode.
If IE is rendering in quirks mode, you should add a doctype like <!DOCTYPE html> immediately before the <html> tag to ensure that it isn't triggered automatically.
You should also add a meta tag to your <head> to force IE to render the page with the latest rendering engine:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This should prevent IE from using compatibility mode. There are other server-side steps you can take as well. Take a look at this MSDN blog post for all the specific details.