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.
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 found this reset.css file inside a jquery image slider demo, but it was never included in the main index.html file. what is is suppose to do, and more importantly, where do you put it? Do you put it before any referenced stylesheets()?
Here is the code inside reset.css
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.
If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.
Have a look at this article Should you Reset Your CSS?
reset.css is used to normalize browser's default styles.
Example:
Looking at the answers here there seems to be a bit of mixup between "reset" and "normalize". Their goals are slightly different.
A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.
Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.
Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes.
You have to include it before your own style definitions. Otherwise these styles would possibly override (due to the cascading nature of css) your declarations too, which wouldn't make much sense;)
The most popular styles reset is probably Eric Meyer's which comes along with a little background information..
Browsers may render the HTML and CSS received according to its native rendering engine. Different browsers may use different rendering approaches [IE ;) if you know what i mean] so the intension of reset.css is to set all the attributes to common predefined values so the developers/ designers are can forget some rendering engine and start development from the scratch.
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified)
set of CSS rules that resets the styling of all HTML elements to a
consistent baseline.
In case you didn’t know, every browser has its own default ‘user
agent’ stylesheet, that it uses to make unstyled websites appear more
legible. For example, most browsers by default make links blue and
visited links purple, give tables a certain amount of border and
padding, apply variable font-sizes to H1, H2, H3 etc. and a certain
amount of padding to almost everything. Ever wondered why Submit
buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors,
who can’t work out how to make their websites look the same in every
browser.
Using a CSS Reset, CSS authors can force every browser to have all its
styles reset to null, thus avoiding cross-browser differences as much
as possible
refer http://www.cssreset.com/what-is-a-css-reset/
Every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
From the consistent base that you’ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you!
Hopefully it helped, you may want to take a look at this article, Which CSS Reset Should I Use?.
In simple words CSS reset is required due to browsers’ inconsistency. In detail all browsers rendering are not the same. Therefore web rendering could be different from browser to browser.
Meyer Web providing a utmost CSS reset code if you're want to use/reset. You can find it here. If you need more details, here also you can find out what CSS reset in more details and why we need to use it.
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'm creating a HTML email for a client. Usually I whack the following bit of code in the head of the document which fixes some issues with rendering on iOS devices.
<style type="text/css">
HTML {
-webkit-text-size-adjust:none;
}
body {
background-color: #c9c9c9;
}
.ExternalClass * {line-height: 100%;}
However this time client requires the email be marked up using DotMailer's Easy Editor tags - so they can drag and drop content etc. - and DotMailer refuses to acknowledge I've marked it up with it's proprietary tags unless I scrap all use of HTML, HEAD and BODY tags, leaving just the stuff between the BODY tags.
Any ideas of a work around? A style tag can't go in the body and I can't put the styles inline on the individual elements because they all get appended later.
Apologies if it's a niche question but I figured someone might be able to come up with a creative solution. DotMailer's staff have been useless.
In dotmailer you have an option to view it in code view, when you are at the dragging and dropping stage. At the top of the code you can add <style> tags and they will work perfectly. I have built a few dotmailer templates and this is how you mark them up.
My boss's clients are complaining that when some HTML newsletters are forwarded, their table-based layout breaks. I have determined that this is most likely caused by using the following option in Outlook:
Tools > Options > Mail Format > Use Microsoft Office Word 2003 to edit e-mail messages
My boss refuses to change this option and is demanding that I figure out a work-around. But I'm plain stumped. The e-mail that is breaking when forwarded with this option on is at http://www.egusts.com/stratham/stanford-square/10-0826/new/
Here's what happens when the Word 2003 HTML editor is done with it. No edits, just hit "forward" with that option selected - http://www.egusts.com/stratham/stanford-square/10-0826/new/alt/
Here's an example that my boss forwarded me that makes it through just fine - http://www.egusts.com/stratham/stanford-square/10-0826/new/example.html
But I'm still really stumped. I have no clue what to do. I had thought my original template's table-html was really simple and straight-forward. What's breaking in the Word 2003 Editor? Why? Is it stripping some tags? Adding some tags that screws it up? Is there anything I can do?
I'm at my wits end! Thanks for the help
Unfortunately, forwarding an email causes one client to re-render HTML that has already been rendered, and this will almost always screw something up. However, using better practices when coding your emails will help cut down on these problems. I've done a lot of emails and here are some things I've learned:
Never use rowspans or colspans. These tend to break down quickly across email clients and when forwarded. Instead use nested tables.
If you have a bulleted list, use either an unordered list (ul), or if you must use a 2 column table with a row for each list item and put the • in the first column for each item.
Stay away from p tags, they have inconsistent spacing across email clients. Using 2 br tags can give you roughly the same amount of space.
Use padding to control the spacing of elements instead of margin. Again, not very consistent, in fact, I'm not sure it works at all.
Super scripted elements will usually push the line they are on down (or the lines above up). Use an inline-style of line-height:0; to fix that. Note, however, this will still happen when forwarded. If you're using footnotes and need to superscript just a few numbers, use the HTML entities ¹ , ² , and ³.
Background images are not supported in Outlook 2007-2013 for Windows. They seem to work for Outlook Mac, and a lot of other clients, but don't bother with them if you need to support Outlook for Windows.
Find a reliable template to use and always start with that. This should include styles in the head aimed at fixing problems with web, desktop, and email clients. Here are some I usually use:
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
a:link {
color : #1d3666;
text-decoration : underline;
}
a:visited {
color : #1d3666;
text-decoration : underline;
}
a:hover {
color : #a43232;
text-decoration : none;
}
table {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table td {
border-collapse: collapse;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
}
a img {
border:none;
display:block;
}
While web clients like Gmail, Yahoo, Outlook.com, and AOL will probably strip the head and any internal styles out of your email, these will come through for most mobile mail client users and for desktop email clients like Outlook and Thunderbird, which are what these styles aim to fix for. For everything else, use inline styles.
Also, it looks like you created this using Fireworks. That might work for a web page, but email has a lot of pitfalls and limitations that FW probably does not account for. I'd recommend either using Dreamweaver or some other helpful text editor and do it using HTML with inline styles.
I figured out that, in addition to using transparent spacer GIFs, I needed to specify a "width" for each of the s that housed the spacer GIFs.
That solved most of the layout problems, although forwarding an e-mail in outlook with that option set injects a lot of other ugly code that can screw things up.