I'm looking to display an image/(or a td) only when the email is opened in a mobile browser.
This is what I've implemented so far, and it does not work in Gmail:
.resetimage {
display: block !important;
max-height: inherit !important;
width: auto !important;
}
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="padding:0px 0px 30px 0px;" width="100%">
<img class="resetimage" data-assetid="34095" height="132" src="imageurl.jpg" style="display:none; max-height:0; width:0;">
</td>
</tr>
</table>
Is it not possible to render only on mobile for Gmail?
It could be because class you've posted is .displaymobile but the img element has a class of .resetimage
This is effective with any email client that uses #media queries:
<style>
.showmobile {
display: none !important;
}
#media screen and (max-width: 600px) {
.showmobile {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
line-height: inherit !important;
}
}
</style>
In the body:
<table class="showmobile" style="display: none; mso-hide: all;">
<tr>
<td align="center" class="showmobile" style="display: none; mso-hide: all;">
Hello mobile
</td>
</tr>
</table>
This helps hide the content of the mobile-only from Outlook.
This will not work in Android 6 email, Android 4.4, Outlook for IOS (other issues).
Good luck.
Related
I have email template with simple css. I send email to user but it show css code to user and template is not working correctly.
I test by sent email to myself on Gmail It work correctly.
and problem is I don't have enough data what kind of email client that they use.
If it possible I want to avoid using email with text only.
First image is what user get.
Second image is what I test and got on gmail
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled to have you here! Get ready to dive into your new account. </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#2194F4" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#2194F4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">We're excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#2194F4">
Confirm Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#65F489">
View Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">Cheers,<br> Team</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When you send an email like this you will want a fallback. The person receiving the email can set the email up so he will see text only. You want to create a multipart message. This might help you out, so both types get content. Multipart MIME Email Guide or here: How do I send a multipart email (both HTML and plain text)
It looks like you're forwarding the email - emails will get reformatted according to the native styles of the specific email application. There's very little we can do to control that. If you want to test what it will look like, you need to send to them directly. You can use something like https://putsmail.com/ if you need.
However, not sure why the #font-face declaration are showing on forward. They shouldn't be. I suggest removing them from the #media screen { ... } - you don't need that. Just have #font-face { ... } declarations on their own.
I'm trying to do inline styling with jade mixins following the answer provided in this link but it doesn't work the way it is supossed to.
I'm using this jade:
mixin centerImg(margin,imgWidth,imgWidthpx,imgId)
table(border="0", cellpadding="0", cellspacing="0", width="640")
tr
td(width=margin)
td(width=imgWidth)
a.antiHand(href='#', style='cursor: none !important; pointer-events: none; border-style: none; border: none; border-color: transparent;')
img(alt="", style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0")(width=imgWidth)(src=imgId)
td(width=margin)
+centerImg(200,240,"240px",'https://media.giphy.com/media/SzzNGHZWHCBqw/giphy.gif')
and this is what i get:
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td width="200"></td>
<td width="240"><a class="antiHand" href="#" style="cursor: none !important; pointer-events: none; border-style: none; border: none; border-color: transparent;"><img alt="" style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0" width="240" src="https://media.giphy.com/media/SzzNGHZWHCBqw/giphy.gif"/></a></td>
<td width="200"></td>
</tr>
</table>
any ideas?
This code:
style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0"
Should change like this:
style=`width:${imgWidth};max-width:${imgWidthpx};display:block;margin:0`
I think this works!
Currently working on the first serious responsive html email and got totally mad that - sometimes - the email is fully responsive but other times it is just exceeding it preset boundaries within the table-td construction.
I've limited it down to the images, mainly the head image. Once the email is sent, it exceeds the borders and ruins the email. This, while all other images proceeds as normally.
But this would only be solved by hard work, however as I said it is - sometimes - fully responsive, i.e. the head image as well.
To get it to be responsive as intended, using mac and apple mail, I open the .html document in browser and presses cmd+I; this before all the images have loaded. Basically just showing border, background color and text. If the cmd+I command would be to slow, i.e. even one image loaded, the responsiveness gets wacky again.
Fun fact (not so much): if done properly, i.e. fast as described, the Apple Mail client doesn't show the "attachment" paperclip in inbox but does in preview, large window.
Providing html as well as css for the first three (and 3 biggest) images as well for generic for this area. Why would the header image act this way? Understood the guide as the width="100%" would override the set width.
Basically followed guide from tutsplus.com with simple modifications (bg-color, border, sizes etc)
body {
margin: 0 !important;
padding: 0;
background-color: #f9f9f9;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: #f9f9f9;
}
.webkit {
max-width: 602px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 30px;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 602px;
border: 1px solid #d3d3d3;
background-color: #ffffff;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
.inner {
padding: 10px;
}
p {
Margin: 0;
}
a {
color: #ee6a56;
text-decoration: underline;
}
.webversion {
background-color: #d3d3d3;
text-align: center;
font-size: 10px;
padding-top: 3px;
padding-bottom: 3px;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.contents {
width: 100%;
}
.headline {
width: 100%;
max-width: 600px;
text-align: left;
}
.one-column .contents {
text-align: left;
}
.one-column .p {
font-size: 14px;
Margin-bottom: 10px;
}
#media screen and (max-width: 400px) {
.two-column .column,
.three-column .column {
max-width: 100% !important;
}
.two-column img {
max-width: 100% !important;
}
.three-column img {
max-width: 50% !important;
}
}
#media screen and (min-windth: 401px) and (max-width: 620px) {
.three-column .column {
max-width: 33% !important;
}
.two-column column {
max-width: 50% !important;
}
}
<body style="margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#f9f9f9;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#f9f9f9;">
<div class="webkit" style="max-width:602px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;padding-top:20px;padding-bottom:30px;">
<!--[if (gte mso 9)|(IE)]>
<table width="602" align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table class="outer" align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;Margin:0 auto;width:100%;max-width:602px;border-width:1px;border-style:solid;border-color:#d3d3d3;background-color:#ffffff;">
<tr>
<td class="webversion" style="padding-right:0;padding-left:0;background-color:#d3d3d3;text-align:center;font-size:10px;padding-top:3px;padding-bottom:3px;">
READ IN BROWSER
</td>
</tr>
<tr>
<td class="full-width-image" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<img src="IMGLINK/huvud.png" alt="" style="border-width:0;width:100%;max-width:600px;height:auto;" />
</td>
</tr>
<tr>
<td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td class="inner contents" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;width:100%;text-align:left;">
<p class="h1" style="Margin:0;font-size:21px;font-weight:bold;Margin-bottom:18px;text-align:center;">HEADLINE HERE</p>
<p class="p" style="Margin:0;font-size:14px;Margin-bottom:10px;">TEXT GOES HERE</p>
<p class="p" style="Margin:0;font-size:14px;Margin-bottom:10px;">TEXT GOES HERE</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td class="inner" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;">
<table class="contents" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:left;">
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<img src="IMGLINK/utb.png" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;" />
</td>
</tr>
<tr>
<td class="text" style="padding-bottom:0;padding-right:0;padding-left:0;padding-top:10px;">TEXT GOES HERE
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td class="inner" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;">
<table class="contents" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:left;">
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<img src="IMGLINK/erf.png" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;" />
</td>
</tr>
<tr>
<td class="text" style="padding-bottom:0;padding-right:0;padding-left:0;padding-top:10px;"> Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
My client wants me to build a responsive email template with a dynamic area that will serve a different banner depending on which operating system is being used to view the email (targeting iOS, Android and desktops).
I know that if I use some JavaScript in my emailer I risk the email app counting the email as junk. This is not an option if the risk is too high.
Can anyone give me a clear insight or links that would help me accomplish this?
There is no way to check for all OS's in email as it would involve more than just HTML/CSS. You can however use the limitations of CSS per client and media queries to show or hide different pieces of content however.
In addition to hmhcreative's example which hides/shows mobile vs desktop, this thread may be useful regarding showing content to only mac clients.
With some clever media queries you can show one ad for desktop, another for mac-only portable devices and a default for everything else. Not a complete solution, but it is close.
Hope this one can help. Basically it uses media query to hide the desktop-version banner and show the mobile-version banner.
HTML:
<!--FOR DESKTOP-->
<table class="notmobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td><a href="#"><img style="display:block;" src="[path]/image-desktop.jpg" alt="BANNER" border="0" height="150" width="600" /></td>
</tr>
</table>
<!--//FOR DESKTOP-->
<!--FOR MOBILE-->
<div class="div_for_mobile" style="display: none; width: 0px; max-height: 0px; overflow: hidden;">
<table class="table_for_mobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="display: none;">
<tr>
<td><a href="#"><img style="display:block;" src="[path]/image-mobile.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
</tr>
</table>
</div>
<!--//FOR MOBILE-->
CSS:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div[class=div_for_mobile] {
display: block !important;
width: 100% !important;
max-height: inherit !important;
overflow: visible !important;
}
table[class=notmobile] {
display: none !important;
}
table[class=table_for_mobile] {
display: block !important;
}
}
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div[class=div_for_mobile] {
display: block !important;
width: 100% !important;
max-height: inherit !important;
overflow: visible !important;
}
table[class=notmobile] {
display: none !important;
}
table[class=table_for_mobile] {
display: block !important;
}
.div_for_mobile .table_for_mobile tr :nth-child(2n){ display:none}
.div_for_mobile .table_for_mobile tr :nth-child(3n){ display:block!important;}
}
</style>
</head>
<body>
For desktop,
<table class="notmobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td><a href="#"><img style="display:block;" src="img/desktop.jpg" alt="BANNER" border="0" height="150" width="600" /></td>
</tr>
</table>
For mobile, use this:
<div class="div_for_mobile" style="display: none; width: 0px; max-height: 0px; overflow: hidden;">
<table class="table_for_mobile" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="display: none;">
<tr>
<td></td>
<td><a href="#"><img style="display:block;" src="img/android-test.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
<td style="display:none"><a href="#"><img style="display:block;" src="img/ios-test.jpg" alt="BANNER" border="0" height="75" width="320" /></td>
</tr>
</table>
</div>
For whatever reason my text resizing is not working on iPhones, working fine on android, and in another email format. Can't seem to see any differences between the two files. The images also resize, seems to just be an issue with the text.
<head>
<style type="text/css">
/* Outlook link fix */
#outlook a {padding:0;}
/* Hotmail background & line height fixes */
.ExternalClass {width:100% !important;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
.ExternalClass td, .ExternalClass div {line-height: 100%;}
/* Image borders & formatting */
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
/* Re-style iPhone automatic links (eg. phone numbers) */
.applelinks a {color:#222222; text-decoration: none;}
/* Hotmail symbol fix for mobile devices */
.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; }
/* Media Query for mobile */
#media screen and (max-width: 480px) {
/* This resizes tables and images to be 100% wide with a proportionate width */
table[class=emailwrapto100pc], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
td[class=emailcolsplit]{width:100%!important; float:left!important;}
a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; margin:10px auto;width:100%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}
/* This resizes body text for mobiles */
span[class=emailbodytext],a[class=emailbodytext]{font-size:16px !important; line-height:21px !important;}
}
#media screen and (min-width:1024px) {
a[class=emailmobbutton]{display: none !important;}
span[class=emailmobbutton]{display: none !important;}
}
<table style="padding-top:20px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="" target="_blank">
<img height="216" width="216" border="0" src="" style="display: block;" class="emailwrapto100pc" />
</a>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;padding-left:10px;padding-right:10px;">
<a href="" style="text-decoration: none; color: #111111">
<span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Hugo Boss Black</span>
</a>
</td>
</tr>
<tr>
<td width="33%" align="center" style="padding-top:5px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
<a href="" style="text-decoration: none; color: #111111">
<span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Bugnara Polo T-Shirt</span>
</a>
</td>
</tr>
<tr>
<td align="center" width="33%">
<a style="text-decoration:none;background-color:#000000; color:#ffffff; padding:5px 20px; font-family:tahoma, sans-serif;font-size:12px;line-height:20px;" href="">
SHOP NOW</a>
</td>
</tr>
</table>
Any help would be greatly appreciated.
I have ran into an issue where I was working with email provider that did not allow modifications in
<head>
section, and my one
<style> #media ...</style> code did not work.
With email we have to think back rather than forward in time. Try writing you media query as a separate block section. I've tried this method & it worked without a hitch on Android, where the previous method failed.
`<style type="text/css">
/* standard styles */
</style>
<style media="screen and (max-width: 480px)">
/* responsive styles */
</style>`
Hope this helps you out.