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.
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 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.
I build a wp template with the following in the header:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
In the stylesheet I use #media queries, eg:
#media only screen and (min-width: 1100px) {
#wrapper {width:1280px;}
}
Style and template was fine until I noticed I missed the doctype, so I added this to the header as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
No all the styles are incorrect, media queries seem to be ignored, I can see no style in the developer inspector (Firefox, chrome, safari etc).
If I remove the style in the media queries are shown, add it again the styles are removed.
Issue is see on all browswer.
Is there anything obvious I am missing?
Doctype has no effect on your media queries.
You can add some support though .
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
These will offer cross browser reference support and will most likely solve your issue.
See similar post : CSS3 Media Queries - does not work in some browsers (officially supporting MQ)
I had a similar problem with a style class I was applying to a DIV.
.aclass { ... } within #media and a min-width "disappeared" when I added the DOCTYPE html tag, then "reappeared" and worked when I removed the DOCTYPE.
Explicitly including the element in question solved the disappearing act, that is...
DIV.aclass { ... } works properly.
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.
i just visited apple.com and they use some html5 tag like nav. it is working in all broswer but i i try to test html5 code it is not working in ie8 and ie7. i am not getting what is the problem how apple site working in all browser.
<!DOCTYPE html >
<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html 5</title>
<style>
#header { margin:0 auto; width:980px; overflow:hidden; border:solid 1px #F00}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header id="header">adfadf</header>
</body>
</html>
older versions of IE don't treat the new HTML5 elements like header, nav, article, footer, address as "unknown" elements.
You can simply introduce the new elements to the old IE family members by using a simple JavaScript approach:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
Check out the article HTML5 Shiv and e.g. the modernizr framewoerk
HTH,
--hennson
Try to use this script to get html5 work: http://www.modernizr.com/download/
IE8 and IE7 aren't HTML5 compliant, so your code won't execute. I'm guessing the Apple site has caveats to test which browser you are using . Any control in particular you're looking to use?
It depends what you mean by “not working in ie8 and ie7”. I see you’ve got HTML5shiv in there — that should make IE recognise your <header> element at least. Is the red border showing up at least?
Bear in mind that IE (just like older versions of Firefox) won’t apply any default styles to these elements, so you’ll need to add those too, e.g.
header {
display: block;
}
Reset stylesheets like Eric Meyer’s add this CSS for you:
http://meyerweb.com/eric/tools/css/reset/