I have an HTML banner that is being applied to emails that come in to our environment from an external sender. After testing, it was revealed that the banner blocks a person from previewing a received email on the mobile device. I have zero knowledge of HTML or CSS. What I have is from piecing together from bits here and there. The current articles I am reading are telling me to use the following code:
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
I've altered my HTML to this:
<html><head><style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style></head><body><div class="mobileHide"><table style="border: 1px
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>
</tbody></table><h1></h1>
<br />
<mc type="body">
</div></body></html>
Can someone point out what I am doing wrong?
One thing I can see is a typo in your style attribute:
<div class="”mobileHide”">
...has two double-quotes. It should be this:
<div class="mobileHide">
Some desktop email clients also show email preview text, so any solution that removes the header only on mobile clients will leave desktop clients with the same problem you are trying to solve. Instead of targeting mobile clients, it makes more sense to work with the preview text directly.
To get custom preview text on your email, it has to be the first text that appears in your email's body section, even before your header.
From litmus.com:
Preview text is pulled from the first few lines of text found within an email.
So what's happening is that the email client is reading the first few lines of your email to determine what to show as the preview text, but since your header is first, the email's preview text is the gibberish from the header section instead of the marketing speak that you want it to be. The parsing of the email preview as far as I can tell is unaffected by CSS styling such as display: none, though I could be wrong about that.
What Litmus recommends you do is to add an extra, hidden element before your email header (right after the opening body tag) that contains the preview text that you want to show in the email client. You'll want to use this code:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
It's not pretty, but email HTML itself is not pretty. What this does is it makes a hidden element at the top of your email that the client will show as preview text, but that won't actually show to the end user when they open up the email.
In your situation, you might want to pull this preview text programmatically from the incoming email, then apply this element before applying the header.
Does this constitute spam or misleading behavior? Does it hurt your deliverability? Litmus says that it's fine in their experience:
Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.
Related
I am coding an email, and have created a class for something to be seen on mobile, but not on desktop.
For some reason, Gmail on the desktop is stripping the class.
Does anyone know where I am going wrong? It works on other desktop email platforms.
<style type="text/css">
/* Smartphone Portrait and Landscape */
#media screen and (max-width: 600px) {
.mobileSpacer {
display: block;
}
}
.mobileSpacer {
display: none;
}
</style>
It should work, as Gmail desktop supports <style> blocks. There are certain forms of Gmail that do not support <style> blocks, and these are: Gmail when viewed from a browser on mobile (Gmail webmail on mobile) - as opposed to the Gmail app; Gmail IMAP/POP (e.g. business users using their own domain); Gmail after you've clicked 'view full email' on a long email.
Gmail will also strip a <style> block(s) if you have something in it that it doesn't like: [attribute] and other fancy selectors, spelling/formatting mistakes. Use it's own style block (you can have multiple) to ensure it doesn't remove this one.
Due to this, I would use a mobile-first solution. That is, inline, use what you want for the mobile view. (I can't suggest what you want inline because you don't have the code for that.) The desktops can cope with <style> blocks.
Then use a min-width #media query:
#media screen and (min-width: 600px) {
.mobileSpacer {
display: none;
}
}
Desktops will apply this (except for a rare few very old desktop/webmail platforms - and that's why we cater for the much more popular Gmail).
Outlook for Windows won't apply it, but it has its own special code. You just add mso-hide:all inline:
<td style="mso-hide:all">
I have a PowerShell script that creates a single HTML file, email.html, with inline CSS and embedded base64 images.. then sends it daily to me (my website reports).
I want all (text/images) that are in the body of the email to resize automatically based on the width of the email client viewable area. Admittedly, I have limited experience in HTML/CSS. What am I doing wrong in my example below? Note: I truncated the base64 text in the example below so it doesn't take up too much space in my example.
Code:
<!doctype html>
<html>
<head>
<style type="text/css">
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.responsivetext {font-size: 2vw !important;width:auto;height:auto;vertical-align:middle}
}
</style>
</head>
<body>
<td style="font-family: Arial;" class="responsivetext">I have tried everything. Why wont this text resize when resizing Outlook 2016?</td>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAIEAIAAADwyk6cAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0T...." />
</body>
</html>
I've been dealing with this situation too. It is very difficult to achieve success in all options.
Outlook does not really have any solid support for media queries unfortunately and is often 'left out' when it comes to mobile responsive emails.
Can media queries be used in Outlook
I suggest to you here you can create responsive html design and examine it.
Bit of an amateur when it comes to coding ... especially when it comes to e-mail templates. I'm having a hard time getting G-mail to actually hide and display things correctly. I have searched on here and find some answers that I thought would help, but it doesn't seem to fit well in my code. Not worried about the code when being forwarded as of now.
Here is the portion of code with the images specifically. Would love some eyes on it, and some help as well. Everything is in one table, and works fine in a normal browser ... just looking for help in G-mail specifically.
CSS:
#media only screen and (min-width: 480px) {
.mobilechart {
display: none !important;
}
}
#media only screen and (max-width: 480px) {
.desktopchart {
display: none !important;
}
HTML:
<tr>
<td style="background-repeat:no-repeat;background-position:right;" >
<div class="desktopchart">
<img src="https://cdn.maropost.com/pro/uploads/account_415/77640/TC-Email_Template_DESKTOPCHART.jpg" style="width:100%;margin-top:auto;margin-bottom:auto;margin-right:auto;margin-left:auto;" >
</div>
<div class="mobilechart">
<img src="https://cdn.maropost.com/pro/uploads/account_415/77641/TC-Email_Template_MOBILECHART.jpg" style="width:100%;margin-top:auto;margin-bottom:auto;margin-right:auto;margin-left:auto;" >
</div>
</td>
</tr>
Reposting my answer to this question:
The bad news here is that, unfortunately, GMail does not yet support media queries nor does it support the display, overflow or visibility properties.
See Campaign Monitor's CSS Support Guide for Email Clients for more information.
Other than rewriting your newsletter to be completely fluid, rather than trying to make it responsive, I'm afraid there's no real solution to be had here.
I am coding email newsletter that is to be mobile compatible , My problem is that when there is any numerical value or email address it becomes blue just as anchro tag , i ste it text-decoration:none; did set its color:#33333; but that still looks bad as in attached image
Is it possible to change this blue color to black and make them without hyperlink?
use this
#media only screen and (min-device-width: 320px) and (max-device-width: 1024px) and (orientation : portrait){color:#333333 !important;
text-decoration: none;}
Here's what you should do. Since it gets converted into an anchor tag, use that to your advantage:
<a style="text-decoration:none; color:#333333;">numerical value</a>
Using empty anchor tags like this won't make it into a clickable link on most mail clients, and will allow you to control the styling on clients that convert it to anchor tags, since that anchor style will be defined by you before hand.
I have a HTML "report" page that contains amongst other things a HTML view that looks like this:
When you print preview this though, it looks a lot less nice :)
I know about CSS for printing, but what I don't understand is how my HTML is being interpreted like that - for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don't show up at all in the print preview. Also, why would the white text on black on the left not print like that?
Are there some rules for print-friendly css? Any suggestions here?
BTW - I tried previewing in both IE 10 and chrome - both pretty much did the same
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
EDIT: AN ALTERNATIVE APPROACH
Since you're looking for a way to provide readable information also on the printer you may provide specific content just for that:
in your HTML:
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
in your stylesheet:
#media screen,print
{
.blue_border {border: 1px solid #00F;}
}
#media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
#media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser
The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).
In your case, this is problematic since there is no text.
Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.
Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.
Check if your browser suppresses background colours when printing.