I want to implement a responsive image in an email newsletter for e.g. mobile phones. For this I used this code snippet from templates.mailchimp.com and inserted it into the body above the image I want to be changed:
<style type="text/css">
#media only screen and (max-width: 480px){
.emailImage {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
For the pictures I wanted to be responsive I added the class=”emailImage”.
Sadly now, this doesn’t work. Anyone can explain why or give a better solution for my problem?
If necessary here is the complete code from my newsletter: http://pastebin.de/39651?
Thanks
Try this:
<style type="text/css">
#media screen and (max-width: 480px){
img[class="emailImage"] {
width: 100% !important;
}
}
</style>
<img class="emailImage" src="path/to/img" style="width: 600px; height:auto;" width="600">
This is same code I used for my newsletter and it works fine. I will update my answer later when I find references as to why this particular way of styling is necessary and for what mail clients, it's been a while since I did that code.
UPDATE: using attribute selectors inside media queries is workaround for Yahoo mail bug which gives precedence to styles inside media queries over inline ones.
Max-width support across mail clients is pretty limited so safer way is just specify image width as inline style (that gets trumped in MQ using !important). Since height is always auto it can just be defined inline. Global attributes are used as ultimate fallback just in case some mail clients decide to ignore or strip inline styling.
Also, in (kinda) complex mail layouts that image element will probably be inside some table in which case table element must also have same set of properties inline and inside media query for it to be responsive.
Useful link: CSS support across mail clients
Emails as HTML do not support CSS (at least not all email clients support this feature yet). You'll have to use the old-school HTML stuff such as <img src="some-URL.png" width="100" height="200">
btw, you may also try to use inline style attribute on the HTML tag itself. It might works for some email clients.
Check out this post for "best-practices" with emails and HTMLs
Most email clients have terrible support for CSS. Most clients strip the of your email template so you shouldn't include important CSS in there. It could also be the fact that certain clients strip class names from email, or reformat them, or refuse to understand media queries or a myriad of other possible issues.
The solution is to simply write all CSS inline on each and every element. Regular max-width: 100% and height: auto should be sufficient.
There are tools that convert an external set of styles and class names to inline styles. That does prevent you from using media queries so make sure you don't depend on them to render your email.
Edit: Since you seem to be using Mailchimp, have a look at their article on CSS in HTML emails.
Related
I have to send a (complex) html-mail to various receivers and desperately try to bring it to work for various email clients (at least Outlook, iOS and gmail).
I now have a version that works for Outlook and iOS, but not for gmail (Android).
Short description:
There are various css styles and media queries defined in the header.
The css class conttext (see snipped below) defines the font family, font size, and so on..
The css class conttextboldblue (see snipped below) set the attributes: color: #0000FF; (blue) font-weight: bold;
The class conttext is set to the td element and works on any platform.
The class conttextboldblue is set in span in the td and works on all platforms (including GC that I use for tests) except gmail.
If I set the style inline (last row in the snipped below), it works in gmail, but all other clients lose the styles set in conttext (font family, font size and so on).
As I worte above, it's a huge and complex email and I don't want to remove all css styles and put anything inline (further, I also need media queries).
I have searched the internet and also SO and only found, that - if a css style to td is defined, all other css styles are removed in gmail... :-(
And.. that exactly seems to be the case...
Therefore my question:
- Does anybody have a solution to bring that to work also in gmail?
Thanks for any hint!
Code snipped:
<td><span class="conttext"><br>
Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
<br>
Some text <br>
</span>
<span class="conttextboldblue">This text is NOT (only in gMail) not formatted -> conttextboldblue is just ignored</span><br>
<span style="color:blue; font-weight:bold;">This text is formatted but all other clients (iOS und Outlook) lose the formats defined in conttext!</span><br>
Not all versions of Gmail are equal, and not all of them support <style> elements. In particular, if you test in Gmail (Android or iOS) with a third party email address (like an #outlook.com address for example), you won't get support for <style> and only inline styles will work there. (I wrote a blog post about Gmail CSS support here.)
Gmail clients are also known for being picky about any misformed CSS and removing entire <style> tags if they see something they don't like. For example, having a rule like #media { #font-face { … }} will get Gmail (all clients) to remove the entire <style> element that contain these rules. (But feel free to post your entire code to get detailed feedback on this precisely.)
For these reasons, it is usually considered a best practice to inline your styles in an HTML email.
Here now my findings...
In general:
Our html email contains images (with links), special formats to text (bold, blue, red) tables, bullets, internal links and has to be sent to about 12k recipient’s, whereby we do not know, on what devices they will read the email.
A few years ago, we have optimized a similar email only for desktop (Outlook). These times are over definitely - we have to expect, that more than 50% will read the email on mobile devices (this is fact).
It’s incredible complex and time consuming to create such an email, that is at least readable without problems on desktop (Outlook) and mobiles (iOS (iOS mail app) and Android (gmail)).
Noted (main) issues (to my specific html email):
Outlook need a smaller font size and a fix width for the table and also the images to look O.K.
Outlook further need special settings for bullets, that are not compatible with the mobile clients.
Outlook and iOS (and any browser, e.g. Google Chrome) respect css-stiles (set with “class=”) and media queries - whereby I have not found a way to bring this at work with gmail. For me, it seems as gmail delete all css-settings after opening the email (maybe there is a way to bring it to work, but I gave up after a few days of try and error). The only that works (for me), is to apply styles (style =) directly to the html elements. If have found some information’s that it also works in gmail, but with (massive) limitations https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
The mobile clients need a viewport entry and to set images and tables to 100%, else the email is scaled automatically to a not to read “micro font” (and the users have to zoom to be able to read the text)
Internal links work on Outlook and Android, but not in iOS (else iOS has good support for css and the behavior is, as it should be)
I have not found a real “solution” but (only) a workaround.
Viewport entry:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the style tag it set all css for outlook (width to images and table, font size and “special” settings for bullets (wrong for the mobile clients).
ul, ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}
Then I set base settings for iOS mobiles in a media query
#media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
width: 100% !important;
}
This resets the outlook special settings for all iOS clients with max width of 1024px.
Then I set css for various iOS devices - example:
/*IPhone 6/7/8: 375px */
#media screen and (max-width: 375px) {
.conttext {
font-size: 20px !important;
line-height: 22px !important;
}
.Headline0Boldleft {
font-size: 20px !important;
line-height: 22px !important;
}
.headline {
font-size: 20px !important;
line-height: 22px !important;
}
.headtext {
font-size: 20px !important;
line-height: 22px !important;
}
.conttextboldblue {
font-size: 20px !important;
line-height: 22px!important;
}
.conntextbold {
font-size: 20px !important;
line-height: 22px !important;
}
}
And then, I set the attributes for Android (gmail) in addition direct to the html elements.
Example:
<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...
In this example, I set the font color to red and bold and a border.
Note: the same is defined in classes style1 (border and padding) and conttextboldblue.
So...I set the attributes double (on time inline with Style= and onetime in the css classes).
Android (gmail) only respect the "style=", whereby iOS takes the css style with priority.
So I can define further styles (e.g. font size) for iOS in media queries.
Android (gmail) seems to apply a “usable” font size automatically.
As mentioned above, this is not a solution, but a workaround for my case.
If I would have further html mails to send out in the future (what is not the case), I would invest (a lot) more time to find a real solution...
Further hints:
Validate your html code here:
https://validator.w3.org/#validate_by_upload
Note: The tool shows double assigned styles (inline and with css) as error, but it works nevertheless
Take care, that you have the correct notation to comment lines:
CSS:
/* Your comment */
HTML:
<!-- Your comment -->
(my editor has commented lines in css as html comments, what has cost me some time until I noted that...)
Load your html email in Google Chrome, press F12 (debug mode) and check it there (especially, if you have media queries in your html).
If you have media queries and GC don’t show it, something is wrong with your code.
With GC you easily can simulate mobiles and have a look, if the media queries are applied correct.
I hope, this helps somebody...
I'm creating an email template and I am trying to make it responsive now I've run into a problem, I have been looking into using the "#media" tags but emails don't really like <style> so I'm really not sure how to do it.
<body>
<table>
<table>
<tr>
<td>
text blah blah
</td>
</tr>
</table>
<!-- This is the one I was responsive (The one below) -->
<table>
<tr>
<td>
Make this table responsive <3
</td>
</tr>
</table>
</table>
</body>
P.S, I don't need the top to be responsive so how can I link the second one to the CSS
I have all my tables and the Desktop design look perfecto' E.G the divs and tables are '%' not 'px' and I have 2 divs next to each other when it get scaled down to mobile they are still at 50% of the browser screen (50% of the mobile and desktop) but when they get scaled down I want them to be 100% of the mobile screen
<head>
<style>
#media only screen and (max-width: 771px) {
/*add your class and code here*/
}
</style>
</head>
<style> tag would go into the <head> tag.
But be careful what you use some platform have abysmal email CSS support, also see this.
I would limit my use of CSS3/HTML5 in emails.
But honestly I wouldn't bother with building it from scratch, it's just too tedious of a task; you have to get it working on different platforms.
I would use an email HTML builder (most are free) like:
stamplia
campaignmonitor
litmus
inkbrush
*Note: Conventionally with HTML emails you would lay everything out with tables, not grids.
There are two approaches to using media queries - mobile first or desktop first.
The way that has the most support and is likely the easiest for someone just entering into HTML CSS is desktop first approach. In this you will inline all the styles for your desktop rendering. You then add media queries for the different breakpoints to make the email fit the device screen. This is easiest and has most support as the only mobile email clients that do not really support media queries are ones like the Gmail App (which are usually a small percentage of your mobile audience). The issue is that, using the Gmail App as an example, depending on how you styled your email, this may cause it to break on Gmail app - causing display issues.
This is where the mobile first approach comes in. Mobile first builds the email with inline styles to display correctly in gmail app and then uses media queries and mso conditional statements to make it flesh out and fill correctly on a desktop display. This requires much more knowledge of CSS and email client 'quirks and hacks' but can create emails that display beautifully across all clients. This can sometimes require much more styling and much more code to accomplish due to the complexity of the different processors in email clients.
For initial forays I would recommend building as always desktop first and then use media queries for mobile as it is simple and is much more widely supported, so requires much less hacks.
For help with supported CSS, please reference - http://www.campaignmonitor.com/css
Hope this info helped.
References:
Litmus - https://litmus.com/blog/understanding-media-queries-in-html-email
Email on Acid - https://www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails
CampaignMonitor - https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
In HTML emails, you have two ways to do all of your styling, since you can't have a seperate stylesheet.
The first is a <style> tag.
Your email will have a structure of <html>-><head>-><body>.
<style> tags can only be placed in the head so your set up should look something like this.
<html>
<head>
<style>
#media screen only (max-width:767px){
/* Your CSS goes here */
}
</style>
</head>
<body>
/*HTML Code goes here */
</body>
</html>
The other option you have will only work if you just want to change width, and that would be using percents in your element's inline styling, like this:
<div class="header-block" style="width:100%;"></div>
You can find more on using media queries in emails on litmus.com.
If you already have it made up with extra CSS in your style tag, the Inline styler tool might be able to help you convert embedded styles to inline.
already done and use and try it
Its not using in Media inside a table structure
<table width="600px" max-width="100%" align="center">
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
</table>
Using Litmus for responsive emails is showing great results for the majority of browsers, however some objects in the email are using Display:none !important; and are still showing up completely in Yahoo / Gmail, and partially in outlook 2013.
Update : Providing example -
Using the styling code as following
Basic Styling
.mobile {display: none; font-size:0; max-height: 0; line-height: 0; mso-hide:all;}
# Media
table[class=mobile] {display:block !important;line-height:1.5% !important; max-height: none !important; font-size: 12px !important;}
`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>
`
On most browser via litmus only one or the other will show, but on Gmail it is showing both the mobile an the browser text
display isn't supported in Outlook 2013 or googlemail - http://www.campaignmonitor.com/css
However z-index is. So you could try setting a negative z-index. I've not tested this, but worth a try.
Seeing as your question is lacking in any relevant information i can only advise you.
Read and follow the information here
http://kb.mailchimp.com/article/how-to-code-html-emails/
Especially note the point
99% of your CSS won't work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.).
Avoid as much css as possible, code like its 1999 - yes use tables
IF you must use css, use inline, and what you cannot use inline put in the body and not the head.
So if you are trying to hide something ?? what we dont know - you need more to start thinking about things like white text on a white background.
Try wrapping your mobile tables in this:
<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<!-- tables! -->
</div>
<!--<![endif]-->
then in your media query
div[class="mobileonly"] {
display:block !important;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
I know its an old post.
Solution is to use html tables to layout email content that will look and work well on outlook. Then wrapp the columns in </td> </td> so that the td columns will be killed on other email client's like gmail, mobile emails etc.
This way you can create emails with two columns on outlook but wrap the columns on non outlook.
I am making custom template with MailChimp. I have yet to test it across several email clients, but so far my tests with gmail reveal that when I add this media query, not only does it not work, but it causes the entire html email to render without css. The other CSS works fine for gmail without the query. On other clients the media query works, and does not prevent the other CSS from working.
Is this a known issue with gmail (and others), or is there a way to accomplish this?
#media only screen
and (max-device-width : 480px) {
.bodyContent div{
font-size:24px;
}
h1, .h1{
font-size:36px;
}
h2, .h2{
font-size:28px;
}
h4, .h4{
font-size:28px;
}
.preheaderContent div{
font-size:24px;
}
}
Gmail doesn't support <style> in either <head> or <body>. Since media queries are embedded rather than inline, they can't be utilized in Gmail. Check out this handy chart from Campaign Monitor which details which styles and selectors are supported across various clients and apps.
I had the exact same problem with Gmail. In my case, I wrote a HTML for an email newsletter. The problem was that I was minifying the whole HTML (including the HEAD section where the media queries were), which apparently broke apart the CSS syntax somehow, making Gmail to partially interpret css classes contained within the #media query. If this is your case, you can do two things:
Don't minify the HEAD section (what I did). Leave it untouched and put your media queries there.
Try different minifiers and go through the minified media queries to make sure nothing got broken.
In any case, if you are creating an email newsletter, make sure that you inline as much CSS styles as you can, i.e.: add your styles directly to your tags with the "style" attribute instead of using CSS classes.
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}