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.
Related
I try to write an HTML Email template that includes a button with a link and has a maximum width with the same margins left and right. However while some of the CSS part gets implemented some does not. For example for then button, the background and the font color is as I intended, however it does not add padding to the background and does not remove text-decorations.
A similar problem occurs when I try to set a maximum width for the overall Email with the same margins left and right. It implements the width but does not set the margins.
All of these things work out if I look at the template in a browser, only when I try to send it as an Email, it is displayed differently.
I already only use inline CSS and coded it as a table. For the button I wrote this code:
<tr><td>
<h1> <a style="background-color: #8c30ff; color:white; text-decoration: none; padding: 0.5em" href="https://google.com"> Join now </a></h1>
</td></tr>
And I tried setting the maximum width to this:
<table style="margin-bottom: 80px; margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 620px; align-content: ">
Email clients all have different support for different HTML and CSS features. You can check Can I email for detailed data about support across email clients.
max-width and margin in particular have mixed support, especially in The Outlooks on Windows. max-width is only supported in Outlook on Windows since Outlook 2016. And margin with auto values are not supported at all in Outlook on Windows. You must rely on tables with HTML attributes like align="center" for Outlook on Windows.
You can see an example of button code implementation by email developer Mark Robbins here: https://www.goodemailcode.com/email-code/link-button
And you can try this generator by Campaign Monitor: https://buttons.cm/
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>
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.
I have a minor question:
Im doing a email that is being sent out and wish to have no margin at the top of the email - so that a image or table is flush with the top of the viewport.
I have tried sticking body tags in the html email with margin-top: 0px and it works fine in Thunderbird. However when testing in Microsoft Outlook there is a margin top applied to the content. Is there any way to get rid of this margin or is it not possible in Outlook.
You need to add the following to the <body> tag.
<body topmargin="0">
Ultimately though Outlook is poor at rendering CSS and it's going to get worse with 2010 unfortunately. In the mean time, in-line styles are really the only styles that will work in the majority of cases.
Outlook is the bane of HTML emails everywhere.
Check out this discussion for some answers and tips.
Bottom line: code like it's 1998. Tables all over the place. Don't nest tables either, as that often causes problems. No external styles, so learn to love your inline style attributes.
Ugh, just thinking about it gives me a tummyache.
Maybe you could try to insert some css that overrules the body?
Something like this:
*{
margin: 0px;
padding: 0px;
}