Hi Barbara,
I found it. It's from a couple of years ago so let me know if you bump into anything.
<!DOCTYPE html>
<html 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>
<!--[if (mso)|(IE)]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>v: * { behavior:url(#default#VML); display:inline-block }</style>
<!<![endif]-->
<meta charset="utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<style type="text/css">
.hide {
display: block;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style>
.hide {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:100px;width:100px;" fill="t" stroke="f">
<v:fill type="frame" color="red" src="https://placem.at/places?w=150&h=150" style="height:100px;width:100px;"/>/v:oval
<![endif]-->
<!--[if !IE]><!-->
<table class="hide" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100" style="width: 100px; mso-hide: all;">
<tr>
<td><div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow:hidden!important; mso-hide: all;"><img src="https://placem.at/people?w=150&h=150" border="0" width="100" height="100" alt="" style="display: block;" /></div></td>
</tr>
</table><!--<![endif]-->
</body>
</html>
Hi Barbara,
I found it. It's from a couple of years ago so let me know if you bump into anything.
<!DOCTYPE html>
<html 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>
<!--[if (mso)|(IE)]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>v: * { behavior:url(#default#VML); display:inline-block }</style>
<!<![endif]-->
<meta charset="utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<style type="text/css">
.hide {
display: block;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style>
.hide {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<v:oval xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:100px;width:100px;" fill="t" stroke="f">
<v:fill type="frame" color="red" src="https://placem.at/places?w=150&h=150" style="height:100px;width:100px;"/>/v:oval
<![endif]-->
<!--[if !IE]><!-->
<table class="hide" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100" style="width: 100px; mso-hide: all;">
<tr>
<td><div style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow:hidden!important; mso-hide: all;"><img src="https://placem.at/people?w=150&h=150" border="0" width="100" height="100" alt="" style="display: block;" /></div></td>
</tr>
</table><!--<![endif]-->
</body>
</html>
Hi Gordon,
Don't know if this is exactly what you're looking for, but in Litmus you can see the rendered code for some email clients through the interface in Builder with the 'view processed html'.
Another option is to open the preview image in Litmus checklist/builder in a new tab and change the .png extension to .html. This works for some clients and this way you can see the rendered html in the browser as well.
You could also copy and paste the content of an email to http://whatdoesitpaste.com/. This gives you an idea on how the html looks like in for example Outlook for Mac.
Other resources you might be interested in are:
https://www.caniemail.com/
https://howtotarget.email/
Cheers,
Wilbert
I don't have experience with Salesforce templates, but you could start with something like this: https://stackoverflow.com/questions/242182/how-can-i-pop-up-a-print-dialog-box-using-javascript
Hi Maureen,
What I once did is adding a @media print query with styles for the printed version and some javascript in the email that opens the print prompt/popup in the browser. This javascript and the @media print query is only rendered/available when viewing the email online. This way it makes it a lot better supported. Your ESP have to support some functionality which can detect if the email is viewed in the browser or in an email client though.
Maybe this will help you in the right direction.
Glad it helped you!
Hi Mark, I did some testing a while ago and these were the results:
Animated.png
Supported in:
Apple Mail
Outlook 2016/2019 for Mac
Thunderbird
iOS Native Mail App
Samsung Native Mail App
Outlook App Android en iOS
AOL*
Comcast*
Freenet.de*
GMX.de*
Libero*
Mail.ru*
Office365*
Orange.fr*?
Outlook.com*
T-Online.de*
Web.de*
Yahoo! Mail*
Not supported in:
Lotus Notes
Outlook 2007 and higher on Windows
Gmail App Android en iOS**
Gsuite*
Gmail*
38%
Browser support in Chrome, Safari and Firefox, not IE/EDGE. source: https://caniuse.com/#feat=apng
* Supported when using outlook.com account
Another great resource on this and images in email in general: https://codepen.io/M_J_Robbins/pen/PKXaGM
Glad to hear this works for you!